@joist/element 4.0.0-next.4 → 4.0.0-next.41

package/target/lib/template.test.js

@@ -0,0 +1,91 @@
+import { assert } from 'chai';
+import { template } from './template.js';
+const TESTS = [
+    function bindableNodes(el, root) {
+        it(`should intialize bindable nodes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            el.title = 'Hello World';
+            el.ariaLabel = 'This is the label';
+            el.ariaDescription = 'This is the description';
+            root.innerHTML = `
+        <span #:bind="title"></span>
+        
+        <ul>
+          <li #:bind="ariaLabel"></li>
+          <li #:bind="ariaDescription"></li>
+        </ul>
+      `;
+            const render = template().bind(el);
+            render();
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>');
+        });
+    },
+    function attributeNodes(el, root) {
+        it(`should intialize template attributes ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            el.ariaLabel = 'This is the label';
+            el.ariaDescription = 'This is the description';
+            root.innerHTML = `
+        <ul #:aria-label="ariaLabel" #:aria-description="ariaDescription"></ul>
+      `;
+            const render = template().bind(el);
+            render();
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), '<ul #:aria-label="ariaLabel" #:aria-description="ariaDescription" aria-label="This is the label" aria-description="This is the description"></ul>');
+        });
+    },
+    function customGetter(el, root) {
+        it(`should use custom getter for values ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            const data = {
+                title: 'Hello World',
+                ariaLabel: 'This is the label',
+                ariaDescription: 'This is the description'
+            };
+            root.innerHTML = `
+        <span #:bind="title"></span>
+        
+        <ul>
+          <li #:bind="ariaLabel"></li>
+          <li #:bind="ariaDescription"></li>
+        </ul>
+      `;
+            const render = template({ value: (key) => data[key] }).bind(el);
+            render();
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), '<span #:bind="title">Hello World</span><ul><li #:bind="ariaLabel">This is the label</li><li #:bind="ariaDescription">This is the description</li></ul>');
+        });
+    },
+    function customPrefix(el, root) {
+        it(`should use custom getter for values ${root instanceof ShadowRoot ? '(ShadowDOM)' : '(LightDOM)'}`, () => {
+            el.title = 'Hello World';
+            el.ariaLabel = 'This is the label';
+            el.ariaDescription = 'This is the description';
+            root.innerHTML = `
+        <span x-bind="title"></span>
+        
+        <ul x-aria-label="ariaLabel">
+          <li x-bind="ariaLabel"></li>
+          <li x-bind="ariaDescription"></li>
+        </ul>
+      `;
+            const render = template({ tokenPrefix: 'x-' }).bind(el);
+            render();
+            assert.equal(root.innerHTML
+                .split('\n')
+                .map((res) => res.trim())
+                .join(''), '<span x-bind="title">Hello World</span><ul x-aria-label="ariaLabel" aria-label="This is the label"><li x-bind="ariaLabel">This is the label</li><li x-bind="ariaDescription">This is the description</li></ul>');
+        });
+    }
+];
+for (let test of TESTS) {
+    const lightEl = document.createElement('div');
+    test(lightEl, lightEl);
+    const shadowEl = document.createElement('div');
+    test(shadowEl, shadowEl.attachShadow({ mode: 'open' }));
+}
+//# sourceMappingURL=template.test.js.map

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

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

package/target/lib.d.ts

@@ -1,6 +1,7 @@
-export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { element, LifeCycle } from './lib/element.js';
+export { element } from './lib/element.js';
 export { query } from './lib/query.js';
+export { ready } from './lib/lifecycle.js';
+export { attrChanged } from './lib/attr-changed.js';

package/target/lib.js

@@ -1,7 +1,8 @@
-export { JoistShadowResult as TemplateResult } from './lib/result.js';
 export { css, html, HTMLResult, CSSResult } from './lib/tags.js';
 export { attr } from './lib/attr.js';
 export { listen } from './lib/listen.js';
-export { element, LifeCycle } from './lib/element.js';
+export { element } from './lib/element.js';
 export { query } from './lib/query.js';
+export { ready } from './lib/lifecycle.js';
+export { attrChanged } from './lib/attr-changed.js';
 //# sourceMappingURL=lib.js.map

package/target/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,IAAI,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"lib.js","sourceRoot":"","sources":["../src/lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC"}