@cocreate/elements 1.46.0 → 2.0.0

package/test/save-array.test.cjs

@@ -0,0 +1,31 @@
+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/crudHandler.js'), 'utf8');
+const saveSource = source.slice(source.indexOf('export async function save('), source.indexOf('\nActions.init(')).replace('export ', '');
+
+for (const value of [[{ name: 'image.svg' }], [{ name: 'a.svg' }, { name: 'b.svg' }], { name: 'image.svg' }]) {
+    test(`saving an entire document preserves its shape: ${JSON.stringify(value)}`, async () => {
+        let sent;
+        const element = {
+            tagName: 'INPUT',
+            getAttribute: name => name === 'key' ? '{}' : null,
+            getValue: async () => value,
+            setAttribute() {}
+        };
+        const save = vm.runInNewContext(`(${saveSource})`, {
+            elements: new Map([[element, 'files']]),
+            keys: new Map([['files', { dataKey: { object: { type: 'object', array: 'files', object: '', key: '{}' } } }]]),
+            getSubscription: () => null,
+            deriveSubscriptionKeys: () => [],
+            CRUD: { send: async data => { sent = data; } }
+        });
+        await save(element);
+        assert.equal(Array.isArray(sent.object), Array.isArray(value));
+        assert.equal(JSON.stringify(sent.object), JSON.stringify(value));
+        assert.equal(sent.method, 'object.create');
+        if (Array.isArray(value)) assert.notEqual(sent.object, value);
+    });
+}

package/test/save-completion.test.cjs

@@ -0,0 +1,36 @@
+const assert = require('node:assert/strict');
+const { readFileSync } = require('node:fs');
+const { join } = require('node:path');
+const vm = require('node:vm');
+const test = require('node:test');
+
+test('save waits for the response to be applied before its caller continues', async () => {
+    const source = readFileSync(join(__dirname, '../src/crudHandler.js'), 'utf8');
+    const saveCode = source.slice(source.indexOf('export async function save('), source.indexOf('\nActions.init(')).replace('export ', '');
+    let finishApplying;
+    let applied = false;
+    let completed = false;
+    const gate = new Promise(resolve => { finishApplying = resolve; });
+    const form = {
+        tagName: 'FORM',
+        getAttribute: () => null,
+        setAttribute() {},
+        getData: async () => [{ type: 'object', array: 'clusters', object: { name: 'Cluster' } }]
+    };
+    const save = vm.runInNewContext(`(${saveCode})`, {
+        getSubscription: () => null,
+        deriveSubscriptionKeys: () => [],
+        CRUD: { send: async () => ({
+            type: 'object', method: 'object.create', array: 'clusters',
+            object: [{ _id: '65f8cb447b39a3c1a8904e22' }]
+        }) },
+        setDataType: async () => { await gate; applied = true; }
+    });
+    const completion = save(form).then(() => { completed = true; });
+    await new Promise(resolve => setImmediate(resolve));
+    assert.equal(completed, false);
+    finishApplying();
+    await completion;
+    assert.equal(applied, true);
+    assert.equal(completed, true);
+});

package/test/set-data-type.test.cjs

