@joist/element 2.0.1-next.1637807849.0 → 3.0.0-2

package/README.md

@@ -1,120 +1,36 @@
-# Di
+# Element
 
-Dependency Injection in ~800 bytes. Can be used with and without decorators.
+Create a shadow root and apply styles and html as defined
 
 #### Installation:
 
 ```BASH
-npm i @joist/di
+npm i @joist/element
 ```
 
 #### Example:
 
 ```TS
-import { Injector } from '@joist/di';
-
-class FooService {
-  sayHello() {
-    return 'Hello From FooService';
-  }
-}
-
-class BarService {
-  static deps = [FooService];
-
-  constructor(private foo: FooService) {}
-
-  sayHello() {
-    return 'Hello From BarService and ' + this.foo.sayHello();
-  }
-}
-
-const app = new Injector();
-
-app.get(BarService).sayHello(); // Hello from BarService and Hello from FooService
-```
-
-```TS
-import { Injector } from '@joist/di';
-import { inject } from '@joist/di/decorators';
-
-class FooService {
-  sayHello() {
-    return 'Hello From FooService';
-  }
-}
-
-class BarService {
-  constructor(@inject(FooService) private foo: FooService) {}
-
-  sayHello() {
-    return 'Hello From BarService and ' + this.foo.sayHello();
-  }
-}
-
-const app = new Injector();
-
-app.get(BarService).sayHello(); // Hello from BarService and Hello from FooService
-```
-
-#### Override A Service:
-
-```TS
-import { Injector } from '@joist/di';
-import { inject } from '@joist/di/decorators';
-
-class FooService {
-  sayHello() {
-    return 'Hello From FooService';
-  }
-}
-
-class BarService {
-  constructor(@inject(FooService) private foo: FooService) {}
-
-  sayHello() {
-    return 'Hello From BarService and ' + this.foo.sayHello();
-  }
-}
-
-// Override FooService with an alternate implementation
-const app = new Injector({
-  providers: [
-    {
-      provide: FooService,
-      use: class extends FooService {
-        sayHello() {
-          return 'IT HAS BEEN OVERRIDEN'
-        }
-      }
+import { styles, template, css, html, define, listen, attr } from '@joist/element';
+
+export class MyElement extends HTMLElement {
+  @define static tagName = 'my-element';
+  
+  @styles styles = css`
+    :host {
+      display: block;
+      color: red;
     }
