html-demo-element - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

html-demo-element.js

 import "https://unpkg.com/prismjs@1.23.0/components/prism-core.min.js";
 import "https://unpkg.com/prismjs@1.23.0/components/prism-markup.min.js";
+import "https://unpkg.com/prismjs@1.23.0/components/prism-css.min.js";
+import "https://unpkg.com/prismjs@1.23.0/components/prism-clike.min.js";
+import "https://unpkg.com/prismjs@1.23.0/components/prism-javascript.min.js";
 import "https://unpkg.com/prismjs@1.23.0/plugins/autoloader/prism-autoloader.min.js";
@@ -12,3 +15,7 @@
     @import "https://unpkg.com/prismjs@1.23.0/themes/prism.css";
-    html-demo-element{ display: block; border: blueviolet dashed 1px; border-radius: 1rem; padding: 1rem; margin: 1rem; }
+    html-demo-element{ display: block; border: blueviolet dashed 1px; border-radius: 1rem; overflow: hidden; }
+    html-demo-element>*{ margin: 1rem; }
+    [slot="legend"]{ margin: 0; background-color: silver; }
+    [slot="legend"]>h3{ margin: 0; padding: 1rem; }
+    
 `);
@@ -19,33 +26,82 @@
 
+const propTypes =
+{   source: { type: String }
+,   type: { type: String }
+,   demo: { type: String }
+,   text: { type: String }
+,   legend: { type: String }
+};
+
     class
 HtmlDemoElement extends HTMLElement
 {
+    static get observedAttributes(){ return Object.keys(propTypes); }
+    static get properties(){ return  propTypes; }
+
+    get source(){ return this._source }
+    set source( s )
+    {
+        const h = s.innerHTML;
+        if( h )
+            s = h;
+        this._source = s;
+        this.textSlot && this.render();
+        return s;
+    }
+
+    attributeChangedCallback(name, oldValue, newValue)
+    {
+        if( this.constructor.observedAttributes.includes(name)
+            && name in this.constructor.properties
+            && this[name] !== newValue )
+        {
+            this[name] = newValue;
+            this.render();
+        }
+    }
+
+
     connectedCallback()
-    {   const      $ = x => this.querySelector(x)
-        ,   replaceDom = ( parent, child ) => { parent.innerHTML = ''; parent.append(child); }
-        ,   template = $('[slot="source"]') || $('template')
-        ,    srcText = template ? template.innerHTML :  this.initialHTML;
+    {
+        const      $ = x => this.querySelector(x)
+        ,   template = $( '[slot="source"]' ) || $( 'template' )
+        , createSlot = name =>
+        {   let slot = $(`[slot="${name}"]`);
+            if( slot )
+                return slot;
+            slot = document.createElement('div');
+            slot.setAttribute('slot',name);
+            if( template )
+            {   const ref = template.nextElementSibling || template.parentElement.lastElementChild;
+                template.parentElement.insertBefore( slot, ref );
+            }else
+                this.insertBefore( slot, this.firstChild );
+            return slot;
+        };
 
-        const  html = Prism.highlight( srcText, Prism.languages.html, 'html' )
-        ,       pre = document.createElement( 'div' )
-        pre.innerHTML = `<h3>${this.title||''}</h3><pre><code class="language-markup" >${html}</code></pre>`;
+        if( !this._source )
+            this.source = template || this.initialHTML;
+
+        const demoDom = [...this.childNodes];
+        template || demoDom.map( el => el.remove() );
+        this.demoSlot = createSlot('demo');
+        this.textSlot = createSlot('text');
+        this.legendSlot = createSlot('legend');
         if( template )
-        {
-            const textSlot = $('[slot="text"]');
-            if( textSlot )
-                replaceDom( textSlot, pre );
-            else
-            {   const ref = template.nextElementSibling || template.parentElement.lastElementChild;
-                template.parentElement.insertBefore( pre, ref );
-            }
-            const demoDom = template.content.cloneNode( true )
-            ,        demo = $('[slot="demo"]')
-            if( demo )
-                replaceDom( demo, demoDom );
-            else
-                template.parentElement.insertBefore( demoDom, ref );
-        }else
-            this.insertBefore( pre, this.firstChild );
+            this.demoSlot.append( template.content.cloneNode(true) );
+        else
+            demoDom.map( el=> this.demoSlot.append(el));
+        this.render();
     }
+
+    render()
+    {   if( this.legend )
+            this.legendSlot.innerHTML = `<h3>${this.legend}</h3>`;
+
+        const type = this.type || 'html'
+        ,     html = Prism.highlight( this._source, Prism.languages[type], type );
+
+        this.textSlot.innerHTML = `<pre><code class="language-markup" >${html}</code></pre>`;
+    }
 }
 window.customElements.define( 'html-demo-element', HtmlDemoElement);

package.json

 {
     "name": "html-demo-element",
-    "version": "1.0.2",
+    "version": "1.0.3",
     "description": "Webcomponent inserts prism JS syntax colored HTML in html-demo-element before actual dom",
@@ -5,0 +5,0 @@ "author": "Sasha Firsov",

README.md

@@ -13,3 +13,3 @@ # html-demo-element
 ```html
-<html-demo-element title="Error case">
+<html-demo-element legend="Error case">
     <slotted-element src="https://badUrl.heck">
@@ -26,3 +26,3 @@ <p slot="loading" hidden>Loading... ⏳ </p>
 renders following content:
-![screenshot](screenshot.png?raw=true "Title")
+![screenshot](screenshot.png?raw=true "screenshot")
 
@@ -34,3 +34,3 @@ # Use
 ```html
-<html-demo-element title="Error case">
+<html-demo-element legend="Error case">
     <template><i>Candle 🕯️</i></template>
@@ -56,5 +56,22 @@ </html-demo-element>
 
+# Live demo
+* https://unpkg.com/html-demo-element@1.0.3/demo/index.html
+* https://unpkg.com/html-demo-element@1.0.3/demo/advanced.html
+* https://unpkg.com/slotted-element@1.0.2/demo/index.html
 
-# Live demo
-https://unpkg.com/html-demo-element@1.0.2/demo/index.html
-https://unpkg.com/slotted-element@1.0.2/demo/index.html
+# API
+## Slots
+* `source` - the source code node. If omitted it would be taken either from embedded `template` content or
+  from embedded into `html-demo-element` dom.
+* `text` - placeholder where the highlighted code would be rendered. If omitted the text would be rendered on 
+  top of template or top of `html-demo-element` content. 
+* `demo` - placeholder where the code would be moved into for displaying live DOM( for HTML type ). 
+  If omitted it would be placed beneath of `text` slot 
+* `legend` - placeholder where the value of `legend` attribute would be rendered as H3. 
+  When omitted, it would be placed on top.
+
+## Properties and attributes
+* `source` - the source code text. If the attribute is not defined, it would be initialized from `source` slot ^^
+* `type` - one of (prism js  supported languages)[https://prismjs.com/#supported-languages]. 
+  `html`, `css`, `js` imported by default. When omitted, assumed `html`.
+* `legend` - optional heading for `html-demo-element`  

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 3 instances in 1 package

Improved metrics

Total package byte prevSize

114757

increased by4.87%

Number of package files

8

increased by33.33%

Lines of code

91

increased by102.22%

Number of lines in readme file

74

increased by29.82%

Worsened metrics

Number of medium supply chain risk alerts

6

increased by100%

No dependency changes