@@ -0,0 +1,119 @@
+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 loadSetDataType(watchedElements = []) {
+    const context = vm.createContext({
+        console,
+        HTMLCollection: class {},
+        CustomEvent: class {
+            constructor(name, options) {
+                this.name = name;
+                this.detail = options?.detail;
+            }
+        }
+    });
+    const source = fs.readFileSync(
+        path.join(__dirname, "../src/setDataHandler.js"),
+        "utf8"
+    );
+    const module = new vm.SourceTextModule(source, { context });
+    const modules = {
+        "@cocreate/utils": {
+            dotNotationToObject: value => value,
+            queryData: () => true,
+            searchData: () => true,
+            sortData: value => value,
+            getAttributes: element => ({ key: element.getAttribute('key') }),
+            checkValue: () => true,
+            getValueFromObject: () => undefined
+        },
+        "@cocreate/crud-client": { default: { getValueFromObject: (object, key) => object[key] } },
+        "@cocreate/filter": { default: { filters: new Map() } },
+        "./mapRegistry.js": {
+            elements: new WeakMap(),
+            forms: new WeakMap(),
+            keys: new Map()
+        },
+        "./getDataHandler.js": {
+            getDataElements: () => watchedElements,
+            getDataObject: () => undefined
+        }
+    };
+
+    await module.link(name => new vm.SyntheticModule(
+        Object.keys(modules[name]),
+        function () {
+            for (const [key, value] of Object.entries(modules[name])) {
+                this.setExport(key, value);
+            }
+        },
+        { context }
+    ));
+    await module.evaluate();
+    return module.namespace.setDataType;
+}
+
+test("setDataType tolerates a form that has not entered the registry yet", async () => {
+    const setDataType = await loadSetDataType();
+    const attributes = { array: "apis", object: "pending" };
+    const form = {
+        tagName: "FORM",
+        querySelectorAll: () => [],
+        getAttribute: name => attributes[name] ?? null,
+        hasAttribute: name => Object.hasOwn(attributes, name),
+        setAttribute: (name, value) => {
+            attributes[name] = value;
+        }
+    };
+
+    await assert.doesNotReject(() => setDataType(form, {
+        type: "object",
+        object: [{
+            _id: "6abb2ce702c3c7e6fbec0215",
+            $array: "apis"
+        }]
+    }, { element: { dispatchEvent() {} } }));
+    assert.equal(attributes.object, "6abb2ce702c3c7e6fbec0215");
+});
+
+test('saved is dispatched only after response fields following async work are updated', async () => {
+    let release;
+    let idValue = '';
+    const gate = new Promise(resolve => { release = resolve; });
+    const watcher = attributes => ({
+        hasAttribute: name => Object.hasOwn(attributes, name),
+        getAttribute: name => attributes[name] ?? null,
+        querySelector: () => null,
+        dispatchEvent() {}
+    });
+    const renderer = watcher({ 'render-query': 'template' });
+    renderer.renderValue = async () => {};
+    renderer.getData = () => gate;
+    const idField = watcher({ key: '_id' });
+    idField.setValue = value => { idValue = value; };
+    const setDataType = await loadSetDataType([renderer, idField]);
+    const attributes = { array: 'clusters', object: 'pending' };
+    const form = {
+        tagName: 'FORM',
+        querySelectorAll: () => [],
+        hasAttribute: name => Object.hasOwn(attributes, name),
+        getAttribute: name => attributes[name] ?? null,
+        setAttribute: (name, value) => { attributes[name] = value; }
+    };
+    const id = '65f8cb447b39a3c1a8904e22';
+    const savedIds = [];
+    const completion = setDataType(form, {
+        type: 'object', method: 'object.create', array: 'clusters',
+        object: [{ _id: id, $array: 'clusters' }]
+    }, { element: { dispatchEvent: () => savedIds.push(idValue) } });
+    await new Promise(resolve => setImmediate(resolve));
+    assert.equal(idValue, '');
+    assert.deepEqual(savedIds, []);
+    release();
+    await completion;
+    assert.equal(idValue, id);
+    assert.deepEqual(savedIds, [id]);
+});

package/test/ssr-response.test.cjs