-  ]
-});
-
-app.get(BarService).sayHello(); // Hello from BarService and IT HAS BEEN OVERRIDEN
-```
-
-#### Root Service
-
-If you have nested injectors and you still want singleton instances mark your service as shown or decorate with `@service()`
-
-```TS
-class FooService {
-  static providedInRoot = true;
-
-  sayHello() {
-    return 'Hello From FooService';
-  }
-}
-```
-
-```TS
-import { service } from '@joist/di/decorators';
-
-@service()
-class FooService {
-  sayHello() {
-    return 'Hello From FooService';
+  `;
+
+  @template template = html`
+    <slot></slot>
+  `;
+  
+  @attr accessor value = 0;
+  
+  @listen('click') onClick() {
+    console.log('clicked!')
   }
 }
 ```

package/package.json

@@ -1,34 +1,30 @@
 {
   "name": "@joist/element",
-  "version": "2.0.1-next.1637807849.0+b8e14a4",
-  "main": "./target/build/lib.js",
-  "module": "./target/build/lib.js",
+  "version": "3.0.0-2",
+  "main": "./target/lib.js",
+  "module": "./target/lib.js",
   "exports": {
     ".": {
-      "import": "./target/build/lib.js"
+      "import": "./target/lib.js"
     },
-    "./observable": {
-      "import": "./target/build/lib/observable.js"
-    },
-    "./styled": {
-      "import": "./target/build/lib/styled.js"
+    "./*": {
+      "import": "./target/lib/*.js"
     }
   },
   "files": [
-    "target/build",
-    "observable/package.json",
-    "styled/package.json"
+    "target"
   ],
   "sideEffects": false,
-  "description": "Dependency Injection in ~800 bytes",
+  "description": "Intelligently apply styles to WebComponents",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/deebloo/joist.git"
   },
   "keywords": [
     "TypeScript",
-    "DI",
-    "Dependency Injection"
+    "WebComponents",
+    "CSS",
+    "ShadowDOM"
   ],
   "author": "deebloo",
   "license": "MIT",
@@ -39,8 +35,27 @@
     "access": "public"
   },
   "scripts": {
-    "test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8000",
-    "build": "tsc -p tsconfig.build.json"
+    "test": "wireit",
+    "build": "wireit"
+  },
+  "wireit": {
+    "build": {
+      "command": "tsc --build --pretty",
+      "clean": "if-file-deleted",
+      "files": [
+        "src/**",
+        "tsconfig.json"
+      ],
+      "output": [
+        "target/**"
+      ]
+    },
+    "test": {
+      "command": "wtr --config ../../wtr.config.mjs --port 8001",
+      "dependencies": [
+        "build"
+      ]
+    }
   },
-  "gitHead": "b8e14a42021f05d089c7dfe17fc426e10b1a50f0"
+  "gitHead": "e6e36105708633b45a0585b066a89f07a7ac78cb"
 }

package/target/lib/attr.d.ts

@@ -0,0 +1 @@
+export declare function attr<This extends HTMLElement>({ get, set }: ClassAccessorDecoratorTarget<This, unknown>, ctx: ClassAccessorDecoratorContext<This>): ClassAccessorDecoratorResult<This, any>;

package/target/lib/attr.js

@@ -0,0 +1,76 @@
+export function attr({ get, set }, ctx) {
+    return {
+        init(value) {
+            if (typeof ctx.name === 'string') {
+                if (this.hasAttribute(ctx.name)) {
+                    const attr = this.getAttribute(ctx.name);
+                    // treat as boolean
+                    if (attr === '') {
+                        return true;
+                    }
+                    // treat as number
+                    if (typeof value === 'number') {
+                        return Number(attr);
+                    }
+                    // treat as string
+                    return attr;
+                }
+                // should set attributes AFTER init to allow setup to complete
+                // If we do not do this the attributeChangedCallback could fire before init.
+                // If the user attempts to read or write to this property it will fail
+                // this also normalizes when the attributeChangedCallback is called in different rendering scenarios
+                Promise.resolve().then(() => {
+                    const cached = get.call(this);
+                    if (cached === true) {
+                        // set boolean attribute
+                        this.setAttribute(ctx.name.toString(), '');
+                    }
+                    else {
+                        // set key/value attribute
+                        const attrValue = String(cached);
+                        if (attrValue !== this.getAttribute(ctx.name.toString())) {
+                            this.setAttribute(ctx.name.toString(), String(cached));
+                        }
+                    }
+                });
+            }
+            return value;
+        },
+        set(value) {
+            if (typeof ctx.name === 'string') {
+                if (typeof value === 'boolean') {
+                    if (value) {
+                        this.setAttribute(ctx.name, '');
+                    }
+                    else {
+                        this.removeAttribute(ctx.name);
+                    }
+                }
+                else {
+                    this.setAttribute(ctx.name, String(value));
+                }
+            }
+            return set.call(this, value);
+        },
+        get() {
+            const ogValue = get.call(this);
+            if (typeof ctx.name === 'string') {
+                const attr = this.getAttribute(ctx.name);
+                // treat as attribute
+                if (attr === '') {
+                    return true;
+                }
+                // treat as number
+                if (typeof ogValue === 'number') {
+                    return Number(attr);
+                }
+                // treat as string
+                return attr;
+            }
+            else {
+                return ogValue;
+            }
+        },
+    };
+}
+//# sourceMappingURL=attr.js.map

package/target/lib/attr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attr.js","sourceRoot":"","sources":["../../src/lib/attr.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAClB,EAAE,GAAG,EAAE,GAAG,EAA+C,EACzD,GAAwC;IAExC,OAAO;QACL,IAAI,CAAC,KAAc;YACjB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAEzC,mBAAmB;oBACnB,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,OAAO,IAAI,CAAC;qBACb;oBAED,kBAAkB;oBAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;wBAC7B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;qBACrB;oBAED,kBAAkB;oBAClB,OAAO,IAAI,CAAC;iBACb;gBAED,8DAA8D;gBAC9D,4EAA4E;gBAC5E,sEAAsE;gBACtE,oGAAoG;gBACpG,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;oBAC1B,MAAM,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAE9B,IAAI,MAAM,KAAK,IAAI,EAAE;wBACnB,wBAAwB;wBACxB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;qBAC5C;yBAAM;wBACL,0BAA0B;wBAC1B,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;wBAEjC,IAAI,SAAS,KAAK,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE;4BACxD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;yBACxD;qBACF;gBACH,CAAC,CAAC,CAAC;aACJ;YAED,OAAO,KAAK,CAAC;QACf,CAAC;QACD,GAAG,CAAC,KAAc;YAChB,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;oBAC9B,IAAI,KAAK,EAAE;wBACT,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;qBACjC;yBAAM;wBACL,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;qBAChC;iBACF;qBAAM;oBACL,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC5C;aACF;YAED,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/B,CAAC;QACD,GAAG;YACD,MAAM,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAE/B,IAAI,OAAO,GAAG,CAAC,IAAI,KAAK,QAAQ,EAAE;gBAChC,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAEzC,qBAAqB;gBACrB,IAAI,IAAI,KAAK,EAAE,EAAE;oBACf,OAAO,IAAI,CAAC;iBACb;gBAED,kBAAkB;gBAClB,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE;oBAC/B,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;iBACrB;gBAED,kBAAkB;gBAClB,OAAO,IAAI,CAAC;aACb;iBAAM;gBACL,OAAO,OAAO,CAAC;aAChB;QACH,CAAC;KACF,CAAC;AACJ,CAAC"}

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

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

package/target/lib/attr.test.js

@@ -0,0 +1,122 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { expect, fixture, html } from '@open-wc/testing';
+import { attr } from './attr.js';
+describe('observable: attr()', () => {
+    it('should write default value to attribute', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers = [];
+            let _hello_decorators;
+            let _hello_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _hello_decorators = [attr];
+                    __esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers);
+                }
+                #hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _hello_initializers, 'world'));
+                get hello() { return this.#hello_accessor_storage; }
+                set hello(value) { this.#hello_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-1', MyElement);
+        const el = await fixture(html `<attr-test-1></attr-test-1>`);
+        expect(el.getAttribute('hello')).to.equal('world');
+    });
+    it('should read default value from attribute', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_1 = [];
+            let _hello_decorators;
+            let _hello_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _hello_decorators = [attr];
+                    __esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers_1);
+                }
+                #hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_1), __runInitializers(this, _hello_initializers, 'world'));
+                get hello() { return this.#hello_accessor_storage; }
+                set hello(value) { this.#hello_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-2', MyElement);
+        const el = await fixture(html `<attr-test-2 hello="foo"></attr-test-2>`);
+        expect(el.hello).to.equal('foo');
+    });
+    it('should write boolean attr values', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_2 = [];
+            let _hello_decorators;
+            let _hello_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _hello_decorators = [attr];
+                    __esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers_2);
+                }
+                #hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_2), __runInitializers(this, _hello_initializers, true));
+                get hello() { return this.#hello_accessor_storage; }
+                set hello(value) { this.#hello_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-3', MyElement);
+        const el = await fixture(html `<attr-test-3></attr-test-3>`);
+        expect(el.getAttribute('hello')).to.equal('');
+        el.hello = false;
+        expect(el.getAttribute('hello')).to.equal(null);
+    });
+    it('should parse to boolean values', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_3 = [];
+            let _hello_decorators;
+            let _hello_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _hello_decorators = [attr];
+                    __esDecorate(this, null, _hello_decorators, { kind: "accessor", name: "hello", static: false, private: false, access: { has: obj => "hello" in obj, get: obj => obj.hello, set: (obj, value) => { obj.hello = value; } } }, _hello_initializers, _instanceExtraInitializers_3);
+                }
+                #hello_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_3), __runInitializers(this, _hello_initializers, false));
+                get hello() { return this.#hello_accessor_storage; }
+                set hello(value) { this.#hello_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-4', MyElement);
+        const el = await fixture(html `<attr-test-4 hello></attr-test-4>`);
+        expect(el.hello).to.equal(true);
+    });
+    it('should read attributes as number if prop is of type number', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_4 = [];
+            let _value_decorators;
+            let _value_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _value_decorators = [attr];
+                    __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; } } }, _value_initializers, _instanceExtraInitializers_4);
+                }
+                #value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_4), __runInitializers(this, _value_initializers, 0));
+                get value() { return this.#value_accessor_storage; }
+                set value(value) { this.#value_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-5', MyElement);
+        const el = await fixture(html `<attr-test-5 value="100"></attr-test-5>`);
+        expect(el.value).to.equal(100);
+    });
+    it('should NOT read attributes as number if prop is of type string', async () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_5 = [];
+            let _value_decorators;
+            let _value_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _value_decorators = [attr];
+                    __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; } } }, _value_initializers, _instanceExtraInitializers_5);
+                }
+                #value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers_5), __runInitializers(this, _value_initializers, '0'));
+                get value() { return this.#value_accessor_storage; }
+                set value(value) { this.#value_accessor_storage = value; }
+            };
+        })();
+        customElements.define('attr-test-6', MyElement);
+        const el = await fixture(html `<attr-test-6 value="100"></attr-test-6>`);
+        expect(el.value).to.equal('100');
+    });
+});
+//# sourceMappingURL=attr.test.js.map

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

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

