@cocreate/element-prototype 1.38.0 → 2.0.0

package/src/index.js

@@ -18,7 +18,7 @@
 // Commercial Licensing Information:
 // For commercial use of this software without the copyleft provisions of the AGPLv3,
 // you must obtain a commercial license from CoCreate LLC.
-// For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
+// For details, visit <https://CoCreateJS.com/licenses/> or contact us at sales@CoCreateJS.com.
 
 import { getAttribute } from "./getAttribute.js";
 import { setValue } from "./setValue.js";
@@ -26,8 +26,195 @@ import { getValue } from "./getValue.js";
 import { queryElements } from "./queryElements.js";
 
 export default {
+	/**
+	 *
+ * @public
+ * @environment client
+ */
 	getAttribute,
+	/**
+	 *
+ * @public
+ * @environment client
+ */
 	getValue,
+	/**
+	 *
+ * @public
+ * @environment client
+ */
 	setValue,
+	/**
+	 *
+ * @public
+ * @environment client
+ */
 	queryElements
 };
+
+/**
+ *
+ * @name array
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name component
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name contenteditable
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name editor
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name key
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name locale
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name multiple
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name now
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name object
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name set-value-prefix
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name set-value-suffix
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name src
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name srcdoc
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state_id
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name time-ago-limit
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name time-to-units
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name type
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name use-utc
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name value
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name week-start-day
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ * A simple element-prototype component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.
+ *
+ * @module element-prototype
+ * @environment client
+ */

package/src/setValue.js

