lemonadejs - npm Package Compare versions

Comparing version 4.1.1 to 4.2.0

dist/index.js

 /**
- * LemonadeJS v4.1.1 (ESM build)
+ * LemonadeJS v4.2.0 (ESM build)
  *
@@ -1181,2 +1181,44 @@ * Website: https://lemonadejs.net
 
+    L.createWebComponent = function(name, handler, options) {
+        if (typeof(handler) !== 'function') {
+            return 'Handler should be an function';
+        }
+
+        const componentName = 'lm-' + name;
+
+        // Check if the component is already defined
+        if (customElements.get(componentName)) {
+            console.warn(`${componentName} is already defined.`);
+        } else {
+            class Component extends HTMLElement {
+                constructor() {
+                    super();
+                }
+
+                connectedCallback() {
+                    // LemonadeJS is already rendered
+                    if (typeof(this.el) === 'undefined') {
+                        // Render
+                        if (options && options.applyOnly === true) {
+                            // Merge component
+                            handler.call(this);
+                            // Apply
+                            L.apply(this, this);
+                        } else {
+                            let root = this;
+                            if (options && options.shadowRoot === true) {
+                                this.attachShadow({ mode: 'open' });
+                                root = document.createElement('div');
+                                this.shadowRoot.appendChild(root);
+                            }
+                            L.render(handler, root, this);
+                        }
+                    }
+                }
+            }
+
+            window.customElements.define(componentName, Component);
+        }
+    }
+
     return L;
@@ -1183,0 +1225,0 @@ }

dist/lemonade.d.ts

@@ -13,2 +13,9 @@ /**
 
+    interface WebComponentOptions {
+        /** Create the webcomponent inside a shadowRoot */
+        shadowRoot?: boolean,
+        /** Apply-only will apply the LemonadeJS self component on the existing HTML inside the tag already in the DOM */
+        applyOnly?: boolean,
+    }
+
     interface ComponentEvents {
@@ -88,2 +95,10 @@ /**
     /**
+     * Extract a property from a nested object using a string address
+     * @param {string} name New webcomponent name. LemonadeJS includes a prefix of lm- so your final tag will be <lm-yourname>
+     * @param {function} handler LemonadeJS component
+     * @param {object} options Options for your webcomponent
+     */
+    function createWebComponent(name: string, handler: Function, options: WebComponentOptions) : any;
+
+    /**
      * Get an artifact from LemonadeJS Sugar by its alias identification
@@ -90,0 +105,0 @@ * @param {string} alias Existing sugar alias

dist/lemonade.js

 /**
- * LemonadeJS v4.1.1
+ * LemonadeJS v4.2.0
  *
@@ -1186,3 +1186,45 @@ * Website: https://lemonadejs.net
 
+    L.createWebComponent = function(name, handler, options) {
+        if (typeof(handler) !== 'function') {
+            return 'Handler should be an function';
+        }
+
+        const componentName = 'lm-' + name;
+
+        // Check if the component is already defined
+        if (customElements.get(componentName)) {
+            console.warn(`${componentName} is already defined.`);
+        } else {
+            class Component extends HTMLElement {
+                constructor() {
+                    super();
+                }
+
+                connectedCallback() {
+                    // LemonadeJS is already rendered
+                    if (typeof(this.el) === 'undefined') {
+                        // Render
+                        if (options && options.applyOnly === true) {
+                            // Merge component
+                            handler.call(this);
+                            // Apply
+                            L.apply(this, this);
+                        } else {
+                            let root = this;
+                            if (options && options.shadowRoot === true) {
+                                this.attachShadow({ mode: 'open' });
+                                root = document.createElement('div');
+                                this.shadowRoot.appendChild(root);
+                            }
+                            L.render(handler, root, this);
+                        }
+                    }
+                }
+            }
+
+            window.customElements.define(componentName, Component);
+        }
+    }
+
     return L;
 })));

package.json

@@ -42,3 +42,3 @@ {
     "types": "dist/lemonade.d.ts",
-    "version": "4.1.1"
+    "version": "4.2.0"
 }

README.md

@@ -1,2 +0,2 @@
-<h1>LemonadeJS v3: Reactive micro library</h1>
+<h1>LemonadeJS v4: Reactive micro library</h1>
 
@@ -225,3 +225,3 @@ <h2>Create amazing web-based interfaces with LemonadeJS</h2>
     <li><a href="https://lemonadejs.net/docs/tests">Testing</a></li>
-    <li><a href="https://lemonadejs.net/libraries">Libraries</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins">Plugins</a></li>
     <li><a href="https://lemonadejs.net/docs/module">Module (ESM)</a></li>
@@ -232,11 +232,12 @@ </ul>
 <ul>
-    <li><a href="https://lemonadejs.net/library/list">List</a></li>
-    <li><a href="https://lemonadejs.net/library/rating">Rating</a></li>
-    <li><a href="https://lemonadejs.net/library/router">Router</a></li>
-    <li><a href="https://lemonadejs.net/library/signature">Signature</a></li>
-    <li><a href="https://lemonadejs.net/components/data-grid">Data grid</a></li>
-    <li><a href="https://lemonadejs.net/components/image-cropper" title="Photo cropper and filters component">Image cropper</a></li>
-    <li><a href="https://lemonadejs.net/components/modal">Modal</a></li>
-    <li><a href="https://lemonadejs.net/components/tabs">Tabs</a></li>
-    <li><a href="https://lemonadejs.net/components/color-picker">Color picker</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/list">List</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/rating">Rating</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/router">Router</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/signature">Signature</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/data-grid">Data grid</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/image-cropper" title="Photo cropper and filters component">Image cropper</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/modal">Modal</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/tabs">Tabs</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/calendar">JavaScript Calendar</a></li>
+    <li><a href="https://lemonadejs.net/docs/plugins/color-picker">Color picker</a></li>
 </ul>
@@ -246,13 +247,13 @@
 <ul>
-    <li><a href="https://lemonadejs.net/examples/lamp">Lamp</a></li>
-    <li><a href="https://lemonadejs.net/examples/counter">Counter</a></li>
-    <li><a href="https://lemonadejs.net/examples/color-generator">Color generator</a></li>
-    <li><a href="https://lemonadejs.net/examples/value-persistence">Value persistence</a></li>
-    <li><a href="https://lemonadejs.net/examples/div-onresize">DIV onresize</a></li>
-    <li><a href="https://lemonadejs.net/examples/rating">Star rating</a></li>
-    <li><a href="https://lemonadejs.net/examples/table">Table</a></li>
-    <li><a href="https://lemonadejs.net/examples/enable-disable-elements">Disable elements</a></li>
-    <li><a href="https://lemonadejs.net/examples/color-picker">Color picker</a></li>
-    <li><a href="https://lemonadejs.net/examples/hangman">Hangman game</a></li>
-    <li><a href="https://lemonadejs.net/examples/tic-tac-toe">Tic tac toe</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/lamp">Lamp</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/counter">Counter</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/color-generator">Color generator</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/value-persistence">Value persistence</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/div-onresize">DIV onresize</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/rating">Star rating</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/table">Table</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/enable-disable-elements">Disable elements</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/color-picker">Color picker</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/hangman">Hangman game</a></li>
+    <li><a href="https://lemonadejs.net/docs/examples/tic-tac-toe">Tic tac toe</a></li>
 </ul>
@@ -262,4 +263,4 @@
 
-- [JavaScript Components](https://jsuites.net/v4/)
-- [JavaScript Data Grid with Spreadsheet-like Controls](https://jspreadsheet.com/)
-- [Free JavaScript Data Grid](https://bossanova.uk/jspreadsheet/v4/)
+- [JavaScript Components](https://jsuites.net/)
+- [JavaScript Data Grid](https://jspreadsheet.com/)
+- [Free JavaScript Data Grid](https://bossanova.uk/jspreadsheet/)

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

101584

increased by4.22%

Lines of code

2381

increased by3.79%

Number of lines in readme file

263

increased by0.38%

No dependency changes