@cocreate/render 1.51.0 → 2.0.0

package/src/server/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/test/client/render-order.test.cjs

@@ -0,0 +1,90 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+const source = readFileSync(join(__dirname, '../../src/client/index.js'), 'utf8');
+const renderTemplate = source.slice(source.indexOf('async function renderTemplate('), source.indexOf('function cloneTemplate('));
+const insertElement = source.slice(source.indexOf('function insertElement('), source.indexOf('async function renderValues('));
+const regions = ['us-east-1', 'us-east-2', 'us-west-1', 'me-south-1'];
+
+async function renderOrder({ templateReverse = null, sourceReverse, withSource = false } = {}) {
+    const siblings = [];
+    let nextId = 0;
+
+    class Element {
+        constructor(reverse = null) {
+            this.nodeType = 1;
+            this.attributes = new Map();
+            if (reverse !== null) this.attributes.set('render-reverse', reverse);
+        }
+        getAttribute(name) { return this.attributes.get(name) ?? null; }
+        setAttribute(name, value) { this.attributes.set(name, value); }
+        insertAdjacentElement(position, element) {
+            assert.ok(['beforebegin', 'afterend'].includes(position));
+            const previous = siblings.indexOf(element);
+            if (previous >= 0) siblings.splice(previous, 1);
+            siblings.splice(siblings.indexOf(this) + (position === 'afterend' ? 1 : 0), 0, element);
+        }
+    }
+
+    const template = new Element(templateReverse);
+    template.setAttribute('render-as', 'region');
+    siblings.push(template);
+    const templateData = { element: template, clones: new Map(), parent: {} };
+    if (withSource) templateData.source = { element: new Element(sourceReverse) };
+
+    const context = vm.createContext({
+        template,
+        data: { regions: regions.map(region => ({ region })) },
+        renderedNodes: new Map([[template, templateData]]),
+        HTMLTemplateElement: class {},
+        uuid: () => String(++nextId),
+        getRenderValue: (element, data, key) => data[key],
+        getRenderContext: () => undefined,
+        setRenderContext: (node, context) => context,
+        cloneTemplate: () => ({ element: new Element() }),
+        // Value interpolation is independent of list insertion and reverse settings.
+        renderValues: async (element, data) => { element.region = data.region.region; }
+    });
+    vm.runInContext(`${renderTemplate}\n${insertElement}\nglobalThis.done = renderTemplate(template, data, 'regions');`, context);
+    await context.done;
+    return siblings.filter(element => element !== template).map(element => element.region);
+}
+
+test('nested region arrays preserve input order without a source or reverse attribute', async () => {
+    assert.deepEqual(await renderOrder(), regions);
+});
+
+test('a source with no reverse attribute preserves input order', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true }), regions);
+});
+
+test('false reverse settings preserve input order', async t => {
+    for (const value of [false, 'false']) {
+        await t.test(String(value) + ' (' + typeof value + ')', async () => {
+            assert.deepEqual(await renderOrder({ templateReverse: value }), regions);
+            assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: value }), regions);
+        });
+    }
+});
+
+test('explicit reverse settings still reverse the list', async t => {
+    for (const value of ['', true, 'true']) {
+        await t.test(JSON.stringify(value), async () => {
+            const expected = [...regions].reverse();
+            assert.deepEqual(await renderOrder({ templateReverse: value }), expected);
+            assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: value }), expected);
+        });
+    }
+});
+
+test('template reverse settings apply when the source attribute is absent', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true, templateReverse: '' }), [...regions].reverse());
+});
+
+test('an explicit source setting takes precedence over the template', async () => {
+    assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: 'false', templateReverse: '' }), regions);
+    assert.deepEqual(await renderOrder({ withSource: true, sourceReverse: '', templateReverse: 'false' }), [...regions].reverse());
+});

package/test/client/render-value-ast.test.cjs