@@ -1,4 +1,3 @@
-import { storage } from "./getValue.js";
 import { getValueAttribute, transformValue, convertValue } from "@cocreate/utils";
 
 HTMLElement.prototype.setValue = function (value, dispatch) {
@@ -8,7 +7,6 @@ SVGElement.prototype.setValue = function (value, dispatch) {
     setValue(this, value, dispatch);
 };
 
-// TODO: check if using a a switch case will provide better performance
 const setValue = (el, value, dispatch) => {
     let bubbles = ![null, false, "false"].includes(getValueAttribute(el, "bubbles", "set-value"));
     let valueDispatch = ![null, false, "false"].includes(getValueAttribute(el, "dispatch", "set-value"));
@@ -20,13 +18,22 @@ const setValue = (el, value, dispatch) => {
     if (value === null || value === undefined) return;
     value = transformValue(el, value, "set-value");
     value = convertValue(value, getValueAttribute(el, "type", "set-value") || "");
-    if (el.hasAttribute("component")) {
-        storage.set(el, value);
-        return dispatchEvents(el, bubbles, dispatch);
-    } else if (typeof value === "object") {
+
+    if (typeof value === "object" && !el.hasAttribute("component")) {
         value = JSON.stringify(value, null, 2);
     }
 
+    const nativeValueElement = ["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName);
+    if (!nativeValueElement && (
+        el.hasAttribute("component") ||
+        ((el.__cocreateEditor || el.hasAttribute("editor") ||
+            (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false")) &&
+            el.tagName !== "IFRAME")
+    )) {
+        el.value = value;
+        return dispatchEvents(el, bubbles, dispatch, value);
+    }
+
     if (["date", "time", "datetime", "datetime-local"].includes(el.getAttribute("type") || el.type)) {
         if (value) {
             const date = new Date(value);
@@ -82,9 +89,7 @@ const setValue = (el, value, dispatch) => {
         el.tagName == "TEXTAREA" ||
         el.tagName == "SELECT"
     ) {
-        // TODO: attribute config undefined when used with onload-value
-        let isCrdt = el.getAttribute("crdt");
-        if (isCrdt == "true" || el.type === "file") return;
+        if (el.type === "file") return;
 
         if (el.type == "checkbox") {
             let inputs = [el];
@@ -142,11 +147,28 @@ const setValue = (el, value, dispatch) => {
             el.value = value;
         }
         // dispatchEvents(el, bubbles, dispatch);
-    } else if (el.tagName === "IMG" || el.tagName === "SOURCE") {
-        el.src = value;
-    } else if (el.tagName === "IFRAME") {
-        if (el.hasAttribute("src")) el.src = value;
-        else el.srcdoc = value;
+    } else if (el.tagName === "IMG" || el.tagName === "SOURCE") {
+        el.src = value;
+    } else if (el.tagName === "IFRAME") {
+        if (el.hasAttribute("src")) el.src = value;
+        else if (el.hasAttribute("srcdoc")) el.srcdoc = value;
+        else {
+            const doc = el.contentDocument;
+            const parsedDocument = new DOMParser().parseFromString(
+                String(value),
+                "text/html"
+            );
+            const sourceRoot = parsedDocument.documentElement;
+            const targetRoot = doc.documentElement;
+
+            for (const attribute of Array.from(sourceRoot.attributes))
+                targetRoot.setAttribute(attribute.name, attribute.value);
+
+            targetRoot.replaceChildren(...Array.from(sourceRoot.childNodes));
+
+            for (const script of targetRoot.querySelectorAll("script"))
+                setScript(script, undefined, true);
+        }
     } else if (el.tagName === "SCRIPT") {
         setScript(el, value);
     } else if (el.hasAttribute("value")) {
@@ -234,12 +256,12 @@ const setValue = (el, value, dispatch) => {
         }
     }
 
-    dispatchEvents(el, bubbles, dispatch);
+    dispatchEvents(el, bubbles, dispatch, value);
 };
 
-function setScript(script, value) {
+function setScript(script, value, allowCrossOrigin = false) {
     let srcAttribute = script.src;
-    if (srcAttribute) {
+    if (srcAttribute && !allowCrossOrigin) {
         let pageOrigin = window.location.origin;
         let srcOrigin;
 
@@ -282,11 +304,12 @@ function __decryptPassword(str) {
     }
 }
 
-function dispatchEvents(el, bubbles = true, skip = true) {
+function dispatchEvents(el, bubbles = true, skip = true, value) {
     let inputEvent = new CustomEvent("input", {
         bubbles,
         detail: {
-            skip
+            skip,
+            value
         }
     });
 
@@ -299,7 +322,8 @@ function dispatchEvents(el, bubbles = true, skip = true) {
     let changeEvent = new CustomEvent("change", {
         bubbles,
         detail: {
-            skip
+            skip,
+            value
         }
     });
 

package/test/getAttributeAst.test.mjs

@@ -0,0 +1,104 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+globalThis.window = {
+	innerWidth: 1024,
+	innerHeight: 768,
+	location: {
+		href: "https://example.test/",
+		origin: "https://example.test",
+		protocol: "https:",
+		hostname: "example.test",
+		host: "example.test",
+		port: "",
+		pathname: "/",
+		hash: ""
+	},
+	addEventListener() {}
+};
+globalThis.localStorage = { getItem: () => null };
+
+class TestElement {
+	constructor(attributes, value) {
+		this.attributes = new Map(Object.entries(attributes));
+		this.value = value;
+	}
+
+	getAttribute(name) {
+		return this.attributes.has(name) ? this.attributes.get(name) : null;
+	}
+
+	getValue() {
+		return this.value;
+	}
+}
+
+globalThis.Element = TestElement;
+
+const { getAttribute, getAttributeAsync } = await import("../src/getAttribute.js");
+
+const labelExpression = JSON.stringify({
+	parsed: { $parse: "$value" },
+	$return: {
+		$if: {
+			$parsed: {
+				$eq: {
+					$true: "Enabled",
+					$false: "Disabled",
+					"true": "Enabled",
+					"false": "Disabled",
+					Enabled: "Enabled",
+					Disabled: "Disabled",
+					$else: ""
+				}
+			}
+		}
+	}
+});
+
+const directStringLabelExpression = JSON.stringify({
+	$if: {
+		$value: {
+			$eq: {
+				"true": "Enabled",
+				"false": "Disabled",
+				$else: ""
+			}
+		}
+	}
+});
+
+const quotedOperatorLabelExpression =
+	"$(`\u0024value` === 'true' ? 'Enabled' : 'Disabled')";
+
+test("input.value evaluates direct string equality branches", async () => {
+	for (const [value, expected] of [["true", "Enabled"], ["false", "Disabled"]]) {
+		const element = new TestElement({ "input.value": directStringLabelExpression }, value);
+
+		assert.equal(getAttribute(element, "input.value"), expected);
+		assert.equal(await getAttributeAsync(element, "input.value"), expected);
+	}
+});
+
+test("input.value evaluates backtick OperatorJS values as strings", () => {
+	for (const [value, expected] of [["true", "Enabled"], ["false", "Disabled"]]) {
+		const element = new TestElement({ "input.value": quotedOperatorLabelExpression }, value);
+		assert.equal(getAttribute(element, "input.value"), expected);
+	}
+});
+
+test("client getAttribute resolves $value from the element and maps it through AST", async () => {
+	for (const [value, expected] of [
+		[true, "Enabled"],
+		[false, "Disabled"],
+		["true", "Enabled"],
+		["false", "Disabled"],
+		["Enabled", "Enabled"],
+		["Disabled", "Disabled"]
+	]) {
+		const element = new TestElement({ "input.value": labelExpression }, value);
+
+		assert.equal(getAttribute(element, "input.value"), expected);
+		assert.equal(await getAttributeAsync(element, "input.value"), expected);
+	}
+});

package/test/value-handler.test.cjs

@@ -37,6 +37,9 @@ async function setup() {
         this.setExport('astSync', ({ executeAST }) => executeAST);
         this.setExport('astAsync', async ({ executeAST }) => executeAST);
     }, { context });
+    const getter = load('getValue.js');
+    await getter.link(() => utils);
+    await getter.evaluate();
     const setter = load('setValue.js');
     await setter.link(specifier => specifier === '@cocreate/utils' ? utils : load(specifier));
     await setter.evaluate();
@@ -77,7 +80,7 @@ test('component storage retains parsed objects and arrays', async () => {
         ['array.$keys', '{"a":1}', ['a']],
         ['boolean', 'false', false]
     ]) {
-        const el = new Element({ component: '', 'set-value-type': type });
+        const el = new Element({ component: '', 'set-value-type': type }, 'DIV');
         el.setValue(input);
         assert.equal(JSON.stringify(el.getValue()), JSON.stringify(expected));
         assert.deepEqual(el.events, ['input', 'change']);
@@ -87,7 +90,7 @@ test('component storage retains parsed objects and arrays', async () => {
 test('existing objects keep their identity in component storage', async () => {
     const Element = await setup();
     const value = { a: 1 };
-    const el = new Element({ component: '', 'set-value-type': 'object', 'set-value-uppercase': '' });
+    const el = new Element({ component: '', 'set-value-type': 'object', 'set-value-uppercase': '' }, 'DIV');
     el.setValue(value);
     assert.equal(el.getValue(), value);
 });
@@ -101,7 +104,7 @@ test('textarea serializes objects after setter transformations', async () => {
 
 test('regex may return a non-string without subsequent string operations failing', async () => {
     const Element = await setup();
-    const el = new Element({ component: '', 'set-value-split': ',', 'set-value-replace': 'a' });
+    const el = new Element({ component: '', 'set-value-split': ',', 'set-value-replace': 'a' }, 'DIV');
     el.setValue('a,b');
     assert.equal(JSON.stringify(el.getValue()), '["a","b"]');
 });
@@ -161,10 +164,10 @@ test('each option falls back independently to shared attributes', async () => {
 
 test('shared and scoped type conversion applies before component storage', async () => {
     const Element = await setup();
-    const shared = new Element({ component: '', 'value-type': 'object' });
+    const shared = new Element({ component: '', 'value-type': 'object' }, 'DIV');
     shared.setValue('{"a":1}');
     assert.equal(JSON.stringify(shared.getValue()), '{"a":1}');
-    const scoped = new Element({ component: '', 'value-type': 'object', 'set-value-type': 'array.$keys' });
+    const scoped = new Element({ component: '', 'value-type': 'object', 'set-value-type': 'array.$keys' }, 'DIV');
     scoped.setValue('{"a":1}');
     assert.equal(JSON.stringify(scoped.getValue()), '["a"]');
 });
@@ -246,10 +249,10 @@ test('explicit setter prefix and suffix build the rendered value', async () => {
     assert.equal(el.value, '/assets/images/providers/aws.svg');
 });
 
-test('iframes use src when the src attribute is present and srcdoc otherwise', async () => {
+test('iframes honor explicit src and srcdoc setter paths', async () => {
     const Element = await setup();
     const srcFrame = new Element({ src: '' }, 'IFRAME');
-    const srcdocFrame = new Element({}, 'IFRAME');
+    const srcdocFrame = new Element({ srcdoc: '' }, 'IFRAME');
 
     srcFrame.setValue('/assets/files/preview.html');
     srcdocFrame.setValue('<h1>Preview</h1>');
@@ -273,3 +276,45 @@ test('empty setter affixes override shared affixes', async () => {
     el.setValue('[aws]');
     assert.equal(el.value, '[aws]');
 });
+
+test('generic values prefer attributes then properties while explicit reads select the DOM', async () => {
+    const Element = await setup();
+    const el = new Element({ value: '' }, 'DIV');
+    el.value = 'property';
+    el.innerHTML = '<b>markup</b>';
+    el.textContent = 'markup';
+    assert.equal(el.getValue(), '');
+    assert.equal(await el.getValueAsync(), '');
+    assert.equal(el.getValue('textContent'), 'markup');
+    assert.equal(await el.getValueAsync('innerHTML'), '<b>markup</b>');
+    el.attributes.splice(0);
+    el.value = '';
+    assert.equal(el.getValue(), '');
+    delete el.value;
+    assert.equal(el.getValue(), '<b>markup</b>');
+});
+
+test('component values stay on the element across repeated asynchronous reads', async () => {
+    const Element = await setup();
+    const el = new Element({ component: '' }, 'DIV'), value = { source: 'stored' };
+    el.setValue(value);
+    assert.equal(el.value, value);
+    assert.equal(await el.getValueAsync(), value);
+    assert.equal(await el.getValueAsync(), value);
+    assert.equal(el.getValue(), value);
+});
+
+test('component and editor markers do not bypass native checkbox handling', async () => {
+    const Element = await setup();
+    for (const marker of ['component', 'editor', 'language']) {
+        const el = new Element({ [marker]: '', value: 'yes' }, 'INPUT');
+        el.type = 'checkbox';
+        el.value = 'yes';
+        el.setValue(true);
+        assert.equal(el.checked, true);
+        assert.equal(el.value, 'yes');
+        el.setValue(false);
+        assert.equal(el.checked, false);
+        assert.equal(el.getValue(), false);
+    }
+});