@joist/element 4.2.0 → 4.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/element",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/tags.test.ts

@@ -0,0 +1,99 @@
+import { assert } from "chai";
+import { CSSResult, HTMLResult, css, html } from "./tags.js";
+
+describe("tags", () => {
+  describe("html", () => {
+    it("should create an HTMLResult instance", () => {
+      const result = html`<div>Hello</div>`;
+      assert.instanceOf(result, HTMLResult);
+    });
+
+    it("should create a cloneable node", () => {
+      const result = html`<div>Hello</div>`;
+      const node = result.createNode();
+      assert.instanceOf(node, Node);
+      assert.equal(node.textContent, "Hello");
+    });
+
+    it("should apply HTML to shadow root", () => {
+      const div = document.createElement("div");
+      const shadow = div.attachShadow({ mode: "open" });
+
+      const result = html`<div>Hello</div>`;
+      result.apply(div);
+
+      assert.equal(shadow.innerHTML, "<div>Hello</div>");
+    });
+
+    it("should not apply HTML if no shadow root", () => {
+      const element = document.createElement("div");
+      const result = html`<div>Hello</div>`;
+      result.apply(element);
+
+      assert.equal(element.innerHTML, "");
+    });
+  });
+
+  describe("css", () => {
+    it("should create a CSSResult instance", () => {
+      const result = css`div { color: red; }`;
+      assert.instanceOf(result, CSSResult);
+    });
+
+    it("should create a stylesheet with correct content", () => {
+      const result = css`div { color: red; }`;
+
+      const element = document.createElement("div");
+      const shadow = element.attachShadow({ mode: "open" });
+      result.apply(element);
+
+      assert.equal(shadow.adoptedStyleSheets.length, 1);
+      assert.equal(
+        shadow.adoptedStyleSheets[0].cssRules[0].cssText,
+        "div { color: red; }",
+      );
+    });
+
+    it("should apply CSS to shadow root", () => {
+      const element = document.createElement("div");
+      const shadow = element.attachShadow({ mode: "open" });
+      const result = css`div { color: red; }`;
+      result.apply(element);
+
+      assert.equal(shadow.adoptedStyleSheets.length, 1);
+      assert.equal(
+        shadow.adoptedStyleSheets[0].cssRules[0].cssText,
+        "div { color: red; }",
+      );
+    });
+
+    it("should not apply CSS if no shadow root", () => {
+      const element = document.createElement("div");
+      const result = css`div { color: red; }`;
+      result.apply(element);
+
+      assert.equal(element.shadowRoot, null);
+    });
+
+    it("should append to existing style sheets", () => {
+      const element = document.createElement("div");
+      const shadow = element.attachShadow({ mode: "open" });
+
+      const sheet1 = css`div { color: red; }`;
+      const sheet2 = css`span { color: blue; }`;
+
+      sheet1.apply(element);
+      sheet2.apply(element);
+
+      assert.equal(shadow.adoptedStyleSheets.length, 2);
+      assert.equal(
+        shadow.adoptedStyleSheets[0].cssRules[0].cssText,
+        "div { color: red; }",
+      );
+      assert.equal(
+        shadow.adoptedStyleSheets[1].cssRules[0].cssText,
+        "span { color: blue; }",
+      );
+    });
+  });
+});

package/src/lib/tags.ts

