html-demo-element - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

html-demo-element.js

@@ -1,7 +0,7 @@
-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";
+import "https://unpkg.com/prismjs@1.24.1/components/prism-core.min.js";
+import "https://unpkg.com/prismjs@1.24.1/components/prism-markup.min.js";
+import "https://unpkg.com/prismjs@1.24.1/components/prism-css.min.js";
+import "https://unpkg.com/prismjs@1.24.1/components/prism-clike.min.js";
+import "https://unpkg.com/prismjs@1.24.1/components/prism-javascript.min.js";
+import "https://unpkg.com/prismjs@1.24.1/plugins/autoloader/prism-autoloader.min.js";
 
@@ -14,3 +14,3 @@ const createCss = ( text, el = document.createElement( "style" ) ) =>
 createCss(`
-    @import "https://unpkg.com/prismjs@1.23.0/themes/prism.css";
+    @import "https://unpkg.com/prismjs@1.24.1/themes/prism.css";
     html-demo-element{ display: block; border: blueviolet dashed 1px; border-radius: 1rem; overflow: hidden; }
@@ -29,2 +29,3 @@ html-demo-element>*{ margin: 1rem; }
 ,   type: { type: String }
+,   src : { type: String }
 ,   demo: { type: String }
@@ -51,2 +52,4 @@ ,   text: { type: String }
     }
+    get src(){ this.getAttribute('src'); }
+    set src( url ){ this.setAttribute('src',url); }
 
@@ -59,4 +62,29 @@ attributeChangedCallback(name, oldValue, newValue)
         {
-            this[name] = newValue;
+            if( name !== 'src')
+                this[name] = newValue;
             this.isInitialized && this.render();
+            if( 'src' === name )
+            {
+                fetch(newValue).then( response =>
+                {   if( !this.type || this.getAttribute('type') ==='auto' )
+                    {
+                        this.contentType = response.headers.get('content-type');
+                        const t2t = { json:'js', js:'js', javascript:'js',typescript:'js', html:'html',xml:'html',svg:'html',css:'css',scss:'css',less:'css'};
+                        let type;
+                        for( let k in t2t )
+                            if( this.contentType.includes(k) )
+                                type = t2t[k];
+                        if( !type ) // guess from extension
+                            for( let k in t2t )
+                                if( newValue.endsWith(k) )
+                                    type = t2t[k];
+                        this.type = type;
+                    }
+                    return response.text();
+                }).then( text =>
+                {
+                    this.source = text;
+                    this.isInitialized && this.render();
+                });
+            }
         }
@@ -102,8 +130,9 @@ }
 
-        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>`;
+        if( this._source )
+        {   const type = this.type || 'html'
+            ,     html = Prism.highlight( this._source, Prism.languages[type], type );
+            this.textSlot.innerHTML = `<pre><code>${ html }</code></pre>`;
+        }
     }
 }
 window.customElements.define( 'html-demo-element', HtmlDemoElement);

package.json

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

README.md

@@ -20,4 +20,4 @@ # html-demo-element
 
-<script type="module" src="https://unpkg.com/html-demo-element@1.0.2/html-demo-element.js"></script>
-<script type="module" src="https://unpkg.com/slotted-element@1.0.2/slotted-element.js"></script>
+<script type="module" src="https://unpkg.com/html-demo-element@1.0.6/html-demo-element.js"></script>
+<script type="module" src="https://unpkg.com/slotted-element@1.0.3/slotted-element.js"></script>
 ```
@@ -55,4 +55,4 @@
 # Live demo
-* https://unpkg.com/html-demo-element@1.0.5/demo/index.html
-* https://unpkg.com/html-demo-element@1.0.5/demo/advanced.html
+* https://unpkg.com/html-demo-element@1.0.6/demo/index.html
+* https://unpkg.com/html-demo-element@1.0.6/demo/advanced.html
 * https://unpkg.com/slotted-element@1.0.2/demo/index.html
@@ -59,0 +59,0 @@

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 7 instances in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 6 instances in 1 package

Improved metrics

Total package byte prevSize

119675

increased by2.36%

Number of package files

19

increased by111.11%

Lines of code

184

increased by36.3%

Worsened metrics

Number of medium supply chain risk alerts

8

increased by14.29%

No dependency changes