ks-fwork 3.0.4 → 4.0.0

package/dist/ks-fwork.js

@@ -195,6 +195,31 @@ function extractChildren(vNode) {
     return children;
 }
 
+let isScheduled = false;
+const jobs = [];
+function enqueueJob(job) {
+    jobs.push(job);
+    scheduleUpdate();
+}
+function scheduleUpdate() {
+    if (isScheduled) return;
+    isScheduled = true;
+    queueMicrotask(processJobs);
+}
+function processJobs() {
+    while (jobs.length > 0) {
+        const job = jobs.shift();
+        try {
+            Promise.resolve(job()).catch((error) => {
+                console.error(`[scheduler]: ${error}`);
+            });
+        } catch (error) {
+            console.error(`[scheduler]: ${error}`);
+        }
+    }
+    isScheduled = false;
+}
+
 function destroyDOM(vNode) {
     const { type } = vNode;
     switch (type) {
@@ -212,6 +237,7 @@ function destroyDOM(vNode) {
         }
         case DOM_TYPES.COMPONENT: {
             vNode.component.unmount();
+            enqueueJob(() => vNode.component.onUnmounted());
             break;
         }
         default: {
@@ -287,7 +313,7 @@ function extractPropsAndEvents(vNode) {
     return { props, events }
 }
 
-function mountDOM(vNode, parentEl, index = undefined, hostComponent = null) {
+function mountDOM(vNode, parentEl, index, hostComponent = null) {
     switch (vNode.type) {
         case DOM_TYPES.TEXT: {
             createTextNode(vNode, parentEl, index);
@@ -303,6 +329,8 @@ function mountDOM(vNode, parentEl, index = undefined, hostComponent = null) {
         }
         case DOM_TYPES.COMPONENT: {
             createComponentNode(vNode, parentEl, index, hostComponent);
+            enqueueJob(() => vNode.component.onMounted());
+            break;
         }
         default: {
             throw new Error(`Can't mount virtual node of type: ${vNode.type}`);
@@ -640,7 +668,8 @@ class Dispatcher {
     }
 }
 
-function defineComponent({ render, state, ...methods }) {
+const emptyFn = () => {};
+function defineComponent({ render, state, onMounted = emptyFn, onUnmounted = emptyFn, ...methods }) {
     class Component {
         #isMounted = false;
         #vNode = null;
@@ -655,6 +684,12 @@ function defineComponent({ render, state, ...methods }) {
             this.#eventHandlers = eventHandlers;
             this.#parentComponent = parentComponent;
         }
+        onMounted() {
+            return Promise.resolve(onMounted.call(this));
+        }
+        onUnmounted() {
+            return Promise.resolve(onUnmounted.call(this));
+        }
         get elements() {
             if (this.#vNode == null) {
                 return [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "3.0.4",
+  "version": "4.0.0",
   "description": "Demo Frontend Framework",
   "license": "ISC",
   "author": "",

package/src/component.js

@@ -7,7 +7,9 @@ import { hasOwnProperty } from "./utils/objects.js";
 import equal from 'fast-deep-equal';
 import { Dispatcher } from "./dispatcher.js";
 
-export function defineComponent({ render, state, ...methods }) {
+const emptyFn = () => {};
+
+export function defineComponent({ render, state, onMounted = emptyFn, onUnmounted = emptyFn, ...methods }) {
     class Component {
         #isMounted = false;
         #vNode = null;
@@ -24,6 +26,14 @@ export function defineComponent({ render, state, ...methods }) {
             this.#parentComponent = parentComponent;
         }
 
+        onMounted() {
+            return Promise.resolve(onMounted.call(this));
+        }
+
+        onUnmounted() {
+            return Promise.resolve(onUnmounted.call(this));
+        }
+
         get elements() {
             // If vNode is null, return an empty array
             if (this.#vNode == null) {

package/src/destroy-dom.js

@@ -1,5 +1,6 @@
 import { removeEventListeners } from './events.js'
 import { DOM_TYPES } from "./h.js";
+import { enqueueJob } from "./scheduler.js";
 
 // Recursively destroy a virtual node (and its subtree).
 export function destroyDOM(vNode) {
@@ -23,6 +24,7 @@ export function destroyDOM(vNode) {
 
         case DOM_TYPES.COMPONENT: {
             vNode.component.unmount();
+            enqueueJob(() => vNode.component.onUnmounted());
             break;
         }
 

package/src/mount-dom.js

@@ -1,10 +1,11 @@
 import { DOM_TYPES } from "./h.js";
 import { setAttributes } from './attributes.js'
 import { addEventListeners } from "./events.js";
+import { enqueueJob } from "./scheduler.js";
 import { extractPropsAndEvents } from "./utils/props.js";
 
 // Recursively mount a virtual node (and its subtree) into a real parent DOM element.
-export function mountDOM(vNode, parentEl, index = undefined, hostComponent = null) {
+export function mountDOM(vNode, parentEl, index, hostComponent = null) {
     switch (vNode.type) {
         case DOM_TYPES.TEXT: {
             createTextNode(vNode, parentEl, index);
@@ -23,6 +24,8 @@ export function mountDOM(vNode, parentEl, index = undefined, hostComponent = nul
 
         case DOM_TYPES.COMPONENT: {
             createComponentNode(vNode, parentEl, index, hostComponent);
+            enqueueJob(() => vNode.component.onMounted());
+            break;
         }
 
         default: {

package/src/scheduler.js

@@ -0,0 +1,28 @@
+let isScheduled = false;
+const jobs = [];
+
+export function enqueueJob(job) {
+    jobs.push(job);
+    scheduleUpdate();
+}
+
+function scheduleUpdate() {
+    if (isScheduled) return;
+
+    isScheduled = true;
+    queueMicrotask(processJobs);
+}
+
+function processJobs() {
+    while (jobs.length > 0) {
+        const job = jobs.shift();
+        try {
+            Promise.resolve(job()).catch((error) => {
+                console.error(`[scheduler]: ${error}`);
+            });
+        } catch (error) {
+            console.error(`[scheduler]: ${error}`);
+        }
+    }
+    isScheduled = false;
+}