@simpreact/simpreact 0.0.7 → 0.0.9

package/component/index.js

@@ -1,11 +1,11 @@
-import { lifecycleEventBus, rerender, SIMP_ELEMENT_FLAG_FC, } from '../core/internal.js';
+import { isFC, registerLifecyclePlugin, rerender, } from '../core/internal.js';
 import { emptyObject, shallowEqual, } from '../shared/index.js';
-const componentSpecificStoreByElementStore = new WeakMap();
-function getComponentSpecificStore(store, renderRuntime) {
-    let hooksSpecificStore = componentSpecificStoreByElementStore.get(store);
+const componentSpecificStoreByElement = new WeakMap();
+function getComponentSpecificStore(element, renderRuntime) {
+    let hooksSpecificStore = componentSpecificStoreByElement.get(element);
     if (!hooksSpecificStore) {
         function _rerender() {
-            rerender(store, renderRuntime);
+            rerender(element, renderRuntime);
         }
         hooksSpecificStore = {
             context: {
@@ -17,121 +17,123 @@ function getComponentSpecificStore(store, renderRuntime) {
             pendingEffectStates: null,
             effectStates: null,
         };
-        componentSpecificStoreByElementStore.set(store, hooksSpecificStore);
+        componentSpecificStoreByElement.set(element, hooksSpecificStore);
     }
     return hooksSpecificStore;
 }
-lifecycleEventBus.subscribe(event => {
-    if (event.type === 'errored') {
-        if (event.handled) {
-            return;
-        }
-        let element = event.element;
-        let curError = event.error;
-        let catchers;
-        while (element) {
-            if (!isComponentElement(element)) {
-                element = element.parent;
-                continue;
-            }
-            const store = getComponentSpecificStore(element.store, event.renderRuntime);
-            catchers = store.context.catchers;
-            if (!catchers) {
-                element = element.parent;
-                continue;
+registerLifecyclePlugin(bus => {
+    bus.subscribe(event => {
+        if (event.type === 'errored') {
+            if (event.handled) {
+                return;
             }
-            try {
-                for (let i = 0; i < catchers.length; i++) {
-                    catchers[i](curError);
+            let element = event.element;
+            let curError = event.error;
+            let catchers;
+            while (element) {
+                if (!isComponentElement(element)) {
+                    element = element.parent;
+                    continue;
+                }
+                const store = getComponentSpecificStore(element, event.renderRuntime);
+                catchers = store.context.catchers;
+                if (!catchers) {
+                    element = element.parent;
+                    continue;
+                }
+                try {
+                    for (let i = 0; i < catchers.length; i++) {
+                        catchers[i](curError);
+                    }
+                    event.handled = true;
+                    break;
+                }
+                catch (error) {
+                    element = element.parent;
+                    curError = error;
                 }
-                event.handled = true;
-                break;
-            }
-            catch (error) {
-                element = element.parent;
-                curError = error;
             }
+            return;
         }
-        return;
-    }
-    if (!isComponentElement(event.element)) {
-        return;
-    }
-    const store = getComponentSpecificStore(event.element.store, event.renderRuntime);
-    switch (event.type) {
-        case 'beforeRender': {
-            store.context.effects = [];
-            store.context.catchers = [];
-            store.pendingEffectStates = null;
+        if (!isComponentElement(event.element)) {
             return;
         }
-        case 'afterRender': {
-            if (!store.context.effects) {
+        const store = getComponentSpecificStore(event.element, event.renderRuntime);
+        switch (event.type) {
+            case 'beforeRender': {
+                store.context.effects = [];
+                store.context.catchers = [];
+                store.pendingEffectStates = null;
                 return;
             }
-            for (let i = 0; i < store.context.effects.length; i++) {
-                const renderEffectState = store.context.effects[i];
-                let state = (store.effectStates ||= [])[i];
-                if (!state) {
-                    state = store.effectStates[i] = {
-                        effect: renderEffectState.effect,
-                        deps: null,
-                        cleanup: null,
-                    };
+            case 'afterRender': {
+                if (!store.context.effects) {
+                    return;
                 }
-                if (!shallowEqual(renderEffectState.deps, state.deps)) {
-                    state.effect = renderEffectState.effect;
-                    state.deps = renderEffectState.deps || null;
-                    (store.pendingEffectStates ||= []).push(state);
+                for (let i = 0; i < store.context.effects.length; i++) {
+                    const renderEffectState = store.context.effects[i];
+                    let state = (store.effectStates ||= [])[i];
+                    if (!state) {
+                        state = store.effectStates[i] = {
+                            effect: renderEffectState.effect,
+                            deps: null,
+                            cleanup: null,
+                        };
+                    }
+                    if (!shallowEqual(renderEffectState.deps, state.deps)) {
+                        state.effect = renderEffectState.effect;
+                        state.deps = renderEffectState.deps || null;
+                        (store.pendingEffectStates ||= []).push(state);
+                    }
                 }
-            }
-            return;
-        }
-        case 'mounted': {
-            if (!store.pendingEffectStates) {
                 return;
             }
-            const effects = store.pendingEffectStates;
-            store.pendingEffectStates = null;
-            for (const state of effects) {
-                if (typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'mounted': {
+                if (!store.pendingEffectStates) {
+                    return;
+                }
+                const effects = store.pendingEffectStates;
+                store.pendingEffectStates = null;
+                for (const state of effects) {
+                    if (typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
+                    state.cleanup = state.effect() || null;
                 }
-                state.cleanup = state.effect() || null;
-            }
-            return;
-        }
-        case 'updated': {
-            if (!store.pendingEffectStates) {
                 return;
             }
-            const effects = store.pendingEffectStates;
-            store.pendingEffectStates = null;
-            for (const state of effects) {
-                if (typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'updated': {
+                if (!store.pendingEffectStates) {
+                    return;
+                }
+                const effects = store.pendingEffectStates;
+                store.pendingEffectStates = null;
+                for (const state of effects) {
+                    if (typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
+                    state.cleanup = state.effect() || null;
                 }
-                state.cleanup = state.effect() || null;
-            }
-            return;
-        }
-        case 'unmounted': {
-            if (!store.effectStates) {
                 return;
             }
-            const effects = store.effectStates;
-            store.effectStates = null;
-            for (const state of effects) {
-                if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
-                    state.cleanup();
+            case 'unmounted': {
+                if (!store.effectStates) {
+                    return;
+                }
+                const effects = store.effectStates;
+                store.effectStates = null;
+                for (const state of effects) {
+                    if (state && 'cleanup' in state && typeof state.cleanup === 'function') {
+                        state.cleanup();
+                    }
                 }
             }
         }
-    }
+    });
 });
 export function componentRenderer(component, element, renderRuntime) {
     if (isComponentElement(element)) {
-        const store = getComponentSpecificStore(element.store, renderRuntime);
+        const store = getComponentSpecificStore(element, renderRuntime);
         return component(element.props || emptyObject, store.context);
     }
     else {
@@ -160,5 +162,5 @@ export function createState(onChange) {
     });
 }
 export function isComponentElement(element) {
-    return element.flag & SIMP_ELEMENT_FLAG_FC && element.type._isComponent;
+    return isFC(element) && element.type._isComponent;
 }

package/context/index.d.ts

@@ -1,4 +1,4 @@
-import type { FunctionalComponent, SimpNode } from '../core/index.js';
+import type { FC, SimpNode, SimpRenderRuntime } from '../core/index.js';
 
 export interface ProviderProps<T> {
   value: T;
@@ -16,16 +16,16 @@ export type SimpContext<T> = {
 
 export type ContextType<C extends SimpContext<any>> = C extends SimpContext<infer T> ? T : never;
 
-export type Provider<T> = FunctionalComponent<ProviderProps<T>>;
-export type Consumer<T> = FunctionalComponent<ConsumerProps<T>>;
+export type Provider<T> = FC<ProviderProps<T>>;
+export type Consumer<T> = FC<ConsumerProps<T>>;
 
 export interface CreateContext {
   <T>(defaultValue: T): SimpContext<T>;
 }
 
-declare function createCreateContext(renderRuntime: SimpRenderRuntime): CreateContext;
+export declare function createCreateContext(renderRuntime: SimpRenderRuntime): CreateContext;
 
 export interface UseContext {
   <T>(context: SimpContext<T>): T;
 }
-declare function createUseContext(renderRuntime: SimpRenderRuntime): UseContext;
+export declare function createUseContext(renderRuntime: SimpRenderRuntime): UseContext;

package/context/index.js

@@ -1,27 +1,39 @@
-import { lifecycleEventBus, MOUNTING_PHASE, rerender, } from '../core/internal.js';
-lifecycleEventBus.subscribe(event => {
-    if (event.type === 'unmounted' && event.element.context) {
-        const contextMap = event.element.context;
-        for (const entry of contextMap.values()) {
-            entry.subs.delete(event.element.store);
+import { registerLifecyclePlugin, rerender, } from '../core/internal.js';
+const currentFCByRuntime = new WeakMap();
+registerLifecyclePlugin(bus => {
+    bus.subscribe(event => {
+        if (event.type === 'beforeRender') {
+            currentFCByRuntime.set(event.renderRuntime, event.element);
         }
-    }
+        else if (event.type === 'afterRender' || event.type === 'errored') {
+            currentFCByRuntime.set(event.renderRuntime, null);
+        }
+        if (event.type === 'unmounted' && event.element.context) {
+            const contextMap = event.element.context;
+            for (const entry of contextMap.values()) {
+                entry.subs.delete(event.element);
+            }
+        }
+    });
 });
 export function createCreateContext(renderRuntime) {
     return defaultValue => {
+        const providerElements = new WeakSet();
         const context = {
             defaultValue,
             Provider(props) {
-                const currentElement = renderRuntime.currentRenderingFCElement;
-                const renderPhase = renderRuntime.renderPhase;
+                const currentElement = currentFCByRuntime.get(renderRuntime);
+                const isFirstRender = !providerElements.has(currentElement);
                 let contextMap = currentElement.context;
                 if (!contextMap) {
                     currentElement.context = contextMap = new Map();
+                    providerElements.add(currentElement);
                 }
-                else if (renderPhase === MOUNTING_PHASE) {
+                else if (isFirstRender) {
                     currentElement.context = contextMap = new Map(currentElement.context);
+                    providerElements.add(currentElement);
                 }
-                if (renderPhase === MOUNTING_PHASE) {
+                if (isFirstRender) {
                     contextMap.set(context, { value: props.value, subs: new Set() });
                     return props.children;
                 }
@@ -40,14 +52,13 @@ export function createCreateContext(renderRuntime) {
                 return props.children;
             },
             Consumer(props) {
-                const currentElement = renderRuntime.currentRenderingFCElement;
+                const currentElement = currentFCByRuntime.get(renderRuntime);
                 const contextMap = currentElement.context;
-                const store = currentElement.store;
                 const entry = contextMap?.get(context);
                 if (!entry) {
                     return props.children(defaultValue);
                 }
-                entry.subs.add(store);
+                entry.subs.add(currentElement);
                 return props.children(entry.value);
             },
         };
@@ -56,14 +67,13 @@ export function createCreateContext(renderRuntime) {
 }
 export function createUseContext(renderRuntime) {
     return context => {
-        const currentElement = renderRuntime.currentRenderingFCElement;
+        const currentElement = currentFCByRuntime.get(renderRuntime);
         const contextMap = currentElement.context;
-        const store = currentElement.store;
         const entry = contextMap?.get(context);
         if (!entry) {
             return context.defaultValue;
         }
-        entry.subs.add(store);
+        entry.subs.add(currentElement);
         return entry.value;
     };
 }

package/core/createElement.js

@@ -1,15 +1,7 @@
 import { isSimpText } from '../shared/index.js';
+import { SIMP_ELEMENT_CHILD_FLAG_ELEMENT, SIMP_ELEMENT_CHILD_FLAG_EMPTY, SIMP_ELEMENT_CHILD_FLAG_LIST, SIMP_ELEMENT_CHILD_FLAG_TEXT, SIMP_ELEMENT_CHILD_FLAG_UNKNOWN, SIMP_ELEMENT_FLAG_FC, SIMP_ELEMENT_FLAG_FRAGMENT, SIMP_ELEMENT_FLAG_HOST, SIMP_ELEMENT_FLAG_PORTAL, SIMP_ELEMENT_FLAG_TEXT, } from './flags.js';
 import { Fragment } from './fragment.js';
-export const SIMP_ELEMENT_FLAG_HOST = 1;
-export const SIMP_ELEMENT_FLAG_FC = 1 << 1;
-export const SIMP_ELEMENT_FLAG_TEXT = 1 << 2;
-export const SIMP_ELEMENT_FLAG_PORTAL = 1 << 3;
-export const SIMP_ELEMENT_FLAG_FRAGMENT = 1 << 4;
-export const SIMP_ELEMENT_CHILD_FLAG_EMPTY = 1;
-export const SIMP_ELEMENT_CHILD_FLAG_UNKNOWN = 1 << 1;
-export const SIMP_ELEMENT_CHILD_FLAG_ELEMENT = 1 << 2;
-export const SIMP_ELEMENT_CHILD_FLAG_LIST = 1 << 3;
-export const SIMP_ELEMENT_CHILD_FLAG_TEXT = 1 << 4;
+export * from './flags.js';
 export function createElement(type, props) {
     let definedChildren;
     const argLength = arguments.length;
@@ -38,9 +30,9 @@ export function createElement(type, props) {
                     type,
                     props: props || null,
                     children: null,
-                    className: props?.className || null,
+                    className: props?.className ?? props?.class ?? null,
                     reference: null,
-                    store: null,
+                    hostNamespace: null,
                     context: null,
                     ref: props?.ref ? { value: props.ref } : null,
                     unmounted: null,
@@ -63,7 +55,7 @@ export function createElement(type, props) {
                 children: null,
                 className: props?.className || null,
                 reference: null,
-                store: null,
+                hostNamespace: null,
                 context: null,
                 ref: props?.ref ? { value: props.ref } : null,
                 unmounted: null,
@@ -84,7 +76,7 @@ export function createElement(type, props) {
                 children: null,
                 className: null,
                 reference: null,
-                store: null,
+                hostNamespace: null,
                 context: null,
                 ref: null,
                 unmounted: null,
@@ -92,6 +84,9 @@ export function createElement(type, props) {
             };
         }
         default: {
+            if (type !== Fragment) {
+                throw new Error(`Invalid element type: ${String(type)}`);
+            }
             return normalizeChildren({
                 flag: SIMP_ELEMENT_FLAG_FRAGMENT,
                 childFlag: SIMP_ELEMENT_CHILD_FLAG_UNKNOWN,
@@ -102,7 +97,7 @@ export function createElement(type, props) {
                 children: null,
                 className: null,
                 reference: null,
-                store: null,
+                hostNamespace: null,
                 context: null,
                 ref: null,
                 unmounted: null,
@@ -122,7 +117,7 @@ export function createTextElement(text) {
         children: text.toString(),
         className: null,
         reference: null,
-        store: null,
+        hostNamespace: null,
         context: null,
         ref: null,
         unmounted: null,
@@ -170,7 +165,9 @@ function normalizeNode(child, result, currentKey = null, skipIgnoredCheck) {
     }
     const element = child;
     if (element.key != null) {
-        currentKey = `${(currentKey ?? '').slice(0, -2)}${element.key}`;
+        const prefix = currentKey ?? '';
+        const lastDot = prefix.lastIndexOf('.');
+        currentKey = lastDot <= 0 ? String(element.key) : `${prefix.slice(0, lastDot)}${element.key}`;
     }
     element.key = currentKey;
     element.index = result.length;

package/core/flags.js

@@ -0,0 +1,31 @@
+export const SIMP_ELEMENT_FLAG_HOST = 1;
+export const SIMP_ELEMENT_FLAG_FC = 1 << 1;
+export const SIMP_ELEMENT_FLAG_TEXT = 1 << 2;
+export const SIMP_ELEMENT_FLAG_PORTAL = 1 << 3;
+export const SIMP_ELEMENT_FLAG_FRAGMENT = 1 << 4;
+export const SIMP_ELEMENT_CHILD_FLAG_EMPTY = 1;
+export const SIMP_ELEMENT_CHILD_FLAG_UNKNOWN = 1 << 1;
+export const SIMP_ELEMENT_CHILD_FLAG_ELEMENT = 1 << 2;
+export const SIMP_ELEMENT_CHILD_FLAG_LIST = 1 << 3;
+export const SIMP_ELEMENT_CHILD_FLAG_TEXT = 1 << 4;
+export function isFC(element) {
+    return (element.flag & SIMP_ELEMENT_FLAG_FC) !== 0;
+}
+export function isFragment(element) {
+    return (element.flag & SIMP_ELEMENT_FLAG_FRAGMENT) !== 0;
+}
+export function isHost(element) {
+    return (element.flag & SIMP_ELEMENT_FLAG_HOST) !== 0;
+}
+export function isPortal(element) {
+    return (element.flag & SIMP_ELEMENT_FLAG_PORTAL) !== 0;
+}
+export function isText(element) {
+    return (element.flag & SIMP_ELEMENT_FLAG_TEXT) !== 0;
+}
+export function hasListChildren(element) {
+    return element.childFlag === SIMP_ELEMENT_CHILD_FLAG_LIST;
+}
+export function hasElementChild(element) {
+    return element.childFlag === SIMP_ELEMENT_CHILD_FLAG_ELEMENT;
+}

package/core/hostOperations.js

@@ -1,15 +1,7 @@
-import { HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR, HOST_OPS_REPLACE_CHILD, } from './processStack.js';
-export function _pushHostOperationPlaceElement(element, meta) {
-    meta.renderRuntime.renderStack.push({
-        node: element,
-        kind: HOST_OPS_PLACE_ELEMENT_BEFORE_ANCHOR,
-        meta,
-    });
+import { acquirePlaceFrame, acquireReplaceFrame } from './processStack.js';
+export function pushHostOperationPlaceElement(element, renderRuntime, parentReference, subtreeRightBoundary) {
+    renderRuntime.renderStack.push(acquirePlaceFrame(renderRuntime, element, parentReference, subtreeRightBoundary));
 }
-export function _pushHostOperationReplaceElement(element, renderRuntime, meta) {
-    renderRuntime.renderStack.push({
-        node: element,
-        kind: HOST_OPS_REPLACE_CHILD,
-        meta,
-    });
+export function pushHostOperationReplaceElement(element, renderRuntime, parentReference, prevElement) {
+    renderRuntime.renderStack.push(acquireReplaceFrame(renderRuntime, element, parentReference, prevElement));
 }

package/core/index.d.ts

@@ -1,5 +1,35 @@
-import type { Nullable, SimpText } from '../shared/index.js';
-import type { HostAdapter } from './hostAdapter.js';
+import type { Maybe, Nullable, SimpText } from '../shared/index.js';
+
+export interface HostAdapter<HostRef = unknown, HostTextRef = unknown, NS = string> {
+  createReference(type: string, namespace?: Maybe<NS>): HostRef;
+  createTextReference(text: string): HostTextRef;
+  mountProps(reference: HostRef, element: SimpElement, renderRuntime: SimpRenderRuntime, namespace?: Maybe<NS>): void;
+  patchProps(
+    reference: HostRef,
+    prevElement: SimpElement,
+    nextElement: SimpElement,
+    renderRuntime: SimpRenderRuntime,
+    namespace?: Maybe<NS>
+  ): void;
+  unmountProps(reference: HostRef, element: SimpElement, renderRuntime: SimpRenderRuntime): void;
+  setClassname(reference: HostRef, className: Maybe<string>, namespace?: Maybe<NS>): void;
+  setTextContent(reference: HostRef, text: string, referenceHasOnlyTextElement?: boolean): void;
+  removeChild(parent: HostRef, child: HostRef | HostTextRef): void;
+  replaceChild(parent: HostRef, replacer: HostRef | HostTextRef, toBeReplaced: HostRef | HostTextRef): void;
+  insertOrAppend(parent: HostRef, child: HostRef | HostTextRef, before: Nullable<HostRef | HostTextRef>): void;
+  clearNode(reference: HostRef | HostTextRef): void;
+  attachElementToReference(
+    element: SimpElement,
+    reference: HostRef | HostTextRef,
+    renderRuntime: SimpRenderRuntime
+  ): void;
+  detachElementFromReference(reference: HostRef | HostTextRef, renderRuntime: SimpRenderRuntime): void;
+  getElementFromReference(reference: HostRef | HostTextRef, renderRuntime: SimpRenderRuntime): Nullable<SimpElement>;
+  getHostNamespaces(
+    element: SimpElement,
+    currentNamespace: Maybe<NS>
+  ): Nullable<{ self: Nullable<NS>; children: Nullable<NS> }>;
+}
 
 export type ComponentType<P = {}> = FunctionalComponent<P>;
 
@@ -27,37 +57,44 @@ export interface SimpElement<P = unknown, T extends string | FunctionalComponent
 
 export type SimpNode = SimpElement | SimpText | Array<SimpNode> | boolean | null | undefined;
 
-declare function createElement<P extends {}, T>(
+export declare function createElement<P extends {}, T>(
   type: string,
   props?: (RefAttributes<T> & P) | null,
   ...children: SimpNode[]
 ): SimpElement<P>;
-declare function createElement<P extends {}>(
+export declare function createElement<P extends {}>(
   type: FunctionalComponent<P>,
   props?: (Attributes & P) | null,
   ...children: SimpNode[]
 ): SimpElement<P>;
 
-declare function createPortal<HostRef = {}>(children: SimpNode, container: HostRef): SimpElement;
+export declare function createPortal<HostRef = {}>(children: SimpNode, container: HostRef): SimpElement;
 
-declare function Fragment(props: PropsWithChildren): SimpElement;
+export declare function Fragment(props: PropsWithChildren): SimpElement;
 
 export type FunctionalComponent<P = {}> = (props: P) => SimpNode;
 export type FC<P = {}> = FunctionalComponent<P>;
 
 export type PropsWithChildren<P = {}> = P & { children?: SimpNode | undefined };
 
-declare function memo<P = {}>(Component: FC<P>, compare?: (objA: Readonly<P>, objB: Readonly<P>) => boolean): FC<P>;
+export declare function memo<P = {}>(
+  Component: FC<P>,
+  compare?: (objA: Readonly<P>, objB: Readonly<P>) => boolean
+): FC<P>;
+
+export declare function withSyncRerender(runtime: SimpRenderRuntime, callback: () => void): void;
 
 export interface SimpRuntimeFCRenderer {
-  (component: FC, element: SimpElement): SimpNode;
+  (component: FC, element: SimpElement, renderRuntime: SimpRenderRuntime): SimpNode;
 }
 
 export interface SimpRenderRuntime {
   hostAdapter: HostAdapter;
   renderer: SimpRuntimeFCRenderer;
   renderStack: Array<{ node: SimpElement; kind: number; meta: any }>;
-  elementToHostMap: Map<unknown, SimpElement>;
-  currentRenderingFCElement: Nullable<SimpElement>;
-  renderPhase: Nullable<number>;
 }
+
+export declare function createRenderRuntime(
+  hostAdapter: HostAdapter,
+  renderer: SimpRuntimeFCRenderer
+): SimpRenderRuntime;

package/core/index.js

@@ -2,5 +2,7 @@ import { createElement } from './createElement.js';
 import { Fragment } from './fragment.js';
 import { memo } from './memo.js';
 import { createPortal } from './portal.js';
-export { createElement, Fragment, memo, createPortal };
-export default { createElement, Fragment, memo, createPortal };
+import { withSyncRerender } from './rerender.js';
+import { createRenderRuntime } from './runtime.js';
+export { createElement, createRenderRuntime, Fragment, memo, createPortal, withSyncRerender };
+export default { createElement, createRenderRuntime, Fragment, memo, createPortal, withSyncRerender };