ks-fwork 3.0.5 → 4.1.0

package/dist/ks-fwork.js

@@ -195,6 +195,38 @@ 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 nextTick() {
+    scheduleUpdate();
+    return flushPromises();
+}
+function flushPromises() {
+    return new Promise((resolve) => setTimeout(resolve));
+}
+
 function destroyDOM(vNode) {
     const { type } = vNode;
     switch (type) {
@@ -212,6 +244,7 @@ function destroyDOM(vNode) {
         }
         case DOM_TYPES.COMPONENT: {
             vNode.component.unmount();
+            enqueueJob(() => vNode.component.onUnmounted());
             break;
         }
         default: {
@@ -303,6 +336,7 @@ function mountDOM(vNode, parentEl, index, hostComponent = null) {
         }
         case DOM_TYPES.COMPONENT: {
             createComponentNode(vNode, parentEl, index, hostComponent);
+            enqueueJob(() => vNode.component.onMounted());
             break;
         }
         default: {
@@ -641,7 +675,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;
@@ -656,6 +691,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 [];
@@ -750,4 +791,4 @@ function defineComponent({ render, state, ...methods }) {
     return Component;
 }
 
-export { createApp, defineComponent, h, hFragment, hString };
+export { createApp, defineComponent, h, hFragment, hString, nextTick };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ks-fwork",
-  "version": "3.0.5",
+  "version": "4.1.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/index.js

@@ -1,3 +1,4 @@
 export { createApp } from './app.js'
 export { defineComponent } from './component.js'
 export { h, hFragment, hString } from './h.js'
+export { nextTick } from './scheduler.js'

package/src/mount-dom.js

@@ -1,6 +1,7 @@
 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.
@@ -23,6 +24,7 @@ export function mountDOM(vNode, parentEl, index, hostComponent = null) {
 
         case DOM_TYPES.COMPONENT: {
             createComponentNode(vNode, parentEl, index, hostComponent);
+            enqueueJob(() => vNode.component.onMounted());
             break;
         }
 

package/src/scheduler.js

@@ -0,0 +1,37 @@
+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;
+}
+
+export function nextTick() {
+    scheduleUpdate();
+    return flushPromises();
+}
+
+function flushPromises() {
+    return new Promise((resolve) => setTimeout(resolve));
+}