package/target/lib/listen.d.ts

@@ -0,0 +1 @@
+export declare function listen<This extends HTMLElement>(event: string): (value: (e: Event) => void, ctx: ClassMethodDecoratorContext<This>) => void;

package/target/lib/listen.js

@@ -0,0 +1,13 @@
+export function listen(event) {
+    return (value, ctx) => {
+        ctx.addInitializer(function () {
+            // method initializers are run before fields and accessors.
+            // we want to wait till after all have run so we can check if there is a shadowRoot or not.
+            Promise.resolve().then(() => {
+                const root = this.shadowRoot || this;
+                root.addEventListener(event, value.bind(this));
+            });
+        });
+    };
+}
+//# sourceMappingURL=listen.js.map

package/target/lib/listen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listen.js","sourceRoot":"","sources":["../../src/lib/listen.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAA2B,KAAa;IAC5D,OAAO,CAAC,KAAyB,EAAE,GAAsC,EAAE,EAAE;QAC3E,GAAG,CAAC,cAAc,CAAC;YACjB,2DAA2D;YAC3D,2FAA2F;YAC3F,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC;gBAErC,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;YACjD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/result.d.ts

@@ -0,0 +1,6 @@
+export declare abstract class TemplateResult {
+    strings: TemplateStringsArray;
+    values: any[];
+    constructor(raw: TemplateStringsArray, ...values: any[]);
+    abstract apply(root: ShadowRoot): void;
+}

