@viewfly/core 0.0.1-alpha.14 → 0.0.1-alpha.16

package/bundles/index.esm.js

@@ -44,23 +44,18 @@ function __metadata(metadataKey, metadataValue) {
 }
 
 const componentSetupStack = [];
-const componentRendingStack = [];
-const derivedStack = [];
+const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
         // 防止因外部捕获异常引引起的缓存未清理的问题
-        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
-function getRendingContext() {
-    return componentRendingStack[componentRendingStack.length - 1];
-}
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
+function getSignalDepsContext() {
+    return signalDepsStack[signalDepsStack.length - 1];
 }
 class JSXComponent {
     constructor(createInstance) {
@@ -99,9 +94,7 @@ class Component extends ReflectiveInjector {
     }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
-        providers.forEach(p => {
-            this.normalizedProviders.push(normalizeProvider(p));
-        });
+        this.normalizedProviders.unshift(...providers.map(i => normalizeProvider(i)));
     }
     init() {
         const self = this;
@@ -116,9 +109,6 @@ class Component extends ReflectiveInjector {
                 if (isSetup) {
                     componentSetupStack.pop();
                 }
-                if (isRending) {
-                    componentRendingStack.pop();
-                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
@@ -127,19 +117,22 @@ class Component extends ReflectiveInjector {
         const render = this.setup(props);
         isSetup = false;
         componentSetupStack.pop();
-        componentRendingStack.push(this);
-        let isRending = true;
+        signalDepsStack.push([]);
         const template = render();
-        isRending = false;
-        componentRendingStack.pop();
+        const deps = signalDepsStack.pop();
+        this.unWatch = useEffect(deps, () => {
+            this.markAsDirtied();
+        });
         return {
             template,
             render: () => {
-                componentRendingStack.push(this);
-                isRending = true;
+                this.unWatch();
+                signalDepsStack.push([]);
                 const template = render();
-                isRending = false;
-                componentRendingStack.pop();
+                const deps = signalDepsStack.pop();
+                this.unWatch = useEffect(deps, () => {
+                    this.markAsDirtied();
+                });
                 return template;
             }
         };
@@ -149,6 +142,9 @@ class Component extends ReflectiveInjector {
         this.markAsChanged();
     }
     markAsChanged() {
+        if (this._changed) {
+            return;
+        }
         this._changed = true;
         this.parentComponent.markAsChanged();
     }
@@ -179,6 +175,7 @@ class Component extends ReflectiveInjector {
         }
     }
     destroy() {
+        this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
             fn();
         });
@@ -370,18 +367,10 @@ const depsKey = Symbol('deps');
  * }
  */
 function useSignal(state) {
-    const usedComponents = new Set();
     function signal() {
-        const component = getRendingContext();
-        const derivedContext = getDerivedContext();
-        if (derivedContext) {
-            derivedContext.push(signal);
-        }
-        if (component && !usedComponents.has(component)) {
-            usedComponents.add(component);
-            component.destroyCallbacks.push(() => {
-                usedComponents.delete(component);
-            });
+        const depsContext = getSignalDepsContext();
+        if (depsContext) {
+            depsContext.push(signal);
         }
         return state;
     }
@@ -390,9 +379,6 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const component of usedComponents) {
-            component.markAsDirtied();
-        }
         for (const fn of signal[depsKey]) {
             fn();
         }
@@ -409,9 +395,9 @@ function useSignal(state) {
  */
 function useDerived(callback, isContinue) {
     const deps = [];
-    derivedStack.push(deps);
+    signalDepsStack.push(deps);
     const data = callback();
-    derivedStack.pop();
+    signalDepsStack.pop();
     const signal = useSignal(data);
     if (deps.length) {
         const unListen = useEffect(deps, () => {
@@ -482,9 +468,10 @@ function inject(token, notFoundValue, flags) {
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
-const jsxErrorFn = makeError('JSX');
-const Fragment = function Fragment() {
-    throw jsxErrorFn('Fragment does not support calling.');
+const Fragment = function Fragment(props) {
+    return () => {
+        return props.children;
+    };
 };
 function jsx(setup, config, key) {
     if (typeof setup === 'string') {
@@ -636,10 +623,12 @@ let Renderer = class Renderer {
     reconcile(component, context) {
         if (component.dirty) {
             this.applyChanges(component, context);
+            component.rendered();
         }
         else if (component.changed) {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
+            component.rendered();
         }
         else {
             const prevSibling = this.getPrevSibling(component);
@@ -702,7 +691,6 @@ let Renderer = class Renderer {
             atom.child = null;
         }
         this.diff(atom.child, diffAtom, context, 0, 0);
-        component.rendered();
     }
     diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
@@ -925,10 +913,14 @@ let Renderer = class Renderer {
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        if (component.setup === Fragment) {
-            const children = component.props.children;
-            return this.createChainByChildren(component, Array.isArray(children) ? children : [children], parent);
-        }
+        // if (component.setup === Fragment) {
+        //   const children = component.props.children
+        //   return this.createChainByChildren(
+        //     component,
+        //     Array.isArray(children) ? children : [children],
+        //     parent
+        //   )
+        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
@@ -952,12 +944,7 @@ let Renderer = class Renderer {
             }
             if (item instanceof JSXComponent) {
                 const childAtom = this.createChainByComponentFactory(context, item, parent);
-                if (Array.isArray(childAtom)) {
-                    atoms.push(...childAtom);
-                }
-                else {
-                    atoms.push(childAtom);
-                }
+                atoms.push(childAtom);
                 continue;
             }
             if (typeof item === 'string' && item.length) {
@@ -975,12 +962,8 @@ let Renderer = class Renderer {
         return atoms;
     }
     linkTemplate(template, component, parent) {
-        if (template) {
-            const child = template instanceof JSXElement ?
-                this.createChainByJSXElement(component, template, parent) :
-                this.createChainByComponentFactory(component, template, parent);
-            this.link(parent, Array.isArray(child) ? child : [child]);
-        }
+        const children = Array.isArray(template) ? template : [template];
+        this.link(parent, this.createChainByChildren(component, children, parent));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {

package/bundles/index.js

@@ -45,23 +45,18 @@ function __metadata(metadataKey, metadataValue) {
 }
 
 const componentSetupStack = [];
-const componentRendingStack = [];
-const derivedStack = [];
+const signalDepsStack = [];
 const componentErrorFn = makeError('component');
 function getSetupContext(need = true) {
     const current = componentSetupStack[componentSetupStack.length - 1];
     if (!current && need) {
         // 防止因外部捕获异常引引起的缓存未清理的问题
-        componentRendingStack.pop();
         throw componentErrorFn('cannot be called outside the component!');
     }
     return current;
 }
-function getRendingContext() {
-    return componentRendingStack[componentRendingStack.length - 1];
-}
-function getDerivedContext() {
-    return derivedStack[derivedStack.length - 1];
+function getSignalDepsContext() {
+    return signalDepsStack[signalDepsStack.length - 1];
 }
 class JSXComponent {
     constructor(createInstance) {
@@ -100,9 +95,7 @@ class Component extends di.ReflectiveInjector {
     }
     addProvide(providers) {
         providers = Array.isArray(providers) ? providers : [providers];
-        providers.forEach(p => {
-            this.normalizedProviders.push(di.normalizeProvider(p));
-        });
+        this.normalizedProviders.unshift(...providers.map(i => di.normalizeProvider(i)));
     }
     init() {
         const self = this;
@@ -117,9 +110,6 @@ class Component extends di.ReflectiveInjector {
                 if (isSetup) {
                     componentSetupStack.pop();
                 }
-                if (isRending) {
-                    componentRendingStack.pop();
-                }
                 throw componentErrorFn('component props is readonly!');
             }
         });
@@ -128,19 +118,22 @@ class Component extends di.ReflectiveInjector {
         const render = this.setup(props);
         isSetup = false;
         componentSetupStack.pop();
-        componentRendingStack.push(this);
-        let isRending = true;
+        signalDepsStack.push([]);
         const template = render();
-        isRending = false;
-        componentRendingStack.pop();
+        const deps = signalDepsStack.pop();
+        this.unWatch = useEffect(deps, () => {
+            this.markAsDirtied();
+        });
         return {
             template,
             render: () => {
-                componentRendingStack.push(this);
-                isRending = true;
+                this.unWatch();
+                signalDepsStack.push([]);
                 const template = render();
-                isRending = false;
-                componentRendingStack.pop();
+                const deps = signalDepsStack.pop();
+                this.unWatch = useEffect(deps, () => {
+                    this.markAsDirtied();
+                });
                 return template;
             }
         };
@@ -150,6 +143,9 @@ class Component extends di.ReflectiveInjector {
         this.markAsChanged();
     }
     markAsChanged() {
+        if (this._changed) {
+            return;
+        }
         this._changed = true;
         this.parentComponent.markAsChanged();
     }
@@ -180,6 +176,7 @@ class Component extends di.ReflectiveInjector {
         }
     }
     destroy() {
+        this.unWatch();
         this.updatedDestroyCallbacks.forEach(fn => {
             fn();
         });
@@ -371,18 +368,10 @@ const depsKey = Symbol('deps');
  * }
  */
 function useSignal(state) {
-    const usedComponents = new Set();
     function signal() {
-        const component = getRendingContext();
-        const derivedContext = getDerivedContext();
-        if (derivedContext) {
-            derivedContext.push(signal);
-        }
-        if (component && !usedComponents.has(component)) {
-            usedComponents.add(component);
-            component.destroyCallbacks.push(() => {
-                usedComponents.delete(component);
-            });
+        const depsContext = getSignalDepsContext();
+        if (depsContext) {
+            depsContext.push(signal);
         }
         return state;
     }
@@ -391,9 +380,6 @@ function useSignal(state) {
             return;
         }
         state = newState;
-        for (const component of usedComponents) {
-            component.markAsDirtied();
-        }
         for (const fn of signal[depsKey]) {
             fn();
         }
@@ -410,9 +396,9 @@ function useSignal(state) {
  */
 function useDerived(callback, isContinue) {
     const deps = [];
-    derivedStack.push(deps);
+    signalDepsStack.push(deps);
     const data = callback();
-    derivedStack.pop();
+    signalDepsStack.pop();
     const signal = useSignal(data);
     if (deps.length) {
         const unListen = useEffect(deps, () => {
@@ -483,9 +469,10 @@ function inject(token, notFoundValue, flags) {
     return component.parentInjector.get(token, notFoundValue, flags);
 }
 
-const jsxErrorFn = makeError('JSX');
-const Fragment = function Fragment() {
-    throw jsxErrorFn('Fragment does not support calling.');
+const Fragment = function Fragment(props) {
+    return () => {
+        return props.children;
+    };
 };
 function jsx(setup, config, key) {
     if (typeof setup === 'string') {
@@ -637,10 +624,12 @@ exports.Renderer = class Renderer {
     reconcile(component, context) {
         if (component.dirty) {
             this.applyChanges(component, context);
+            component.rendered();
         }
         else if (component.changed) {
             const atom = this.componentAtomCaches.get(component).atom.child;
             this.reconcileElement(atom, context);
+            component.rendered();
         }
         else {
             const prevSibling = this.getPrevSibling(component);
@@ -703,7 +692,6 @@ exports.Renderer = class Renderer {
             atom.child = null;
         }
         this.diff(atom.child, diffAtom, context, 0, 0);
-        component.rendered();
     }
     diff(newAtom, oldAtom, context, expectIndex, index) {
         const oldChildren = [];
@@ -926,10 +914,14 @@ exports.Renderer = class Renderer {
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        if (component.setup === Fragment) {
-            const children = component.props.children;
-            return this.createChainByChildren(component, Array.isArray(children) ? children : [children], parent);
-        }
+        // if (component.setup === Fragment) {
+        //   const children = component.props.children
+        //   return this.createChainByChildren(
+        //     component,
+        //     Array.isArray(children) ? children : [children],
+        //     parent
+        //   )
+        // }
         return new Atom(component, parent);
     }
     createChainByJSXElement(context, element, parent) {
@@ -953,12 +945,7 @@ exports.Renderer = class Renderer {
             }
             if (item instanceof JSXComponent) {
                 const childAtom = this.createChainByComponentFactory(context, item, parent);
-                if (Array.isArray(childAtom)) {
-                    atoms.push(...childAtom);
-                }
-                else {
-                    atoms.push(childAtom);
-                }
+                atoms.push(childAtom);
                 continue;
             }
             if (typeof item === 'string' && item.length) {
@@ -976,12 +963,8 @@ exports.Renderer = class Renderer {
         return atoms;
     }
     linkTemplate(template, component, parent) {
-        if (template) {
-            const child = template instanceof JSXElement ?
-                this.createChainByJSXElement(component, template, parent) :
-                this.createChainByComponentFactory(component, template, parent);
-            this.link(parent, Array.isArray(child) ? child : [child]);
-        }
+        const children = Array.isArray(template) ? template : [template];
+        this.link(parent, this.createChainByChildren(component, children, parent));
     }
     link(parent, children) {
         for (let i = 1; i < children.length; i++) {

package/bundles/model/component.d.ts

@@ -1,12 +1,11 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
-import { Props, JSXElement, Key, JSXTypeof } from './jsx-element';
+import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
 export declare class JSXComponent {
     createInstance: (injector: Component) => Component;
     constructor(createInstance: (injector: Component) => Component);
 }
-export type JSXTemplate = JSXElement | JSXComponent | null | void;
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
-    (props?: T): () => JSXTemplate;
+    (props?: T): () => JSXChildNode;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -27,13 +26,14 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     private parentComponent;
     private updatedDestroyCallbacks;
     private propsChangedDestroyCallbacks;
+    private unWatch?;
     private isFirstRending;
     constructor(context: Injector, setup: ComponentSetup, props: Props<any>, key?: Key | undefined);
     is(target: JSXTypeof): boolean;
     addProvide<T>(providers: Provider<T> | Provider<T>[]): void;
     init(): {
-        template: JSXTemplate;
-        render: () => JSXTemplate;
+        template: JSXChildNode;
+        render: () => JSXChildNode;
     };
     markAsDirtied(): void;
     markAsChanged(): void;

package/bundles/model/jsx-element.d.ts

@@ -5,7 +5,7 @@ export interface Props<T = JSXChildNode | JSXChildNode[]> {
     [key: string]: any;
     [key: symbol]: any;
 }
-export declare const Fragment: () => never;
+export declare const Fragment: (props: Props) => () => JSXChildNode | JSXChildNode[];
 export type Key = number | string;
 export declare function jsx<T extends JSXChildNode>(name: string, config: Props<T>, key?: Key): JSXElement;
 export declare function jsx<T extends JSXChildNode>(setup: ComponentSetup, config: Props<T>, key?: Key): JSXComponent;

package/jsx-runtime/index.d.ts

@@ -0,0 +1,22 @@
+import type { JSXElement, Ref, jsx, jsxs, Fragment } from '@viewfly/core'
+import type { NativeElements } from '@viewfly/platform-browser'
+
+/**
+ * JSX namespace for usage with @jsxImportsSource directive
+ * when ts compilerOptions.jsx is 'react-jsx'
+ * https://www.typescriptlang.org/tsconfig#jsxImportSource
+ */
+
+export { jsx, jsxs, Fragment }
+
+export namespace JSX {
+  export interface Element extends JSXElement {
+  }
+
+  export interface IntrinsicElements extends NativeElements {
+  }
+
+  export interface IntrinsicAttributes {
+    ref?: Ref<any>
+  }
+}

package/jsx-runtime/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.1-alpha.14",
+  "version": "0.0.1-alpha.16",
   "description": "Viewfly is a simple and easy-to-use JavaScript framework with an intuitive development experience.",
   "main": "./bundles/index.js",
   "module": "./bundles/index.esm.js",
@@ -34,5 +34,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "6b490f936251fa5aca6f715b5cb94ded9c360a1b"
+  "gitHead": "c87e571f0caf71e5bb99183643388f9adb4501c1"
 }

package/jsx-dev-runtime.js

@@ -1,8 +0,0 @@
-import { jsx, jsxs, Fragment } from '@viewfly/core'
-
-export const jsxDEV = jsx
-
-export {
-  jsxs,
-  Fragment
-}

package/jsx-runtime.d.ts

@@ -1,16 +0,0 @@
-import { jsx, jsxs, Fragment, JSXElement } from '@viewfly/core'
-
-export {
-  jsxs,
-  jsx,
-  Fragment
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    [elemName: string]: JSXElement
-  }
-
-  interface Element extends JSXElement {
-  }
-}