forgo - npm Package Compare versions

Comparing version 0.0.38 to 0.0.39

dist/index.d.ts

@@ -58,6 +58,3 @@ declare global {
     args: ForgoRenderArgs;
-    numNodes: number;
-    isFragment: boolean;
-    hasMounted: boolean;
-    hasUnmounted: boolean;
+    nodes: ChildNode[];
 };
@@ -64,0 +61,0 @@ export declare type NodeAttachedState = {

dist/index.js

@@ -138,3 +138,3 @@ "use strict";
                 // Get rid of unwanted nodes.
-                unloadNodes(Array.from(childNodes).slice(nodeInsertionOptions.currentNodeIndex, searchResult.index));
+                unloadNodes(Array.from(childNodes).slice(nodeInsertionOptions.currentNodeIndex, searchResult.index), pendingAttachStates);
                 const targetNode = childNodes[searchResult.index];
@@ -172,3 +172,6 @@ syncStateAndProps(forgoElement, targetNode, targetNode, pendingAttachStates);
         // Get rid the the remaining nodes
-        unloadNodes(Array.from(parentElement.childNodes).slice(currentChildNodeIndex));
+        const nodesToRemove = Array.from(parentElement.childNodes).slice(currentChildNodeIndex);
+        if (nodesToRemove.length) {
+            unloadNodes(nodesToRemove, []);
+        }
     }
@@ -204,5 +207,3 @@ function addNewDOMElement(parentElement, oldNode) {
             if (searchResult.found) {
-                // Get rid of unwanted nodes.
-                unloadNodes(Array.from(childNodes).slice(nodeInsertionOptions.currentNodeIndex, searchResult.index));
-                const targetNode = childNodes[nodeInsertionOptions.currentNodeIndex];
+                const targetNode = childNodes[searchResult.index];
                 const state = getExistingForgoState(targetNode);
@@ -212,5 +213,9 @@ const componentState = state.components[componentIndex];
                 if (haveCompatibleState) {
+                    // Get rid of unwanted nodes.
+                    unloadNodes(Array.from(childNodes).slice(nodeInsertionOptions.currentNodeIndex, searchResult.index), pendingAttachStates.concat(componentState));
                     return renderExistingComponent(nodeInsertionOptions, componentState);
                 }
                 else {
+                    // Get rid of unwanted nodes.
+                    unloadNodes(Array.from(childNodes).slice(nodeInsertionOptions.currentNodeIndex, searchResult.index), pendingAttachStates);
                     return addNewComponent();
@@ -246,3 +251,3 @@ }
                     currentNodeIndex: nodeInsertionOptions.currentNodeIndex,
-                    length: newComponentState.numNodes,
+                    length: newComponentState.nodes.length,
                     parentElement: nodeInsertionOptions.parentElement,
@@ -258,3 +263,3 @@ };
             return {
-                nodes: allNodes.slice(indexOfNode, indexOfNode + componentState.numNodes),
+                nodes: allNodes.slice(indexOfNode, indexOfNode + componentState.nodes.length),
             };
@@ -279,6 +284,3 @@ }
             args,
-            numNodes: 0,
-            isFragment: false,
-            hasMounted: false,
-            hasUnmounted: false,
+            nodes: [],
         };
@@ -302,5 +304,4 @@ const statesToAttach = pendingAttachStates.concat(newComponentState);
             // And set numNodes.
-            newComponentState.numNodes = renderResult.nodes.length;
+            newComponentState.nodes = renderResult.nodes;
             if (renderResult.nodes.length > 1) {
-                newComponentState.isFragment = true;
                 newComponentState.args.element.node = renderResult.nodes[0];
@@ -334,10 +335,9 @@ }
     const newIndex = insertionOptions.currentNodeIndex + renderResult.nodes.length;
-    const nodesToRemove = Array.from(insertionOptions.parentElement.childNodes).slice(newIndex, newIndex + componentState.numNodes - numNodesRemoved);
-    unloadNodes(nodesToRemove);
+    const nodesToRemove = Array.from(insertionOptions.parentElement.childNodes).slice(newIndex, newIndex + componentState.nodes.length - numNodesRemoved);
+    unloadNodes(nodesToRemove, statesToAttach);
     // In case we rendered an array, set the node to the first node.
     // And set numNodes.
-    componentState.numNodes = renderResult.nodes.length;
+    componentState.nodes = renderResult.nodes;
     if (renderResult.nodes.length > 1) {
         componentState.args.element.node = renderResult.nodes[0];
-        componentState.isFragment = true;
     }
@@ -352,2 +352,3 @@ return renderResult;
     const flattenedNodes = flatten(forgoNodes);
+    const topmostComponentState = pendingAttachStates.slice(-1)[0];
     if (nodeInsertionOptions.type === "detached") {
@@ -364,2 +365,4 @@ throw new Error("Arrays and fragments cannot be rendered at the top level.");
             const { nodes } = internalRender(forgoNode, insertionOptions, pendingAttachStates);
+            allNodes = allNodes.concat(nodes);
+            topmostComponentState.nodes = allNodes;
             const totalNodesAfterRender = nodeInsertionOptions.parentElement.childNodes.length;
@@ -369,3 +372,2 @@ const numNodesRemoved = totalNodesBeforeRender + nodes.length - totalNodesAfterRender;
             numNodes -= numNodesRemoved;
-            allNodes = allNodes.concat(nodes);
         }
