panel - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

build/component.js

@@ -61,9 +61,21 @@ 'use strict';
       this._config = Object.assign({}, {
+        css: '',
         helpers: {},
         routes: {},
         template: function template() {
-          throw 'No template provided by Component subclass';
-        }
+          throw Error('No template provided by Component subclass');
+        },
+        useShadowDom: false
       }, this.config);
       this.state = {};
+      if (this.getConfig('useShadowDom')) {
+        this.el = this.createShadowRoot();
+        this.styleTag = document.createElement('style');
+        this.styleTag.innerHTML = this.getConfig('css');
+        this.el.appendChild(this.styleTag);
+      } else if (this.getConfig('css')) {
+        throw Error('"useShadowDom" config option must be set in order to use "css" config.');
+      } else {
+        this.el = this;
+      }
     }
@@ -93,3 +105,2 @@ }, {
         this.$panelRoot = this;
-        this.router = new _router2.default(this, { historyMethod: this.historyMethod });
       }
@@ -102,5 +113,6 @@ this.app = this.$panelRoot;
       this.loop = (0, _mainLoop2.default)(this.state, this._render.bind(this), { create: _createElement2.default, diff: _diff2.default, patch: _patch2.default });
-      this.appendChild(this.loop.target);
+      this.el.appendChild(this.loop.target);
 
       if (Object.keys(this.getConfig('routes')).length) {
+        this.router = new _router2.default(this, { historyMethod: this.historyMethod });
         this.navigate(window.location.hash);
@@ -117,2 +129,19 @@ }
   }, {
+    key: 'attributeChangedCallback',
+    value: function attributeChangedCallback(attr, oldVal, newVal) {
+      if (attr === 'style-override') {
+        this._applyStyles(newVal);
+      }
+      if (this.isPanelRoot && this.initialized) {
+        this.update();
+      }
+    }
+  }, {
+    key: '_applyStyles',
+    value: function _applyStyles(styleOverride) {
+      if (this.getConfig('useShadowDom')) {
+        this.styleTag.innerHTML = this.getConfig('css') + (styleOverride || '');
+      }
+    }
+  }, {
     key: 'child',
@@ -119,0 +148,0 @@ value: function child(tagName) {

lib/component.js

@@ -16,7 +16,19 @@ import MainLoop from 'main-loop';
     this._config = Object.assign({}, {
+      css: '',
       helpers: {},
       routes: {},
-      template: () => { throw 'No template provided by Component subclass'; },
+      template: () => { throw Error('No template provided by Component subclass'); },
+      useShadowDom: false,
     }, this.config);
     this.state = {};
+    if (this.getConfig('useShadowDom')) {
+      this.el = this.createShadowRoot();
+      this.styleTag = document.createElement('style');
+      this.styleTag.innerHTML = this.getConfig('css');
+      this.el.appendChild(this.styleTag);
+    } else if (this.getConfig('css')) {
+      throw Error('"useShadowDom" config option must be set in order to use "css" config.');
+    } else {
+      this.el = this;
+    }
   }
@@ -45,3 +57,2 @@
       this.$panelRoot = this;
-      this.router = new Router(this, {historyMethod: this.historyMethod});
     }
@@ -60,5 +71,6 @@ this.app = this.$panelRoot;
     this.loop = MainLoop(this.state, this._render.bind(this), {create, diff, patch});
-    this.appendChild(this.loop.target);
+    this.el.appendChild(this.loop.target);
 
     if (Object.keys(this.getConfig('routes')).length) {
+      this.router = new Router(this, {historyMethod: this.historyMethod});
       this.navigate(window.location.hash);
@@ -74,2 +86,17 @@ }
 
+  attributeChangedCallback(attr, oldVal, newVal) {
+    if (attr === 'style-override') {
+      this._applyStyles(newVal);
+    }
+    if (this.isPanelRoot && this.initialized) {
+      this.update();
+    }
+  }
+
+  _applyStyles(styleOverride) {
+    if (this.getConfig('useShadowDom')) {
+      this.styleTag.innerHTML = this.getConfig('css') + (styleOverride || '');
+    }
+  }
+
   child(tagName, attrs={}) {
@@ -76,0 +103,0 @@ attrs = Object.assign({}, attrs);

package.json

 {
   "name": "panel",
-  "version": "0.7.2",
+  "version": "0.8.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

57937

increased by3.24%

Lines of code

981

increased by5.83%

No dependency changes