hydro-js - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

CHANGELOG.md

 # Changelog
 
+## 1.2.4- 2020-12-17
+
+- Export setReactivity
+
 ## 1.2.3- 2020-12-04
@@ -4,0 +8,0 @@

dist/library.d.ts

@@ -32,3 +32,8 @@ declare global {
 }
+interface EventObject {
+    event: EventListener;
+    options: AddEventListenerOptions;
+}
 declare type reactiveObject<T> = T & hydroObject & ((setter: any) => void);
+declare type eventFunctions = Record<string, EventListener | EventObject>;
 declare function setGlobalSchedule(willSchedule: boolean): void;
@@ -39,2 +44,3 @@ declare function setReuseElements(willReuse: boolean): void;
 ...variables: Array<any>): Element | DocumentFragment | Text;
+declare function setReactivity(DOM: Node, eventFunctions?: eventFunctions): void;
 declare function compare(elem: Element, where: Element, onlyTextChildren?: boolean): boolean;
@@ -66,2 +72,2 @@ declare function render(elem: ReturnType<typeof html> | reactiveObject<any>, where?: ReturnType<typeof html> | string, shouldSchedule?: boolean): ChildNode["remove"];
 };
-export { render, html, hydro, setGlobalSchedule, setReuseElements, setInsertDiffing, reactive, unset, setAsyncUpdate, unobserve, observe, ternary, emit, internals, getValue, onRender, onCleanup, $, $$, };
+export { render, html, hydro, setGlobalSchedule, setReuseElements, setInsertDiffing, reactive, unset, setAsyncUpdate, unobserve, observe, ternary, emit, internals, getValue, onRender, onCleanup, setReactivity, $, $$, };

dist/library.js

@@ -182,2 +182,19 @@ // Safari Polyfills
     DOM.querySelectorAll("template[id^=lbInsertNodes]").forEach((template) => replaceElement(insertNodes.shift(), template, false));
+    setReactivity(DOM, eventFunctions);
+    // Set reactive Behavior if only a Text Node is present
+    if (DOM.childElementCount === 0 && DOM.firstChild) {
+        setReactivitySingle(DOM.firstChild);
+        // Return Text Node
+        return DOM.firstChild;
+    }
+    // Return DocumentFragment
+    if (DOM.childNodes.length > 1)
+        return DOM;
+    // Return Text Node
+    if (!DOM.firstChild)
+        return document.createTextNode("");
+    // Return Element
+    return DOM.firstChild;
+}
+function setReactivity(DOM, eventFunctions) {
     // Set events and reactive behaviour(checks for {{ key }} where key is on hydro)
@@ -191,3 +208,3 @@ const root = document.createNodeIterator(DOM, window.NodeFilter.SHOW_ELEMENT);
             // Set functions
-            if (key in eventFunctions) {
+            if (eventFunctions && key in eventFunctions) {
                 const event = eventFunctions[key];
@@ -216,3 +233,3 @@ const eventName = elem.getAttribute(key);
             else {
-                setReactivity(elem, key);
+                setReactivitySingle(elem, key);
             }
@@ -226,3 +243,3 @@ });
             if (isTextNode(childNode)) {
-                setReactivity(childNode);
+                setReactivitySingle(childNode);
             }
@@ -232,18 +249,4 @@ childNode = childNode.nextSibling;
     }
-    // Set reactive Behavior if only a Text Node is present
-    if (DOM.childElementCount === 0 && DOM.firstChild) {
-        setReactivity(DOM.firstChild);
-        // Return Text Node
-        return DOM.firstChild;
-    }
-    // Return DocumentFragment
-    if (DOM.childNodes.length > 1)
-        return DOM;
-    // Return Text Node
-    if (!DOM.firstChild)
-        return document.createTextNode("");
-    // Return Element
-    return DOM.firstChild;
 }
