n8n-demo-component - npm Package Compare versions

Comparing version 1.0.16 to 1.0.17

n8n-demo.bundled.js

@@ -56,3 +56,3 @@ /**
  */
-const st=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,s){this._$Ct=t,this._$AM=i,this._$Ci=s}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var s,e;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(i)}const o=t.element.classList;this.st.forEach((t=>{t in i||(o.remove(t),this.st.delete(t))}));for(const t in i){const s=!!i[t];s===this.st.has(t)||(null===(e=this.et)||void 0===e?void 0:e.has(t))||(s?(o.add(t),this.st.add(t)):(o.remove(t),this.st.delete(t)))}return N}});var et=function(t,i,s,e){for(var o,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(r=(n<3?o(r):n>3?o(i,s,r):o(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};let ot=class extends F{constructor(){super(),this.workflow="{}",this.frame=!1,this.src="https://n8n-preview-service.internal.n8n.cloud/workflows/demo",this.showCode=!1,this.showPreview=!0,this.fullscreen=!1,this.insideIframe=!1,this.scrollX=0,this.scrollY=0,this.receiveMessage=({data:t,source:i})=>{const s=this.shadowRoot.getElementById("int_iframe");if(this.isJson(t)&&s.contentWindow===i){const i=JSON.parse(t);"n8nReady"===i.command?(this.showPreview=!0,this.loadWorkflow()):"openNDV"===i.command?this.fullscreen=!0:"closeNDV"===i.command?this.fullscreen=!1:"error"===i.command&&(this.showPreview=!1)}}}isJson(t){try{JSON.parse(t)}catch(t){return!1}return!0}onDocumentScroll(){this.insideIframe&&window.scrollTo(this.scrollX,this.scrollY)}loadWorkflow(){try{const t=JSON.parse(this.workflow);if(!t)throw new Error("Missing workflow");if(!t.nodes||!Array.isArray(t.nodes))throw new Error("Must have an array of nodes");const i=this.shadowRoot.getElementById("int_iframe");i.contentWindow&&i.contentWindow.postMessage(JSON.stringify({command:"openWorkflow",workflow:t}),"*")}catch{this.showPreview=!1}}toggleCode(){this.showCode=!this.showCode}onMouseEnter(){this.insideIframe=!0,this.scrollX=window.scrollX,this.scrollY=window.scrollY}onMouseLeave(){this.insideIframe=!1}connectedCallback(){super.connectedCallback(),window.addEventListener("message",this.receiveMessage),document.addEventListener("scroll",this.onDocumentScroll)}disconnectedCallback(){window.removeEventListener("message",this.receiveMessage),document.removeEventListener("scroll",this.onDocumentScroll),super.disconnectedCallback()}render(){return M`
+const st=(t=>(...i)=>({_$litDirective$:t,values:i}))(class extends class{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,i,s){this._$Ct=t,this._$AM=i,this._$Ci=s}_$AS(t,i){return this.update(t,i)}update(t,i){return this.render(...i)}}{constructor(t){var i;if(super(t),t.type!==it||"class"!==t.name||(null===(i=t.strings)||void 0===i?void 0:i.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((i=>t[i])).join(" ")+" "}update(t,[i]){var s,e;if(void 0===this.st){this.st=new Set,void 0!==t.strings&&(this.et=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!(null===(s=this.et)||void 0===s?void 0:s.has(t))&&this.st.add(t);return this.render(i)}const o=t.element.classList;this.st.forEach((t=>{t in i||(o.remove(t),this.st.delete(t))}));for(const t in i){const s=!!i[t];s===this.st.has(t)||(null===(e=this.et)||void 0===e?void 0:e.has(t))||(s?(o.add(t),this.st.add(t)):(o.remove(t),this.st.delete(t)))}return N}});var et=function(t,i,s,e){for(var o,n=arguments.length,r=n<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,s):e,h=t.length-1;h>=0;h--)(o=t[h])&&(r=(n<3?o(r):n>3?o(i,s,r):o(i,s))||r);return n>3&&r&&Object.defineProperty(i,s,r),r};function ot(t){try{JSON.parse(t)}catch(t){return!1}return!0}let nt=class extends F{constructor(){super(),this.workflow="{}",this.frame=!1,this.src="https://n8n-preview-service.internal.n8n.cloud/workflows/demo",this.showCode=!1,this.showPreview=!0,this.fullscreen=!1,this.insideIframe=!1,this.scrollX=0,this.scrollY=0,this.receiveMessage=({data:t,source:i})=>{const s=this.shadowRoot.getElementById("int_iframe");if(ot(t)&&s.contentWindow===i){const i=JSON.parse(t);"n8nReady"===i.command?(this.showPreview=!0,this.loadWorkflow()):"openNDV"===i.command?this.fullscreen=!0:"closeNDV"===i.command?this.fullscreen=!1:"error"===i.command&&(this.showPreview=!1)}}}onDocumentScroll(){this.insideIframe&&window.scrollTo(this.scrollX,this.scrollY)}loadWorkflow(){const t=JSON.parse(this.workflow);if(!t)throw new Error("Missing workflow");if(!t.nodes||!Array.isArray(t.nodes))throw new Error("Must have an array of nodes");const i=this.shadowRoot.getElementById("int_iframe");i.contentWindow&&i.contentWindow.postMessage(JSON.stringify({command:"openWorkflow",workflow:t}),"*")}toggleCode(){this.showCode=!this.showCode}onMouseEnter(){this.insideIframe=!0,this.scrollX=window.scrollX,this.scrollY=window.scrollY}onMouseLeave(){this.insideIframe=!1}connectedCallback(){super.connectedCallback(),window.addEventListener("message",this.receiveMessage),document.addEventListener("scroll",this.onDocumentScroll)}disconnectedCallback(){window.removeEventListener("message",this.receiveMessage),document.removeEventListener("scroll",this.onDocumentScroll),super.disconnectedCallback()}render(){return M`
       <div
@@ -76,7 +76,7 @@ class="embedded_workflow"
         <div class="workflow_json" ?hidden=${!this.showCode}>
-          <pre class="json_renderer" id="json">${this.isJson(this.workflow)?JSON.stringify(JSON.parse(this.workflow),void 0,2):"Invalid JSON"}
+          <pre class="json_renderer" id="json">${ot(this.workflow)?JSON.stringify(JSON.parse(this.workflow),void 0,2):"Invalid JSON"}
           </pre>
         </div>
       </div>
-    `}};ot.styles=((t,...s)=>{const o=1===t.length?t[0]:s.reduce(((i,s,e)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[e+1]),t[0]);return new e(o,i)})`
+    `}};nt.styles=((t,...s)=>{const o=1===t.length?t[0]:s.reduce(((i,s,e)=>i+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[e+1]),t[0]);return new e(o,i)})`
     .workflow_json {
@@ -86,3 +86,3 @@ height: 300px;
       overflow: auto;
-      background-color: var(--n8n-json-background-color, hsl(0, 0%, 78%));
+      background-color: var(--n8n-json-background-color, #f9f9f9);
       font-size: 0.9em;
@@ -127,2 +127,2 @@ color: hsl(0, 100%, 0%);
     }
-  `,et([X({type:String})],ot.prototype,"workflow",void 0),et([X({type:Boolean})],ot.prototype,"frame",void 0),et([X({type:String})],ot.prototype,"src",void 0),et([Y()],ot.prototype,"showCode",void 0),et([Y()],ot.prototype,"showPreview",void 0),et([Y()],ot.prototype,"fullscreen",void 0),et([Y()],ot.prototype,"insideIframe",void 0),ot=et([(t=>i=>"function"==typeof i?((t,i)=>(window.customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){window.customElements.define(t,i)}}})(t,i))("n8n-demo")],ot);export{ot as N8NDemo};
+  `,et([X({type:String})],nt.prototype,"workflow",void 0),et([X({type:Boolean})],nt.prototype,"frame",void 0),et([X({type:String})],nt.prototype,"src",void 0),et([Y()],nt.prototype,"showCode",void 0),et([Y()],nt.prototype,"showPreview",void 0),et([Y()],nt.prototype,"fullscreen",void 0),et([Y()],nt.prototype,"insideIframe",void 0),nt=et([(t=>i=>"function"==typeof i?((t,i)=>(window.customElements.define(t,i),i))(t,i):((t,i)=>{const{kind:s,elements:e}=i;return{kind:s,elements:e,finisher(i){window.customElements.define(t,i)}}})(t,i))("n8n-demo")],nt);export{nt as N8NDemo};

n8n-demo.js

@@ -10,2 +10,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { classMap } from 'lit/directives/class-map.js';
+function isJson(str) {
+    try {
+        JSON.parse(str);
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}
 let N8NDemo = class N8NDemo extends LitElement {
@@ -25,3 +34,3 @@ constructor() {
             const iframe = this.shadowRoot.getElementById('int_iframe');
-            if (this.isJson(data) && iframe.contentWindow === source) {
+            if (isJson(data) && iframe.contentWindow === source) {
                 const json = JSON.parse(data);
@@ -46,11 +55,2 @@ if (json.command === 'n8nReady') {
     }
-    isJson(str) {
-        try {
-            JSON.parse(str);
-        }
-        catch (e) {
-            return false;
-        }
-        return true;
-    }
     onDocumentScroll() {
@@ -62,23 +62,18 @@ if (this.insideIframe) {
     loadWorkflow() {
-        try {
-            const workflow = JSON.parse(this.workflow);
-            // Workflow Check
-            if (!workflow) {
-                throw new Error('Missing workflow');
-            }
-            if (!workflow.nodes || !Array.isArray(workflow.nodes)) {
-                throw new Error('Must have an array of nodes');
-            }
-            const iframe = this.shadowRoot.getElementById('int_iframe');
-            // set workflow in canvas
-            if (iframe.contentWindow) {
-                iframe.contentWindow.postMessage(JSON.stringify({
-                    command: 'openWorkflow',
-                    workflow,
-                }), '*');
-            }
+        const workflow = JSON.parse(this.workflow);
+        // Workflow Check
+        if (!workflow) {
+            throw new Error('Missing workflow');
         }
-        catch {
-            this.showPreview = false;
+        if (!workflow.nodes || !Array.isArray(workflow.nodes)) {
+            throw new Error('Must have an array of nodes');
         }
+        const iframe = this.shadowRoot.getElementById('int_iframe');
+        // set workflow in canvas
+        if (iframe.contentWindow) {
+            iframe.contentWindow.postMessage(JSON.stringify({
+                command: 'openWorkflow',
+                workflow,
+            }), '*');
+        }
     }
@@ -129,3 +124,3 @@ toggleCode() {
         <div class="workflow_json" ?hidden=${!this.showCode}>
-          <pre class="json_renderer" id="json">${this.isJson(this.workflow) ? JSON.stringify(JSON.parse(this.workflow), undefined, 2) : 'Invalid JSON'}
+          <pre class="json_renderer" id="json">${isJson(this.workflow) ? JSON.stringify(JSON.parse(this.workflow), undefined, 2) : 'Invalid JSON'}
           </pre>
@@ -142,3 +137,3 @@ </div>
       overflow: auto;
-      background-color: var(--n8n-json-background-color, hsl(0, 0%, 78%));
+      background-color: var(--n8n-json-background-color, #f9f9f9);
       font-size: 0.9em;
@@ -145,0 +140,0 @@ color: hsl(0, 100%, 0%);

package.json

 {
   "name": "n8n-demo-component",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "web component for workflow previews",
@@ -5,0 +5,0 @@ "main": "n8n-demo.js",

src/n8n-demo.ts

@@ -5,2 +5,11 @@ import { LitElement, html, css } from 'lit';
 
+function isJson(str: string) {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
+
 @customElement('n8n-demo')
@@ -33,11 +42,2 @@ export class N8NDemo extends LitElement {
 
-  isJson(str: string) {
-    try {
-        JSON.parse(str);
-    } catch (e) {
-        return false;
-    }
-    return true;
-  }
-
   onDocumentScroll() {
@@ -50,3 +50,2 @@ if (this.insideIframe) {
   loadWorkflow() {
-    try {
       const workflow = JSON.parse(this.workflow);
@@ -75,5 +74,2 @@
       }
-    } catch {
-      this.showPreview = false;
-    }
   }
@@ -100,3 +96,3 @@
       overflow: auto;
-      background-color: var(--n8n-json-background-color, hsl(0, 0%, 78%));
+      background-color: var(--n8n-json-background-color, #f9f9f9);
       font-size: 0.9em;
@@ -143,9 +139,9 @@ color: hsl(0, 100%, 0%);
 
-  constructor(){
+  constructor() {
     super();
-    this.receiveMessage = ({data, source}: MessageEvent) => {
+    this.receiveMessage = ({ data, source }: MessageEvent) => {
       const iframe = this.shadowRoot!.getElementById(
         'int_iframe'
       ) as HTMLIFrameElement;
-      if(this.isJson(data) && iframe.contentWindow === source) {
+      if (isJson(data) && iframe.contentWindow === source) {
         const json = JSON.parse(data);
@@ -170,8 +166,8 @@ if (json.command === 'n8nReady') {
     super.connectedCallback();
-    window.addEventListener('message', this.receiveMessage );
+    window.addEventListener('message', this.receiveMessage);
     document.addEventListener('scroll', this.onDocumentScroll);
   }
- 
+
   override disconnectedCallback(): void {
-    window.removeEventListener('message', this.receiveMessage );
+    window.removeEventListener('message', this.receiveMessage);
     document.removeEventListener('scroll', this.onDocumentScroll);
@@ -204,3 +200,3 @@ super.disconnectedCallback();
         <div class="workflow_json" ?hidden=${!this.showCode}>
-          <pre class="json_renderer" id="json">${this.isJson(this.workflow) ? JSON.stringify(JSON.parse(this.workflow), undefined, 2) : 'Invalid JSON' }
+          <pre class="json_renderer" id="json">${isJson(this.workflow) ? JSON.stringify(JSON.parse(this.workflow), undefined, 2) : 'Invalid JSON'}
           </pre>
@@ -207,0 +203,0 @@ </div>

No alert changes

Worsened metrics

Total package byte prevSize

3524664

decreased by-0.01%

Lines of code

5387

decreased by-0.19%

No dependency changes