@viewfly/core 0.0.6 → 0.0.8

package/bundles/index.esm.js

@@ -29,7 +29,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __decorate(decorators, target, key, desc) {
@@ -41,7 +41,12 @@ function __decorate(decorators, target, key, desc) {
 
 function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const refKey = 'ref';
 function getObjectChanges(newProps, oldProps) {
@@ -107,16 +112,6 @@ function styleToObject(style) {
     return obj;
 }
 
-class Memo {
-    constructor(shouldUpdate, render) {
-        this.shouldUpdate = shouldUpdate;
-        this.render = render;
-    }
-}
-function withMemo(shouldUpdate, render) {
-    return new Memo(shouldUpdate, render);
-}
-
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -193,11 +188,23 @@ class Component extends ReflectiveInjector {
         componentSetupStack.push(this);
         let isSetup = true;
         const render = this.type(props);
+        const isRenderFn = typeof render === 'function';
+        const componentInstance = isRenderFn ? { $render: render } : render;
+        let refs = toRefs(this.props.ref);
+        onMounted(() => {
+            for (const ref of refs) {
+                ref.bind(componentInstance);
+            }
+        });
+        onDestroy(() => {
+            for (const ref of refs) {
+                ref.unBind(componentInstance);
+            }
+        });
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const templateRender = render instanceof Memo ? render.render : render;
-        let template = templateRender();
+        let template = componentInstance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
@@ -210,15 +217,27 @@ class Component extends ReflectiveInjector {
                     if (add.length || remove.length || replace.length) {
                         this.invokePropsChangedHooks(newProps);
                     }
+                    const newRefs = toRefs(newProps.ref);
+                    for (const oldRef of refs) {
+                        if (!newRefs.includes(oldRef)) {
+                            oldRef.unBind(componentInstance);
+                        }
+                    }
+                    for (const newRef of newRefs) {
+                        if (!refs.includes(newRef)) {
+                            newRef.bind(componentInstance);
+                        }
+                    }
+                    refs = newRefs;
                 }
-                if (render instanceof Memo) {
-                    if (!render.shouldUpdate(newProps, oldProps)) {
+                if (typeof componentInstance.$shouldUpdate === 'function') {
+                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
                         return template;
                     }
                 }
                 this.unWatch();
                 signalDepsStack.push([]);
-                template = templateRender();
+                template = componentInstance.$render();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -302,6 +321,11 @@ class Component extends ReflectiveInjector {
         }
     }
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof Ref;
+    });
+}
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -383,7 +407,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap();
+        this.unBindMap = new Map();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -626,6 +650,13 @@ class JSXElement {
     }
 }
 
+function withMemo(shouldUpdate, render) {
+    return {
+        $shouldUpdate: shouldUpdate,
+        $render: render
+    };
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
@@ -1293,4 +1324,4 @@ class Viewfly extends ReflectiveInjector {
     }
 }
 
-export { Component, Fragment, JSXComponent, JSXElement, JSXText, Memo, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };
+export { Component, Fragment, JSXComponent, JSXElement, JSXText, NativeRenderer, Ref, Renderer, RootComponent, RootComponentRef, Viewfly, inject, jsx, jsxs, makeError, onDestroy, onMounted, onPropsChanged, onUpdated, provide, useDerived, useEffect, useRef, useSignal, withMemo };

package/bundles/index.js