@@ -0,0 +1,58 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+const source = readFileSync(join(__dirname, '../../src/client/index.js'), 'utf8');
+const functions = source.slice(source.indexOf('async function renderValue('), source.indexOf('async function renderKey('));
+let context;
+let received;
+
+test.before(async () => {
+    const { astAsync } = await import('../../CoCreate-utils/src/modules/ast/index.js');
+    const { getValueFromObject } = await import('../../CoCreate-utils/src/modules/getValueFromObject.js');
+    const window = { markdown: { render(value) { received = value; return '<p>Rendered</p>\n'; } } };
+    context = vm.createContext({ astAsync, getValueFromObject, renderedNodes: new Map(), window, console });
+    vm.runInContext(functions, context);
+});
+
+function render(expression, content = 'Message') {
+    return context.renderValue({ nodeType: 1 }, { window: context.window, object: { content } }, expression, 'object', {}, 0);
+}
+
+test('AST returns HTML directly instead of looking it up as a data key', async () => {
+    const content = '**Hello**, with (parentheses), "$value" and `code`';
+    assert.equal(await render('{{$(window.markdown.render(object.content))}}', content), '<p>Rendered</p>\n');
+    assert.equal(received, content);
+});
+
+test('nested placeholders resolve before the surrounding expression', async () => {
+    assert.equal(await render('{{$(window.markdown.render("{{object.content}}"))}}', '**Hello**'), '<p>Rendered</p>\n');
+    assert.equal(received, '**Hello**');
+});
+
+test('ordinary record placeholders retain their existing lookup behavior', async () => {
+    assert.equal(await render('Message: {{object.content}}', 'Original'), 'Message: Original');
+});
+
+test('AST preserves false, zero and empty-string results', async () => {
+    assert.equal(await render('{{$(false)}}'), 'false');
+    assert.equal(await render('{{$(0)}}'), '0');
+    assert.equal(await render('{{$("")}}'), '');
+});
+
+
+test('template expressions await asynchronous transformations before returning HTML', async () => {
+    let release;
+    const ready = new Promise(resolve => { release = resolve; });
+    context.window.markdown.renderAsync = async value => {
+        await ready;
+        assert.equal(value, "Initial message");
+        return "<p>Ready and highlighted</p>";
+    };
+    const output = render('{{$(window.markdown.renderAsync(object.content))}}', "Initial message");
+    release();
+    assert.equal(await output, "<p>Ready and highlighted</p>");
+    delete context.window.markdown.renderAsync;
+});

package/test/server/deferred-file.test.js

@@ -0,0 +1,14 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {HTML} from '../../src/server/index.js';
+test('304 skips nested content, removes rendered, and continues rendering siblings',async()=>{
+ const calls=[];
+ const result=await HTML({file:{src:'<main><section src="/deferred.html" rendered render-error></section><aside src="/sibling.html"></aside></main>',pathname:'/index.html'},urlObject:new URL('https://example.test/'),resolveFile:async path=>{
+ calls.push(path);
+ return path==='/deferred.html'?{status:304,src:'<div src="/must-not-fetch.html">DEFERRED</div>'}:{status:200,src:'SIBLING'};
+ }});
+ assert.deepEqual(calls,['/deferred.html','/sibling.html']);
+ assert.match(result,/<section[^>]*src="\/deferred.html"[^>]*error="304"/);
+ assert.doesNotMatch(result.match(/<section[^>]*>/)[0],/\srendered(?:\s|=|>)/);
+ assert.doesNotMatch(result,/DEFERRED/);assert.match(result,/SIBLING/);
+});

package/test/server/file-access.test.js

@@ -0,0 +1,9 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {HTML} from '../../src/server/index.js';
+test('SSR without an authorized resolver cannot include private or legacy-public content',async()=>{
+ for(const file of [{headers:{'Cache-Control':'public, must-revalidate'}},{public:true},{headers:{'Cache-Control':'private'}},{headers:{'Cache-Control':'no-store, must-revalidate'}}]){
+ const result=await HTML({file:{src:'<div src="/secret.html" render-error></div>',pathname:'/index.html'},urlObject:new URL('https://example.test/'),crud:{send:async()=>({object:[{...file,src:'SECRET-CONTENT'}]})}});
+ assert.doesNotMatch(result,/SECRET-CONTENT/);assert.match(result,/error="403"/);
+ }
+});

package/test/server/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/test/server/stylesheet-links.test.js

