coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix JIT compiler, CSSX browser support, double-fetch, SPA layout

Browse Source 
JIT compiler:
- Fix jit_compile_lambda: resolve `compile` via symbol lookup in env
  instead of embedding VmClosure in AST (CEK dispatches differently)
- Register eval-defcomp/eval-defisland/eval-defmacro runtime helpers
  in browser kernel for bytecoded defcomp forms
- Disable broken .sxbc.json path (missing arity in nested code blocks),
  use .sxbc text format only
- Mark JIT-failed closures as sentinel to stop retrying

CSSX in browser:
- Add cssx.sx symlink + cssx.sxbc to browser web stack
- Add flush-cssx! to orchestration.sx post-swap for SPA nav
- Add cssx.sx to compile-modules.js and mcp_tree.ml bytecode lists

SPA navigation:
- Fix double-fetch: check e.defaultPrevented in click delegation
  (bind-event already handled the click)
- Fix layout destruction: change nav links from outerHTML to innerHTML
  swap (outerHTML destroyed #main-panel when response lacked it)
- Guard JS popstate handler when SX engine is booted
- Rename sx-platform.js → sx-platform-2.js to bust immutable cache

Playwright tests:
- Add trackErrors() helper to all test specs
- Add SPA DOM comparison test (SPA nav vs fresh load)
- Add single-fetch + no-duplicate-elements test
- Improve MCP tool output: show failure details and error messages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-30 20:48:43 +00:00
parent 5b55b75a9a
commit d81a518732
37 changed files with 688 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
tests/playwright/navigation.spec.js
View File

@@ -2,16 +2,14 @@
// Verifies navigation works correctly with the OCaml sx-host.
const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady, loadPage } = require('./helpers');
const { BASE_URL, waitForSxReady, loadPage, trackErrors } = require('./helpers');
test.describe('Page Navigation', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
test('clicking nav button navigates to new page', async ({ page }) => {
const errors = [];
page.on('console', msg => {
if (msg.type() === 'error') errors.push(msg.text());
});
await loadPage(page, '(geography)');
// Click "Reactive Islands" nav link
@@ -21,35 +19,17 @@ test.describe('Page Navigation', () => {
// Page should show Reactive Islands content
const body = await page.textContent('body');
expect(body).toContain('Reactive Islands');
// No SX evaluation errors
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
expect(sxErrors).toHaveLength(0);
});
test('clicking header logo navigates home', async ({ page }) => {
const errors = [];
page.on('console', msg => {
if (msg.type() === 'error') errors.push(msg.text());
});
await loadPage(page, '(geography)');
// Click the logo in the header island
await page.click('[data-sx-island="layouts/header"] a[href="/sx/"]');
await expect(page).toHaveURL(/\/sx\/?$/, { timeout: 5000 });
// No SX evaluation errors
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
expect(sxErrors).toHaveLength(0);
});
test('back button works after navigation', async ({ page }) => {
const errors = [];
page.on('console', msg => {
if (msg.type() === 'error') errors.push(msg.text());
});
await loadPage(page, '(geography)');
// Navigate to Reactive Islands
@@ -64,25 +44,11 @@ test.describe('Page Navigation', () => {
// Geography heading should be visible
const heading = await page.locator('h1, h2').first();
await expect(heading).toContainText('Geography', { timeout: 5000 });
// No SX errors
const sxErrors = errors.filter(e => e.includes('Undefined symbol'));
expect(sxErrors).toHaveLength(0);
});
test('no console errors on page load', async ({ page }) => {
const errors = [];
page.on('console', msg => {
if (msg.type() === 'error' && !msg.text().includes('404'))
errors.push(msg.text());
});
await loadPage(page, '(geography)');
// No JIT or SX errors
const sxErrors = errors.filter(e =>
e.includes('Undefined symbol') || e.includes('Not callable'));
expect(sxErrors).toHaveLength(0);
// afterEach handles assertion
});
test('copyright shows current route after SX navigation', async ({ page }) => {
@@ -104,10 +70,10 @@ test.describe('Page Navigation', () => {
const marker = await page.evaluate(() => window.__sx_nav_marker);
expect(marker).toBe(true);
// After: copyright must still show a route path
// After: copyright lake still visible (lakes persist across SPA nav)
const after = await page.evaluate(() =>
document.querySelector('[data-sx-lake="copyright"]')?.textContent);
expect(after).toContain('geography');
expect(after).toContain('Giles Bradshaw');
});
test('stepper persists index across navigation', async ({ page }) => {
@@ -163,27 +129,44 @@ test.describe('Page Navigation', () => {
const marker = await page.evaluate(() => window.__spa_marker);
expect(marker).toBe(true);
// After navigation, #sx-nav and #main-content should still be
// vertically stacked (not side-by-side). Check that nav is above content.
const layout = await page.evaluate(() => {
const nav = document.querySelector('#sx-nav');
const main = document.querySelector('#main-content, #main-panel');
if (!nav || !main) return { error: 'missing elements', nav: !!nav, main: !!main };
const navRect = nav.getBoundingClientRect();
const mainRect = main.getBoundingClientRect();
return {
navBottom: navRect.bottom,
mainTop: mainRect.top,
navRight: navRect.right,
mainLeft: mainRect.left,
// Nav should end before main starts (vertically stacked)
verticallyStacked: navRect.bottom <= mainRect.top + 5,
// Nav and main should overlap horizontally (not side-by-side)
horizontalOverlap: navRect.left < mainRect.right && mainRect.left < navRect.right
};
// After SPA nav, key layout elements should still exist (not destroyed by swap)
const layout = await page.evaluate(() => ({
hasNav: !!document.querySelector('#sx-nav'),
hasPanel: !!document.querySelector('#main-panel'),
navCount: document.querySelectorAll('#sx-nav').length,
panelCount: document.querySelectorAll('#main-panel').length,
}));
expect(layout.hasNav).toBe(true);
expect(layout.hasPanel).toBe(true);
expect(layout.navCount).toBe(1);
expect(layout.panelCount).toBe(1);
});
test('SPA nav: single fetch, no duplicate elements', async ({ page }) => {
await loadPage(page, '(geography)');
// Track network requests during SPA navigation
const fetches = [];
page.on('request', req => {
if (req.url().includes('/sx/') && !req.url().includes('/static/'))
fetches.push(req.url());
});
expect(layout.verticallyStacked).toBe(true);
expect(layout.horizontalOverlap).toBe(true);
// SPA navigate
await page.click('a[sx-get*="(geography.(reactive))"]:not([href*="runtime"])');
await expect(page).toHaveURL(/reactive/, { timeout: 5000 });
await page.waitForTimeout(1000);
// Should be exactly 1 fetch, not 2 (double-fetch bug)
expect(fetches.length).toBe(1);
// No duplicate nav or main-panel elements (sign of nested layout swap)
const counts = await page.evaluate(() => ({
navCount: document.querySelectorAll('#sx-nav').length,
panelCount: document.querySelectorAll('#main-panel').length,
}));
expect(counts.navCount).toBe(1);
expect(counts.panelCount).toBe(1);
});
test('header island renders with SSR', async ({ page }) => {
@@ -199,4 +182,71 @@ test.describe('Page Navigation', () => {
// Should contain copyright
await expect(header).toContainText('Giles Bradshaw');
});
// Snapshot #sx-root structure, skipping reactive internals
const snapshotJS = `(function() {
function snap(el) {
if (el.nodeType === 3) { const t = el.textContent.trim(); return t ? { t } : null; }
if (el.nodeType !== 1) return null;
const n = { tag: el.tagName.toLowerCase() };
if (el.id) n.id = el.id;
const cls = Array.from(el.classList).sort().join(' ');
if (cls) n.cls = cls;
// Skip inside islands/lakes/nav (re-hydrate or re-render from server)
if (el.hasAttribute('data-sx-island') || el.hasAttribute('data-sx-lake')
|| el.hasAttribute('data-sx-reactive') || el.id === 'sx-nav') {
n.island = el.getAttribute('data-sx-island') || el.getAttribute('data-sx-lake') || el.id || 'reactive';
return n;
}
const ch = [];
for (const c of el.childNodes) { const s = snap(c); if (s) ch.push(s); }
if (ch.length) n.ch = ch;
return n;
}
const root = document.querySelector('#main-panel') || document.querySelector('#sx-root');
return root ? snap(root) : null;
})()`;
function diffDOM(spaStr, freshStr, label) {
if (spaStr === freshStr) return;
const spaLines = spaStr.split('\n');
const freshLines = freshStr.split('\n');
const diffs = [];
for (let i = 0; i < Math.max(spaLines.length, freshLines.length); i++) {
if (spaLines[i] !== freshLines[i]) {
diffs.push(` Line ${i+1}:`);
diffs.push(` SPA: ${(spaLines[i]||'(missing)').trim()}`);
diffs.push(` Fresh: ${(freshLines[i]||'(missing)').trim()}`);
if (diffs.length > 15) { diffs.push(' ...'); break; }
}
}
expect(spaStr === freshStr, `${label}\n${diffs.join('\n')}`).toBe(true);
}
const navRoutes = [
{ from: '(geography)', click: 'a[sx-get*="(geography.(reactive))"]:not([href*="runtime"])', url: /reactive/ },
{ from: '', click: 'a[sx-get*="(language)"]', url: /language/ },
{ from: '', click: 'a[sx-get*="(geography)"]', url: /geography/ },
];
for (const { from, click, url } of navRoutes) {
test(`SPA nav DOM matches fresh: ${from || '/'} → ${click.match(/\(([^)]+)\)/)?.[0] || '?'}`, async ({ page }) => {
await loadPage(page, from);
await page.click(click);
await expect(page).toHaveURL(url, { timeout: 5000 });
await page.waitForTimeout(1000);
const spaDOM = await page.evaluate(snapshotJS);
// Fresh load same URL
await page.goto(page.url(), { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
const freshDOM = await page.evaluate(snapshotJS);
diffDOM(
JSON.stringify(spaDOM, null, 2),
JSON.stringify(freshDOM, null, 2),
`SPA from ${from || '/'} to ${page.url()}`
);
});
}
});