package/target/lib/result.js

@@ -0,0 +1,9 @@
+export class TemplateResult {
+    strings;
+    values;
+    constructor(raw, ...values) {
+        this.strings = raw;
+        this.values = values;
+    }
+}
+//# sourceMappingURL=result.js.map

package/target/lib/result.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"result.js","sourceRoot":"","sources":["../../src/lib/result.ts"],"names":[],"mappings":"AAAA,MAAM,OAAgB,cAAc;IAClC,OAAO,CAAuB;IAC9B,MAAM,CAAQ;IAEd,YAAY,GAAyB,EAAE,GAAG,MAAa;QACrD,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;CAGF"}

package/target/lib/shadow.d.ts

@@ -0,0 +1,2 @@
+import { TemplateResult } from './result.js';
+export declare function shadow<This extends HTMLElement, T extends TemplateResult>(_: undefined, ctx: ClassFieldDecoratorContext<This, T>): (result: T) => T;

package/target/lib/shadow.js

@@ -0,0 +1,16 @@
+export function shadow(_, ctx) {
+    const shadow = applyShadow(ctx);
+    return (result) => {
+        const root = shadow();
+        result.apply(root);
+        return result;
+    };
+}
+function applyShadow(ctx) {
+    let shadow;
+    ctx.addInitializer(function () {
+        shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
+    });
+    return () => shadow;
+}
+//# sourceMappingURL=shadow.js.map