-function setReactivity(node, key) {
+function setReactivitySingle(node, key) {
     let attr_OR_text, match;
@@ -923,3 +926,3 @@ if (isTextNode(node)) {
     Reflect.defineProperty(proxy, handlers, {
-        //TODO should be WeakValue in future
+        //TODO: should be WeakValue in future
         value: new Map(),
@@ -1135,2 +1138,2 @@ });
 };
-export { render, html, hydro, setGlobalSchedule, setReuseElements, setInsertDiffing, reactive, unset, setAsyncUpdate, unobserve, observe, ternary, emit, internals, getValue, onRender, onCleanup, $, $$, };
+export { render, html, hydro, setGlobalSchedule, setReuseElements, setInsertDiffing, reactive, unset, setAsyncUpdate, unobserve, observe, ternary, emit, internals, getValue, onRender, onCleanup, setReactivity, $, $$, };

package.json

 {
   "name": "hydro-js",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "A lightweight reactive library",
@@ -34,7 +34,7 @@ "type": "module",
     "@types/concurrently": "^5.2.1",
-    "@web/test-runner": "^0.10.0",
+    "@web/test-runner": "^0.10.2",
     "@web/test-runner-playwright": "^0.6.6",
     "concurrently": "^5.3.0",
     "serve": "^11.3.2",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.3"
   },
@@ -41,0 +41,0 @@ "repository": {

README.md

@@ -12,3 +12,3 @@ <img align="right" alt="100% Coverage" src="coverage.svg">
 ```properties
-$ npx create-hydro-app@latest <project>
+$ npx create-hydro-app@latest <project> // or $ npm init hydro-app@latest <project>
 ```
@@ -92,2 +92,8 @@
 
+### setReactivity
+
+args: `Node`<br>
+
+Inserts Proxy values in the template HTML.
+
 ### onRender
@@ -94,0 +100,0 @@

src/library.ts

@@ -46,3 +46,3 @@ declare const window: any;
 >;
-// TODO Change to WeakValue
+// TODO: Change to WeakValue
 interface keyToNodeMap extends Map<string, nodeToChangeMap> {}
@@ -54,2 +54,3 @@ interface EventObject {
 type reactiveObject<T> = T & hydroObject & ((setter: any) => void);
+type eventFunctions = Record<string, EventListener | EventObject>;
 
@@ -222,3 +223,3 @@ const enum Placeholder {
 ): Element | DocumentFragment | Text {
-  const eventFunctions: Record<string, EventListener | EventObject> = {}; // Temporarily store a mapping for string -> function, because eventListener have to be registered after the Element's creation
+  const eventFunctions: eventFunctions = {}; // Temporarily store a mapping for string -> function, because eventListener have to be registered after the Element's creation
   let finalHTMLString = variables.length ? "" : htmlArray.join("").trim(); // The HTML string to parse
@@ -297,2 +298,21 @@ let insertNodes: Node[] = []; // Array of Nodes, that have to be added after the parsing
 
+  setReactivity(DOM, eventFunctions);
+
+  // Set reactive Behavior if only a Text Node is present
+  if (DOM.childElementCount === 0 && DOM.firstChild) {
+    setReactivitySingle(DOM.firstChild as Text);
+    // Return Text Node
+    return DOM.firstChild as Text;
+  }
+
+  // Return DocumentFragment
+  if (DOM.childNodes.length > 1) return DOM;
+
+  // Return Text Node
+  if (!DOM.firstChild) return document.createTextNode("");
+
+  // Return Element
+  return DOM.firstChild as Element;
+}
+function setReactivity(DOM: Node, eventFunctions?: eventFunctions) {
   // Set events and reactive behaviour(checks for {{ key }} where key is on hydro)
@@ -306,3 +326,3 @@ const root = document.createNodeIterator(DOM, window.NodeFilter.SHOW_ELEMENT);
       // Set functions
-      if (key in eventFunctions) {
+      if (eventFunctions && key in eventFunctions) {
         const event = eventFunctions[key];
@@ -328,3 +348,3 @@ const eventName = elem.getAttribute(key)!;
       } else {
-        setReactivity(elem, key);
+        setReactivitySingle(elem, key);
       }
@@ -339,3 +359,3 @@ });
       if (isTextNode(childNode)) {
-        setReactivity(childNode);
+        setReactivitySingle(childNode);
       }
@@ -345,22 +365,6 @@ childNode = childNode.nextSibling;
   }
-
-  // Set reactive Behavior if only a Text Node is present
-  if (DOM.childElementCount === 0 && DOM.firstChild) {
-    setReactivity(DOM.firstChild as Text);
-    // Return Text Node
-    return DOM.firstChild as Text;
-  }
-
-  // Return DocumentFragment
-  if (DOM.childNodes.length > 1) return DOM;
-
-  // Return Text Node
-  if (!DOM.firstChild) return document.createTextNode("");
-
-  // Return Element
-  return DOM.firstChild as Element;
 }
-function setReactivity(node: Text): void; // TS function overload
-function setReactivity(node: Element, key: string): void; // TS function overload
-function setReactivity(node: Element | Text, key?: string): void {
+function setReactivitySingle(node: Text): void; // TS function overload
+function setReactivitySingle(node: Element, key: string): void; // TS function overload
+function setReactivitySingle(node: Element | Text, key?: string): void {
   let attr_OR_text: string, match: RegExpMatchArray | null;
@@ -1211,3 +1215,3 @@
   Reflect.defineProperty(proxy, handlers, {
-    //TODO should be WeakValue in future
+    //TODO: should be WeakValue in future
     value: new Map(),
@@ -1463,4 +1467,5 @@ });
   onCleanup,
+  setReactivity,
   $,
   $$,
 };

src/test.ts

@@ -20,2 +20,3 @@ import {
   setAsyncUpdate,
+  setReactivity,
 } from "./library.js";
@@ -22,0 +23,0 @@

utils/esm2c.js

@@ -0,0 +0,0 @@ import path from "path";

No alert changes

Improved metrics

Total package byte prevSize

272126

increased by0.35%

Lines of code

5327

increased by0.28%

Number of lines in readme file

216

increased by2.86%

No dependency changes