@joist/templating 4.2.4-next.7 → 4.2.4-next.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/templating",
-  "version": "4.2.4-next.7",
+  "version": "4.2.4-next.9",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",

package/src/lib/define.ts

@@ -3,3 +3,4 @@ import "./elements/for.element.js";
 import "./elements/if.element.js";
 import "./elements/bind.element.js";
 import "./elements/value.element.js";
+import "./elements/scope.element.js";

package/src/lib/elements/scope.element.test.ts

@@ -0,0 +1,32 @@
+import "./scope.element.js";
+import "./value.element.js";
+
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+import { JoistScopeElement } from "./scope.element.js";
+
+describe("j-scope", () => {
+  it("should render its children", () => {
+    const element = fixtureSync<JoistScopeElement>(html`
+      <j-scope>
+        <div>Test Content</div>
+      </j-scope>
+    `);
+
+    assert.equal(element.textContent?.trim(), "Test Content");
+  });
+
+  it("should set and get scope property", async () => {
+    const element = fixtureSync<JoistScopeElement>(html`
+      <j-scope>
+        <j-val bind="scope.foo"></j-val>
+      </j-scope>
+    `);
+
+    element.scope = { foo: "bar" };
+
+    await Promise.resolve();
+
+    assert.equal(element.textContent?.trim(), "bar");
+  });
+});

package/src/lib/elements/scope.element.ts

@@ -0,0 +1,19 @@
+import { element, css, html } from "@joist/element";
+
+import { bind } from "../bind.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "j-scope": JoistScopeElement;
+  }
+}
+
+@element({
+  tagName: "j-scope",
+  // prettier-ignore
+  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
+})
+export class JoistScopeElement extends HTMLElement {
+  @bind()
+  accessor scope: any = null;
+}

package/target/lib/define.d.ts

@@ -3,3 +3,4 @@ import "./elements/for.element.js";
 import "./elements/if.element.js";
 import "./elements/bind.element.js";
 import "./elements/value.element.js";
+import "./elements/scope.element.js";

package/target/lib/define.js

@@ -3,4 +3,5 @@ import "./elements/for.element.js";
 import "./elements/if.element.js";
 import "./elements/bind.element.js";
 import "./elements/value.element.js";
+import "./elements/scope.element.js";
 //# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AACrC,OAAO,6BAA6B,CAAC"}

package/target/lib/elements/scope.element.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "j-scope": JoistScopeElement;
+    }
+}
+export declare class JoistScopeElement extends HTMLElement {
+    accessor scope: any;
+}

package/target/lib/elements/scope.element.js

