@viewfly/core 0.0.24 → 0.0.25

package/bundles/foundation/_utils.d.ts

@@ -1,3 +1,4 @@
+import { Component, JSXElement, JSXInternal, JSXText, NativeNode, Props } from '@viewfly/core';
 export interface ListenDelegate {
     delegate: () => any;
     listenFn: ((...args: any[]) => any) | void;
@@ -11,3 +12,15 @@ export declare const refKey = "ref";
 export declare function getObjectChanges(newProps: Record<string, any>, oldProps: Record<string, any>): ObjectChanges;
 export declare function classToString(config: unknown): string;
 export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
+export interface Atom {
+    jsxNode: JSXElement | JSXText | Component;
+    parent: Atom | null;
+    nativeNode: NativeNode | null;
+    child: Atom | null;
+    sibling: Atom | null;
+}
+export interface ComponentView {
+    atom: Atom;
+    template: JSXInternal.JSXNode;
+    render(newProps: Props, oldProps: Props): JSXInternal.JSXNode;
+}

package/bundles/foundation/component.d.ts

@@ -1,5 +1,6 @@
 import { AbstractType, InjectFlags, InjectionToken, Injector, Provider, ReflectiveInjector, Type } from '../di/_api';
 import { JSXTypeof, Key, Props } from './jsx-element';
+import { ComponentView } from './_utils';
 import { JSXInternal } from './types';
 export declare class JSXComponent {
     props: Props;
@@ -11,10 +12,11 @@ export declare class JSXComponent {
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
  */
 export declare class Component extends ReflectiveInjector implements JSXTypeof {
-    type: JSXInternal.ElementClass;
+    type: JSXInternal.ComponentConstructor;
     props: Props;
     key?: Key | undefined;
-    $$typeOf: JSXInternal.ElementClass<any>;
+    $$typeOf: JSXInternal.ComponentConstructor<any>;
+    $$view: ComponentView;
     destroyCallbacks: LifeCycleCallback[];
     mountCallbacks: LifeCycleCallback[];
     propsChangedCallbacks: PropsChangedCallback<any>[];
@@ -28,12 +30,12 @@ export declare class Component extends ReflectiveInjector implements JSXTypeof {
     private propsChangedDestroyCallbacks;
     private unWatch?;
     private isFirstRending;
-    constructor(context: Injector, type: JSXInternal.ElementClass, props: Props, key?: Key | undefined);
+    constructor(context: Injector, type: JSXInternal.ComponentConstructor, props: Props, key?: Key | undefined);
     is(target: JSXTypeof): boolean;
     provide<T>(providers: Provider<T> | Provider<T>[]): void;
     setup(): {
-        template: JSXInternal.JSXNode;
-        render: (newProps: Props, oldProps: Props) => JSXInternal.JSXNode;
+        template: any;
+        render: (newProps: Props, oldProps: Props) => any;
     };
     markAsDirtied(): void;
     markAsChanged(): void;
@@ -110,13 +112,13 @@ export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnT
 export interface AbstractInstanceType<T extends Record<string, any>> {
     (): T & JSXInternal.ComponentInstance<any>;
 }
-export declare class Ref<T, U> {
+export declare class Ref<T> {
     private callback;
     private unBindMap;
     private targetCaches;
-    constructor(callback: RefListener<U>);
-    bind(value: U): void;
-    unBind(value: U): void;
+    constructor(callback: RefListener<T>);
+    bind(value: T): void;
+    unBind(value: T): void;
 }
 /**
  * 用于节点渲染完成时获取 DOM 节点
@@ -139,7 +141,7 @@ export declare class Ref<T, U> {
  * }
  * ```
  */
-export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<T, U>;
+export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<U>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态

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

@@ -6,13 +6,13 @@ export interface Props {
     [key: string]: any;
     [key: symbol]: any;
 }
-export declare function Fragment(props: Props): () => JSXInternal.JSXNode | JSXInternal.JSXNode[];
+export declare function Fragment(props: Props): () => any;
 export type Key = number | string;
 export declare function jsx(name: string, props: Props, key?: Key): JSXElement;
-export declare function jsx(setup: JSXInternal.ElementClass, props: Props, key?: Key): JSXComponent;
+export declare function jsx(setup: JSXInternal.ComponentConstructor, props: Props, key?: Key): JSXComponent;
 export declare const jsxs: typeof jsx;
 export interface JSXTypeof {
-    $$typeOf: string | JSXInternal.ElementClass;
+    $$typeOf: string | JSXInternal.ComponentConstructor;
     is(target: JSXTypeof): boolean;
 }
 export declare class JSXText implements JSXTypeof {

package/bundles/foundation/memo.d.ts

@@ -1,3 +1,3 @@
 import { Props } from './jsx-element';
 import { JSXInternal } from './types';
-export declare function withMemo<T extends Props = Props>(shouldUpdate: JSXInternal.ComponentInstance<T>['$shouldUpdate'], render: () => JSXInternal.Element): JSXInternal.ComponentInstance<T>;
+export declare function withMemo<T extends Props = Props>(shouldUpdate: JSXInternal.ComponentInstance<T>['$shouldUpdate'], render: () => JSXInternal.JSXNode): JSXInternal.ComponentInstance<T>;

package/bundles/foundation/renderer.d.ts

@@ -10,7 +10,6 @@ export declare class Renderer {
     private nativeRenderer;
     private rootComponentRef;
     private hostRef;
-    private componentAtomCaches;
     private isInit;
     constructor(nativeRenderer: NativeRenderer, rootComponentRef: RootComponentRef, hostRef: HostRef);
     render(): void;

package/bundles/foundation/root.component.d.ts

@@ -6,6 +6,6 @@ import { Injector } from '../di/_api';
  */
 export declare class RootComponent extends Component {
     onChange: (() => void) | null;
-    constructor(factory: JSXInternal.ElementClass, parentInjector: Injector);
+    constructor(factory: JSXInternal.ComponentConstructor, parentInjector: Injector);
     markAsChanged(): void;
 }

package/bundles/foundation/types.d.ts

@@ -8,22 +8,23 @@ export declare namespace JSXInternal {
         $shouldUpdate?(currentProps: P, prevProps: P): boolean;
     }
     type JSXNode = Element | JSXInternal.ElementClass | string | number | boolean | null | undefined | JSXNode[];
-    interface Element<P = any, C extends string | ElementClass<P> = string | ElementClass<P>> {
-    }
+    type ComponentConstructor<P = any> = (props: P) => (() => Element) | ComponentInstance<P>;
+    type Element<P = any, C extends string | ComponentConstructor<P> = string | ComponentConstructor<P>> = C extends string ? IntrinsicElements[C] : (() => Element) | ComponentInstance<P>;
     interface IntrinsicAttributes {
         key?: Key;
         ref?: any;
     }
     interface RefAttributes<T> extends IntrinsicAttributes {
-        ref?: Ref<T, ExtractInstanceType<T>> | Ref<T, ExtractInstanceType<T>>[];
+        ref?: Ref<ExtractInstanceType<T>> | Ref<ExtractInstanceType<T>>[];
     }
-    interface ElementClass<P = any> {
-        (props?: P): () => (JSXNode | ComponentInstance<P>);
+    interface ElementClass<P = any> extends ComponentInstance<P> {
     }
     interface ElementChildrenAttribute {
     }
     interface IntrinsicElements {
+        [name: string]: any;
     }
-    interface IntrinsicClassAttributes<T> extends RefAttributes<T> {
+    interface IntrinsicClassAttributes<T> {
+        ref?: Ref<T>;
     }
 }

package/bundles/index.esm.js

@@ -1210,28 +1210,24 @@ class RootComponentRef {
 }
 class HostRef {
 }
-class Atom {
-    constructor(jsxNode, parent) {
-        this.jsxNode = jsxNode;
-        this.parent = parent;
-        this.nativeNode = null;
-        this.child = null;
-        this.sibling = null;
-    }
-}
 let Renderer = class Renderer {
     constructor(nativeRenderer, rootComponentRef, hostRef) {
         this.nativeRenderer = nativeRenderer;
         this.rootComponentRef = rootComponentRef;
         this.hostRef = hostRef;
-        this.componentAtomCaches = new WeakMap();
         this.isInit = true;
     }
     render() {
         const component = this.rootComponentRef.component;
         const host = this.hostRef.host;
         if (this.isInit) {
-            const atom = new Atom(component, null);
+            const atom = {
+                jsxNode: component,
+                parent: null,
+                sibling: null,
+                child: null,
+                nativeNode: null
+            };
             this.buildView(atom, {
                 isParent: true,
                 host
@@ -1251,7 +1247,7 @@ let Renderer = class Renderer {
             component.rendered();
         }
         else if (component.changed) {
-            const atom = this.componentAtomCaches.get(component).atom.child;
+            const atom = component.$$view.atom.child;
             this.reconcileElement(atom, context);
             component.rendered();
         }
@@ -1264,7 +1260,7 @@ let Renderer = class Renderer {
         }
     }
     getPrevSibling(component) {
-        let atom = this.componentAtomCaches.get(component).atom.child;
+        let atom = component.$$view.atom.child;
         const childAtoms = [];
         while (atom) {
             childAtoms.push(atom);
@@ -1306,7 +1302,7 @@ let Renderer = class Renderer {
         }
     }
     applyChanges(component, context) {
-        const { atom, render } = this.componentAtomCaches.get(component);
+        const { atom, render } = component.$$view;
         const diffAtom = atom.child;
         const template = render(component.props, component.props);
         if (template) {
@@ -1331,16 +1327,16 @@ let Renderer = class Renderer {
         const changeCommits = {
             updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
                 commits.push((offset) => {
-                    const { render, template } = this.componentAtomCaches.get(reusedAtom.jsxNode);
+                    const { render, template } = reusedAtom.jsxNode.$$view;
                     const newProps = newAtom.jsxNode.props;
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
                     const newTemplate = render(newProps, oldProps);
-                    this.componentAtomCaches.set(newAtom.jsxNode, {
+                    newAtom.jsxNode.$$view = {
                         render,
                         template: newTemplate,
                         atom: newAtom
-                    });
+                    };
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                         return;
@@ -1565,19 +1561,31 @@ let Renderer = class Renderer {
         if (template) {
             this.linkTemplate(template, component, from);
         }
-        this.componentAtomCaches.set(component, {
+        component.$$view = {
             render,
             template,
             atom: from
-        });
+        };
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        return new Atom(component, parent);
+        return {
+            jsxNode: component,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
     }
     createChainByJSXElement(context, element, parent) {
-        const atom = new Atom(element, parent);
+        const atom = {
+            jsxNode: element,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
             const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
@@ -1586,7 +1594,13 @@ let Renderer = class Renderer {
         return atom;
     }
     createChainByJSXText(node, parent) {
-        return new Atom(node, parent);
+        return {
+            jsxNode: node,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
     }
     createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {

package/bundles/index.js

@@ -1212,28 +1212,24 @@ class RootComponentRef {
 }
 class HostRef {
 }
-class Atom {
-    constructor(jsxNode, parent) {
-        this.jsxNode = jsxNode;
-        this.parent = parent;
-        this.nativeNode = null;
-        this.child = null;
-        this.sibling = null;
-    }
-}
 exports.Renderer = class Renderer {
     constructor(nativeRenderer, rootComponentRef, hostRef) {
         this.nativeRenderer = nativeRenderer;
         this.rootComponentRef = rootComponentRef;
         this.hostRef = hostRef;
-        this.componentAtomCaches = new WeakMap();
         this.isInit = true;
     }
     render() {
         const component = this.rootComponentRef.component;
         const host = this.hostRef.host;
         if (this.isInit) {
-            const atom = new Atom(component, null);
+            const atom = {
+                jsxNode: component,
+                parent: null,
+                sibling: null,
+                child: null,
+                nativeNode: null
+            };
             this.buildView(atom, {
                 isParent: true,
                 host
@@ -1253,7 +1249,7 @@ exports.Renderer = class Renderer {
             component.rendered();
         }
         else if (component.changed) {
-            const atom = this.componentAtomCaches.get(component).atom.child;
+            const atom = component.$$view.atom.child;
             this.reconcileElement(atom, context);
             component.rendered();
         }
@@ -1266,7 +1262,7 @@ exports.Renderer = class Renderer {
         }
     }
     getPrevSibling(component) {
-        let atom = this.componentAtomCaches.get(component).atom.child;
+        let atom = component.$$view.atom.child;
         const childAtoms = [];
         while (atom) {
             childAtoms.push(atom);
@@ -1308,7 +1304,7 @@ exports.Renderer = class Renderer {
         }
     }
     applyChanges(component, context) {
-        const { atom, render } = this.componentAtomCaches.get(component);
+        const { atom, render } = component.$$view;
         const diffAtom = atom.child;
         const template = render(component.props, component.props);
         if (template) {
@@ -1333,16 +1329,16 @@ exports.Renderer = class Renderer {
         const changeCommits = {
             updateComponent: (newAtom, reusedAtom, expectIndex, diffIndex) => {
                 commits.push((offset) => {
-                    const { render, template } = this.componentAtomCaches.get(reusedAtom.jsxNode);
+                    const { render, template } = reusedAtom.jsxNode.$$view;
                     const newProps = newAtom.jsxNode.props;
                     const oldProps = reusedAtom.jsxNode.props;
                     newAtom.jsxNode = reusedAtom.jsxNode;
                     const newTemplate = render(newProps, oldProps);
-                    this.componentAtomCaches.set(newAtom.jsxNode, {
+                    newAtom.jsxNode.$$view = {
                         render,
                         template: newTemplate,
                         atom: newAtom
-                    });
+                    };
                     if (newTemplate === template) {
                         this.reuseComponentView(newAtom, reusedAtom, context, expectIndex !== diffIndex - offset);
                         return;
@@ -1567,19 +1563,31 @@ exports.Renderer = class Renderer {
         if (template) {
             this.linkTemplate(template, component, from);
         }
-        this.componentAtomCaches.set(component, {
+        component.$$view = {
             render,
             template,
             atom: from
-        });
+        };
         return from;
     }
     createChainByComponentFactory(context, factory, parent) {
         const component = factory.createInstance(context);
-        return new Atom(component, parent);
+        return {
+            jsxNode: component,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
     }
     createChainByJSXElement(context, element, parent) {
-        const atom = new Atom(element, parent);
+        const atom = {
+            jsxNode: element,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
         if (Reflect.has(element.props, 'children')) {
             const jsxChildren = element.props.children;
             const children = this.createChainByChildren(context, Array.isArray(jsxChildren) ? jsxChildren : [jsxChildren], atom, []);
@@ -1588,7 +1596,13 @@ exports.Renderer = class Renderer {
         return atom;
     }
     createChainByJSXText(node, parent) {
-        return new Atom(node, parent);
+        return {
+            jsxNode: node,
+            parent,
+            sibling: null,
+            child: null,
+            nativeNode: null
+        };
     }
     createChainByChildren(context, children, parent, atoms) {
         for (const item of children) {

package/jsx-runtime/index.d.ts

@@ -8,8 +8,7 @@ import { NativeElements } from '@viewfly/platform-browser';
 declare const jsxDEV: typeof jsx;
 export { jsx, jsxs, Fragment, jsxDEV };
 export declare namespace JSX {
-    interface Element extends JSXInternal.Element {
-    }
+    type Element = JSXInternal.Element;
     interface ElementClass extends JSXInternal.ElementClass {
     }
     interface IntrinsicElements extends NativeElements, JSXInternal.IntrinsicElements {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "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",
@@ -49,5 +49,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "74ff7f03fca43463908a7cab8352ae1bf35a7f6c"
+  "gitHead": "0d39c19943b47221b99a6471e2614f55716c6659"
 }