@@ -0,0 +1,108 @@
+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 loadSetData() {
+    const context = vm.createContext({ console, HTMLCollection: class {}, CustomEvent: class {} });
+    const source = fs.readFileSync(path.join(__dirname, '../src/setDataHandler.js'), 'utf8');
+    const module = new vm.SourceTextModule(source, { context });
+    const utils = {
+        dotNotationToObject: value => value, queryData: () => true,
+        searchData: () => true, sortData: value => value,
+        getAttributes: element => ({ key: element.getAttribute('key'), isRead: element.getAttribute('read') }),
+        checkValue: () => true,
+        getValueFromObject: (object, key) => object[key]
+    };
+    const modules = {
+        '@cocreate/utils': utils,
+        '@cocreate/crud-client': { default: { getValueFromObject: (object, key) => object[key] } },
+        '@cocreate/filter': { default: { filters: new Map() } },
+        './mapRegistry.js': { elements: new WeakMap(), forms: new WeakMap(), keys: new Map() },
+        './getDataHandler.js': { getDataElements: () => [], getDataObject: element => ({ object: element.getAttribute('object') }) }
+    };
+    await module.link(name => new vm.SyntheticModule(Object.keys(modules[name]), function () {
+        for (const [key, value] of Object.entries(modules[name])) this.setExport(key, value);
+    }, { context }));
+    await module.evaluate();
+    return module.namespace.setData;
+}
+
+function element(attributes) {
+    return {
+        hasAttribute: name => Object.hasOwn(attributes, name),
+        getAttribute: name => attributes[name] ?? null,
+        removeAttribute: name => delete attributes[name],
+        querySelector: () => null,
+        dispatchEvent() {},
+        values: [],
+        setValue(value) { this.values.push(value); }
+    };
+}
+
+test('SSR app labels do not prevent later table columns from receiving shared data', async () => {
+    const setData = await loadSetData();
+    const id = '28b6ddbe8b35de252ecd79e1';
+    const label = element({ array: 'apps', object: id, key: 'name', rendered: 'true' });
+    const table = element({ array: 'apps', object: id, key: 'fields', 'render-query': "[template='column'][]" });
+    const renders = [];
+    table.renderValue = async data => renders.push(data);
+    const fields = [{ key: 'name', label: 'Name' }, { key: 'type', label: 'Type' }];
+    await setData([label, table], {
+        method: 'object.read', array: 'apps',
+        object: [{ _id: id, $storage: ['mongodb'], name: 'Cluster', fields }]
+    });
+    assert.equal(label.hasAttribute('rendered'), false);
+    assert.deepEqual(label.values, []);
+    assert.equal(renders.length, 1);
+    assert.deepEqual(Array.from(renders[0].fields), fields);
+});
+
+test('filtered counts retain their value during writes and refresh each cluster independently', async () => {
+    const setData = await loadSetData();
+    const counts = ['cluster-a', 'cluster-b'].map(cluster => {
+        const el = element({ array: 'servers', object: '', key: '$length' });
+        el.getFilter = async () => ({ query: { cluster_id: cluster }, index: 0 });
+        el.refreshes = [];
+        el.setFilter = filter => el.refreshes.push(filter);
+        return el;
+    });
+    for (const el of counts) {
+        await setData(el, { method: 'object.read', array: 'servers', object: [{ _id: 'server' }] });
+    }
+    for (const method of ['object.create', 'object.update', 'object.delete']) {
+        await setData(counts, { method, array: 'servers', object: [{ _id: 'server', $update: { cluster_id: 'cluster-b' } }] });
+    }
+    for (let i = 0; i < counts.length; i++) {
+        assert.deepEqual(counts[i].values, [1]);
+        assert.equal(counts[i].refreshes.length, 3);
+        assert.equal(counts[i].refreshes[0].query.cluster_id, ['cluster-a', 'cluster-b'][i]);
+    }
+    await setData(counts[0], { method: 'object.read', array: 'servers', object: [], error: [{ message: 'failed' }] });
+    assert.deepEqual(counts[0].values, [1]);
+    await setData(counts[0], { method: 'object.read', array: 'servers', object: [] });
+    assert.deepEqual(counts[0].values, [1, 0]);
+});
+
+test('unmatched document updates do not write the empty object attribute into a value', async () => {
+    const setData = await loadSetData();
+    const el = element({ array: 'servers', object: '', key: '$length' });
+    el.getFilter = async () => ({});
+    await setData(el, { method: 'object.update', array: 'servers', object: [{ _id: 'other' }] });
+    assert.deepEqual(el.values, []);
+});
+
+test('read=false keeps a deferred value expression intact when a save response arrives', async () => {
+    const setData = await loadSetData();
+    const expression = '$query($closest #provision-workflow #cluster-object-id).getValue()';
+    const el = element({ key: 'cluster_id', read: 'false', value: expression });
+    el.setValue = value => { el.values.push(value); el.value = value; };
+    el.value = expression;
+    await setData(el, {
+        method: 'object.create', array: 'servers',
+        object: [{ _id: 'server', cluster_id: '65f8cb447b39a3c1a8904e22' }]
+    });
+    assert.equal(el.value, expression);
+    assert.deepEqual(el.values, []);
+});

package/webpack.config.js

