haunted - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

haunted.js

@@ -138,3 +138,9 @@ import { render, directive } from 'https://unpkg.com/lit-html@^1.0.0/lit-html.js';
 
-function component(renderer, BaseElement = HTMLElement) {
+function toCamelCase(val = '') {
+  return val.indexOf('-') === -1 ? val.toLowerCase() : val.toLowerCase().split('-').reduce((out, part) => {
+    return out ? out + part.charAt(0).toUpperCase() + part.slice(1) : part;
+  },'') 
+}
+
+function component(renderer, BaseElement = HTMLElement, options = {useShadowDOM: true}) {
   class Element extends BaseElement {
@@ -147,4 +153,8 @@ static get observedAttributes() {
       super();
-      this.attachShadow({ mode: 'open' });
-      this._container = new Container(renderer, this.shadowRoot, this);
+      if (options.useShadowDOM === false) {
+        this._container = new Container(renderer, this);
+      } else {
+        this.attachShadow({ mode: 'open' });
+        this._container = new Container(renderer, this.shadowRoot, this);        
+      }
     }
@@ -162,3 +172,3 @@
       let val = newValue === '' ? true : newValue;
-      Reflect.set(this, name, val);
+      Reflect.set(this, toCamelCase(name), val);
     }
@@ -165,0 +175,0 @@ }

index.js

@@ -138,3 +138,9 @@ import { render, directive } from 'lit-html';
 
-function component(renderer, BaseElement = HTMLElement) {
+function toCamelCase(val = '') {
+  return val.indexOf('-') === -1 ? val.toLowerCase() : val.toLowerCase().split('-').reduce((out, part) => {
+    return out ? out + part.charAt(0).toUpperCase() + part.slice(1) : part;
+  },'') 
+}
+
+function component(renderer, BaseElement = HTMLElement, options = {useShadowDOM: true}) {
   class Element extends BaseElement {
@@ -147,4 +153,8 @@ static get observedAttributes() {
       super();
-      this.attachShadow({ mode: 'open' });
-      this._container = new Container(renderer, this.shadowRoot, this);
+      if (options.useShadowDOM === false) {
+        this._container = new Container(renderer, this);
+      } else {
+        this.attachShadow({ mode: 'open' });
+        this._container = new Container(renderer, this.shadowRoot, this);        
+      }
     }
@@ -162,3 +172,3 @@
       let val = newValue === '' ? true : newValue;
-      Reflect.set(this, name, val);
+      Reflect.set(this, toCamelCase(name), val);
     }
@@ -165,0 +175,0 @@ }

package.json

 {
   "name": "haunted",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

readme.md

@@ -34,4 +34,2 @@ # Haunted 🦇 🎃
 
-> Note that lit-html 1.0.0-rc is available as latest on npm. If you want to use this version with Haunted, install `haunted@next`.
-
 ```shell
@@ -47,2 +45,8 @@ npm install haunted
 
+You can also use Custom Elements without Shadow DOM if you wish.
+eg.
+```
+component(() => html`...`, HTMLElement, {useShadowDOM: false}))
+```
+
 ### Builds
@@ -370,4 +374,14 @@
 
+### Function Signatures
+
+`component(renderer, BaseElement, options): Element`
+- renderer = ``` (element) => html`...` ```  
+- BaseElement = `HTMLElement`
+- options = `{useShadowDOM: true}`
+
+`virtual(renderer): directive`
+- renderer = ``` (element) => html`...` ```  
+
 ## License
 
 BSD-2-Clause

web.js

@@ -138,3 +138,9 @@ import { render, directive } from '../node_modules/lit-html/lit-html.js';
 
-function component(renderer, BaseElement = HTMLElement) {
+function toCamelCase(val = '') {
+  return val.indexOf('-') === -1 ? val.toLowerCase() : val.toLowerCase().split('-').reduce((out, part) => {
+    return out ? out + part.charAt(0).toUpperCase() + part.slice(1) : part;
+  },'') 
+}
+
+function component(renderer, BaseElement = HTMLElement, options = {useShadowDOM: true}) {
   class Element extends BaseElement {
@@ -147,4 +153,8 @@ static get observedAttributes() {
       super();
-      this.attachShadow({ mode: 'open' });
-      this._container = new Container(renderer, this.shadowRoot, this);
+      if (options.useShadowDOM === false) {
+        this._container = new Container(renderer, this);
+      } else {
+        this.attachShadow({ mode: 'open' });
+        this._container = new Container(renderer, this.shadowRoot, this);        
+      }
     }
@@ -162,3 +172,3 @@
       let val = newValue === '' ? true : newValue;
-      Reflect.set(this, name, val);
+      Reflect.set(this, toCamelCase(name), val);
     }
@@ -165,0 +175,0 @@ }

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

44243

increased by3.53%

Lines of code

1224

increased by2.26%

Number of lines in readme file

385

increased by3.77%

No dependency changes