@bpd-library/utilities 1.2.8-beta.1 → 1.2.8-beta.2

package/dist/hooks/use-stylesheet.js

@@ -1,5 +1,81 @@
-import { unsafeCSS, useStyles } from '@atomify/hooks';
-export function useStylesheet(style) {
-    useStyles(() => unsafeCSS(style));
+import { createHook } from '@atomify/hooks';
+const supportShadyCSS = window.ShadyCSS && !window.ShadyCSS.nativeShadow;
+const CSS_SAVE_TOKEN = Symbol('atomify.cssSaveToken');
+const styleCache = new Map();
+const APPLIED_STYLES = [];
+const supportsAdoptingStyleSheets = () => 'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;
+function bindShadyRoot(target, template) {
+    window.ShadyCSS.prepareTemplate(template, target.$cmpMeta$.$tagName$);
+    window.ShadyCSS.styleElement(target);
 }
+const applyShadowdomStyles = (component, styles) => {
+    const container = component.container;
+    const componentName = component.$cmpMeta$.$tagName$;
+    let styleTmp;
+    if (!styleCache.has(componentName)) {
+        styleTmp = document.createElement('template');
+        styleTmp.innerHTML = `${component.hasShadowDom && !supportsAdoptingStyleSheets() && styles
+            ? `<style style-hook>${styles}</style>`
+            : ''}`;
+    }
+    else {
+        styleTmp = styleCache.get(componentName);
+    }
+    if (styleTmp) {
+        if (supportShadyCSS && component.hasShadowDom) {
+            bindShadyRoot(component, styleTmp);
+        }
+        container.appendChild(document.importNode(styleTmp.content, true));
+    }
+};
+const unsafeCSS = (cssString) => createCSSResult(String(cssString), CSS_SAVE_TOKEN);
+const createCSSResult = (css, token) => {
+    if (token !== CSS_SAVE_TOKEN)
+        throw new Error(`${css} is not supported. Use 'unsafeCSS' if you want to use: ${css}`);
+    let styleSheet = null;
+    const cssText = css;
+    if (supportsAdoptingStyleSheets()) {
+        styleSheet = new CSSStyleSheet();
+        styleSheet.replaceSync(cssText);
+    }
+    return {
+        cssText,
+        styleSheet,
+    };
+};
+const adoptStyles = (root, styles) => {
+    const hasShadowDom = root.hasShadowDom;
+    const componentName = root.$cmpMeta$.$tagName$;
+    if (supportsAdoptingStyleSheets() && hasShadowDom) {
+        const CSSRoot = root.container;
+        if (!(CSSRoot instanceof HTMLElement))
+            CSSRoot.adoptedStyleSheets = styles.map((s) => {
+                return s instanceof StyleSheet ? s : s.styleSheet;
+            });
+    }
+    else if (APPLIED_STYLES.indexOf(componentName) === -1) {
+        const combinedStyleArray = styles
+            .map((style) => ('cssText' in style ? style.cssText : null))
+            .join('');
+        if (hasShadowDom) {
+            root.styles = combinedStyleArray;
+            applyShadowdomStyles(root, combinedStyleArray);
+        }
+        else {
+            const styleElement = document.createElement('style');
+            styleElement.textContent = combinedStyleArray;
+            styleElement.setAttribute('scope', componentName);
+            document.head.appendChild(styleElement);
+            APPLIED_STYLES.push(componentName);
+        }
+    }
+};
+export const useStylesheet = (style) => {
+    const css = unsafeCSS(style);
+    const styles = Array.isArray(css) ? [...css] : [css];
+    return createHook({
+        onDidLoad: (element) => adoptStyles(element, styles),
+        onUpdate: (element) => adoptStyles(element, styles),
+    });
+};
 //# sourceMappingURL=use-stylesheet.js.map

package/dist/hooks/use-stylesheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-stylesheet.js","sourceRoot":"","sources":["../../src/hooks/use-stylesheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAMtD,MAAM,UAAU,aAAa,CAAC,KAAa;IACvC,SAAS,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;AACtC,CAAC","sourcesContent":["import { unsafeCSS, useStyles } from '@atomify/hooks';\n/**\n * Add styling through imported css files (Webpack)\n * @export\n * @param {string} style\n */\nexport function useStylesheet(style: string) {\n    useStyles(() => unsafeCSS(style));\n}\n"]}
+{"version":3,"file":"use-stylesheet.js","sourceRoot":"","sources":["../../src/hooks/use-stylesheet.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, createHook } from '@atomify/hooks';\n\ndeclare global {\n    interface Window {\n        ShadyCSS: any;\n    }\n    interface ShadowRoot {\n        adoptedStyleSheets: CSSStyleSheet[];\n    }\n\n    interface Document {\n        adoptedStyleSheets: CSSStyleSheet[];\n    }\n\n    interface CSSStyleSheet {\n        replaceSync(cssText: string): void;\n    }\n}\n\ninterface CSSResult {\n    cssText: string;\n    styleSheet: CSSStyleSheet | null;\n}\n\ntype CSSResultOrNative = CSSResult | CSSStyleSheet;\n\nconst supportShadyCSS = window.ShadyCSS && !window.ShadyCSS.nativeShadow;\nconst CSS_SAVE_TOKEN = Symbol('atomify.cssSaveToken');\nconst styleCache = new Map<string, HTMLTemplateElement>();\nconst APPLIED_STYLES: string[] = [];\n\n/**\n * Checks if adopting stylesheet is supported.\n */\nconst supportsAdoptingStyleSheets = () =>\n    'adoptedStyleSheets' in Document.prototype && 'replace' in CSSStyleSheet.prototype;\n\n/**\n * Generates a template based necessary fallbacks needed for browsers that do not support Custom elements or ShadowDom\n * Reference: https://github.com/webcomponents/webcomponentsjs\n * @param {Component} target\n * @param {HTMLTemplateElement} template\n */\nfunction bindShadyRoot(target: Component, template: HTMLTemplateElement) {\n    window.ShadyCSS.prepareTemplate(template, target.$cmpMeta$.$tagName$);\n    window.ShadyCSS.styleElement(target);\n}\n\nconst applyShadowdomStyles = (component: Component, styles: string) => {\n    const container = component.container;\n    const componentName = component.$cmpMeta$.$tagName$;\n    let styleTmp: HTMLTemplateElement | undefined;\n\n    if (!styleCache.has(componentName)) {\n        styleTmp = document.createElement('template');\n\n        styleTmp.innerHTML = `${\n            component.hasShadowDom && !supportsAdoptingStyleSheets() && styles\n                ? `<style style-hook>${styles}</style>`\n                : ''\n        }`;\n    } else {\n        styleTmp = styleCache.get(componentName);\n    }\n\n    if (styleTmp) {\n        // Apply polyfill when shady polyfill is available and the component has shadowdom\n        if (supportShadyCSS && component.hasShadowDom) {\n            bindShadyRoot(component, styleTmp);\n        }\n\n        container.appendChild(document.importNode(styleTmp.content, true));\n    }\n};\n\n/**\n * This is unsafe because untrusted CSS text can be used to phone home\n * or exfiltrate data to an attacker controlled site. Take care to only use\n * this with trusted input.\n * @param {string} css\n * @returns {StyleObject}\n */\nconst unsafeCSS = (cssString: unknown): CSSResult =>\n    createCSSResult(String(cssString), CSS_SAVE_TOKEN);\n\n/**\n * @param {string} css\n * @param {symbol} token\n * @returns {({ cssText: string; styleSheet: CSSStyleSheet | null })}\n */\nconst createCSSResult = (\n    css: string,\n    token: symbol,\n): { cssText: string; styleSheet: CSSStyleSheet | null } => {\n    if (token !== CSS_SAVE_TOKEN)\n        throw new Error(`${css} is not supported. Use 'unsafeCSS' if you want to use: ${css}`);\n\n    let styleSheet: CSSStyleSheet | null = null;\n    const cssText = css;\n\n    if (supportsAdoptingStyleSheets()) {\n        styleSheet = new CSSStyleSheet();\n        styleSheet.replaceSync(cssText);\n    }\n\n    return {\n        cssText,\n        styleSheet,\n    };\n};\n\n/**\n * Applies adoptedStyleSheets to the Atomify component.\n * @param { Component } root\n * @param { StyleObject } css\n */\nconst adoptStyles = (root: Component, styles: Array<CSSResultOrNative>) => {\n    const hasShadowDom = root.hasShadowDom;\n    const componentName = root.$cmpMeta$.$tagName$;\n\n    // Add addopted stylesheets when it is supported\n    if (supportsAdoptingStyleSheets() && hasShadowDom) {\n        const CSSRoot = root.container;\n        if (!(CSSRoot instanceof HTMLElement))\n            CSSRoot.adoptedStyleSheets = styles.map((s) => {\n                return s instanceof StyleSheet ? s : s.styleSheet!;\n            });\n    } else if (APPLIED_STYLES.indexOf(componentName) === -1) {\n        const combinedStyleArray = styles\n            .map((style) => ('cssText' in style ? style.cssText : null))\n            .join('');\n\n        // When adopted stylesheet is not supported but shadowdom is apply it to the shadowroot.\n        // Else it is being applied to the head.\n        if (hasShadowDom) {\n            // Cache the styles so it can be reused instead of creating a style tag again.\n            root.styles = combinedStyleArray;\n            applyShadowdomStyles(root, combinedStyleArray);\n        } else {\n            const styleElement = document.createElement('style');\n            styleElement.textContent = combinedStyleArray;\n            styleElement.setAttribute('scope', componentName);\n\n            document.head.appendChild(styleElement);\n            APPLIED_STYLES.push(componentName);\n        }\n    }\n};\n\nexport const useStylesheet = (style: string) => {\n    const css = unsafeCSS(style);\n    const styles = Array.isArray(css) ? [...css] : [css];\n\n    return createHook({\n        onDidLoad: (element) => adoptStyles(element, styles),\n        onUpdate: (element) => adoptStyles(element, styles),\n    });\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bpd-library/utilities",
-    "version": "1.2.8-beta.1",
+    "version": "1.2.8-beta.2",
     "description": "Description",
     "url": "https://github.com/{repo name}",
     "license": "MIT",
@@ -45,13 +45,13 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c64e1068d89bf37d63633cf70e2d69f11b2e4664",
+    "gitHead": "6023dbf17c8aad57480a359308dfec8d2feea3d5",
     "dependencies": {
         "@atomify/core": "2.4.1",
         "@atomify/hooks": "1.1.11",
         "@atomify/jsx": "1.7.1",
         "@atomify/kit": "1.1.11",
-        "@bpd-library/types": "^1.2.8-beta.1",
+        "@bpd-library/types": "^1.2.8-beta.2",
         "qs": "^6.9.4",
         "query-string": "5"
     }