package/target/lib/shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.js","sourceRoot":"","sources":["../../src/lib/shadow.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,MAAM,CACpB,CAAY,EACZ,GAAwC;IAExC,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;IAEhC,OAAO,CAAC,MAAS,EAAE,EAAE;QACnB,MAAM,IAAI,GAAG,MAAM,EAAE,CAAC;QAEtB,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAEnB,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAClB,GAAyE;IAEzE,IAAI,MAAkB,CAAC;IAEvB,GAAG,CAAC,cAAc,CAAC;QACjB,MAAM,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC;AACtB,CAAC"}

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

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

package/target/lib/shadow.test.js

@@ -0,0 +1,54 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { expect } from '@open-wc/testing';
+import { css, html } from './tags.js';
+import { shadow } from './shadow.js';
+describe('template', () => {
+    it('should apply a stylesheet', () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers = [];
+            let _styles_decorators;
+            let _styles_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _styles_decorators = [shadow];
+                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } } }, _styles_initializers, _instanceExtraInitializers);
+                }
+                styles = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _styles_initializers, css `
+        :host {
+          display: flex;
+        }
+      `));
+            };
+        })();
+        customElements.define('template-1', MyElement);
+        const el = new MyElement();
+        expect(el.shadowRoot.adoptedStyleSheets.length).to.eq(1);
+    });
+    it('should apply html', () => {
+        let MyElement = (() => {
+            let _instanceExtraInitializers_1 = [];
+            let _styles_decorators;
+            let _styles_initializers = [];
+            let _template_decorators;
+            let _template_initializers = [];
+            return class MyElement extends HTMLElement {
+                static {
+                    _styles_decorators = [shadow];
+                    _template_decorators = [shadow];
+                    __esDecorate(null, null, _styles_decorators, { kind: "field", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles, set: (obj, value) => { obj.styles = value; } } }, _styles_initializers, _instanceExtraInitializers_1);
+                    __esDecorate(null, null, _template_decorators, { kind: "field", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template, set: (obj, value) => { obj.template = value; } } }, _template_initializers, _instanceExtraInitializers_1);
+                }
+                styles = (__runInitializers(this, _instanceExtraInitializers_1), __runInitializers(this, _styles_initializers, css `
+        :host {
+          display: flex;
+        }
+      `));
+                template = __runInitializers(this, _template_initializers, html `<slot></slot>`);
+            };
+        })();
+        customElements.define('template-2', MyElement);
+        const el = new MyElement();
+        expect(el.shadowRoot?.innerHTML).to.eq('<slot></slot>');
+    });
+});
+//# sourceMappingURL=shadow.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.test.js","sourceRoot":"","sources":["../../src/lib/shadow.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;YAC7B,SAAS;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,MAAM;oBAAC,oKAAA,MAAM,6BAAN,MAAM,mEAIZ;;gBAJM,MAAM,uGAAG,GAAG,CAAA;;;;OAInB,GAAC;;;QAGJ,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAW,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,GAAG,EAAE;YACrB,SAAS;;;;;;yBAAT,SAAU,SAAQ,WAAW;;0CAChC,MAAM;4CAMN,MAAM;oBANC,oKAAA,MAAM,6BAAN,MAAM,qEAIZ;oBAEM,0KAAA,QAAQ,6BAAR,QAAQ,uEAAuB;;gBAN/B,MAAM,yGAAG,GAAG,CAAA;;;;OAInB,GAAC;gBAEM,QAAQ,mDAAG,IAAI,CAAA,eAAe,EAAC;;;QAGzC,cAAc,CAAC,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAE/C,MAAM,EAAE,GAAG,IAAI,SAAS,EAAE,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/tag-name.d.ts

