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

8
tests/playwright/demo-interactions.spec.js
View File

@@ -3,7 +3,7 @@
* Demo interaction tests — verify every demo actually functions.
*/
const { test, expect } = require('playwright/test');
const { loadPage } = require('./helpers');
const { loadPage, trackErrors } = require('./helpers');
function island(page, pattern) {
return page.locator(`[data-sx-island*="${pattern}"]`);
@@ -23,6 +23,9 @@ async function assertNoClassLeak(page, scope) {
// ===========================================================================
test.describe('Reactive island interactions', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
test('counter: + and − change count and doubled', async ({ page }) => {
await loadPage(page, '(geography.(reactive.(examples.counter)))');
@@ -174,6 +177,9 @@ test.describe('Reactive island interactions', () => {
// ===========================================================================
test.describe('Marshes interactions', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
test('hypermedia-feeds: reactive +/− works', async ({ page }) => {
await loadPage(page, '(geography.(marshes.hypermedia-feeds))');

25
tests/playwright/geography-demos.spec.js
View File

@@ -3,7 +3,7 @@
* Geography demos — comprehensive page load + interaction tests.
*/
const { test, expect } = require('playwright/test');
const { loadPage } = require('./helpers');
const { loadPage, trackErrors } = require('./helpers');
// ---------------------------------------------------------------------------
// Helpers
@@ -20,6 +20,10 @@ async function expectIsland(page, pattern) {
// ===========================================================================
test.describe('Geography sections', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
const sections = [
['(geography)', 'Geography'],
['(geography.(reactive))', 'Reactive'],
@@ -47,6 +51,10 @@ test.describe('Geography sections', () => {
// ===========================================================================
test.describe('Reactive demos', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
const demos = [
['counter', 'counter'],
['temperature', 'temperature'],
@@ -109,6 +117,10 @@ test.describe('Reactive demos', () => {
// ===========================================================================
test.describe('Hypermedia demos', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
const demos = [
'click-to-load', 'form-submission', 'polling', 'delete-row', 'edit-row',
'tabs', 'active-search', 'inline-validation', 'lazy-loading',
@@ -131,6 +143,7 @@ test.describe('Hypermedia demos', () => {
// ===========================================================================
test('counter → temperature → counter: all stay reactive', async ({ page }) => {
const t = trackErrors(page);
await loadPage(page, '(geography.(reactive.(examples.counter)))');
let el = await expectIsland(page, 'counter');
@@ -165,6 +178,8 @@ test('counter → temperature → counter: all stay reactive', async ({ page })
await page.waitForTimeout(300);
expect(await el.textContent()).not.toBe(before);
}
expect(t.errors()).toEqual([]);
});
@@ -173,6 +188,10 @@ test('counter → temperature → counter: all stay reactive', async ({ page })
// ===========================================================================
test.describe('Other geography pages', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
const pages = [
'(geography.(cek.demo))', '(geography.(cek.content))', '(geography.(cek.freeze))',
'(geography.(marshes.hypermedia-feeds))', '(geography.(marshes.on-settle))',
@@ -189,6 +208,10 @@ test.describe('Other geography pages', () => {
});
test.describe('Reference pages', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
for (const sub of ['attributes', 'events', 'headers', 'js-api']) {
test(`${sub} loads`, async ({ page }) => {
await loadPage(page, `(geography.(hypermedia.(reference.${sub})))`);

5
tests/playwright/handler-responses.spec.js
View File

@@ -1,7 +1,10 @@
const { test, expect } = require('playwright/test');
const { loadPage } = require('./helpers');
const { loadPage, trackErrors } = require('./helpers');
test.describe('Handler responses render correctly', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
test('bulk-update: deactivate renders proper HTML attributes', async ({ page }) => {
await loadPage(page, '(geography.(hypermedia.(example.bulk-update)))');

25
tests/playwright/helpers.js
View File

@@ -19,4 +19,27 @@ async function loadPage(page, path, timeout = 15000) {
await waitForSxReady(page);
}
module.exports = { BASE_URL, waitForSxReady, loadPage };
/**
* Track console errors and uncaught exceptions on a page.
* Call before navigation. Use errors() to get filtered error list.
*/
function trackErrors(page) {
const raw = [];
page.on('pageerror', err => raw.push(err.message));
page.on('console', msg => {
if (msg.type() === 'error') raw.push(msg.text());
});
return {
/** Return errors, filtering transient network noise. */
errors() {
return raw.filter(e =>
!e.includes('Failed to fetch') &&
!e.includes('net::ERR') &&
!e.includes(' 404 ') &&
!e.includes('Failed to load resource')
);
}
};
}
module.exports = { BASE_URL, waitForSxReady, loadPage, trackErrors };

8
tests/playwright/isomorphic.spec.js
View File

@@ -1,6 +1,6 @@
// @ts-check
const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady } = require('./helpers');
const { BASE_URL, waitForSxReady, trackErrors } = require('./helpers');
const TEST_PAGE = '/sx/(etc.(philosophy.wittgenstein))';
@@ -137,6 +137,7 @@ test.describe('Isomorphic SSR', () => {
});
test('islands hydrate and reactive signals work', async ({ page }) => {
const t = trackErrors(page);
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
@@ -158,9 +159,11 @@ test.describe('Isomorphic SSR', () => {
await page.waitForTimeout(300);
const colourAfter = await reactive.evaluate(el => el.style.color);
expect(colourAfter).not.toBe(colourBefore);
expect(t.errors()).toEqual([]);
});
test('navigation links have valid URLs (no [object Object])', async ({ page }) => {
const t = trackErrors(page);
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
@@ -176,9 +179,11 @@ test.describe('Isomorphic SSR', () => {
return broken;
});
expect(brokenLinks).toEqual([]);
expect(t.errors()).toEqual([]);
});
test('navigation preserves header island state', async ({ page }) => {
const t = trackErrors(page);
await page.goto(BASE_URL + '/sx/', { waitUntil: 'domcontentloaded' });
await waitForSxReady(page);
@@ -199,6 +204,7 @@ test.describe('Isomorphic SSR', () => {
// Colour should be preserved (def-store keeps signals across re-hydration)
const colourAfter = await reactive.evaluate(el => el.style.color);
expect(colourAfter).toBe(colourBefore);
expect(t.errors()).toEqual([]);
});
});

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()}`
);
});
}
});

5
tests/playwright/reactive-nav.spec.js
View File

@@ -1,8 +1,11 @@
// @ts-check
const { test, expect } = require('playwright/test');
const { BASE_URL, waitForSxReady } = require('./helpers');
const { BASE_URL, waitForSxReady, trackErrors } = require('./helpers');
test.describe('Reactive Island Navigation', () => {
let t;
test.beforeEach(({ page }) => { t = trackErrors(page); });
test.afterEach(() => { expect(t.errors()).toEqual([]); });
test('counter island works on direct load', async ({ page }) => {
await page.goto(BASE_URL + '/sx/(geography.(reactive.(examples.counter)))', { waitUntil: 'domcontentloaded' });

5
tests/playwright/stepper.spec.js
View File

@@ -1,7 +1,8 @@
const { test, expect } = require('playwright/test');
const { loadPage } = require('./helpers');
const { loadPage, trackErrors } = require('./helpers');
test('home page stepper: no raw SX component calls visible', async ({ page }) => {
const t = trackErrors(page);
await loadPage(page, '');
const stepper = page.locator('[data-sx-island="home/stepper"]');
@@ -25,4 +26,6 @@ test('home page stepper: no raw SX component calls visible', async ({ page }) =>
await page.waitForTimeout(300);
const textAfter = await stepper.textContent();
expect(textAfter).not.toBe(textBefore);
expect(t.errors()).toEqual([]);
});