@@ -405,9 +407,11 @@ return { nodes: allNodes };
 */
-function unloadNodes(nodes) {
+function unloadNodes(nodes, pendingAttachStates) {
     for (const node of nodes) {
+        node.remove();
         const state = getForgoState(node);
         if (state) {
-            unmountComponents(state.components, 0);
+            const oldComponentStates = state.components;
+            const indexOfFirstIncompatibleState = findIndexOfFirstIncompatibleState(pendingAttachStates, oldComponentStates);
+            unmountComponents(state.components, indexOfFirstIncompatibleState);
         }
-        node.remove();
     }
@@ -429,3 +433,3 @@ }
             const oldState = oldStates[i];
-            if (oldState.ctor !== newState.ctor) {
+            if (oldState.component !== newState.component) {
                 break;
@@ -449,5 +453,15 @@ }
         const state = states[j];
-        if (state.component.unmount && !state.hasUnmounted) {
-            state.component.unmount(state.props, state.args);
-            state.hasUnmounted = true;
+        if (state.component.unmount) {
+            if (state.nodes.every((x) => {
+                if (!x.isConnected) {
+                    return true;
+                }
+                else {
+                    const componentState = getExistingForgoState(x);
+                    return (!componentState.components[j] ||
+                        componentState.components[j].component !== state.component);
+                }
+            })) {
+                state.component.unmount(state.props, state.args);
+            }
         }
@@ -464,5 +478,4 @@ }
         const state = states[j];
-        if (state.component.mount && !state.hasMounted) {
+        if (state.component.mount && state.nodes.length === 0) {
             state.component.mount(state.props, state.args);
-            state.hasMounted = true;
         }
@@ -643,3 +656,3 @@ }
                         currentNodeIndex: nodeIndex,
-                        length: componentState.numNodes,
+                        length: componentState.nodes.length,
                         parentElement,
@@ -654,3 +667,3 @@ };
                     return {
-                        nodes: allNodes.slice(indexOfNode, indexOfNode + componentState.numNodes),
+                        nodes: allNodes.slice(indexOfNode, indexOfNode + componentState.nodes.length),
                     };
@@ -708,5 +721,2 @@ }
 }
-function isForgoCustomComponent(node) {
-    return isForgoElement(node) && typeof node.type !== "string";
-}
 function isForgoFragment(node) {
@@ -713,0 +723,0 @@ return isForgoElement(node) && node.type === exports.Fragment;

package.json

 {
   "name": "forgo",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "main": "./dist",
@@ -5,0 +5,0 @@ "author": "Jeswin Kumar<[e-mail]>",

src/index.ts

@@ -132,6 +132,3 @@ declare global {
   args: ForgoRenderArgs;
-  numNodes: number;
-  isFragment: boolean;
-  hasMounted: boolean;
-  hasUnmounted: boolean;
+  nodes: ChildNode[];
 };
@@ -362,3 +359,4 @@
             searchResult.index
-          )
+          ),
+          pendingAttachStates
         );
@@ -422,5 +420,8 @@
     // Get rid the the remaining nodes
-    unloadNodes(
-      Array.from(parentElement.childNodes).slice(currentChildNodeIndex)
+    const nodesToRemove = Array.from(parentElement.childNodes).slice(
+      currentChildNodeIndex
     );
+    if (nodesToRemove.length) {
+      unloadNodes(nodesToRemove, []);
+    }
   }
@@ -476,11 +477,3 @@
       if (searchResult.found) {
-        // Get rid of unwanted nodes.
-        unloadNodes(
-          Array.from(childNodes).slice(
-            nodeInsertionOptions.currentNodeIndex,
-            searchResult.index
-          )
-        );
-
-        const targetNode = childNodes[nodeInsertionOptions.currentNodeIndex];
+        const targetNode = childNodes[searchResult.index];
         const state = getExistingForgoState(targetNode);
@@ -493,4 +486,20 @@ const componentState = state.components[componentIndex];
         if (haveCompatibleState) {
+          // Get rid of unwanted nodes.
+          unloadNodes(
+            Array.from(childNodes).slice(
+              nodeInsertionOptions.currentNodeIndex,
+              searchResult.index
+            ),
+            pendingAttachStates.concat(componentState)
+          );
           return renderExistingComponent(nodeInsertionOptions, componentState);
         } else {
+          // Get rid of unwanted nodes.
+          unloadNodes(
+            Array.from(childNodes).slice(
+              nodeInsertionOptions.currentNodeIndex,
+              searchResult.index
+            ),
+            pendingAttachStates
+          );
           return addNewComponent();
@@ -550,3 +559,3 @@ }
             currentNodeIndex: nodeInsertionOptions.currentNodeIndex,
-            length: newComponentState.numNodes,
+            length: newComponentState.nodes.length,
             parentElement: nodeInsertionOptions.parentElement,
@@ -575,3 +584,3 @@ };
           indexOfNode,