@@ -1,16 +1,20 @@
 import type { ShadowResult } from "./result.js";
 
 export class HTMLResult<T extends HTMLElement> implements ShadowResult {
-  #template;
+  #template: HTMLTemplateElement;
 
   constructor(raw: TemplateStringsArray, ..._values: any[]) {
     this.#template = document.createElement("template");
     this.#template.innerHTML = concat(raw);
   }
 
+  createNode(): Node {
+    return document.importNode(this.#template.content, true);
+  }
+
   apply(el: T): void {
     if (el.shadowRoot) {
-      el.shadowRoot.append(this.#template.content.cloneNode(true));
+      el.shadowRoot.append(this.createNode());
     }
   }
 }

package/target/lib/tags.d.ts

@@ -2,6 +2,7 @@ import type { ShadowResult } from "./result.js";
 export declare class HTMLResult<T extends HTMLElement> implements ShadowResult {
     #private;
     constructor(raw: TemplateStringsArray, ..._values: any[]);
+    createNode(): Node;
     apply(el: T): void;
 }
 export declare function html<T extends HTMLElement>(strings: TemplateStringsArray, ...values: any[]): HTMLResult<T>;

package/target/lib/tags.js

@@ -4,9 +4,12 @@ export class HTMLResult {
         this.#template = document.createElement("template");
         this.#template.innerHTML = concat(raw);
     }
+    createNode() {
+        return document.importNode(this.#template.content, true);
+    }
     apply(el) {
         if (el.shadowRoot) {
-            el.shadowRoot.append(this.#template.content.cloneNode(true));
+            el.shadowRoot.append(this.createNode());
         }
     }
 }

package/target/lib/tags.js.map

@@ -1 +1 @@
-{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IACrB,SAAS,CAAC;IAEV,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACzC,CAAC;IAED,KAAK,CAAC,EAAK;QACT,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAClB,OAA6B,EAC7B,GAAG,MAAa;IAEhB,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,OAAO,SAAS;IACpB,MAAM,CAAC;IAEP,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,EAAe;QACnB,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,kBAAkB,GAAG;gBACjC,GAAG,EAAE,CAAC,UAAU,CAAC,kBAAkB;gBACnC,IAAI,CAAC,MAAM;aACZ,CAAC;QACJ,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IACrB,SAAS,CAAsB;IAE/B,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,CAAC,SAAS,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACzC,CAAC;IAED,UAAU;QACR,OAAO,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,KAAK,CAAC,EAAK;QACT,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAClB,OAA6B,EAC7B,GAAG,MAAa;IAEhB,OAAO,IAAI,UAAU,CAAC,OAAO,EAAE,GAAG,MAAM,CAAC,CAAC;AAC5C,CAAC;AAED,MAAM,OAAO,SAAS;IACpB,MAAM,CAAC;IAEP,YAAY,GAAyB,EAAE,GAAG,OAAc;QACtD,IAAI,CAAC,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;IACvC,CAAC;IAED,KAAK,CAAC,EAAe;QACnB,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;YAClB,EAAE,CAAC,UAAU,CAAC,kBAAkB,GAAG;gBACjC,GAAG,EAAE,CAAC,UAAU,CAAC,kBAAkB;gBACnC,IAAI,CAAC,MAAM;aACZ,CAAC;QACJ,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC;AAED,SAAS,MAAM,CAAC,OAA6B;IAC3C,IAAI,GAAG,GAAG,EAAE,CAAC;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC"}

package/target/lib/tags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/target/lib/tags.test.js

@@ -0,0 +1,69 @@
+import { assert } from "chai";
+import { CSSResult, HTMLResult, css, html } from "./tags.js";
+describe("tags", () => {
+    describe("html", () => {
+        it("should create an HTMLResult instance", () => {
+            const result = html `<div>Hello</div>`;
+            assert.instanceOf(result, HTMLResult);
+        });
+        it("should create a cloneable node", () => {
+            const result = html `<div>Hello</div>`;
+            const node = result.createNode();
+            assert.instanceOf(node, Node);
+            assert.equal(node.textContent, "Hello");
+        });
+        it("should apply HTML to shadow root", () => {
+            const div = document.createElement("div");
+            const shadow = div.attachShadow({ mode: "open" });
+            const result = html `<div>Hello</div>`;
+            result.apply(div);
+            assert.equal(shadow.innerHTML, "<div>Hello</div>");
+        });
+        it("should not apply HTML if no shadow root", () => {
+            const element = document.createElement("div");
+            const result = html `<div>Hello</div>`;
+            result.apply(element);
+            assert.equal(element.innerHTML, "");
+        });
+    });
+    describe("css", () => {
+        it("should create a CSSResult instance", () => {
+            const result = css `div { color: red; }`;
+            assert.instanceOf(result, CSSResult);
+        });
+        it("should create a stylesheet with correct content", () => {
+            const result = css `div { color: red; }`;
+            const element = document.createElement("div");
+            const shadow = element.attachShadow({ mode: "open" });
+            result.apply(element);
+            assert.equal(shadow.adoptedStyleSheets.length, 1);
+            assert.equal(shadow.adoptedStyleSheets[0].cssRules[0].cssText, "div { color: red; }");
+        });
+        it("should apply CSS to shadow root", () => {
+            const element = document.createElement("div");
+            const shadow = element.attachShadow({ mode: "open" });
+            const result = css `div { color: red; }`;
+            result.apply(element);
+            assert.equal(shadow.adoptedStyleSheets.length, 1);
+            assert.equal(shadow.adoptedStyleSheets[0].cssRules[0].cssText, "div { color: red; }");
+        });
+        it("should not apply CSS if no shadow root", () => {
+            const element = document.createElement("div");
+            const result = css `div { color: red; }`;
+            result.apply(element);
+            assert.equal(element.shadowRoot, null);
+        });
+        it("should append to existing style sheets", () => {
+            const element = document.createElement("div");
+            const shadow = element.attachShadow({ mode: "open" });
+            const sheet1 = css `div { color: red; }`;
+            const sheet2 = css `span { color: blue; }`;
+            sheet1.apply(element);
+            sheet2.apply(element);
+            assert.equal(shadow.adoptedStyleSheets.length, 2);
+            assert.equal(shadow.adoptedStyleSheets[0].cssRules[0].cssText, "div { color: red; }");
+            assert.equal(shadow.adoptedStyleSheets[1].cssRules[0].cssText, "span { color: blue; }");
+        });
+    });
+});
+//# sourceMappingURL=tags.test.js.map

package/target/lib/tags.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.test.js","sourceRoot":"","sources":["../../src/lib/tags.test.ts"],"names":[],"mappings":"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"}