@cocreate/elements 1.46.0 → 2.0.0

package/src/valueQuery.js

@@ -1,8 +1,7 @@
 import Observer from "@cocreate/observer";
 import "@cocreate/element-prototype";
 import { queryElements } from "@cocreate/utils";
-
-const selector = "[value-query]";
+import { valueQuerySelector } from "./valueQuerySelector.js";
 
 /**
  * Initializes elements with value-* attributes to enable dynamic value retrieval and setting.
@@ -18,7 +17,7 @@ async function init(element) {
 	) {
 		element = [element];
 	} else if (!element) {
-		element = document.querySelectorAll(selector);
+		element = document.querySelectorAll(valueQuerySelector);
 	}
 
 	for (let i = 0; i < element.length; i++) {
@@ -87,7 +86,7 @@ init();
 Observer.init({
 	name: "CoCreateElementsValueAdded",
 	types: ["addedNodes"],
-	selector: selector,
+	selector: valueQuerySelector,
 	callback: function (mutation) {
 		init(mutation.target);
 	}

package/src/valueQuerySelector.js

@@ -0,0 +1 @@
+export const valueQuerySelector = "[value-query]";

package/test/deferred-src.test.cjs

@@ -0,0 +1,11 @@
+const {test}=require('node:test');
+const assert=require('node:assert/strict');
+const fs=require('node:fs');
+const vm=require('node:vm');
+const source=fs.readFileSync(require.resolve('../src/srcHandler.js'),'utf8');
+test('deferred SSR source fetches, renders and clears its 304 marker',async()=>{
+ const attrs=new Map([['src','/component.html'],['error','304']]);let content,requests=0;
+ const el={tagName:'DIV',getAttribute:key=>attrs.get(key)??null,hasAttribute:key=>attrs.has(key),removeAttribute:key=>attrs.delete(key),setValue:value=>{content=value;}};
+ const init=vm.runInNewContext(source.slice(source.indexOf('async function initElements('),source.indexOf('async function initMediaSource('))+'\ninitElements',{initializing:new WeakMap(),isSameOrigin:()=>true,sessionStorage:{getItem:()=>null},fetch:async()=>{requests++;return {status:200,ok:true,text:async()=>'<p>Cached or fetched content</p>'};},console,ObjectId:()=>''});
+ await init([el]);assert.equal(requests,1);assert.equal(content,'<p>Cached or fetched content</p>');assert.equal(attrs.has('error'),false);
+});

package/test/form-enter.test.cjs

@@ -0,0 +1,48 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+const test = require('node:test');
+const source = readFileSync(path.join(__dirname, '../src/formHandler.js'), 'utf8');
+const handler = source.slice(source.indexOf('function handleEnter('), source.indexOf('\n/**\n * @param form'));
+function run(options = {}) {
+    let clicked = 0, prevented = 0, queried = 0;
+    const form = { contains: () => true };
+    const scope = { getAttribute: () => '#next' };
+    const target = {
+        form, hasAttribute: () => true,
+        matches: () => options.disabled || false,
+        closest: () => options.hidden ? {} : null,
+        getClientRects: () => options.invisible ? [] : [{}],
+        click: () => clicked++
+    };
+    const input = {
+        tagName: options.tagName || 'INPUT', type: options.type || 'text', form,
+        closest: selector => selector === '[submit-query]' ? (options.noQuery ? null : scope) : (options.widget ? {} : null)
+    };
+    const event = { key: 'Enter', target: input, currentTarget: form, preventDefault: () => prevented++, ...options.event };
+    vm.runInNewContext(handler + '\nhandleEnter(event);', {
+        event, getComputedStyle: () => ({ visibility: 'visible' }),
+        queryElements: ({ element }) => { assert.equal(element, scope); queried++; return options.multiple ? [target, target] : [target]; }
+    });
+    return { clicked, prevented, queried };
+}
+test('an explicit query clicks its target once', () => {
+    assert.deepEqual(run(), { clicked: 1, prevented: 1, queried: 1 });
+});
+test('without a query, native behavior is left alone', () => {
+    assert.deepEqual(run({noQuery:true}), {clicked:0,prevented:0,queried:0});
+});
+for (const option of ['disabled','hidden','invisible','multiple']) {
+    test(`${option} targets are not clicked and cannot fall through to submission`, () => {
+        const result=run({[option]:true}); assert.equal(result.clicked,0);assert.equal(result.prevented,1);
+    });
+}
+for (const options of [{tagName:'TEXTAREA'},{tagName:'SELECT'},{type:'checkbox'},{type:'submit'},{widget:true},{event:{isComposing:true}},{event:{ctrlKey:true}},{event:{defaultPrevented:true}}]) {
+    test(`preserves control behavior: ${JSON.stringify(options)}`,()=>{
+        assert.deepEqual(run(options),{clicked:0,prevented:0,queried:0});
+    });
+}
+test('held Enter does not repeat or fall through to native submission',()=>{
+    assert.deepEqual(run({event:{repeat:true}}),{clicked:0,prevented:1,queried:0});
+});

package/test/get-data.test.cjs

@@ -0,0 +1,100 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+async function setup() {
+    const context = vm.createContext({
+        localStorage: { getItem: () => null }
+    });
+    const registries = {
+        elements: new Map(),
+        forms: new Map(),
+        keys: new Map(),
+        elementSubscriptions: new Map(),
+        subscriptions: new Map()
+    };
+    const stubs = {
+        '@cocreate/utils': {
+            getAttributes: element => ({ ...element.data }),
+            checkValue: () => true
+        },
+        'mapRegistry.js': registries,
+        'subscribeHandler.js': { getSubscription: () => null },
+        'crudHandler.js': { read() {}, save() {} }
+    };
+    const modules = new Map();
+
+    function load(name) {
+        name = name.startsWith('./') ? name.slice(2) : name;
+        if (modules.has(name)) return modules.get(name);
+
+        const stub = stubs[name];
+        const module = stub
+            ? new vm.SyntheticModule(Object.keys(stub), function () {
+                for (const [key, value] of Object.entries(stub)) {
+                    this.setExport(key, value);
+                }
+            }, { context })
+            : new vm.SourceTextModule(
+                fs.readFileSync(path.join(__dirname, '../src', name), 'utf8'),
+                { context, identifier: name }
+            );
+        modules.set(name, module);
+        return module;
+    }
+
+    const module = load('getDataHandler.js');
+    await module.link(load);
+    await module.evaluate();
+    return module.namespace;
+}
+
+function field(form, key, value) {
+    return {
+        data: { array: 'organizations', object: '', key },
+        form,
+        attributes: [],
+        closest: () => form,
+        getAttribute: name => name === 'key' ? key : null,
+        hasAttribute: name => name === 'key',
+        getValue: async () => value,
+        matches: selector => selector !== '[render-query]' && selector !== 'input[type="file"]'
+    };
+}
+
+test('getData preserves each field key when controls share an object scope', async () => {
+    const { getData, getDataObject, initDataKey } = await setup();
+    const form = { elements: [] };
+    const fields = [
+        field(form, 'name', 'Acme'),
+        field(form, '_id', 'org-1'),
+        field(form, 'key', 'secret')
+    ];
+    form.elements = fields;
+    for (const element of fields) initDataKey(element, getDataObject(element));
+
+    const [payload] = await getData(form);
+    assert.deepEqual(
+        JSON.parse(JSON.stringify(payload.object)),
+        { name: 'Acme', _id: 'org-1', key: 'secret' }
+    );
+});
+
+test('getData does not apply a whole-object key to neighboring fields', async () => {
+    const { getData, getDataObject, initDataKey } = await setup();
+    const form = { elements: [] };
+    const fields = [
+        field(form, '{}', { name: 'Acme' }),
+        field(form, '_id', 'org-1')
+    ];
+    form.elements = fields;
+    for (const element of fields) initDataKey(element, getDataObject(element));
+
+    const [payload] = await getData(form);
+    assert.deepEqual(
+        JSON.parse(JSON.stringify(payload.object)),
+        { name: 'Acme', _id: 'org-1' }
+    );
+});

package/test/href-handler.test.cjs

@@ -0,0 +1,132 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+function documentStub() {
+    const listeners = new Set();
+    return {
+        nodeType: 9,
+        addEventListener: (type, callback) => listeners.add(callback),
+        removeEventListener: (type, callback) => listeners.delete(callback),
+        click(target) {
+            const event = { target, prevented: false, preventDefault() { this.prevented = true; } };
+            for (const listener of listeners) listener(event);
+            return event;
+        }
+    };
+}
+
+async function setup() {
+    const document = documentStub(), opened = [], definitions = [];
+    const location = { href: 'https://example.test/' };
+    const actions = { init: entries => definitions.push(...entries), href() { throw new Error('Default href'); } };
+    let targets = [];
+    const stubs = {
+        '@cocreate/actions': { default: actions },
+        '@cocreate/utils': { queryElements: () => targets }
+    };
+    const context = vm.createContext({ document, location, URL, window: { open: (...args) => opened.push(args) } });
+    const module = new vm.SourceTextModule(fs.readFileSync(path.join(__dirname, '../src/hrefHandler.js'), 'utf8'), { context });
+    await module.link(name => {
+        const exports = stubs[name];
+        return new vm.SyntheticModule(Object.keys(exports), function () {
+            for (const [key, value] of Object.entries(exports)) this.setExport(key, value);
+        }, { context });
+    });
+    await module.evaluate();
+    function element(attributes = {}, parent = null) {
+        const node = {
+            ownerDocument: document, parent, children: [],
+            hasAttribute: name => Object.hasOwn(attributes, name),
+            getAttribute: name => attributes[name] ?? null,
+            matches: selector => selector.split(',').some(part => Object.hasOwn(attributes, part.trim().slice(1, -1))),
+            closest(selector) { return this.matches(selector) ? this : parent?.closest(selector) || null; },
+            querySelector(selector) { return this.children.find(child => child.matches(selector)) || null; }
+        };
+        parent?.children.push(node);
+        return node;
+    }
+    return { document, location, opened, actions, definitions, element, module: module.namespace,
+        select: value => { targets = value; } };
+}
+
+test('automatic setup registers actions and exposes only navigation controls', async () => {
+    const f = await setup();
+    assert.deepEqual(Object.keys(f.module).sort(), ['default', 'disableHref', 'enableHref', 'open']);
+    assert.deepEqual(Object.keys(f.module.default).sort(), ['disableHref', 'enableHref', 'open']);
+    for (const name of ['open', 'disableHref', 'enableHref']) {
+        assert.equal(f.module.default[name], f.module[name]);
+    }
+    assert.equal(typeof f.actions.href, 'function');
+    assert.equal(f.document.link.islink, 'true');
+    assert.deepEqual(f.definitions.map(definition => definition.name), ['disableHref', 'enableHref']);
+});
+
+test('delegation handles newly inserted links and preserves window targeting', async () => {
+    const f = await setup();
+    const link = f.element({ href: '/next', target: '_window' });
+    const icon = f.element({}, link);
+    assert.equal(f.document.click(icon).prevented, true);
+    assert.deepEqual(f.opened, [['/next', '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes']]);
+});
+
+test('direct clicks defer action links to the chain href hook', async () => {
+    const f = await setup();
+    const link = f.element({ actions: 'save', href: '/next' });
+    const event = f.document.click(link);
+    assert.equal(event.prevented, false);
+    assert.equal(f.location.href, 'https://example.test/');
+    f.actions.href(link, { event });
+    assert.equal(event.prevented, true);
+    assert.equal(f.location.href, '/next');
+});
+
+test('the chain hook resolves child links and leaves downloads alone', async () => {
+    const f = await setup();
+    const button = f.element({ actions: 'save' });
+    f.element({ href: '/next', target: 'preview' }, button);
+    f.actions.href(button);
+    assert.deepEqual(f.opened, [['/next', 'preview']]);
+    const download = f.element({ href: '/file', download: '' });
+    assert.equal(f.document.click(download).prevented, false);
+    f.actions.href(download);
+    assert.equal(f.location.href, 'https://example.test/');
+});
+
+test('enable and disable actions update document state and complete their chains', async () => {
+    const f = await setup();
+    const button = f.element(), link = f.element({ href: '/next' });
+    let completed = 0;
+    f.definitions[0].callback({ element: button, end() { completed++; } });
+    assert.equal(f.document.click(link).prevented, true);
+    f.actions.href(link);
+    assert.equal(f.location.href, 'https://example.test/');
+    f.definitions[1].callback({ element: button, end() { completed++; } });
+    assert.equal(completed, 2);
+    f.document.click(link);
+    assert.equal(f.location.href, '/next');
+});
+
+test('link-query scopes enable and disable to the selected iframe document', async () => {
+    const f = await setup();
+    const frameDocument = documentStub();
+    f.select([{ contentDocument: frameDocument }]);
+    const button = f.element({ 'link-query': '#preview' });
+    f.module.disableHref(button);
+    assert.equal(frameDocument.link.islink, 'false');
+    assert.equal(f.document.link.islink, 'true');
+    f.module.enableHref(button);
+    assert.equal(frameDocument.link.islink, 'true');
+});
+
+test('applications can replace the href hook after the feature loads', async () => {
+    const f = await setup();
+    const custom = () => {};
+    f.actions.href = custom;
+    const button = f.element();
+    f.module.disableHref(button);
+    f.module.enableHref(button);
+    assert.equal(f.actions.href, custom);
+});

package/test/init-read.test.cjs

@@ -0,0 +1,145 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const vm = require('node:vm');
+const test = require('node:test');
+
+async function setup() {
+    const requests = [], jobs = new Map(), errors = [], observers = [];
+    let timerId = 0;
+    const context = vm.createContext({
+        console: { error: (...args) => errors.push(args), log() {} },
+        document: { querySelectorAll: () => [] },
+        localStorage: { getItem: () => null },
+        HTMLCollection: class {}, NodeList: class {},
+        setTimeout: (callback) => { jobs.set(++timerId, callback); return timerId; },
+        clearTimeout: (id) => jobs.delete(id)
+    });
+    const stubs = {
+        '@cocreate/observer': { default: { init(options) { observers.push(options); } } },
+        '@cocreate/actions': { default: { init() {} } },
+        '@cocreate/socket-client': { default: { send() {} } },
+        '@cocreate/crud-client': { default: { listen() {}, send: async (data) => { requests.push(data); } } },
+        '@cocreate/filter': { default: { init: async (element) => { if (element.ready) await element.ready; } } },
+        '@cocreate/utils': {
+            getAttributes: (element) => ({ ...element.data }),
+            getAttributeNames: () => [], queryElements: () => [],
+            checkValue: (value) => !/{{.*}}/.test(value)
+        },
+        'setDataHandler.js': { setData() {}, setDataType() {} }
+    };
+    const modules = new Map();
+    function load(name) {
+        name = name.startsWith('./') ? name.slice(2) : name;
+        if (modules.has(name)) return modules.get(name);
+        const stub = stubs[name];
+        const module = stub
+            ? new vm.SyntheticModule(Object.keys(stub), function () {
+                for (const [key, value] of Object.entries(stub)) this.setExport(key, value);
+            }, { context })
+            : new vm.SourceTextModule(fs.readFileSync(path.join(__dirname, '../src', name), 'utf8'), { context, identifier: name });
+        modules.set(name, module);
+        return module;
+    }
+    const module = load('initHandler.js');
+    await module.link(load);
+    await module.evaluate();
+    return {
+        init: module.namespace.init, requests, errors, observers,
+        flush() { const batch = [...jobs.values()]; jobs.clear(); for (const job of batch) job(); }
+    };
+}
+function element(id, attributes = {}) {
+    return {
+        tagName: 'DIV', data: { array: 'apis', object: id, key: 'name' },
+        getAttribute: (key) => attributes[key] ?? null,
+        hasAttribute: (key) => Object.hasOwn(attributes, key),
+        addEventListener() {}
+    };
+}
+const tick = () => new Promise(resolve => setImmediate(resolve));
+
+test('filtered counts for different clusters are read in separate batches', async () => {
+    const f = await setup();
+    const counts = ['cluster-a', 'cluster-b'].map(cluster => {
+        const el = element('');
+        el.data = { array: 'servers', object: '', key: '$length' };
+        el.getFilter = async () => ({ query: { cluster_id: cluster }, index: 0 });
+        return el;
+    });
+    await f.init(counts);
+    f.flush();
+    assert.equal(f.requests.length, 2);
+    assert.deepEqual(f.requests.map(data => data.filter.query.cluster_id), ['cluster-a', 'cluster-b']);
+});
+
+test('a pending field does not block reads for ready elements in the same SSR page', async () => {
+    const f = await setup();
+    const slow = element('111111111111111111111111');
+    const ready = element('222222222222222222222222', { rendered: 'true' });
+    let release;
+    slow.ready = new Promise(resolve => { release = resolve; });
+    const pending = f.init([slow, ready]);
+    await tick();
+    f.flush();
+    try {
+        assert.equal(f.requests.length, 1);
+        assert.equal(f.requests[0].object._id, ready.data.object);
+    } finally {
+        release();
+        await pending;
+    }
+    f.flush();
+    assert.equal(f.requests.length, 2);
+});
+
+test('one failed initialization does not prevent other reads and can be retried', async () => {
+    const f = await setup();
+    const broken = element('111111111111111111111111');
+    const ready = element('222222222222222222222222');
+    broken.ready = Promise.reject(new Error('value lookup failed'));
+    await f.init([broken, ready]);
+    f.flush();
+    assert.equal(f.requests.length, 1);
+    assert.equal(f.errors.length, 1);
+    delete broken.ready;
+    await f.init(broken);
+    f.flush();
+    assert.equal(f.requests.length, 2);
+});
+
+test('ready fields for the same document still share one debounced read', async () => {
+    const f = await setup();
+    await f.init([element('111111111111111111111111'), element('111111111111111111111111')]);
+    f.flush();
+    assert.equal(f.requests.length, 1);
+});
+
+test('read=false and already read elements remain excluded', async () => {
+    const f = await setup();
+    const read = element('222222222222222222222222');
+    read.hasRead = true;
+    await f.init([element('111111111111111111111111', { read: 'false' }), read]);
+    f.flush();
+    assert.equal(f.requests.length, 0);
+});
+
+test('changing read from false to true reads the current composed filter', async () => {
+    const f = await setup();
+    const attributes = { read: 'false' };
+    const el = element('', attributes);
+    el.data = { array: 'files', object: '', key: '' };
+    el.getFilter = async () => ({ query: { path: '/' }, index: 0 });
+
+    await f.init(el);
+    f.flush();
+    assert.equal(f.requests.length, 0);
+
+    attributes.read = 'true';
+    const observer = f.observers.find(item => item.name === 'CoCreateElementsReadAttribute');
+    await observer.callback({ target: el, oldValue: 'false' });
+    f.flush();
+
+    assert.equal(f.requests.length, 1);
+    assert.equal(f.requests[0].filter.query.path, '/');
+});

package/test/lazy-loading.test.cjs

@@ -0,0 +1,168 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+function element(tagName, attributes = {}) {
+    return {
+        tagName: tagName.toUpperCase(), attributes,
+        getAttribute: name => attributes[name] ?? null,
+        matches(selector) {
+            return selector.split(',').some(part => {
+                const value = part.trim();
+                return value.startsWith('[')
+                    ? Object.hasOwn(attributes, value.slice(1, -1))
+                    : value.toUpperCase() === this.tagName;
+            });
+        }
+    };
+}
+
+async function setup(nodes = [], failures = new Set()) {
+    const imports = [], observers = [], calls = [], errors = [];
+    const context = vm.createContext({
+        console: { error: (...args) => errors.push(args) },
+        localStorage: { getItem: () => 'production' },
+        document: {
+            addEventListener() {},
+            querySelector: selector => nodes.find(node => node.matches(selector)),
+            querySelectorAll: selector => nodes.filter(node => node.matches(selector))
+        }
+    });
+    const stubs = {
+        '@cocreate/observer': { default: { init: configs => observers.push(...configs) } },
+        '@cocreate/utils': {
+            getAttributes: node => ({ ...node.attributes }),
+            checkValue: () => true
+        }
+    };
+    const modules = new Map();
+    function synthetic(exports) {
+        return new vm.SyntheticModule(Object.keys(exports), function () {
+            for (const [key, value] of Object.entries(exports)) this.setExport(key, value);
+        }, { context });
+    }
+    async function dynamicImport(name) {
+        imports.push(name);
+        if (failures.delete(name)) throw new Error('Temporary chunk failure');
+        const methods = ['init', 'read', 'save', 'getData', 'setDataType', 'reset'];
+        const module = synthetic(Object.fromEntries(methods.map(method => [method, (...args) => {
+            calls.push({ name, method, args });
+            return args[0];
+        }])));
+        await module.link(() => {});
+        await module.evaluate();
+        return module;
+    }
+    function load(name) {
+        name = name.replace(/^\.\//, '');
+        if (modules.has(name)) return modules.get(name);
+        const module = stubs[name] ? synthetic(stubs[name]) : new vm.SourceTextModule(
+            fs.readFileSync(path.join(__dirname, '../src', name), 'utf8'),
+            { context, identifier: name, importModuleDynamically: dynamicImport }
+        );
+        modules.set(name, module);
+        return module;
+    }
+    const entry = load('index.js');
+    await entry.link(load);
+    await entry.evaluate();
+    const flush = () => new Promise(resolve => setImmediate(resolve));
+    await flush();
+    return {
+        api: entry.namespace.default, imports, calls, errors, flush,
+        mutate(node, type, attributeName) {
+            for (const observer of observers) {
+                if (!observer.types.includes(type) || !node.matches(observer.selector)) continue;
+                if (type === 'attributes' && !observer.attributeFilter.includes(attributeName)) continue;
+                observer.callback({ target: node, attributeName });
+            }
+        }
+    };
+}
+
+test('an empty document loads no feature runtime and retains synchronous metadata APIs', async () => {
+    const f = await setup();
+    assert.deepEqual(f.imports, []);
+    const data = f.api.getDataObject(element('input', { array: 'files', key: 'name' }));
+    assert.equal(data.type, 'object');
+    assert.equal(data.database, 'production');
+    assert.equal(data.then, undefined);
+    f.api.keys.set('example', 1);
+    assert.equal(f.api.keys.get('example'), 1);
+    assert.deepEqual(f.imports, []);
+});
+
+for (const [tag, attrs, expected] of [
+    ['div', { src: '/partial.html' }, './srcHandler.js'],
+    ['div', { source: '/partial.html' }, './srcHandler.js'],
+    ['div', { stream: '/stream' }, './srcHandler.js'],
+    ['form', {}, './formHandler.js'],
+    ['fieldset', {}, './formHandler.js'],
+    ['a', { href: '/next' }, './hrefHandler.js'],
+    ['a', { target: '_window' }, './hrefHandler.js'],
+    ['div', { array: 'files' }, './dataHandler.js'],
+    ['div', { 'render-json': 'true' }, './dataHandler.js'],
+    ['iframe', {}, './iframeHandler.js'],
+    ['input', { 'value-query': '.source' }, './valueQuery.js'],
+    ['div', { 'socket-on': 'object.read' }, './socketHandler.js'],
+    ['button', { actions: 'send' }, './socketHandler.js'],
+    ['button', { actions: 'save' }, './dataHandler.js'],
+    ['button', { actions: 'delete' }, './dataHandler.js'],
+    ['button', { actions: 'reset' }, './formHandler.js'],
+    ['button', { actions: 'disableHref' }, './hrefHandler.js'],
+    ['button', { actions: 'enableHref' }, './hrefHandler.js']
+]) {
+    test(`initial ${tag} ${JSON.stringify(attrs)} loads only ${expected}`, async () => {
+        const f = await setup([element(tag, attrs)]);
+        assert.deepEqual(f.imports, [expected]);
+        assert.deepEqual(f.errors, []);
+    });
+}
+
+test('unrelated actions load no Elements runtime', async () => {
+    const f = await setup([element('button', { actions: 'validate, upload' })]);
+    assert.deepEqual(f.imports, []);
+});
+
+test('added elements and attribute changes load each feature once', async () => {
+    const f = await setup();
+    const source = element('div', { src: '/partial.html' });
+    const data = element('div', { array: 'files' });
+    f.mutate(source, 'addedNodes');
+    f.mutate(source, 'attributes', 'src');
+    f.mutate(data, 'attributes', 'array');
+    f.mutate(data, 'addedNodes');
+    await f.flush();
+    assert.deepEqual(f.imports, ['./srcHandler.js', './dataHandler.js']);
+});
+
+test('programmatic APIs await and share the data runtime', async () => {
+    const f = await setup();
+    const node = element('input');
+    for (const name of ['init', 'read', 'save', 'getData', 'setDataType']) {
+        assert.equal(await f.api[name](node), node);
+    }
+    assert.deepEqual(f.imports, ['./dataHandler.js']);
+    assert.deepEqual(f.calls.map(call => call.method), ['init', 'read', 'save', 'getData', 'setDataType']);
+});
+
+test('adding href to an existing element loads its handler once', async () => {
+    const f = await setup();
+    const link = element('a', { href: '/next' });
+    f.mutate(link, 'attributes', 'href');
+    f.mutate(link, 'addedNodes');
+    await f.flush();
+    assert.deepEqual(f.imports, ['./hrefHandler.js']);
+});
+
+test('failed feature imports can be retried by a subsequent mutation', async () => {
+    const node = element('div', { src: '/partial.html' });
+    const f = await setup([node], new Set(['./srcHandler.js']));
+    assert.equal(f.errors.length, 1);
+    f.mutate(node, 'attributes', 'src');
+    await f.flush();
+    assert.deepEqual(f.imports, ['./srcHandler.js', './srcHandler.js']);
+    assert.equal(f.errors.length, 1);
+});

package/test/load-more.test.cjs

@@ -0,0 +1,19 @@
+const {test}=require('node:test');
+const assert=require('node:assert/strict');
+const fs=require('node:fs');
+const vm=require('node:vm');
+const source=fs.readFileSync(require.resolve('../src/setDataHandler.js'),'utf8');
+const loadMore=vm.runInNewContext('('+source.slice(source.indexOf('async function loadMore('),source.indexOf('\nasync function checkFilters'))+')');
+test('append deduplicates without mutating shared cache/server responses',async()=>{
+ const response={object:[{_id:'a'},{_id:'b'},{_id:'b'}],filter:{index:3,startingIndex:1}};
+ const original=JSON.stringify(response);let rendered;
+ await loadMore({getData:async()=>({object:[{_id:'a'}]}),renderValue:async data=>{rendered=data;}},response,'object');
+ assert.equal(JSON.stringify(response),original);
+ assert.equal(rendered.object.length,1);assert.equal(rendered.object[0]._id,'b');
+ assert.equal(rendered.filter.loadMore,true);assert.equal(rendered.filter.overwrite,false);
+});
+test('duplicate-only response leaves existing render untouched',async()=>{
+ let called=false;
+ await loadMore({getData:async()=>({object:[{_id:'a'}]}),renderValue:async()=>{called=true;}},{object:[{_id:'a'}]},'object');
+ assert.equal(called,false);
+});