panel - npm Package Compare versions

Comparing version 5.12.0 to 5.13.0

build/component.js

@@ -33,2 +33,4 @@ 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -399,22 +401,3 @@
       _this.el = _this.attachShadow({ mode: 'open' });
-
-      var css = _this.getConfig('css');
-      if (css) {
-        if (_this.el.adoptedStyleSheets) {
-          // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
-          // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
-          var componentKey = _this.constructor;
-          var stylesheet = stylesheetCache.get(componentKey);
-          if (!stylesheet) {
-            stylesheet = new CSSStyleSheet();
-            stylesheet.replaceSync(css);
-            stylesheetCache.set(componentKey, stylesheet);
-          }
-          _this.el.adoptedStyleSheets = [stylesheet];
-        } else {
-          var styleTag = document.createElement('style');
-          styleTag.innerHTML = css;
-          _this.el.appendChild(styleTag);
-        }
-      }
+      _this.applyStaticStyle(_this.getConfig('css'));
     } else if (_this.getConfig('css')) {
@@ -712,2 +695,35 @@ throw Error('"useShadowDom" config option must be set in order to use "css" config.');
   }, {
+    key: 'applyStaticStyle',
+    value: function applyStaticStyle(styleSheetText) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref$ignoreCache = _ref.ignoreCache,
+          ignoreCache = _ref$ignoreCache === undefined ? false : _ref$ignoreCache;
+
+      if (styleSheetText) {
+        if (this.el.adoptedStyleSheets) {
+          // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
+          // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
+          var componentKey = this.constructor;
+          var cachedStyleSheet = stylesheetCache.get(componentKey);
+          if (!cachedStyleSheet) {
+            cachedStyleSheet = new CSSStyleSheet();
+            cachedStyleSheet.replaceSync(styleSheetText);
+            stylesheetCache.set(componentKey, cachedStyleSheet);
+          } else if (ignoreCache) {
+            cachedStyleSheet.replaceSync(styleSheetText);
+          }
+          if (!this.staticStyleSheet) {
+            this.staticStyleSheet = cachedStyleSheet;
+            this.el.adoptedStyleSheets = [this.staticStyleSheet].concat(_toConsumableArray(this.el.adoptedStyleSheets.slice(1)));
+          }
+        } else {
+          if (!this.staticStyleTag) {
+            this.staticStyleTag = document.createElement('style');
+            this.el.insertBefore(this.staticStyleTag, this.el.childNodes[0] || null);
+          }
+          this.staticStyleTag.innerHTML = styleSheetText;
+        }
+      }
+    }
+  }, {
     key: '_applyStyleOverride',
@@ -714,0 +730,0 @@ value: function _applyStyleOverride(styleOverride) {

hot/style-loader.js

@@ -23,3 +23,3 @@ /* eslint-env commonjs */
         if (elem.getConfig('useShadowDom')) {
-          elem.el.querySelector('style').textContent = newStyle.toString();
+          elem.applyStaticStyle(newStyle.toString(), {ignoreCache: true});
           return true;
@@ -26,0 +26,0 @@ }

hot/update-panel-elems.js

@@ -37,3 +37,3 @@ /* eslint-env commonjs */
     console.warn(`[HMR Panel] No ${elemName} elems found`);
-    console.warn(`[HMR Panel] Exepect file path to be '.../<elemName>/index.<ext>' or '.../<elemName>.<ext>'`);
+    console.warn(`[HMR Panel] Expect file path to be '.../<elemName>/index.<ext>' or '.../<elemName>.<ext>'`);
   }
@@ -40,0 +40,0 @@

lib/component.js

@@ -320,22 +320,3 @@ import cuid from 'cuid';
       this.el = this.attachShadow({mode: `open`});
-
-      const css = this.getConfig(`css`);
-      if (css) {
-        if (this.el.adoptedStyleSheets) {
-          // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
-          // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
-          const componentKey = this.constructor;
-          let stylesheet = stylesheetCache.get(componentKey);
-          if (!stylesheet) {
-            stylesheet = new CSSStyleSheet();
-            stylesheet.replaceSync(css);
-            stylesheetCache.set(componentKey, stylesheet);
-          }
-          this.el.adoptedStyleSheets = [stylesheet];
-        } else {
-          const styleTag = document.createElement(`style`);
-          styleTag.innerHTML = css;
-          this.el.appendChild(styleTag);
-        }
-      }
+      this.applyStaticStyle(this.getConfig(`css`));
     } else if (this.getConfig(`css`)) {
@@ -579,2 +560,30 @@ throw Error(`"useShadowDom" config option must be set in order to use "css" config.`);
 
+  applyStaticStyle(styleSheetText, {ignoreCache = false} = {}) {
+    if (styleSheetText) {
+      if (this.el.adoptedStyleSheets) {
+        // Attempt to cache the styles using Constructible StyleSheets if the feature is supported.
+        // Note: this technique avoids the Flash of Unstyled Content that alternative approaches like <link> tags will encounter
+        const componentKey = this.constructor;
+        let cachedStyleSheet = stylesheetCache.get(componentKey);
+        if (!cachedStyleSheet) {
+          cachedStyleSheet = new CSSStyleSheet();
+          cachedStyleSheet.replaceSync(styleSheetText);
+          stylesheetCache.set(componentKey, cachedStyleSheet);
+        } else if (ignoreCache) {
+          cachedStyleSheet.replaceSync(styleSheetText);
+        }
+        if (!this.staticStyleSheet) {
+          this.staticStyleSheet = cachedStyleSheet;
+          this.el.adoptedStyleSheets = [this.staticStyleSheet, ...this.el.adoptedStyleSheets.slice(1)];
+        }
+      } else {
+        if (!this.staticStyleTag) {
+          this.staticStyleTag = document.createElement(`style`);
+          this.el.insertBefore(this.staticStyleTag, this.el.childNodes[0] || null);
+        }
+        this.staticStyleTag.innerHTML = styleSheetText;
+      }
+    }
+  }
+
   _applyStyleOverride(styleOverride) {
@@ -581,0 +590,0 @@ if (this.getConfig(`useShadowDom`)) {

lib/index.d.ts

@@ -197,2 +197,5 @@ // Type definitions for panel
 
+  /** Applies the static stylesheet for this component class */
+  applyStaticStyle(styleSheetText: null | string, options?: {ignoreCache: boolean}): void;
+
   /** Defines standard component configuration */
@@ -199,0 +202,0 @@ get config(): ConfigOptions<StateT, AppStateT, ContextRegistryT>;

package.json

 {
   "name": "panel",
-  "version": "5.12.0",
+  "version": "5.13.0",
   "description": "Web Components with Virtual DOM: lightweight composable web apps",
@@ -5,0 +5,0 @@ "main": "build/index.js",

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

148853

increased by1.08%

Lines of code

3389

increased by0.77%

No dependency changes