@viewfly/core 2.0.0 → 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);
 }
@@ -490,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;
@@ -719,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

@@ -1645,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;
@@ -1753,6 +1827,11 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
+/**
+ * @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
+ * @param canUseMemo
+ * @param render
+ */
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -2618,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

@@ -1647,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;
@@ -1755,6 +1829,11 @@ function withAnnotation(annotation, componentSetup) {
 class NativeRenderer {
 }
 
+/**
+ * @deprecated 即将弃用，Viewfly 默认就有 memo 的效果
+ * @param canUseMemo
+ * @param render
+ */
 function withMemo(canUseMemo, render) {
     return {
         $useMemo: canUseMemo,
@@ -2636,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;
@@ -2646,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;
@@ -2692,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",
+  "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",