@@ -0,0 +1,103 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { HTML } from '../../src/server/index.js';
+
+const link = '<link rel="stylesheet" href="/component.css">';
+const render = (src, options = {}) => HTML({
+    file: { src, pathname: '/index.html' },
+    urlObject: new URL('https://example.com/index.html'),
+    ...options
+});
+
+for (const src of [link, `<section>${link}<p>Content</p></section>`, `<html><body>${link}</body></html>`]) {
+    test(`preserves links without a head: ${src}`, async () => {
+        assert.equal(await render(src), src);
+    });
+}
+
+test('preserves links from recursively fetched fragments without creating a head', async () => {
+    const result = await render('<main><div src="/component.html"></div></main>', {
+        resolveFile: async () => ({ src: `<section>${link}<p>Content</p></section>` })
+    });
+    assert.doesNotMatch(result, /<head\b/i);
+    assert.ok(result.includes(`<section>${link}<p>Content</p></section>`));
+});
+
+test('preserves links from data fragments without creating a head', async () => {
+    const result = await render('<main><div array="components" key="src"></div></main>', {
+        crud: { send: async () => ({ object: [{ src: `<section>${link}</section>` }] }) }
+    });
+    assert.doesNotMatch(result, /<head\b/i);
+    assert.ok(result.includes(`<section>${link}</section>`));
+});
+
+test('moves and deduplicates nested fragment stylesheets into an existing head', async () => {
+    const result = await render(`<html><head>${link}</head><body><div src="/component.html"></div></body></html>`, {
+        resolveFile: async (pathname) => ({ src: pathname === '/component.html'
+            ? `<section>${link}<div src="/nested.html"></div></section>`
+            : '<link rel="stylesheet" href="/nested.css"><p>Nested</p>' })
+    });
+    const head = result.match(/<head>([\s\S]*?)<\/head>/)[1];
+    assert.ok(head.includes(link));
+    assert.ok(head.includes('href="/nested.css"'));
+    assert.equal(result.split('href="/component.css"').length - 1, 1);
+    assert.doesNotMatch(result.match(/<body>([\s\S]*?)<\/body>/)[1], /<link\b/);
+});
+
+for (const hasHead of [true, false]) {
+    for (const useFileResolver of [true, false]) {
+        test(`processes src → CRUD → src → CRUD with head=${hasHead}, resolver=${useFileResolver}`, async () => {
+            const calls = [];
+            const files = {
+                '/component.html': `<section>${link}<div array="components" object="first" key="src"></div></section>`,
+                '/nested.html': '<article><link rel="stylesheet" href="/nested.css"><div array="components" object="second" key="src"></div></article>'
+            };
+            const records = {
+                first: '<aside><link rel="stylesheet" href="/data.css"><div src="/nested.html"></div></aside>',
+                second: `<footer>${link}<strong>Deep content</strong></footer>`
+            };
+            const resolveFile = async (pathname) => {
+                calls.push(pathname);
+                assert.ok(files[pathname], `Unexpected file: ${pathname}`);
+                return { src: files[pathname], headers: { "Cache-Control": "public" } };
+            };
+            const options = {
+                ...(useFileResolver ? { resolveFile } : {}),
+                crud: {
+                    send: async (request) => {
+                        if (request.array === 'files') {
+                            return { object: [await resolveFile(request.filter.query.pathname)] };
+                        }
+                        const id = request.object._id;
+                        calls.push(id);
+                        assert.ok(records[id], `Unexpected record: ${id}`);
+                        return { object: [{ src: records[id] }] };
+                    }
+                }
+            };
+            const content = '<main><div src="/component.html"></div></main>';
+            const root = hasHead
+                ? `<html><head><title>Root</title></head><body>${content}</body></html>`
+                : content;
+            const result = await render(root, options);
+            assert.deepEqual(calls, ['/component.html', 'first', '/nested.html', 'second']);
+            assert.ok(result.includes('<strong>Deep content</strong>'));
+            assert.doesNotMatch(result, /error="/);
+            if (hasHead) {
+                const head = result.match(/<head>([\s\S]*?)<\/head>/)[1];
+                for (const href of ['/component.css', '/data.css', '/nested.css']) {
+                    assert.ok(head.includes(`href="${href}"`));
+                    assert.equal(result.split(`href="${href}"`).length - 1, 1);
+                }
+                assert.equal(result.match(/<head>/g).length, 1);
+                assert.doesNotMatch(result.match(/<body>([\s\S]*?)<\/body>/)[1], /<link\b/);
+            } else {
+                assert.doesNotMatch(result, /<(head|html|body)\b/i);
+                assert.ok(result.includes(`<section>${link}`));
+                assert.ok(result.includes(`<footer>${link}`));
+                assert.ok(result.includes('<aside><link rel="stylesheet" href="/data.css">'));
+                assert.ok(result.includes('<article><link rel="stylesheet" href="/nested.css">'));
+            }
+        });
+    }
+}

package/test/server/theme.test.js

@@ -0,0 +1,21 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { HTML } from '../../src/server/index.js';
+
+for (const [saved, system, expected] of [
+    ['dark', 'light', 'dark'],
+    ['light', 'dark', 'light'],
+    ['', 'dark', 'dark'],
+    ['dark', undefined, 'dark']
+]) {
+    test(`saved theme ${saved || 'auto'} with system ${system}: ${expected}`, async () => {
+        const result = await HTML({
+            file: { src: '<html state-id="theme" color-scheme=""><head><meta name="color-scheme" content="light"></head><body></body></html>', pathname: '/index.html' },
+            urlObject: new URL('https://example.test/index.html'),
+            state: JSON.stringify({ theme: { 'color-scheme': saved } }),
+            theme: system
+        });
+        assert.match(result, new RegExp(`color-scheme="${expected}"`));
+        assert.match(result, new RegExp(`<meta name="color-scheme" content="${expected}">`));
+    });
+}

package/test/server/value-transformations.test.js

@@ -0,0 +1,87 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { HTML } from '../../src/server/index.js';
+
+const render = (src, options = {}) => HTML({
+    file: { src, pathname: '/index.html' },
+    urlObject: new URL('https://example.com/index.html'),
+    ...options
+});
+
+test('API header replaces app placeholders during SSR and replaces its outer element', async () => {
+    const include = String.raw`<header src="/components/offcanvas-app/header.html" value-replace="/\{\{app\.name\}\}/g" value-replacement="APIs" value-type="outerHtml"></header>`;
+    const header = '<header><div aria-label="{{app.name}} views"><button aria-controls="{{app.name}}-details-view">Details</button></div></header>';
+    const result = await render(include, { resolveFile: async () => ({ src: header }) });
+    assert.doesNotMatch(result, /\{\{app\.name\}\}/);
+    assert.match(result, /aria-label="APIs views"/);
+    assert.match(result, /aria-controls="APIs-details-view"/);
+    assert.equal((result.match(/<header\b/g) || []).length, 1);
+    assert.doesNotMatch(result, /src="\/components\/offcanvas-app\/header.html"/);
+});
+
+test('replacement runs before resolving nested includes', async () => {
+    const requests = [];
+    const result = await render('<div src="/parent.html" value-replace="APP" value-replacement="apis"></div>', {
+        resolveFile: async pathname => {
+            requests.push(pathname);
+            return { src: pathname === '/parent.html' ? '<div src="/APP/child.html"></div>' : '<p>Nested</p>' };
+        }
+    });
+    assert.deepEqual(requests, ['/parent.html', '/apis/child.html']);
+    assert.match(result, /<p>Nested<\/p>/);
+});
+
+test('setter overrides shared options and ignores getter options', async () => {
+    const result = await render('<div src="/part.html" value-replace="NAME" value-replacement="shared" set-value-replacement="setter" get-value-replace="setter" get-value-replacement="getter"></div>', {
+        resolveFile: async () => ({ src: '<p>NAME</p>' })
+    });
+    assert.match(result, /<p>setter<\/p>/);
+});
+
+test('explicit setter false disables a shared transformation', async () => {
+    const result = await render('<div src="/part.html" value-uppercase set-value-uppercase="false"></div>', {
+        resolveFile: async () => ({ src: '<p>Mixed</p>' })
+    });
+    assert.match(result, /<p>Mixed<\/p>/);
+});
+
+test('CRUD transformations are independent for elements sharing cached records', async () => {
+    let requests = 0;
+    const result = await render('<main><div array="parts" object="one" key="src" value-replace="NAME" value-replacement="First"></div><div array="parts" object="one" key="src" set-value-replace="NAME" set-value-replacement="Second"></div></main>', {
+        crud: { send: async () => { requests++; return { object: [{ src: '<p>NAME</p>' }] }; } }
+    });
+    assert.equal(requests, 1);
+    assert.match(result, /<p>First<\/p>/);
+    assert.match(result, /<p>Second<\/p>/);
+});
+
+test('CRUD identity without a key preserves element content', async () => {
+    let requests = 0;
+    const result = await render(
+        '<button array="ai-messages" object="message-id"><i>Delete</i></button>',
+        {
+            crud: {
+                send: async () => {
+                    requests++;
+                    return { object: [{ content: 'must not render' }] };
+                }
+            }
+        }
+    );
+
+    assert.equal(requests, 0);
+    assert.match(result, /<button[^>]*><i>Delete<\/i><\/button>/);
+    assert.doesNotMatch(result, /rendered(?:=|\s|>)/);
+    assert.doesNotMatch(result, /must not render/);
+});
+
+test('decoding and type conversion work without browser globals', async () => {
+    const result = await render('<div array="parts" key="src" set-value-decode="json" set-value-type="array.$keys"></div>', {
+        crud: { send: async () => ({ object: [{ src: '{"name":"APIs"}' }] }) }
+    });
+    assert.match(result, /\[\s*"name"\s*\]/);
+    const decoded = await render('<div src="/part.html" set-value-decode="html-entities"></div>', {
+        resolveFile: async () => ({ src: '&lt;p&gt;&copy; APIs&lt;/p&gt;' })
+    });
+    assert.match(decoded, /<p>© APIs<\/p>/);
+});

package/webpack.config.js

@@ -7,7 +7,7 @@ module.exports = async (env, argv) => {
 	const isProduction = argv && argv.mode === "production";
 	const config = {
 		entry: {
-			"CoCreate-render": "./src/index.js"
+			"CoCreate-render": "./src/client/index.js"
 		},
 		output: {
 			path: path.resolve(__dirname, "dist"),

package/src/index.css

@@ -1 +0,0 @@
-.template, [template] {display: none !important;}