@viewfly/core 2.0.0-alpha.7 → 2.1.0

package/bundles/index.d.ts

@@ -191,22 +191,6 @@ declare class ReflectiveInjector implements Injector {
 
 declare function makeError(name: string): (message: string) => Error;
 
-interface Props {
-    children?: JSXNode | JSXNode[];
-}
-declare function Fragment(props: Props): () => JSXNode | JSXNode[];
-type Key = number | string;
-declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
-declare const jsxs: typeof jsx;
-interface ViewFlyNode<T = string | ComponentSetup> {
-    type: T;
-    props: Props & Record<string, any>;
-    key?: Key;
-}
-declare const JSXNodeFactory: {
-    createNode<T = string | ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): ViewFlyNode<T>;
-};
-
 declare function comparePropsWithCallbacks(oldProps: Record<string, any>, newProps: Record<string, any>, onDeleted: (key: string, oldValue: any) => void, onAdded: (key: string, value: any) => void, onUpdated: (key: string, newValue: any, oldValue: any) => void): void;
 declare const TextAtomType: unique symbol;
 declare const ElementAtomType: unique symbol;
@@ -267,6 +251,63 @@ declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = Nativ
     abstract getNameSpace(type: string, namespace: ElementNamespace): string | void;
 }
 
+interface Props {
+    children?: JSXNode | JSXNode[];
+}
+declare function Fragment(props: Props): () => JSXNode | JSXNode[];
+type Key = number | string;
+declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
+declare const jsxs: typeof jsx;
+interface ViewFlyNode<T = string | ComponentSetup> {
+    type: T;
+    props: Props & Record<string, any>;
+    key?: Key;
+}
+declare const JSXNodeFactory: {
+    createNode<T = string | ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): ViewFlyNode<T>;
+};
+/**
+ * 给组件的视图元素节点添加自定义属性标记
+ * @param marks
+ * @param setup
+ * @example
+ * ```tsx
+ * const App = withMark('mark', function(props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
+ * ```
+ */
+declare function withMark<T extends ComponentSetup>(marks: string | string[], setup: T): T;
+declare function applyMark(mark: string | string[], render: () => JSXNode): JSXNode;
+interface PortalProps<T extends NativeNode> extends Props {
+    host: T;
+}
+/**
+ * 将子节点渲染到指定节点
+ * @param props
+ * @example
+ * ```tsx
+ * function App() {
+ *   const modal = document.getElementById('modal')!
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <Portal host={modal}>
+ *           这里的内容将渲染到 modal 节点
+ *         </Portal>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+declare function Portal<T extends NativeNode>(props: PortalProps<T>): {
+    $portalHost: T;
+    $render(): JSXNode | JSXNode[];
+};
+
 interface RefListener<T> {
     (current: T): void | (() => void);
 }
@@ -305,7 +346,8 @@ declare class DynamicRef<T> {
  */
 declare function createDynamicRef<T, U = ExtractInstanceType<T>>(callback: RefListener<U>): DynamicRef<U>;
 declare class StaticRef<T> extends DynamicRef<T> {
-    readonly current: T | null;
+    get current(): T | null;
+    private _current;
     constructor();
 }
 declare function createRef<T, U = ExtractInstanceType<T>>(): StaticRef<U>;
@@ -489,6 +531,11 @@ declare function getDepContext(): Dep | undefined;
 declare function pushDepContext(dep: Dep): void;
 declare function popDepContext(): void;
 
+/**
+ * @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
+ * @param canUseMemo
+ * @param render
+ */
 declare function withMemo<T extends Props = Props>(canUseMemo: ComponentInstance<T>['$useMemo'], render: () => JSXNode): ComponentInstance<T>;
 
 declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, namespace: ElementNamespace): (host: NativeNode) => void;