@@ -30,7 +30,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 
 function __decorate(decorators, target, key, desc) {
@@ -42,7 +42,12 @@ function __decorate(decorators, target, key, desc) {
 
 function __metadata(metadataKey, metadataValue) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const refKey = 'ref';
 function getObjectChanges(newProps, oldProps) {
@@ -108,16 +113,6 @@ function styleToObject(style) {
     return obj;
 }
 
-class Memo {
-    constructor(shouldUpdate, render) {
-        this.shouldUpdate = shouldUpdate;
-        this.render = render;
-    }
-}
-function withMemo(shouldUpdate, render) {
-    return new Memo(shouldUpdate, render);
-}
-
 const componentSetupStack = [];
 const signalDepsStack = [];
 const componentErrorFn = makeError('component');
@@ -194,11 +189,23 @@ class Component extends di.ReflectiveInjector {
         componentSetupStack.push(this);
         let isSetup = true;
         const render = this.type(props);
+        const isRenderFn = typeof render === 'function';
+        const componentInstance = isRenderFn ? { $render: render } : render;
+        let refs = toRefs(this.props.ref);
+        onMounted(() => {
+            for (const ref of refs) {
+                ref.bind(componentInstance);
+            }
+        });
+        onDestroy(() => {
+            for (const ref of refs) {
+                ref.unBind(componentInstance);
+            }
+        });
         isSetup = false;
         componentSetupStack.pop();
         signalDepsStack.push([]);
-        const templateRender = render instanceof Memo ? render.render : render;
-        let template = templateRender();
+        let template = componentInstance.$render();
         const deps = signalDepsStack.pop();
         this.unWatch = useEffect(deps, () => {
             this.markAsDirtied();
@@ -211,15 +218,27 @@ class Component extends di.ReflectiveInjector {
                     if (add.length || remove.length || replace.length) {
                         this.invokePropsChangedHooks(newProps);
                     }
+                    const newRefs = toRefs(newProps.ref);
+                    for (const oldRef of refs) {
+                        if (!newRefs.includes(oldRef)) {
+                            oldRef.unBind(componentInstance);
+                        }
+                    }
+                    for (const newRef of newRefs) {
+                        if (!refs.includes(newRef)) {
+                            newRef.bind(componentInstance);
+                        }
+                    }
+                    refs = newRefs;
                 }
-                if (render instanceof Memo) {
-                    if (!render.shouldUpdate(newProps, oldProps)) {
+                if (typeof componentInstance.$shouldUpdate === 'function') {
+                    if (!componentInstance.$shouldUpdate(newProps, oldProps)) {
                         return template;
                     }
                 }
                 this.unWatch();
                 signalDepsStack.push([]);
-                template = templateRender();
+                template = componentInstance.$render();
                 const deps = signalDepsStack.pop();
                 this.unWatch = useEffect(deps, () => {
                     this.markAsDirtied();
@@ -303,6 +322,11 @@ class Component extends di.ReflectiveInjector {
         }
     }
 }
+function toRefs(ref) {
+    return (Array.isArray(ref) ? ref : [ref]).filter(i => {
+        return i instanceof Ref;
+    });
+}
 /**
  * 当组件第一次渲染完成时触发
  * @param callback
@@ -384,7 +408,7 @@ function onDestroy(callback) {
 class Ref {
     constructor(callback) {
         this.callback = callback;
-        this.unBindMap = new WeakMap();
+        this.unBindMap = new Map();
         this.targetCaches = new Set();
     }
     bind(value) {
@@ -627,6 +651,13 @@ class JSXElement {
     }
 }
 
+function withMemo(shouldUpdate, render) {
+    return {
+        $shouldUpdate: shouldUpdate,
+        $render: render
+    };
+}
+
 /**
  * Viewfly 根组件，用于实现组件状态更新事件通知
  */
@@ -1299,7 +1330,6 @@ exports.Fragment = Fragment;
 exports.JSXComponent = JSXComponent;
 exports.JSXElement = JSXElement;
 exports.JSXText = JSXText;
-exports.Memo = Memo;
 exports.NativeRenderer = NativeRenderer;
 exports.Ref = Ref;
 exports.RootComponent = RootComponent;
@@ -1320,7 +1350,7 @@ exports.useRef = useRef;
 exports.useSignal = useSignal;
 exports.withMemo = withMemo;
 Object.keys(di).forEach(function (k) {
-    if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+    if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
         enumerable: true,
         get: function () { return di[k]; }
     });

package/bundles/model/component.d.ts

@@ -1,14 +1,20 @@
 import { Provider, ReflectiveInjector, AbstractType, Type, InjectionToken, InjectFlags, Injector } from '@tanbo/di';
 import { Props, Key, JSXTypeof, JSXChildNode } from './jsx-element';
-import { Memo } from './memo';
 export declare class JSXComponent {
     props: Props;
     private factory;
     constructor(props: Props, factory: (injector: Component, props: Props) => Component);
     createInstance(injector: Component): Component;
 }
+export interface ComponentInstance<T> {
+    $render(): JSXChildNode;
+    $shouldUpdate?(currentProps: T, prevProps: T): unknown;
+}
+export interface Renderable {
+    $render(): any;
+}
 export interface ComponentSetup<T extends Props<any> = Props<any>> {
-    (props?: T): (() => JSXChildNode) | Memo<T>;
+    (props?: T): (() => JSXChildNode) | ComponentInstance<T>;
 }
 /**
  * Viewfly 组件管理类，用于管理组件的生命周期，上下文等
@@ -109,13 +115,17 @@ export declare function onDestroy(callback: () => void): void;
 export interface RefListener<T> {
     (current: T): void | (() => void);
 }
-export declare class Ref<T extends object> {
+export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends Renderable ? Omit<U, keyof ComponentInstance<any>> : U extends Function ? never : T;
+export interface AbstractInstanceType<T extends Record<string, any>> {
+    (): T & Renderable;
+}
+export declare class Ref<T, U> {
     private callback;
     private unBindMap;
     private targetCaches;
-    constructor(callback: RefListener<T>);
-    bind(value: T): void;
-    unBind(value: T): void;
+    constructor(callback: RefListener<U>);
+    bind(value: U): void;
+    unBind(value: U): void;
 }
 /**
  * 用于节点渲染完成时获取 DOM 节点
@@ -138,7 +148,7 @@ export declare class Ref<T extends object> {
  * }
  * ```
  */
-export declare function useRef<T extends object>(callback: RefListener<T>): Ref<T>;
+export declare function useRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): Ref<T, U>;
 declare const depsKey: unique symbol;
 /**
  * 组件状态实例，直接调用可以获取最新的状态，通过 set 方法可以更新状态

package/bundles/model/memo.d.ts

@@ -1,10 +1,6 @@
 import { JSXChildNode, Props } from './jsx-element';
+import { ComponentInstance } from './component';
 export interface ShouldUpdate<T extends Props> {
     (currentProps: T, prevProps: T): unknown;
 }
-export declare class Memo<T extends Props> {
-    shouldUpdate: ShouldUpdate<T>;
-    render: () => JSXChildNode;
-    constructor(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode);
-}
-export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): Memo<T>;
+export declare function withMemo<T extends Props = Props>(shouldUpdate: ShouldUpdate<T>, render: () => JSXChildNode): ComponentInstance<T>;

package/bundles/types.d.ts

@@ -1,11 +1,12 @@
-import { Key, Ref, JSXComponent } from '@viewfly/core';
+import { Key, Ref, JSXComponent, ExtractInstanceType } from '@viewfly/core';
 export declare namespace ViewTypes {
     type ClassNames = string | Record<string, unknown> | Array<string | Record<string, unknown>>;
     interface IntrinsicAttributes {
         key?: Key;
+        ref?: any;
     }
-    interface RefAttributes<T extends object> extends IntrinsicAttributes {
-        ref?: Ref<T> | Ref<T>[];
+    interface RefAttributes<T> extends IntrinsicAttributes {
+        ref?: Ref<T, ExtractInstanceType<T>> | Ref<T, ExtractInstanceType<T>>[];
     }
     interface ElementClass extends JSXComponent {
     }

package/jsx-runtime/jsx.d.ts

@@ -0,0 +1,21 @@
+import { jsx, jsxs, Fragment, ViewTypes } from '@viewfly/core';
+import { 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
+ */
+declare const jsxDEV: any;
+export { jsx, jsxs, Fragment, jsxDEV };
+export declare namespace JSX {
+    interface ElementClass extends ViewTypes.ElementClass {
+    }
+    interface IntrinsicElements extends NativeElements, ViewTypes.IntrinsicElements {
+    }
+    interface IntrinsicAttributes extends ViewTypes.IntrinsicAttributes {
+    }
+    interface ElementChildrenAttribute extends ViewTypes.ElementChildrenAttribute {
+    }
+    interface IntrinsicClassAttributes<T> extends ViewTypes.IntrinsicClassAttributes<T> {
+    }
+}

package/jsx-runtime/package.json

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

package/{jsx-runtime/index.d.ts → jsx.ts}

@@ -1,5 +1,5 @@
-import type { jsx, jsxs, Fragment, ViewTypes } from '@viewfly/core'
-import type { NativeElements } from '@viewfly/platform-browser'
+import { jsx, jsxs, Fragment, ViewTypes } from '@viewfly/core'
+import { NativeElements } from '@viewfly/platform-browser'
 
 /**
  * JSX namespace for usage with @jsxImportsSource directive
@@ -7,7 +7,10 @@ import type { NativeElements } from '@viewfly/platform-browser'
  * https://www.typescriptlang.org/tsconfig#jsxImportSource
  */
 
-export { jsx, jsxs, Fragment }
+const jsxDEV = jsx
+
+export { jsx, jsxs, Fragment, jsxDEV }
+
 
 export namespace JSX {
   export interface ElementClass extends ViewTypes.ElementClass {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@viewfly/core",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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",
   "typings": "./bundles/public-api.d.ts",
   "scripts": {
-    "build:lib": "rimraf bundles && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "build:lib": "rimraf bundles && npm run build:jsx && rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "build:jsx": "rimraf jsx-runtime/index.* &&  rollup --config rollup-jsx.config.ts --configPlugin @rollup/plugin-typescript",
     "publish:lib": "npm run build:lib && npm publish --access=public"
   },
   "license": "MIT",
@@ -17,11 +18,11 @@
     "reflect-metadata": "^0.1.13"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^23.0.2",
-    "@rollup/plugin-typescript": "^9.0.2",
+    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-typescript": "^11.1.2",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.5",
-    "tslib": "^2.4.1"
+    "rollup": "^3.26.3",
+    "tslib": "^2.6.0"
   },
   "author": {
     "name": "Tanbo",
@@ -34,5 +35,5 @@
   "bugs": {
     "url": "https://github.com/viewfly/viewfly.git/issues"
   },
-  "gitHead": "75d56812c92bfd5d099e0d7eb8d964251d88df28"
+  "gitHead": "cd3ad7ebfa4206f968844d0e3be6462b182b95b3"
 }

package/rollup-jsx.config.ts

@@ -0,0 +1,25 @@
+import commonjs from '@rollup/plugin-commonjs'
+import typescript from '@rollup/plugin-typescript'
+
+export default {
+  input: 'jsx.ts',
+  output: [
+    {
+      file: './jsx-runtime/index.js',
+      format: 'cjs'
+    },
+    {
+      file: './jsx-runtime/index.esm.js',
+      format: 'esm'
+    }
+  ],
+  plugins: [
+    commonjs(),
+    typescript({
+      tsconfig: './tsconfig-jsx.json',
+      compilerOptions: {
+        paths: {}
+      }
+    })
+  ]
+}

package/tsconfig-jsx.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./jsx-runtime",
+    "useDefineForClassFields": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "target": "es6",
+    "strict": true,
+    "module": "es2020",
+    "moduleResolution": "node",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "noImplicitAny": false,
+    "outDir": "jsx-runtime/",
+    "downlevelIteration": true,
+    "paths": {
+      "@viewfly/core": [
+        "./src/public-api.ts"
+      ]
+    }
+  },
+  "include": [
+    "jsx.ts"
+  ]
+}

package/jsx-runtime/index.esm.js

@@ -1,7 +0,0 @@
-import { jsx, jsxs, Fragment } from '@viewfly/core'
-
-export {
-  jsxs,
-  jsx,
-  Fragment
-}

package/jsx-runtime/index.js

@@ -1,17 +0,0 @@
-(function (factory) {
-  if (typeof module === 'object' && typeof module.exports === 'object') {
-    var v = factory(require, exports)
-    if (v !== undefined) module.exports = v
-  }
-  else if (typeof define === 'function' && define.amd) {
-    define(['require', 'exports', '@viewfly/core'], factory)
-  }
-})(function (require, exports) {
-  'use strict'
-  Object.defineProperty(exports, '__esModule', { value: true })
-  exports.Fragment = exports.jsx = exports.jsxs = void 0
-  const core_1 = require('@viewfly/core')
-  Object.defineProperty(exports, 'jsx', { enumerable: true, get: function () { return core_1.jsx } })
-  Object.defineProperty(exports, 'jsxs', { enumerable: true, get: function () { return core_1.jsxs } })
-  Object.defineProperty(exports, 'Fragment', { enumerable: true, get: function () { return core_1.Fragment } })
-})