forgo-state - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/index.js

@@ -45,8 +45,30 @@ "use strict";
                 if (args.element.node) {
-                    let entry = argsListMap.get(args.element.node);
-                    if (!entry) {
-                        entry = [];
-                        argsListMap.set(args.element.node, entry);
+                    const state = forgo_1.getForgoState(args.element.node);
+                    if (state) {
+                        const componentState = state.components[args.element.componentIndex];
+                        if (componentState.numNodes === 1) {
+                            let entry = argsListMap.get(args.element.node);
+                            if (!entry) {
+                                entry = [];
+                                argsListMap.set(args.element.node, entry);
+                            }
+                            entry.push(args);
+                        }
+                        // This component rendered a fragment or an array
+                        else {
+                            const parentElement = args.element.node
+                                .parentElement;
+                            const childNodes = Array.from(parentElement.childNodes);
+                            const nodeIndex = childNodes.findIndex((x) => x === args.element.node);
+                            const nodes = childNodes.slice(nodeIndex, nodeIndex + componentState.numNodes);
+                            for (const node of nodes) {
+                                let entry = argsListMap.get(node);
+                                if (!entry) {
+                                    entry = [];
+                                    argsListMap.set(node, entry);
+                                }
+                                entry.push(args);
+                            }
+                        }
                     }
-                    entry.push(args);
                 }
@@ -73,13 +95,15 @@ }
                 if (argsWithMinComponentIndex) {
-                    argsListWithMinComponentIndex.push(argsWithMinComponentIndex);
+                    argsListWithMinComponentIndex.push([node, argsWithMinComponentIndex]);
                 }
             }
-            // Now we gotta find if a node is a child of another node pending rerender
-            // If so, there's no need to render the descendant node.
+            // 1. We gotta find if a node is a child of another node pending rerender
+            //   If so, there's no need to render the descendant node.
+            // 2. Also, if a component renders multiple nodes, include only the root node.
             const justTheNodes = argsListWithMinComponentIndex
-                .map((x) => x.element.node)
+                .map(([node]) => node)
                 .filter((x) => x);
-            const argsListOfParentNodes = argsListWithMinComponentIndex.filter((arg) => !justTheNodes.some((node) => node !== arg.element.node && node.contains(arg.element.node)));
+            const argsListOfParentNodes = argsListWithMinComponentIndex.filter(([node, args]) => !justTheNodes.some((x) => x !== node && x.contains(node)) &&
+                node === args.element.node);
             argsToRenderInTheNextCycle.length = 0;
-            for (const args of argsListOfParentNodes) {
+            for (const [node, args] of argsListOfParentNodes) {
                 argsToRenderInTheNextCycle.push(args);
@@ -86,0 +110,0 @@ }

package.json

 {
   "name": "forgo-state",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "main": "./dist",
@@ -11,3 +11,3 @@ "author": "Jeswin Kumar<[e-mail]>",
   "dependencies": {
-    "forgo": "^0.0.35"
+    "forgo": "^0.0.36"
   },
@@ -14,0 +14,0 @@ "devDependencies": {

src/index.ts

@@ -6,2 +6,3 @@ import {
   rerender,
+  getForgoState,
 } from "forgo";
@@ -77,8 +78,36 @@
         if (args.element.node) {
-          let entry = argsListMap.get(args.element.node);
-          if (!entry) {
-            entry = [];
-            argsListMap.set(args.element.node, entry);
+          const state = getForgoState(args.element.node);
+          if (state) {
+            const componentState =
+              state.components[args.element.componentIndex];
+            if (componentState.numNodes === 1) {
+              let entry = argsListMap.get(args.element.node);
+              if (!entry) {
+                entry = [];
+                argsListMap.set(args.element.node, entry);
+              }
+              entry.push(args);
+            }
+            // This component rendered a fragment or an array
+            else {
+              const parentElement: HTMLElement = args.element.node
+                .parentElement as HTMLElement;
+              const childNodes = Array.from(parentElement.childNodes);
+              const nodeIndex = childNodes.findIndex(
+                (x) => x === args.element.node
+              );
+              const nodes = childNodes.slice(
+                nodeIndex,
+                nodeIndex + componentState.numNodes
+              );
+              for (const node of nodes) {
+                let entry = argsListMap.get(node);
+                if (!entry) {
+                  entry = [];
+                  argsListMap.set(node, entry);
+                }
+                entry.push(args);
+              }
+            }
           }
-          entry.push(args);
         }
@@ -90,3 +119,3 @@ }
       // The higher up components get rendered automatically.
-      const argsListWithMinComponentIndex: ForgoRenderArgs[] = [];
+      const argsListWithMinComponentIndex: [ChildNode, ForgoRenderArgs][] = [];
 
@@ -109,22 +138,21 @@ for (const entries of argsListMap) {
         if (argsWithMinComponentIndex) {
-          argsListWithMinComponentIndex.push(argsWithMinComponentIndex);
+          argsListWithMinComponentIndex.push([node, argsWithMinComponentIndex]);
         }
       }
 
-      // Now we gotta find if a node is a child of another node pending rerender
-      // If so, there's no need to render the descendant node.
+      // 1. We gotta find if a node is a child of another node pending rerender
+      //   If so, there's no need to render the descendant node.
+      // 2. Also, if a component renders multiple nodes, include only the root node.
       const justTheNodes = argsListWithMinComponentIndex
-        .map((x) => x.element.node)
+        .map(([node]) => node)
         .filter((x) => x) as ChildNode[];
 
       const argsListOfParentNodes = argsListWithMinComponentIndex.filter(
-        (arg) =>
-          !justTheNodes.some(
-            (node) =>
-              node !== arg.element.node && node.contains(arg.element.node as ChildNode)
-          )
+        ([node, args]) =>
+          !justTheNodes.some((x) => x !== node && x.contains(node)) &&
+          node === args.element.node
       );
 
       argsToRenderInTheNextCycle.length = 0;
-      for (const args of argsListOfParentNodes) {
+      for (const [node, args] of argsListOfParentNodes) {
         argsToRenderInTheNextCycle.push(args);
@@ -131,0 +159,0 @@ }

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

26829

increased by14.98%

Lines of code

417

increased by14.25%

Dependency changes

• + Addedforgo@0.0.36(transitive)

• - Removedforgo@0.0.35(transitive)

• Updatedforgo@^0.0.36