@@ -0,0 +1 @@
+export declare function tagName(_val: unknown, _ctx: ClassFieldDecoratorContext): (this: CustomElementConstructor, val: string) => string;

package/target/lib/tag-name.js

@@ -0,0 +1,11 @@
+export function tagName(_val, _ctx) {
+    return function (val) {
+        Promise.resolve().then(() => {
+            if (!customElements.get(val)) {
+                customElements.define(val, this);
+            }
+        });
+        return val;
+    };
+}
+//# sourceMappingURL=tag-name.js.map

package/target/lib/tag-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-name.js","sourceRoot":"","sources":["../../src/lib/tag-name.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,IAAa,EAAE,IAAgC;IACrE,OAAO,UAA0C,GAAW;QAC1D,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YAC1B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;gBAC5B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;aAClC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;AACJ,CAAC"}

package/target/lib/tag-name.test.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=tag-name.test.js.map

package/target/lib/tag-name.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-name.test.js","sourceRoot":"","sources":["../../src/lib/tag-name.test.ts"],"names":[],"mappings":""}

package/target/lib/tags.d.ts

@@ -0,0 +1,9 @@
+import { TemplateResult } from './result.js';
+export declare class HTMLResult extends TemplateResult {
+    apply(root: ShadowRoot): void;
+}
+export declare function html(strings: TemplateStringsArray): HTMLResult;
+export declare class CSSResult extends TemplateResult {
+    apply(root: ShadowRoot): void;
+}
+export declare function css(strings: TemplateStringsArray): CSSResult;

package/target/lib/tags.js

@@ -0,0 +1,22 @@
+import { TemplateResult } from './result.js';
+export class HTMLResult extends TemplateResult {
+    apply(root) {
+        const el = document.createElement('template');
+        el.innerHTML = this.strings.join(',');
+        root.append(el.content.cloneNode(true));
+    }
+}
+export function html(strings) {
+    return new HTMLResult(strings);
+}
+export class CSSResult extends TemplateResult {
+    apply(root) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(this.strings.join(''));
+        root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    }
+}
+export function css(strings) {
+    return new CSSResult(strings);
+}
+//# sourceMappingURL=tags.js.map

package/target/lib/tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags.js","sourceRoot":"","sources":["../../src/lib/tags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,OAAO,UAAW,SAAQ,cAAc;IAC5C,KAAK,CAAC,IAAgB;QACpB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAC9C,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEtC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1C,CAAC;CACF;AAED,MAAM,UAAU,IAAI,CAAC,OAA6B;IAChD,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED,MAAM,OAAO,SAAU,SAAQ,cAAc;IAC3C,KAAK,CAAC,IAAgB;QACpB,MAAM,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;QAClC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;QAEzC,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAChE,CAAC;CACF;AAED,MAAM,UAAU,GAAG,CAAC,OAA6B;IAC/C,OAAO,IAAI,SAAS,CAAC,OAAO,CAAC,CAAC;AAChC,CAAC"}

package/target/lib.d.ts

@@ -0,0 +1,6 @@
+export { TemplateResult } from './lib/result.js';
+export { css, html } from './lib/tags.js';
+export { shadow } from './lib/shadow.js';
+export { attr } from './lib/attr.js';
+export { listen } from './lib/listen.js';
+export { tagName } from './lib/tag-name.js';