Added slot checking in render() method for skip unnecessary computation

Author: erenworld

docs/rounting.md

@@ -0,0 +1,3 @@
+The concept of routing is crucial for web application navigation. Traditionally, visiting a website involved making a server request for each click or interaction, leading to the loading of a new HTML page. However, Single-Page Applications (SPAs) have transformed this approach.
+
+SPAs provide a dynamic and interactive user experience by loading a single HTML page initially and updating its content dynamically as users interact. Routing in SPAs refers to how the application manages different views or "pages" based on the URL or user interactions, all without full page reloads. This client-side navigation leads to faster load times, smoother transitions, and a more engaging user experience.

src/components/component.js

@@ -1,11 +1,17 @@
 import { destroyDOM } from "../destroy-dom";
 import { mountDOM } from "../mount-dom";
 import { patchDOM } from "../patch-dom";
-import { DOM_TYPES, extractChildren } from "../h";
+import {
+    DOM_TYPES,
+    extractChildren,
+    didCreateSlot, 
+    resetDidCreateSlot
+} from "../h";
 import { hasOwnProperty } from "../utils/objects";
 import { Dispatcher } from "../dispatcher";
 import { fillSlots } from './slots';
 
+
 const emptyFn = () => {};
 
 export function defineComponent({ render, 
@@ -101,7 +107,11 @@ export function defineComponent({ render,
             // returns its view as a virtual DOM based on the state.
             // return render.call(this);
             const vdom = render.call(this);
-            fillSlots(vdom, this.#children);
+
+            if (didCreateSlot()) {
+                fillSlots(vdom, this.#children);
+                resetDidCreateSlot();
+            }
 
             return vdom;
         }

src/h.js

@@ -8,6 +8,8 @@ export const DOM_TYPES = {
     SLOT: 'slot'
 }
 
+let hSlotCalled = false;
+
 export function hString(str) {
     return {
         type: DOM_TYPES.TEXT,
@@ -34,7 +36,16 @@ export function hFragment(vNodes) {
     }
 }
 
+export function didCreateSlot() {
+    return hSlotCalled;
+}
+
+export function resetDidCreateSlot() {
+    hSlotCalled = false;
+}
+
 export function hSlot(children = []) {
+    hSlotCalled = true;
     return { type: DOM_TYPES.SLOT, children };
 }
 

src/index.js

@@ -1,4 +1,4 @@
 export { createApp } from './app';
-export { hString, hElement, hFragment } from './h';
+export { DOM_TYPES, hString, hElement, hFragment, hSlot } from './h';
 export { defineComponent } from './components/component';
 export { nextTick } from './next-tick.js'

src/slots.js

@@ -0,0 +1,36 @@
+import { traverseDFS } from "./utils/traverse-dom";
+import { DOM_TYPES, hFragment } from "./h";
+
+// Replaces the slot nodes with the external content (or their default content). 
+// You want to traverse the virtual DOM tree and if the encountered node is a slot, 
+// replace it with the external or default content.
+export function fillSlots(vdom, externalContent = []) {
+    function processNodeFn(node, parent, index) {
+        insertViewInSlot(node, parent, index, externalContent);
+    }
+
+    traverseDFS(vdom, processNodeFn, shouldSkipBranch);
+}
+
+function insertViewInSlot(node, parent, index, externalContent) {
+    if (node.type !== DOM_TYPES.SLOT) return;
+
+    const defaultValue = node.children;
+    const views = externalContent.length > 0 ? externalContent : defaultValue;
+
+    const hasContent = views.length > 0;
+    if (hasContent) {
+        parent.children.splice(index, 1, hFragment(views));
+    } else {
+        parent.children.splice(index, 1);
+    }
+}
+
+function shouldSkipBranch(node) {
+    return node.type === DOM_TYPES.COMPONENT;
+}
+
+// processNode
+// node: the node being processed.
+// parent: the parent node of the node being processed.
+// index: the index of the node being processed in the parent’s children array.

src/utils/traverse-dom.js

@@ -0,0 +1,22 @@
+
+// Explore a node’s children before exploring its siblings. Algorithm 101 :)
+
+export function traverseDFS(
+    vdom, 
+    processNodeFn,
+    shouldSkipBranch = () => false,
+    parentNode = null,
+    index = null,
+) {
+    if (shouldSkipBranch(vdom)) return;
+
+    processNodeFn(vdom, parentNode, index);
+
+    if (vdom.children) {
+        vdom.children.forEach((child, i) =>
+            traverseDFS(child, processNodeFn, shouldSkipBranch, vdom, i)
+        )
+    }
+}
+
+// Skip the traversal of a branch of the virtual node tree when a component is encountered.