jsx-framework-test-pb 0.1.0 → 0.1.2

package/dist/reactivity/effect.js

@@ -1,4 +1,4 @@
-import { setActiveEffect } from "./state";
+import { setActiveEffect } from './state';
 export function effect(fn) {
     const runner = () => {
         setActiveEffect(runner);

package/dist/runtime/reconciler.d.ts

@@ -5,5 +5,5 @@ interface FiberNode {
     key: string | null;
     index: number;
 }
-export declare function reconcile(parent: HTMLElement, newElements: any[], oldFibers?: FiberNode[]): FiberNode[];
+export declare function reconcile(parent: HTMLElement, newElements: any[] | any, oldFibers?: FiberNode[]): FiberNode[];
 export {};

package/dist/runtime/reconciler.js

@@ -1,43 +1,74 @@
-import { createElement } from './createElement';
-import { isElement } from '../utils';
-const fiberMap = new WeakMap();
+import { createElement } from "./createElement";
+import { isElement } from "../utils";
+function canReuse(oldElement, newElement) {
+    if (typeof oldElement !== typeof newElement)
+        return false;
+    if (typeof oldElement !== "object" || !isElement(oldElement) || !isElement(newElement)) {
+        return false;
+    }
+    return oldElement.type === newElement.type;
+}
+function updateElement(dom, element) {
+    if (!isElement(element))
+        return;
+    const { props } = element;
+    Object.keys(props).forEach((key) => {
+        if (key === "children") {
+            return;
+        }
+        else if (key.startsWith("on") && typeof props[key] === "function") {
+            return;
+        }
+        else if (key === "className") {
+            dom.setAttribute("class", props[key]);
+        }
+        else if (key === "style" && typeof props[key] === "object") {
+            Object.assign(dom.style, props[key]);
+        }
+        else if (key !== "key" && props[key] != null) {
+            dom.setAttribute(key, String(props[key]));
+        }
+    });
+}
+function getInsertionPoint(parent, targetIndex) {
+    return parent.childNodes.item(targetIndex) ?? null;
+}
 export function reconcile(parent, newElements, oldFibers = []) {
     const newFibers = [];
     const newElementsArray = Array.isArray(newElements) ? newElements : [newElements];
     const oldFibersByKey = new Map();
     const oldFibersByIndex = new Map();
-    oldFibers.forEach((fiber, index) => {
-        if (fiber.key !== null) {
+    oldFibers.forEach((fiber, i) => {
+        if (fiber.key != null)
             oldFibersByKey.set(fiber.key, fiber);
-        }
-        else {
-            oldFibersByIndex.set(index, fiber);
-        }
+        else
+            oldFibersByIndex.set(i, fiber);
     });
-    const anchor = document.createComment('anchor');
-    if (!parent.contains(anchor)) {
-        parent.appendChild(anchor);
-    }
+    const reusedOldDoms = new Set();
     newElementsArray.forEach((element, index) => {
         const key = isElement(element) ? element.key : null;
-        let fiber;
         let oldFiber;
-        if (key !== null) {
+        if (key != null) {
             oldFiber = oldFibersByKey.get(key);
-            oldFibersByKey.delete(key);
+            if (oldFiber)
+                oldFibersByKey.delete(key);
         }
         else {
             oldFiber = oldFibersByIndex.get(index);
-            oldFibersByIndex.delete(index);
+            if (oldFiber)
+                oldFibersByIndex.delete(index);
         }
+        let fiber;
         if (oldFiber && canReuse(oldFiber.element, element)) {
             fiber = {
                 element,
                 dom: oldFiber.dom,
                 parent: null,
                 key,
-                index
+                index,
             };
+            if (fiber.dom)
+                reusedOldDoms.add(fiber.dom);
             if (oldFiber.dom && isElement(element)) {
                 updateElement(oldFiber.dom, element);
             }
@@ -49,55 +80,28 @@ export function reconcile(parent, newElements, oldFibers = []) {
                 dom,
                 parent: null,
                 key,
-                index
+                index,
             };
+            if (oldFiber?.dom && oldFiber.dom.parentNode === parent) {
+                parent.removeChild(oldFiber.dom);
+            }
             if (dom) {
-                parent.insertBefore(dom, anchor);
+                const before = getInsertionPoint(parent, index);
+                parent.insertBefore(dom, before);
             }
-            if (oldFiber?.dom) {
-                parent.removeChild(oldFiber.dom);
+        }
+        if (fiber.dom) {
+            const before = getInsertionPoint(parent, index);
+            if (fiber.dom !== before) {
+                parent.insertBefore(fiber.dom, before);
             }
         }
         newFibers.push(fiber);
-        if (fiber.dom && fiber.dom.nextSibling !== anchor) {
-            parent.insertBefore(fiber.dom, anchor);
-        }
     });
-    [...oldFibersByKey.values(), ...oldFibersByIndex.values()].forEach(fiber => {
-        if (fiber.dom) {
+    [...oldFibersByKey.values(), ...oldFibersByIndex.values()].forEach((fiber) => {
+        if (fiber.dom && fiber.dom.parentNode === parent && !reusedOldDoms.has(fiber.dom)) {
             parent.removeChild(fiber.dom);
         }
     });
     return newFibers;
 }
-function canReuse(oldElement, newElement) {
-    if (typeof oldElement !== typeof newElement) {
-        return false;
-    }
-    if (typeof oldElement !== 'object' || !isElement(oldElement) || !isElement(newElement)) {
-        return false;
-    }
-    return oldElement.type === newElement.type;
-}
-function updateElement(dom, element) {
-    if (!isElement(element))
-        return;
-    const { props } = element;
-    Object.keys(props).forEach(key => {
-        if (key === 'children') {
-            return;
-        }
-        else if (key.startsWith('on') && typeof props[key] === 'function') {
-            return;
-        }
-        else if (key === 'className') {
-            dom.setAttribute('class', props[key]);
-        }
-        else if (key === 'style' && typeof props[key] === 'object') {
-            Object.assign(dom.style, props[key]);
-        }
-        else if (key !== 'key' && props[key] != null) {
-            dom.setAttribute(key, String(props[key]));
-        }
-    });
-}

package/dist/types.d.ts

@@ -16,7 +16,7 @@ export interface ElementProps {
     children?: ElementChild | ElementChild[];
     [key: string]: any;
 }
-export type ElementChild = Element | string | number | boolean | null | undefined;
+export type ElementChild = Element | string | number | boolean | null | undefined | (() => any);
 export type FC<P = {}> = (props: P) => Element | null;
 export interface CSSProperties {
     [key: string]: string | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jsx-framework-test-pb",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",