@@ -0,0 +1,38 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { element, css, html } from "@joist/element";
+import { bind } from "../bind.js";
+let JoistScopeElement = (() => {
+    let _classDecorators = [element({
+            tagName: "j-scope",
+            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _scope_decorators;
+    let _scope_initializers = [];
+    let _scope_extraInitializers = [];
+    var JoistScopeElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _scope_decorators = [bind()];
+            __esDecorate(this, null, _scope_decorators, { kind: "accessor", name: "scope", static: false, private: false, access: { has: obj => "scope" in obj, get: obj => obj.scope, set: (obj, value) => { obj.scope = value; } }, metadata: _metadata }, _scope_initializers, _scope_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            JoistScopeElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #scope_accessor_storage = __runInitializers(this, _scope_initializers, null);
+        get scope() { return this.#scope_accessor_storage; }
+        set scope(value) { this.#scope_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _scope_extraInitializers);
+        }
+    };
+    return JoistScopeElement = _classThis;
+})();
+export { JoistScopeElement };
+//# sourceMappingURL=scope.element.js.map

package/target/lib/elements/scope.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.element.js","sourceRoot":"","sources":["../../../src/lib/elements/scope.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;IAarB,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,SAAS;YAElB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;iCAC/C,IAAI,EAAE;YACP,oKAAS,KAAK,6BAAL,KAAK,qFAAa;YAF7B,6KAGC;;;YAHY,uDAAiB;;QAE5B,uEAAsB,IAAI,EAAC;QAA3B,IAAS,KAAK,2CAAa;QAA3B,IAAS,KAAK,iDAAa;;;;;;;;SAFhB,iBAAiB"}

package/target/lib/elements/scope.element.test.d.ts

@@ -0,0 +1,2 @@
+import "./scope.element.js";
+import "./value.element.js";

package/target/lib/elements/scope.element.test.js

@@ -0,0 +1,25 @@
+import "./scope.element.js";
+import "./value.element.js";
+import { fixtureSync, html } from "@open-wc/testing";
+import { assert } from "chai";
+describe("j-scope", () => {
+    it("should render its children", () => {
+        const element = fixtureSync(html `
+      <j-scope>
+        <div>Test Content</div>
+      </j-scope>
+    `);
+        assert.equal(element.textContent?.trim(), "Test Content");
+    });
+    it("should set and get scope property", async () => {
+        const element = fixtureSync(html `
+      <j-scope>
+        <j-val bind="scope.foo"></j-val>
+      </j-scope>
+    `);
+        element.scope = { foo: "bar" };
+        await Promise.resolve();
+        assert.equal(element.textContent?.trim(), "bar");
+    });
+});
+//# sourceMappingURL=scope.element.test.js.map

package/target/lib/elements/scope.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.element.test.js","sourceRoot":"","sources":["../../../src/lib/elements/scope.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAG9B,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,OAAO,GAAG,WAAW,CAAoB,IAAI,CAAA;;;;KAIlD,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,cAAc,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,OAAO,GAAG,WAAW,CAAoB,IAAI,CAAA;;;;KAIlD,CAAC,CAAC;QAEH,OAAO,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;QAE/B,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAExB,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/src/lib/elements/scope.ts

@@ -1,39 +0,0 @@
-import { attr, element, css, html, listen } from "@joist/element";
-
-import type { JoistValueEvent } from "../events.js";
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "j-scope": JoistScopeElement;
-  }
-}
-
-@element({
-  tagName: "j-val",
-  // prettier-ignore
-  shadowDom: [css`:host{display: contents;}`, html`<slot></slot>`],
-})
-export class JoistScopeElement extends HTMLElement {
-  @attr()
-  accessor name = "";
-
-  @attr()
-  accessor value = "";
-
-  #binding: JoistValueEvent | null = null;
-
-  @listen("joist::value")
-  onJoistValueFound(e: JoistValueEvent): void {
-    if (e.expression.bindTo === this.name) {
-      e.stopPropagation();
-
-      this.#binding = e;
-
-      this.#binding.update({ oldValue: null, newValue: this.value });
-    }
-  }
-
-  attributeChangedCallback(_: string, oldValue: string, newValue: string): void {
-    this.#binding?.update({ oldValue, newValue });
-  }
-}

package/target/lib/elements/scope.d.ts

@@ -1,13 +0,0 @@
-import type { JoistValueEvent } from "../events.js";
-declare global {
-    interface HTMLElementTagNameMap {
-        "j-scope": JoistScopeElement;
-    }
-}
-export declare class JoistScopeElement extends HTMLElement {
-    #private;
-    accessor name: string;
-    accessor value: string;
-    onJoistValueFound(e: JoistValueEvent): void;
-    attributeChangedCallback(_: string, oldValue: string, newValue: string): void;
-}

package/target/lib/elements/scope.js

@@ -1,56 +0,0 @@
-import { __esDecorate, __runInitializers } from "tslib";
-import { attr, element, css, html, listen } from "@joist/element";
-let JoistScopeElement = (() => {
-    let _classDecorators = [element({
-            tagName: "j-val",
-            shadowDom: [css `:host{display: contents;}`, html `<slot></slot>`],
-        })];
-    let _classDescriptor;
-    let _classExtraInitializers = [];
-    let _classThis;
-    let _classSuper = HTMLElement;
-    let _instanceExtraInitializers = [];
-    let _name_decorators;
-    let _name_initializers = [];
-    let _name_extraInitializers = [];
-    let _value_decorators;
-    let _value_initializers = [];
-    let _value_extraInitializers = [];
-    let _onJoistValueFound_decorators;
-    var JoistScopeElement = class extends _classSuper {
-        static { _classThis = this; }
-        static {
-            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _name_decorators = [attr()];
-            _value_decorators = [attr()];
-            _onJoistValueFound_decorators = [listen("joist::value")];
-            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
-            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
-            __esDecorate(this, null, _onJoistValueFound_decorators, { kind: "method", name: "onJoistValueFound", static: false, private: false, access: { has: obj => "onJoistValueFound" in obj, get: obj => obj.onJoistValueFound }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-            JoistScopeElement = _classThis = _classDescriptor.value;
-            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-            __runInitializers(_classThis, _classExtraInitializers);
-        }
-        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
-        get name() { return this.#name_accessor_storage; }
-        set name(value) { this.#name_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ""));
-        get value() { return this.#value_accessor_storage; }
-        set value(value) { this.#value_accessor_storage = value; }
-        #binding = (__runInitializers(this, _value_extraInitializers), null);
-        onJoistValueFound(e) {
-            if (e.expression.bindTo === this.name) {
-                e.stopPropagation();
-                this.#binding = e;
-                this.#binding.update({ oldValue: null, newValue: this.value });
-            }
-        }
-        attributeChangedCallback(_, oldValue, newValue) {
-            this.#binding?.update({ oldValue, newValue });
-        }
-    };
-    return JoistScopeElement = _classThis;
-})();
-export { JoistScopeElement };
-//# sourceMappingURL=scope.js.map

package/target/lib/elements/scope.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"scope.js","sourceRoot":"","sources":["../../../src/lib/elements/scope.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAerD,iBAAiB;4BAL7B,OAAO,CAAC;YACP,OAAO,EAAE,OAAO;YAEhB,SAAS,EAAE,CAAC,GAAG,CAAA,2BAA2B,EAAE,IAAI,CAAA,eAAe,CAAC;SACjE,CAAC;;;;sBACqC,WAAW;;;;;;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;iCAGN,IAAI,EAAE;6CAKN,MAAM,CAAC,cAAc,CAAC;YAPvB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,sMAAA,iBAAiB,6DAQhB;YAlBH,6KAuBC;;;YAvBY,uDAAiB;;QAE5B,0BAFW,mDAAiB,8CAEZ,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,QAAQ,uDAA2B,IAAI,EAAC;QAGxC,iBAAiB,CAAC,CAAkB;YAClC,IAAI,CAAC,CAAC,UAAU,CAAC,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBACtC,CAAC,CAAC,eAAe,EAAE,CAAC;gBAEpB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;gBAElB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YACjE,CAAC;QACH,CAAC;QAED,wBAAwB,CAAC,CAAS,EAAE,QAAgB,EAAE,QAAgB;YACpE,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChD,CAAC;;;;SAtBU,iBAAiB"}