@twind/with-web-components
Advanced tools
@twind/with-web-components - npm Package Compare versions
Comparing version 1.1.1-next-20221220021500 to 1.1.1-next-20221220080151
| # @twind/with-web-components | ||
| ## 1.1.1-next-20221220021500 | ||
| ## 1.1.1-next-20221220080151 | ||
@@ -12,3 +12,3 @@ ### Patch Changes | ||
| - 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 | ||
| - @twind/core@1.1.1-next-20221220080151 | ||
@@ -15,0 +15,0 @@ ## 1.1.0 |
| { | ||
| "name": "@twind/with-web-components", | ||
| "version": "1.1.1-next-20221220021500", | ||
| "version": "1.1.1-next-20221220080151", | ||
| "description": "Seamless integration of Twind with Web Components", | ||
@@ -82,3 +82,3 @@ "type": "module", | ||
| "peerDependencies": { | ||
| "@twind/core": "1.1.1-next-20221220021500", | ||
| "@twind/core": "1.1.1-next-20221220080151", | ||
| "typescript": "^4.8.4" | ||
@@ -85,0 +85,0 @@ }, |
@@ -1,102 +0,1 @@ | ||
| import { twind, mo, cssom, noop } from '@twind/core'; | ||
| function install(config, isProduction = false) { | ||
| // 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: config.hash ?? isProduction | ||
| }, sheet), // 3. One MutationObserver for all element instances | ||
| observer = mo(tw); | ||
| return function install$(BaseElement) { | ||
| return class WithTwindElement extends BaseElement { | ||
| tw = tw; | ||
| connectedCallback() { | ||
| super.connectedCallback?.(); | ||
| sheet.connect(this); | ||
| observer.observe(getShadowRoot(this)); | ||
| } | ||
| disconnectedCallback() { | ||
| sheet.disconnect(this); | ||
| super.disconnectedCallback?.(); | ||
| } | ||
| }; | ||
| }; | ||
| } | ||
| // 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.deno.dev.js.map | ||
| export { default } from "./with-web-components.esnext.dev.js"; |
@@ -1,1 +0,1 @@ | ||
| export { default } from "./with-web-components.esnext.dev.js"; | ||
| export { default } from "./with-web-components.dev.js"; |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-7.7%
150004
- Number of package files
- decreased by-3.03%
32
- Lines of code
- decreased by-7.96%
1179
No dependency changes