@twind/with-web-components - npm Package Compare versions

Comparing version 1.1.1-next-20221218112843 to 1.1.1-next-20221220021500

CHANGELOG.md

 # @twind/with-web-components
 
-## 1.1.1-next-20221218112843
+## 1.1.1-next-20221220021500
 
 ### Patch Changes
 
+- create dedicated worker and deno bundles, and downgrade module to es2019 (fixes [#426](https://github.com/tw-in-js/twind/issues/426)) ([`02ea227a`](https://github.com/tw-in-js/twind/commit/02ea227afffe474cde5e843c3519f0836ee18f8a))
+
 - bump @twind/core peerDependency to latest ([`a26657cf`](https://github.com/tw-in-js/twind/commit/a26657cf025aa7ad207372b30034d81417ad41c7))
 
-- Updated dependencies [[`6521e678`](https://github.com/tw-in-js/twind/commit/6521e678821f05de8cd3a87b0176083efee43405), [`c832b338`](https://github.com/tw-in-js/twind/commit/c832b33849690545e7a4dffbdada2f5b97f6aa08)]:
-  - @twind/core@1.1.1-next-20221218112843
+- Updated dependencies [[`02ea227a`](https://github.com/tw-in-js/twind/commit/02ea227afffe474cde5e843c3519f0836ee18f8a), [`6521e678`](https://github.com/tw-in-js/twind/commit/6521e678821f05de8cd3a87b0176083efee43405), [`c832b338`](https://github.com/tw-in-js/twind/commit/c832b33849690545e7a4dffbdada2f5b97f6aa08)]:
+  - @twind/core@1.1.1-next-20221220021500
 
@@ -12,0 +14,0 @@ ## 1.1.0

package.json

 {
   "name": "@twind/with-web-components",
-  "version": "1.1.1-next-20221218112843",
+  "version": "1.1.1-next-20221220021500",
   "description": "Seamless integration of Twind with Web Components",
@@ -55,4 +55,5 @@ "type": "module",
         "esnext": "./with-web-components.esnext.dev.js",
+        "deno": "./with-web-components.deno.dev.js",
         "module": "./with-web-components.dev.js",
-        "worker": "./with-web-components.dev.js",
+        "worker": "./with-web-components.worker.dev.js",
         "browser": "./with-web-components.browser.dev.js",
@@ -67,4 +68,5 @@ "script": "./with-web-components.global.dev.js",
       "esnext": "./with-web-components.esnext.js",
+      "deno": "./with-web-components.deno.js",
       "module": "./with-web-components.js",
-      "worker": "./with-web-components.js",
+      "worker": "./with-web-components.worker.js",
       "browser": "./with-web-components.browser.js",
@@ -82,3 +84,3 @@ "script": "./with-web-components.global.js",
   "peerDependencies": {
-    "@twind/core": "1.1.1-next-20221218112843",
+    "@twind/core": "1.1.1-next-20221220021500",
     "typescript": "^4.8.4"
@@ -92,8 +94,5 @@ },
   "module": "./with-web-components.js",
-  "worker": "./with-web-components.js",
-  "esnext": "./with-web-components.esnext.js",
   "unpkg": "./with-web-components.global.js",
   "jsdelivr": "./with-web-components.global.js",
-  "browser": "./with-web-components.browser.js",
   "types": "./with-web-components.d.ts"
 }

with-web-components.browser.dev.js

@@ -1,1 +0,106 @@
-import{twind as e,mo as t,cssom as n,noop as c}from"@twind/core";function a(a,l=!1){var s;let d=function(){if(o)try{let e=n(new CSSStyleSheet);return e.connect=t=>{let n=r(t);n.adoptedStyleSheets=[...n.adoptedStyleSheets,e.target]},e.disconnect=c,e}catch{}let t=document.createElement("style");t.media="not all",document.head.prepend(t);let a=[n(t)],l=new WeakMap;return{get target(){return a[0].target},snapshot(){let e=a.map(e=>e.snapshot());return()=>e.forEach(e=>e())},clear(){a.forEach(e=>e.clear())},destroy(){a.forEach(e=>e.destroy())},insert(e,t,n){a[0].insert(e,t,n);let c=this.target.cssRules[t];a.forEach((e,n)=>n&&e.target.insertRule(c.cssText,t))},resume:(e,t)=>a[0].resume(e,t),connect(e){let t=document.createElement("style");r(e).appendChild(t);let c=n(t),{cssRules:o}=this.target;for(let s=0;s<o.length;s++)c.target.insertRule(o[s].cssText,s);a.push(c),l.set(e,c)},disconnect(e){let t=a.indexOf(l.get(e));t>=0&&a.splice(t,1)}}}(),h=e({...a,hash:null!=(s=a.hash)?s:l},d),i=t(h);return function(e){return class extends e{connectedCallback(){super.connectedCallback==null||super.connectedCallback(),d.connect(this),i.observe(r(this))}disconnectedCallback(){d.disconnect(this),super.disconnectedCallback==null||super.disconnectedCallback()}constructor(...e){super(...e),this.tw=h}}}}let o="undefined"!=typeof ShadowRoot&&("undefined"==typeof ShadyCSS||ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype;function r(e){return e.shadowRoot||e.attachShadow({mode:"open"})}export{a as default};//# sourceMappingURL=with-web-components.browser.dev.js.map
+import { twind, mo, cssom, noop } from '@twind/core';
+function install(config, isProduction = false) {
+    var _config_hash;
+    // 1. Create separate adoptable sheet
+    let sheet = function() {
+        // TODO: search for SSR stylesheet
+        if (supportsAdoptingStyleSheets) try {
+            // Try using adoptedStyleSheets — not supported in all browsers
+            let sheet = cssom(new CSSStyleSheet());
+            sheet.connect = (element)=>{
+                let shadowRoot = getShadowRoot(element);
+                shadowRoot.adoptedStyleSheets = [
+                    ...shadowRoot.adoptedStyleSheets,
+                    sheet.target
+                ];
+            };
+            sheet.disconnect = noop;
+            return sheet;
+        } catch  {}
+        // ignore — continue with fallback
+        // Fallback: create a dedicated stylesheet for each element instance
+        // Create our base stylesheet — its css rules will be copied to each element style
+        let style = document.createElement('style');
+        // Prevent this style sheet from being applied anywhere
+        style.media = 'not all';
+        document.head.prepend(style);
+        let sheets = [
+            cssom(style)
+        ], /** @type {WeakMap<HTMLElement, import('@twind/core').Sheet>} */ sheetsByElement = new WeakMap();
+        return {
+            get target () {
+                return sheets[0].target;
+            },
+            snapshot () {
+                let restores = sheets.map((sheet)=>sheet.snapshot());
+                return ()=>restores.forEach((restore)=>restore());
+            },
+            clear () {
+                sheets.forEach((sheets)=>sheets.clear());
+            },
+            destroy () {
+                sheets.forEach((sheets)=>sheets.destroy());
+            },
+            insert (css, index, rule) {
+                // We first insert the rule into our base sheet
+                // This call will check (try-catch) and warn if necessary
+                sheets[0].insert(css, index, rule);
+                // For all connected sheets we insert the resulting rule directly
+                // by-passing the try-catch block
+                let cssRule = this.target.cssRules[index];
+                sheets.forEach((sheets, notFirst)=>notFirst && sheets.target.insertRule(cssRule.cssText, index));
+            },
+            resume (addClassName, insert) {
+                return sheets[0].resume(addClassName, insert);
+            },
+            connect (element) {
+                let style = document.createElement('style');
+                getShadowRoot(element).appendChild(style);
+                let sheet = cssom(style), // Directly copy all rules from our base sheet
+                { cssRules  } = this.target;
+                for(let i = 0; i < cssRules.length; i++)sheet.target.insertRule(cssRules[i].cssText, i);
+                sheets.push(sheet);
+                sheetsByElement.set(element, sheet);
+            },
+            disconnect (element) {
+                let index = sheets.indexOf(sheetsByElement.get(element));
+                index >= 0 && sheets.splice(index, 1);
+            }
+        };
+    }(), // 2. Use that to create an own twind instance
+    tw = twind({
+        ...config,
+        // in production use short hashed class names
+        hash: null != (_config_hash = config.hash) ? _config_hash : isProduction
+    }, sheet), // 3. One MutationObserver for all element instances
+    observer = mo(tw);
+    return function install$(BaseElement) {
+        return class WithTwindElement extends BaseElement {
+            connectedCallback() {
+                super.connectedCallback == null || super.connectedCallback();
+                sheet.connect(this);
+                observer.observe(getShadowRoot(this));
+            }
+            disconnectedCallback() {
+                sheet.disconnect(this);
+                super.disconnectedCallback == null || super.disconnectedCallback();
+            }
+            constructor(...args){
+                super(...args);
+                this.tw = tw;
+            }
+        };
+    };
+}
+// eslint-disable-next-line no-var
+/**
+ * Whether the current browser supports `adoptedStyleSheets`.
+ * @link https://github.com/lit/lit/blob/393e30cf7c7f97712e524df34e7343147055fc5d/packages/reactive-element/src/css-tag.ts#L13
+ */ let supportsAdoptingStyleSheets = 'undefined' != typeof ShadowRoot && ('undefined' == typeof ShadyCSS || ShadyCSS.nativeShadow) && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
+function getShadowRoot(element) {
+    return element.shadowRoot || element.attachShadow({
+        mode: 'open'
+    });
+}
+export { install as default };
+//# sourceMappingURL=with-web-components.browser.dev.js.map

with-web-components.browser.js

@@ -1,1 +0,106 @@
-import{twind as e,mo as t,cssom as n,noop as c}from"@twind/core";function a(a,l=!0){var s;let d=function(){if(o)try{let e=n(new CSSStyleSheet);return e.connect=t=>{let n=r(t);n.adoptedStyleSheets=[...n.adoptedStyleSheets,e.target]},e.disconnect=c,e}catch{}let t=document.createElement("style");t.media="not all",document.head.prepend(t);let a=[n(t)],l=new WeakMap;return{get target(){return a[0].target},snapshot(){let e=a.map(e=>e.snapshot());return()=>e.forEach(e=>e())},clear(){a.forEach(e=>e.clear())},destroy(){a.forEach(e=>e.destroy())},insert(e,t,n){a[0].insert(e,t,n);let c=this.target.cssRules[t];a.forEach((e,n)=>n&&e.target.insertRule(c.cssText,t))},resume:(e,t)=>a[0].resume(e,t),connect(e){let t=document.createElement("style");r(e).appendChild(t);let c=n(t),{cssRules:o}=this.target;for(let s=0;s<o.length;s++)c.target.insertRule(o[s].cssText,s);a.push(c),l.set(e,c)},disconnect(e){let t=a.indexOf(l.get(e));t>=0&&a.splice(t,1)}}}(),h=e({...a,hash:null!=(s=a.hash)?s:l},d),i=t(h);return function(e){return class extends e{connectedCallback(){super.connectedCallback==null||super.connectedCallback(),d.connect(this),i.observe(r(this))}disconnectedCallback(){d.disconnect(this),super.disconnectedCallback==null||super.disconnectedCallback()}constructor(...e){super(...e),this.tw=h}}}}let o="undefined"!=typeof ShadowRoot&&("undefined"==typeof ShadyCSS||ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype;function r(e){return e.shadowRoot||e.attachShadow({mode:"open"})}export{a as default};//# sourceMappingURL=with-web-components.browser.js.map
+import { twind, mo, cssom, noop } from '@twind/core';
+function install(config, isProduction = true) {
+    var _config_hash;
+    // 1. Create separate adoptable sheet
+    let sheet = function() {
+        // TODO: search for SSR stylesheet
+        if (supportsAdoptingStyleSheets) try {
+            // Try using adoptedStyleSheets — not supported in all browsers
+            let sheet = cssom(new CSSStyleSheet());
+            sheet.connect = (element)=>{
+                let shadowRoot = getShadowRoot(element);
+                shadowRoot.adoptedStyleSheets = [
+                    ...shadowRoot.adoptedStyleSheets,
+                    sheet.target
+                ];
+            };
+            sheet.disconnect = noop;
+            return sheet;
+        } catch  {}
+        // ignore — continue with fallback
+        // Fallback: create a dedicated stylesheet for each element instance
+        // Create our base stylesheet — its css rules will be copied to each element style
+        let style = document.createElement('style');
+        // Prevent this style sheet from being applied anywhere
+        style.media = 'not all';
+        document.head.prepend(style);
+        let sheets = [
+            cssom(style)
+        ], /** @type {WeakMap<HTMLElement, import('@twind/core').Sheet>} */ sheetsByElement = new WeakMap();
+        return {
+            get target () {
+                return sheets[0].target;
+            },
+            snapshot () {
+                let restores = sheets.map((sheet)=>sheet.snapshot());
+                return ()=>restores.forEach((restore)=>restore());
+            },
+            clear () {
+                sheets.forEach((sheets)=>sheets.clear());
+            },
+            destroy () {
+                sheets.forEach((sheets)=>sheets.destroy());
+            },
+            insert (css, index, rule) {
+                // We first insert the rule into our base sheet
+                // This call will check (try-catch) and warn if necessary
+                sheets[0].insert(css, index, rule);
+                // For all connected sheets we insert the resulting rule directly
+                // by-passing the try-catch block
+                let cssRule = this.target.cssRules[index];
+                sheets.forEach((sheets, notFirst)=>notFirst && sheets.target.insertRule(cssRule.cssText, index));
+            },
+            resume (addClassName, insert) {
+                return sheets[0].resume(addClassName, insert);
+            },
+            connect (element) {
+                let style = document.createElement('style');
+                getShadowRoot(element).appendChild(style);
+                let sheet = cssom(style), // Directly copy all rules from our base sheet
+                { cssRules  } = this.target;
+                for(let i = 0; i < cssRules.length; i++)sheet.target.insertRule(cssRules[i].cssText, i);
+                sheets.push(sheet);
+                sheetsByElement.set(element, sheet);
+            },
+            disconnect (element) {
+                let index = sheets.indexOf(sheetsByElement.get(element));
+                index >= 0 && sheets.splice(index, 1);
+            }
+        };
+    }(), // 2. Use that to create an own twind instance
+    tw = twind({
+        ...config,
+        // in production use short hashed class names
+        hash: null != (_config_hash = config.hash) ? _config_hash : isProduction
+    }, sheet), // 3. One MutationObserver for all element instances
+    observer = mo(tw);
+    return function install$(BaseElement) {
+        return class WithTwindElement extends BaseElement {
+            connectedCallback() {
+                super.connectedCallback == null || super.connectedCallback();
+                sheet.connect(this);
+                observer.observe(getShadowRoot(this));
+            }
+            disconnectedCallback() {
+                sheet.disconnect(this);
+                super.disconnectedCallback == null || super.disconnectedCallback();
+            }
+            constructor(...args){
+                super(...args);
+                this.tw = tw;
+            }
+        };
+    };
+}
+// eslint-disable-next-line no-var
+/**
+ * Whether the current browser supports `adoptedStyleSheets`.
+ * @link https://github.com/lit/lit/blob/393e30cf7c7f97712e524df34e7343147055fc5d/packages/reactive-element/src/css-tag.ts#L13
+ */ let supportsAdoptingStyleSheets = 'undefined' != typeof ShadowRoot && ('undefined' == typeof ShadyCSS || ShadyCSS.nativeShadow) && 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
+function getShadowRoot(element) {
+    return element.shadowRoot || element.attachShadow({
+        mode: 'open'
+    });
+}
+export { install as default };
+//# sourceMappingURL=with-web-components.browser.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162513

increased by13.65%

Number of package files

33

increased by17.86%

Lines of code

1281

increased by30.58%

No dependency changes