@@ -48,6 +48,7 @@ module.exports = async (env, argv) => {
 			minimizer: [
 				new EsbuildPlugin({
 					target: "es2017",
+					minify: isProduction,
 					css: true
 				})
 			],

package/src/dndHandler.js

@@ -1,155 +0,0 @@
-import { dotNotationToObject } from "@cocreate/utils";
-import CRUD from "@cocreate/crud-client";
-import Observer from "@cocreate/observer";
-import { render, renderValue, renderedNodes } from "@cocreate/render";
-import { elements, keys, debounce } from "./mapRegistry.js"
-
-// TODO: has the potential to work on most of the crud elements specifically if the value is an object or an array
-async function dndCrud(draggedEl, draggedFrom, droppedEl, droppedIn) {
-    let from = await dndCrudData(draggedEl, draggedFrom, "remove");
-    let to = await dndCrudData(droppedEl, droppedIn, "add");
-
-    if (from && to && !draggedFrom.isSameNode(droppedIn)) {
-        let element = getDataElements(from.data);
-        if (!element.length) return;
-
-        if (!element.includes(droppedIn)) {
-            if (from.keyPath.includes(".")) {
-                let test = { [from.keyPath]: undefined };
-
-                from.clonedParentData = dotNotationToObject(test, from.clonedParentData);
-                dndCrudSend(from.clonedParentData, "update");
-            } else {
-                const index = from.keyPath.match(/\[(\d+)\]/);
-                let removeData = from.clonedParentData[from.clonedParentData.type].splice(
-                    index,
-                    1
-                )[0];
-                if (removeData) {
-                    removeData.type = from.clonedParentData.type;
-                    removeData[removeData.type] = removeData;
-                    dndCrudSend(removeData, "delete");
-                }
-
-                if (from.clonedParentData[from.clonedParentData.type].length)
-                    dndCrudSend(from.clonedParentData, "update");
-            }
-        }
-    }
-
-    if (to) dndCrudSend(to.clonedParentData, "update");
-}
-
-async function dndCrudData(element, parent, operator) {
-    if (!elements.has(parent)) return;
-    let data = await parent.getData();
-    let clonedParentData = getDataObject(parent);
-
-    let { dragData, sortName, sortDirection, keyPath, clones, index } = dndNewData(
-        element,
-        data
-    );
-    clonedParentData[clonedParentData.type] = [];
-
-    if (sortName) {
-        for (let i = 0; i < clones.length; i++) {
-            if (i > index) {
-                let previousData = data[data.type][index];
-                dragData[sortName] = operator === "add" ? i + 1 : i - 1;
-
-                clonedParentData[clonedParentData.type].push({ ...previousData, ...dragData });
-            }
-        }
-    } else {
-        clonedParentData[clonedParentData.type] = [{ ...data[data.type][index], ...dragData }];
-    }
-
-    return { data, clonedParentData, keyPath, clones, index };
-}
-
-function dndNewData(element, data) {
-    let dragData = {};
-    if (data.$filter.query) {
-        dndNewDataUpdate(dragData, data.$filter.query);
-    }
-
-    let sortName, sortDirection;
-    let sort = data.$filter.sort;
-    if (sort && sort.length) {
-        for (let i = sort.length - 1; i >= 0; i--) {
-            if (typeof data[sort.key] === "number") {
-                sortName = sort.key;
-                sortDirection = sort.direction;
-                break;
-            }
-        }
-    }
-
-    let keyPath, clonesMap, clones, index;
-
-    let renderedNode = renderedNodes.get(element);
-    if (renderedNode) {
-        keyPath = renderedNode.keyPath;
-        clonesMap = renderedNode.template.clones;
-        clones = Array.from(clonesMap.values());
-        index = clones.indexOf(element);
-    }
-
-    return { dragData, sortName, sortDirection, keyPath, clones, index };
-}
-
-function dndNewDataUpdate(dragData, query) {
-    for (let key of Object.keys(query)) {
-        if (key === "$and" || key === "$or" || key === "$nor") {
-            for (let i = 0; i < query[key].length; i++) {
-                dndNewDataUpdate(dragData, query[key][i]);
-            }
-        } else if (
-            typeof query[key] === "object" &&
-            !Array.isArray(query[key])
-        ) {
-            if (query[key].$eq) dragData[key] = query[key].$eq;
-            if (query[key].$ne) dragData[key] = query[key].$ne;
-        } else {
-            dragData[key] = query[key];
-        }
-    }
-}
-
-function dndCrudSend(data, crudType) {
-    if (CRUD) {
-        let action = data.type;
-        action = action.charAt(0).toUpperCase() + action.slice(1);
-        CRUD[crudType + action](data);
-    } else console.log("dnd reordered data set as crud is unavailable");
-}
-
-Observer.init({
-    name: "render",
-    types: ["addedNodes"],
-    selector: "[render-clone]",
-    callback: function (mutation) {
-        if (
-            mutation.parentElement &&
-            !mutation.parentElement.hasAttribute("dnd")
-        )
-            return;
-        let delayTimer = debounce.get(mutation);
-        clearTimeout(delayTimer);
-        debounce.delete(mutation.target);
-
-        let renderedNode = renderedNodes.get(mutation.target);
-        if (!renderedNode) return;
-
-        if (!mutation.movedFrom) return;
-        let draggedEl = mutation.target;
-        let draggedFrom = mutation.movedFrom.parentElement;
-        let droppedEl =
-            mutation.target.nextElementSibling ||
-            mutation.target.previousElementSibling;
-        let droppedIn = mutation.parentElement;
-
-        if (!draggedFrom || !droppedIn) return;
-        dndCrud(draggedEl, draggedFrom, droppedEl, droppedIn);
-    }
-});