@@ -718,4 +765,4 @@ declare function createEffect<T, T1, T2, T3, T4, T5, T6, T7>(deps: [Signal<T>, S
 declare function createEffect<T>(deps: () => T, callback: EffectCallback<T>): () => void;
 declare function createEffect<T = any>(deps: Signal<any>[], callback: EffectCallback<T[]>): () => void;
 
-export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, ArrayReactiveHandler, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentViewMetadata, type Computed, type Config, type ConstructorProvider, type ContextProvider, type ContextProviderParams, Dep, DynamicRef, type EffectCallback, type ElementNamespace, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, MapReactiveHandler, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, ObjectReactiveHandler, Optional, type OptionalDecorator, Prop, type PropDecorator, type Props, type ProvideScope, type Provider, type ReactiveConfig, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, SetReactiveHandler, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };
+export { type AbstractInstanceType, type AbstractProvider, type AbstractType, type Application, ArrayReactiveHandler, type Atom, type ClassNames, type ClassProvider, Component, type ComponentAnnotation, type ComponentInstance, type ComponentSetup, type ComponentViewMetadata, type Computed, type Config, type ConstructorProvider, type ContextProvider, type ContextProviderParams, Dep, DynamicRef, type EffectCallback, type ElementNamespace, type ExistingProvider, type ExtractInstanceType, type ExtractValueType, type FactoryProvider, ForwardRef, Fragment, Inject, type InjectDecorator, InjectFlags, Injectable, type InjectableDecorator, type InjectableOptions, InjectionToken, Injector, JSX, type JSXNode, JSXNodeFactory, type Key, type LifeCycleCallback, MapReactiveHandler, type Module, type NativeNode, NativeRenderer, type NormalizedProvider, NullInjector, ObjectReactiveHandler, Optional, type OptionalDecorator, Portal, type PortalProps, Prop, type PropDecorator, type Props, type ProvideScope, type Provider, type ReactiveConfig, type RefListener, type ReflectiveDependency, ReflectiveInjector, RootComponent, Scope, Self, type SelfDecorator, SetReactiveHandler, type Signal, SkipSelf, type SkipSelfDecorator, type StaticProvider, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, type TypeProvider, type ValueProvider, type ViewFlyNode, applyMark, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMark, withMemo };

package/bundles/index.esm.js

@@ -727,30 +727,22 @@ class DynamicRef {
 function createDynamicRef(callback) {
     return new DynamicRef(callback);
 }
-const initValue = {};
 class StaticRef extends DynamicRef {
+    get current() {
+        return this._current;
+    }
     constructor() {
-        let value = initValue;
-        let isInit = false;
         super(v => {
-            if (v !== initValue && !isInit) {
-                value = v;
-                isInit = true;
-            }
+            this._current = v;
+            return () => {
+                this._current = null;
+            };
         });
-        Object.defineProperty(this, "current", {
+        Object.defineProperty(this, "_current", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, 'current', {
-            get() {
-                if (value === initValue) {
-                    return null;
-                }
-                return value;
-            }
+            value: null
         });
     }
 }
@@ -1653,6 +1645,80 @@ const JSXNodeFactory = {
         };
     }
 };
+/**
+ * 给组件的视图元素节点添加自定义属性标记
+ * @param marks
+ * @param setup
+ * @example
+ * ```tsx
+ * const App = withMark('mark', function(props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
+ * ```
+ */
+function withMark(marks, setup) {
+    if (!marks) {
+        return setup;
+    }
+    return function (props) {
+        const componentRenderFn = setup(props);
+        const isFn = typeof componentRenderFn === 'function';
+        if (isFn) {
+            return function () {
+                return applyMark(marks, componentRenderFn);
+            };
+        }
+        const oldRender = componentRenderFn.$render;
+        componentRenderFn.$render = function () {
+            return applyMark(marks, () => {
+                return oldRender.call(componentRenderFn);
+            });
+        };
+        return componentRenderFn;
+    };
+}
+function applyMark(mark, render) {
+    const oldCreateNote = JSXNodeFactory.createNode;
+    const spaces = Array.isArray(mark) ? mark : [mark];
+    JSXNodeFactory.createNode = function (name, props, key) {
+        for (const scopedId of spaces) {
+            props[scopedId] = '';
+        }
+        return oldCreateNote.apply(JSXNodeFactory, [name, props, key]);
+    };
+    const vDom = render();
+    JSXNodeFactory.createNode = oldCreateNote;
+    return vDom;
+}
+/**
+ * 将子节点渲染到指定节点
+ * @param props
+ * @example
+ * ```tsx
+ * function App() {
+ *   const modal = document.getElementById('modal')!
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <Portal host={modal}>
+ *           这里的内容将渲染到 modal 节点
+ *         </Portal>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+function Portal(props) {
+    return {
+        $portalHost: props.host,
+        $render() {
+            return props.children;
+        }
+    };
+}
 
 function watch(trigger, callback) {
     let prevFn;
@@ -1761,6 +1827,11 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
+/**
+ * @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
+ * @param canUseMemo
+ * @param render
+ */
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -2626,4 +2697,4 @@ function createEffect(deps, callback) {
     return unWatch;
 }
 
-export { ArrayReactiveHandler, Component, Dep, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMemo };
+export { ArrayReactiveHandler, Component, Dep, DynamicRef, ForwardRef, Fragment, Inject, InjectFlags, Injectable, InjectionToken, Injector, JSXNodeFactory, MapReactiveHandler, NativeRenderer, NullInjector, ObjectReactiveHandler, Optional, Portal, Prop, ReflectiveInjector, RootComponent, Scope, Self, SetReactiveHandler, SkipSelf, StaticRef, THROW_IF_NOT_FOUND, TrackOpTypes, TriggerOpTypes, Type, applyMark, comparePropsWithCallbacks, computed, createContext, createContextProvider, createDerived, createDynamicRef, createEffect, createRef, createRenderer, createSignal, defaultArrayReactiveHandler, defaultMapReactiveHandler, defaultObjectReactiveHandler, defaultSetReactiveHandler, defaultShallowArrayReactiveHandler, defaultShallowMapReactiveHandler, defaultShallowObjectReactiveHandler, defaultShallowSetReactiveHandler, forwardRef, getCurrentInstance, getDepContext, getSetupContext, inject, internalWrite, isReactive, jsx, jsxs, makeError, normalizeProvider, onMounted, onUnmounted, onUpdated, popDepContext, proxyToRawCache, pushDepContext, rawToProxyCache, reactive, readonlyProxyHandler, registryComponentDestroyCallback, shallowReactive, toRaw, track, trigger, viewfly, watch, withAnnotation, withMark, withMemo };

package/bundles/index.js

@@ -729,30 +729,22 @@ class DynamicRef {
 function createDynamicRef(callback) {
     return new DynamicRef(callback);
 }
-const initValue = {};
 class StaticRef extends DynamicRef {
+    get current() {
+        return this._current;
+    }
     constructor() {
-        let value = initValue;
-        let isInit = false;
         super(v => {
-            if (v !== initValue && !isInit) {
-                value = v;
-                isInit = true;
-            }
+            this._current = v;
+            return () => {
+                this._current = null;
+            };
         });
-        Object.defineProperty(this, "current", {
+        Object.defineProperty(this, "_current", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, 'current', {
-            get() {
-                if (value === initValue) {
-                    return null;
-                }
-                return value;
-            }
+            value: null
         });
     }
 }
@@ -1655,6 +1647,80 @@ const JSXNodeFactory = {
         };
     }
 };
+/**
+ * 给组件的视图元素节点添加自定义属性标记
+ * @param marks
+ * @param setup
+ * @example
+ * ```tsx
+ * const App = withMark('mark', function(props) {
+ *   return () => {
+ *     return <div>...</div>
+ *   }
+ * })
+ * ```
+ */
+function withMark(marks, setup) {
+    if (!marks) {
+        return setup;
+    }
+    return function (props) {
+        const componentRenderFn = setup(props);
+        const isFn = typeof componentRenderFn === 'function';
+        if (isFn) {
+            return function () {
+                return applyMark(marks, componentRenderFn);
+            };
+        }
+        const oldRender = componentRenderFn.$render;
+        componentRenderFn.$render = function () {
+            return applyMark(marks, () => {
+                return oldRender.call(componentRenderFn);
+            });
+        };
+        return componentRenderFn;
+    };
+}
+function applyMark(mark, render) {
+    const oldCreateNote = JSXNodeFactory.createNode;
+    const spaces = Array.isArray(mark) ? mark : [mark];
+    JSXNodeFactory.createNode = function (name, props, key) {
+        for (const scopedId of spaces) {
+            props[scopedId] = '';
+        }
+        return oldCreateNote.apply(JSXNodeFactory, [name, props, key]);
+    };
+    const vDom = render();
+    JSXNodeFactory.createNode = oldCreateNote;
+    return vDom;
+}
+/**
+ * 将子节点渲染到指定节点
+ * @param props
+ * @example
+ * ```tsx
+ * function App() {
+ *   const modal = document.getElementById('modal')!
+ *   return () => {
+ *     return (
+ *       <div>
+ *         <Portal host={modal}>
+ *           这里的内容将渲染到 modal 节点
+ *         </Portal>
+ *       </div>
+ *     )
+ *   }
+ * }
+ * ```
+ */
+function Portal(props) {
+    return {
+        $portalHost: props.host,
+        $render() {
+            return props.children;
+        }
+    };
+}
 
 function watch(trigger, callback) {
     let prevFn;
@@ -1763,6 +1829,11 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
+/**
+ * @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
+ * @param canUseMemo
+ * @param render
+ */
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -2644,6 +2715,7 @@ exports.NativeRenderer = NativeRenderer;
 exports.NullInjector = NullInjector;
 exports.ObjectReactiveHandler = ObjectReactiveHandler;
 exports.Optional = Optional;
+exports.Portal = Portal;
 exports.Prop = Prop;
 exports.ReflectiveInjector = ReflectiveInjector;
 exports.RootComponent = RootComponent;
@@ -2654,6 +2726,7 @@ exports.SkipSelf = SkipSelf;
 exports.StaticRef = StaticRef;
 exports.THROW_IF_NOT_FOUND = THROW_IF_NOT_FOUND;
 exports.Type = Type;
+exports.applyMark = applyMark;
 exports.comparePropsWithCallbacks = comparePropsWithCallbacks;
 exports.computed = computed;
 exports.createContext = createContext;
@@ -2700,4 +2773,5 @@ exports.trigger = trigger;
 exports.viewfly = viewfly;
 exports.watch = watch;
 exports.withAnnotation = withAnnotation;
+exports.withMark = withMark;
 exports.withMemo = withMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewfly/core",
-  "version": "2.0.0-alpha.7",
+  "version": "2.1.0",
   "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",