-          indexOfNode + componentState.numNodes
+          indexOfNode + componentState.nodes.length
         ),
@@ -595,3 +604,3 @@ };
     // ... and push it to pendingAttachStates
-    const newComponentState = {
+    const newComponentState: NodeAttachedComponentState<any> = {
       key: forgoElement.key,
@@ -602,6 +611,3 @@ ctor,
       args,
-      numNodes: 0,
-      isFragment: false,
-      hasMounted: false,
-      hasUnmounted: false,
+      nodes: [],
     };
@@ -640,5 +646,4 @@
         // And set numNodes.
-        newComponentState.numNodes = renderResult.nodes.length;
+        newComponentState.nodes = renderResult.nodes;
         if (renderResult.nodes.length > 1) {
-          newComponentState.isFragment = true;
           newComponentState.args.element.node = renderResult.nodes[0];
@@ -704,12 +709,11 @@ }
     insertionOptions.parentElement.childNodes
-  ).slice(newIndex, newIndex + componentState.numNodes - numNodesRemoved);
+  ).slice(newIndex, newIndex + componentState.nodes.length - numNodesRemoved);
 
-  unloadNodes(nodesToRemove);
+  unloadNodes(nodesToRemove, statesToAttach);
 
   // In case we rendered an array, set the node to the first node.
   // And set numNodes.
-  componentState.numNodes = renderResult.nodes.length;
+  componentState.nodes = renderResult.nodes;
   if (renderResult.nodes.length > 1) {
     componentState.args.element.node = renderResult.nodes[0];
-    componentState.isFragment = true;
   }
@@ -730,2 +734,3 @@
   const flattenedNodes = flatten(forgoNodes);
+  const topmostComponentState = pendingAttachStates.slice(-1)[0];
   if (nodeInsertionOptions.type === "detached") {
@@ -756,2 +761,6 @@ throw new Error(
       );
+
+      allNodes = allNodes.concat(nodes);
+      topmostComponentState.nodes = allNodes;
+
       const totalNodesAfterRender =
@@ -765,4 +774,2 @@ nodeInsertionOptions.parentElement.childNodes.length;
       numNodes -= numNodesRemoved;
-
-      allNodes = allNodes.concat(nodes);
     }
@@ -822,9 +829,17 @@
 */
-function unloadNodes(nodes: ChildNode[]) {
+function unloadNodes(
+  nodes: ChildNode[],
+  pendingAttachStates: NodeAttachedComponentState<any>[]
+) {
   for (const node of nodes) {
+    node.remove();
     const state = getForgoState(node);
     if (state) {
-      unmountComponents(state.components, 0);
-    }
-    node.remove();
+      const oldComponentStates = state.components;
+      const indexOfFirstIncompatibleState = findIndexOfFirstIncompatibleState(
+        pendingAttachStates,
+        oldComponentStates
+      );
+      unmountComponents(state.components, indexOfFirstIncompatibleState);
+    }    
   }
@@ -851,3 +866,3 @@ }
       const oldState = oldStates[i];
-      if (oldState.ctor !== newState.ctor) {
+      if (oldState.component !== newState.component) {
         break;
@@ -875,5 +890,18 @@ }
     const state = states[j];
-    if (state.component.unmount && !state.hasUnmounted) {
-      state.component.unmount(state.props, state.args);
-      state.hasUnmounted = true;
+    if (state.component.unmount) {
+      if (
+        state.nodes.every((x) => {
+          if (!x.isConnected) {
+            return true;
+          } else {
+            const componentState = getExistingForgoState(x);
+            return (
+              !componentState.components[j] ||
+              componentState.components[j].component !== state.component
+            );
+          }
+        })
+      ) {
+        state.component.unmount(state.props, state.args);
+      }
     }
@@ -894,5 +922,4 @@ }
     const state = states[j];
-    if (state.component.mount && !state.hasMounted) {
+    if (state.component.mount && state.nodes.length === 0) {
       state.component.mount(state.props, state.args);
-      state.hasMounted = true;
     }
@@ -1151,3 +1178,3 @@ }
             currentNodeIndex: nodeIndex,
-            length: componentState.numNodes,
+            length: componentState.nodes.length,
             parentElement,
@@ -1170,3 +1197,3 @@ };
               indexOfNode,
-              indexOfNode + componentState.numNodes
+              indexOfNode + componentState.nodes.length
             ),
@@ -1232,8 +1259,2 @@ };
 
-function isForgoCustomComponent(
-  node: ForgoNode
-): node is ForgoCustomComponentElement<any> {
-  return isForgoElement(node) && typeof node.type !== "string";
-}
-
 function isForgoFragment(node: ForgoNode): node is ForgoFragment {
@@ -1240,0 +1261,0 @@ return isForgoElement(node) && node.type === Fragment;

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

117090

increased by1.76%

Lines of code

2069

increased by1.42%

No dependency changes