@viewfly/core 2.1.0 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/README.md +67 -4
  2. package/dist/_utils/make-error.d.ts +1 -0
  3. package/dist/base/_api.d.ts +12 -0
  4. package/dist/base/_utils.d.ts +46 -0
  5. package/dist/base/component.d.ts +77 -0
  6. package/dist/base/context.d.ts +112 -0
  7. package/dist/base/dep.d.ts +9 -0
  8. package/dist/base/injection-tokens.d.ts +20 -0
  9. package/dist/base/jsx-element.d.ts +64 -0
  10. package/dist/base/lifecycle.d.ts +54 -0
  11. package/dist/base/ref.d.ts +50 -0
  12. package/dist/base/renderer.d.ts +4 -0
  13. package/dist/base/root.component.d.ts +9 -0
  14. package/dist/base/types.d.ts +29 -0
  15. package/dist/di/_api.d.ts +10 -0
  16. package/dist/di/forward-ref.d.ts +10 -0
  17. package/dist/di/injectable.d.ts +20 -0
  18. package/dist/di/injection-token.d.ts +8 -0
  19. package/dist/di/injector.d.ts +26 -0
  20. package/dist/di/metadata.d.ts +43 -0
  21. package/dist/di/null-injector.d.ts +6 -0
  22. package/dist/di/provider.d.ts +30 -0
  23. package/dist/di/reflective-injector.d.ts +30 -0
  24. package/dist/di/reflective-provider.d.ts +20 -0
  25. package/dist/di/type.d.ts +7 -0
  26. package/dist/di/utils/_api.d.ts +3 -0
  27. package/dist/di/utils/annotations.d.ts +33 -0
  28. package/dist/di/utils/decorators.d.ts +17 -0
  29. package/dist/di/utils/stringify.d.ts +1 -0
  30. package/dist/index.d.ts +5 -0
  31. package/dist/index.esm.js +2302 -0
  32. package/dist/index.js +2940 -0
  33. package/dist/jsx-runtime/index.d.ts +7 -0
  34. package/dist/jsx-runtime/index.esm.js +2 -0
  35. package/dist/jsx-runtime/index.js +26 -0
  36. package/dist/jsx-runtime.d.ts +7 -0
  37. package/dist/reactive/_api.d.ts +7 -0
  38. package/dist/reactive/_help.d.ts +15 -0
  39. package/dist/reactive/array-handlers.d.ts +30 -0
  40. package/dist/reactive/computed.d.ts +10 -0
  41. package/dist/reactive/effect.d.ts +13 -0
  42. package/dist/reactive/iterable-iterator.d.ts +5 -0
  43. package/dist/reactive/map-handlers.d.ts +12 -0
  44. package/dist/reactive/reactive.d.ts +141 -0
  45. package/dist/reactive/set-handlers.d.ts +11 -0
  46. package/dist/reactive/shallow-reactive.d.ts +6 -0
  47. package/dist/reactive/signal.d.ts +38 -0
  48. package/dist/reactive/watch-effect.d.ts +7 -0
  49. package/dist/reactive/watch.d.ts +8 -0
  50. package/dist/viewfly.d.ts +30 -0
  51. package/package.json +29 -29
  52. package/bundles/index.d.ts +0 -768
  53. package/bundles/index.esm.js +0 -2700
  54. package/bundles/index.js +0 -2777
  55. package/jsx-runtime/index.d.ts +0 -25
  56. package/jsx-runtime/index.esm.js +0 -11
  57. package/jsx-runtime/index.js +0 -14
  58. package/jsx-runtime/package.json +0 -29
  59. package/rollup-d.config.ts +0 -14
package/README.md CHANGED
@@ -1,6 +1,69 @@
1
- Viewfly
2
- ================================
1
+ # @viewfly/core
3
2
 
4
- Viewfly 是一个简单、数据驱动的前端框架。此项目为 Viewfly 的内核实现,要开发完整的应该的应用,还需要结合 `@viewfly/platform-browser` 包,才能在浏览器运行。
3
+ Viewfly 的**内核包**:函数组件、JSX、响应式与信号、`watch`、生命周期、`inject` IoC 相关 API、以及 **`withMark`** 等与 UI 逻辑直接相关的入口均由此包提供。
5
4
 
6
- 完整文档请参考官方网站:[viewfly.org](https://viewfly.org)
5
+ 在浏览器里挂载应用请使用 **`@viewfly/platform-browser`** 的 **`createApp`**(其内部使用本包提供的应用模型)。
6
+
7
+ ---
8
+
9
+ ## 安装
10
+
11
+ ```bash
12
+ pnpm add @viewfly/core
13
+ # 或 npm / yarn
14
+ ```
15
+
16
+ 本包依赖 **`reflect-metadata`**。正常从 **`@viewfly/core`** 的主入口导入时,会随模块加载一并初始化;若你的打包拆包方式导致依赖注入相关运行时异常,可在应用入口**最先**增加显式导入:
17
+
18
+ ```ts
19
+ import 'reflect-metadata'
20
+ ```
21
+
22
+ 更稳妥的做法以 [官网](https://viewfly.org) 与当前版本的说明为准。
23
+
24
+ ---
25
+
26
+ ## JSX / TSX 配置
27
+
28
+ 在 **`tsconfig.json`** 中启用 automatic JSX runtime,并把来源指向本包:
29
+
30
+ ```json
31
+ {
32
+ "compilerOptions": {
33
+ "jsx": "react-jsx",
34
+ "jsxImportSource": "@viewfly/core"
35
+ }
36
+ }
37
+ ```
38
+
39
+ 使用 Babel 时,将 `@babel/preset-react` 的 `runtime: "automatic"` 与 `importSource: "@viewfly/core"` 对齐上述行为。
40
+
41
+ ---
42
+
43
+ ## 能力速览(面向使用者)
44
+
45
+ 以下为日常开发中最常见的方向,**具体类型与参数以类型定义和官网为准**。
46
+
47
+ | 方向 | 公开 API 与用法提示 |
48
+ |------|---------------------|
49
+ | 组件 | 函数组件:在 JSX 中当标签使用;配合生命周期钩子使用。 |
50
+ | 生命周期 | **`onMounted`**、**`onUpdated`**、**`onUnmounted`** 等(须在组件 setup 阶段调用)。 |
51
+ | 响应式 | **`reactive`**、**`shallowReactive`**、**`watch`** 等(`reactive` 模块)。 |
52
+ | 信号 | **`createSignal`**、**`createEffect`**、**`createDerived`** 等(`signals` 模块)。 |
53
+ | 依赖注入 | 在组件内用 **`inject`** 解析 token;用 **`Injectable()`** 声明可注入类;用 **`withAnnotation`** 或 **`createContext`** / **`createContextProvider`** 挂载 **`Provider`**;根应用上通过 **`createApp(...).provide(...)`**(由 **`@viewfly/platform-browser`** 提供)注册全局提供者。 |
54
+ | 自定义 DOM 属性标记 | **`withMark(marks, setup)`**:为组件渲染出的元素附加与 `marks` 同名的属性(常用于 scoped CSS 的 `scopeId` 等场景)。 |
55
+
56
+ **说明**:源码中可能存在标有 **`@internal`** 或未在官网文档化的符号,它们仅供框架内部或实验用途,**不建议业务代码依赖**;升级版本时也可能在无 semver 预告的情况下变更。
57
+
58
+ ---
59
+
60
+ ## 文档与示例
61
+
62
+ - **官方文档**:[viewfly.org](https://viewfly.org)
63
+ - **本仓库试跑**:仓库根目录执行 `pnpm dev` 打开 playground
64
+
65
+ ---
66
+
67
+ ## License
68
+
69
+ MIT
@@ -0,0 +1 @@
1
+ export declare function makeError(name: string): (message: string) => Error;
@@ -0,0 +1,12 @@
1
+ export * from './component';
2
+ export * from './context';
3
+ export * from './dep';
4
+ export * from './injection-tokens';
5
+ export * from './jsx-element';
6
+ export * from './lifecycle';
7
+ export * from './ref';
8
+ export * from './renderer';
9
+ export * from './root.component';
10
+ export * from './types';
11
+ export { comparePropsWithCallbacks } from './_utils';
12
+ export type { Atom, ElementNamespace } from './_utils';
@@ -0,0 +1,46 @@
1
+ import { Key, ViewFlyNode } from './jsx-element';
2
+ import { NativeNode } from './injection-tokens';
3
+ import { Component, ComponentSetup } from './component';
4
+ export declare function hasChange(newProps: Record<string, any>, oldProps: Record<string, any>): boolean;
5
+ export declare const refKey = "ref";
6
+ export 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;
7
+ export declare function classToString(config: unknown): string;
8
+ export declare function styleToObject(style: string | Record<string, any>): Record<string, any>;
9
+ export declare const TextAtomType: unique symbol;
10
+ export declare const ElementAtomType: unique symbol;
11
+ export declare const ComponentAtomType: unique symbol;
12
+ export type ElementNamespace = string | void;
13
+ export interface TextAtom {
14
+ type: typeof TextAtomType;
15
+ index: number;
16
+ jsxNode: string;
17
+ nodeType: string;
18
+ key?: null;
19
+ nativeNode: NativeNode | null;
20
+ child: Atom | null;
21
+ sibling: Atom | null;
22
+ namespace: ElementNamespace;
23
+ }
24
+ export interface ElementAtom {
25
+ type: typeof ElementAtomType;
26
+ index: number;
27
+ nodeType: string;
28
+ key?: Key;
29
+ jsxNode: ViewFlyNode<string>;
30
+ nativeNode: NativeNode | null;
31
+ child: Atom | null;
32
+ sibling: Atom | null;
33
+ namespace: ElementNamespace;
34
+ }
35
+ export interface ComponentAtom {
36
+ type: typeof ComponentAtomType;
37
+ index: number;
38
+ nodeType: ComponentSetup;
39
+ key?: Key;
40
+ jsxNode: ViewFlyNode<ComponentSetup> | Component;
41
+ nativeNode: NativeNode | null;
42
+ child: Atom | null;
43
+ sibling: Atom | null;
44
+ namespace: ElementNamespace;
45
+ }
46
+ export type Atom = TextAtom | ElementAtom | ComponentAtom;
@@ -0,0 +1,77 @@
1
+ import { Key } from './jsx-element';
2
+ import { NativeNode } from './injection-tokens';
3
+ import { JSX } from './types';
4
+ import { LifeCycleCallback } from './lifecycle';
5
+ import { ComponentAtom } from './_utils';
6
+ export declare function getSetupContext(need?: boolean): Component;
7
+ export type ClassNames = string | Record<string, unknown> | false | null | undefined | ClassNames[];
8
+ export interface ComponentInstance {
9
+ $portalHost?: NativeNode;
10
+ $render(): JSXNode;
11
+ }
12
+ export type JSXNode = JSX.Element | JSX.ElementClass | string | number | boolean | null | undefined | Iterable<JSXNode>;
13
+ export interface ComponentSetup<P = any> {
14
+ (props: P): (() => JSXNode) | ComponentInstance;
15
+ }
16
+ export interface ComponentViewMetadata {
17
+ atom: ComponentAtom;
18
+ host: NativeNode;
19
+ isParent: boolean;
20
+ rootHost: NativeNode;
21
+ }
22
+ /**
23
+ * Viewfly 组件管理类,用于管理组件的生命周期,上下文等
24
+ */
25
+ export declare class Component {
26
+ readonly parentComponent: Component | null;
27
+ readonly type: ComponentSetup;
28
+ props: Record<string, any>;
29
+ readonly key?: Key;
30
+ instance: ComponentInstance;
31
+ changedSubComponents: Set<Component>;
32
+ get dirty(): boolean;
33
+ get changed(): boolean;
34
+ /**
35
+ * @internal
36
+ */
37
+ viewMetadata: ComponentViewMetadata;
38
+ unmountedCallbacks?: LifeCycleCallback[] | null;
39
+ mountCallbacks?: LifeCycleCallback[] | null;
40
+ updatedCallbacks?: LifeCycleCallback[] | null;
41
+ private updatedDestroyCallbacks?;
42
+ protected _dirty: boolean;
43
+ protected _changed: boolean;
44
+ private isFirstRendering;
45
+ private rawProps;
46
+ private refEffects;
47
+ private listener;
48
+ constructor(parentComponent: Component | null, type: ComponentSetup, props: Record<string, any>, key?: Key);
49
+ markAsDirtied(): void;
50
+ markAsChanged(changedComponent?: Component): void;
51
+ render(update: (template: JSXNode, portalHost?: NativeNode) => void): void;
52
+ updateProps(newProps: Record<string, any>): void;
53
+ rerender(): JSXNode;
54
+ destroy(): void;
55
+ rendered(): void;
56
+ private invokeMountHooks;
57
+ private invokeUpdatedHooks;
58
+ }
59
+ /**
60
+ * 获取当前组件实例
61
+ * @returns 当前组件实例
62
+ * @example
63
+ * ```tsx
64
+ * function App() {
65
+ * const instance = getCurrentInstance()
66
+ * console.log(instance)
67
+ * return () => <div>...</div>
68
+ * }
69
+ * ```
70
+ */
71
+ export declare function getCurrentInstance(): Component;
72
+ /**
73
+ * 注册组件销毁回调函数
74
+ * @param fn 要注册的回调函数
75
+ * @internal
76
+ */
77
+ export declare function registryComponentDestroyCallback(fn: () => void): void;
@@ -0,0 +1,112 @@
1
+ import { AbstractType, ClassProvider, ExistingProvider, ExtractValueType, FactoryProvider, InjectFlags, InjectionToken, Injector, Provider, Scope, Type, ValueProvider } from '../di/_api';
2
+ import { Props } from './jsx-element';
3
+ import { ComponentSetup } from './component';
4
+ /**
5
+ * 创建一个上下文,用于在组件之间共享数据
6
+ * @param providers 提供者,用于提供数据
7
+ * @param scope 作用域,用于限制提供者的作用域
8
+ * @param parentInjector 父注入器,用于自定义父注入器,默认从当前组件树中自动获取
9
+ * @returns 一个上下文组件,组件的子元素都可以通过 inject 获取到提供者提供的数据
10
+ * @example
11
+ * ```tsx
12
+ * @Injectable()
13
+ * class ExampleService {}
14
+ *
15
+ * function Child(props) {
16
+ * const exampleService = inject(ExampleService)
17
+ * console.log(exampleService)
18
+ * return () => {
19
+ * return <div>{props.children}</div>
20
+ * }
21
+ * }
22
+ * function App() {
23
+ * const Context = createContext([
24
+ * ExampleService
25
+ * ])
26
+ * return () => {
27
+ * return <Context>
28
+ * <Child>test</Child>
29
+ * </Context>
30
+ * }
31
+ * }
32
+ * ```
33
+ */
34
+ export declare function createContext(providers: Provider[], scope?: Scope | null, parentInjector?: Injector): (props: Props) => () => import('./component').JSXNode | import('./component').JSXNode[];
35
+ export interface ContextProviderParams<T> {
36
+ provide: Type<T> | AbstractType<T> | InjectionToken<T>;
37
+ }
38
+ export interface ContextProvider<T> extends Props {
39
+ useClass?: ClassProvider<T>['useClass'];
40
+ useFactory?: FactoryProvider<T>['useFactory'];
41
+ useValue?: ValueProvider<T>['useValue'];
42
+ useExisting?: ExistingProvider<T>['useExisting'];
43
+ }
44
+ /**
45
+ * 创建一个上下文提供者组件,组件的子元素都可以通过 inject 获取到提供者提供的数据
46
+ * @param params 提供者参数
47
+ * @returns 一个上下文提供者组件,组件的子元素都可以通过 inject 获取到提供者提供的数据
48
+ * @example
49
+ * ```tsx
50
+ * const ExampleService = createContextProvider({
51
+ * provide: ExampleService
52
+ * })
53
+ *
54
+ * function Child() {
55
+ * const exampleService = inject(ExampleService)
56
+ * console.log(exampleService)
57
+ * return () => {
58
+ * return <div>{exampleService.name}</div>
59
+ * }
60
+ * }
61
+ *
62
+ * function App() {
63
+ * const value = new ExampleService()
64
+ * return () => {
65
+ * return <ExampleService useValue={value}>
66
+ * <Child/>
67
+ * </ExampleService>
68
+ * }
69
+ * }
70
+ */
71
+ export declare function createContextProvider<T>(params: ContextProviderParams<T>): (props: ContextProvider<T>) => () => import('./jsx-element').ViewFlyNode<string | ComponentSetup<any>>;
72
+ /**
73
+ * 通过组件上下文获取 IoC 容器内数据的勾子方法
74
+ * @param token 注入的 token
75
+ * @param notFoundValue 未找到时的值
76
+ * @param flags 注入标志
77
+ * @returns 注入的值
78
+ * @example
79
+ * ```tsx
80
+ * function ChildComponent() {
81
+ * const exampleService = inject(ExampleService)
82
+ * console.log(exampleService)
83
+ * return () => {
84
+ * return <div>{exampleService.name}</div>
85
+ * }
86
+ * }
87
+ */
88
+ export declare function inject<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
89
+ export interface ComponentAnnotation {
90
+ scope?: Scope;
91
+ providers?: Provider[];
92
+ }
93
+ /**
94
+ * 给组件添加注解
95
+ * @param annotation
96
+ * @param componentSetup
97
+ * @example
98
+ * ```ts
99
+ * export customScope = new Scope('scopeName')
100
+ * export const App = withAnnotation({
101
+ * scope: customScope,
102
+ * providers: [
103
+ * ExampleService
104
+ * ]
105
+ * }, function(props: Props) {
106
+ * return () => {
107
+ * return <div>...</div>
108
+ * }
109
+ * })
110
+ * ```
111
+ */
112
+ export declare function withAnnotation<T extends ComponentSetup>(annotation: ComponentAnnotation, componentSetup: T): T;
@@ -0,0 +1,9 @@
1
+ export declare class Dep {
2
+ effect: () => void;
3
+ destroyCallbacks: Array<() => void>;
4
+ constructor(effect: () => void);
5
+ destroy(): void;
6
+ }
7
+ export declare function getDepContext(): Dep | undefined;
8
+ export declare function pushDepContext(dep: Dep): void;
9
+ export declare function popDepContext(): void;
@@ -0,0 +1,20 @@
1
+ import { ElementNamespace } from './_utils';
2
+ export type NativeNode = Record<string, any>;
3
+ export declare abstract class NativeRenderer<ElementNode = NativeNode, TextNode = NativeNode> {
4
+ abstract createElement(name: string, namespace: ElementNamespace): ElementNode;
5
+ abstract createTextNode(textContent: string, namespace: ElementNamespace): TextNode;
6
+ abstract setProperty(node: ElementNode, key: string, value: any, namespace: ElementNamespace): void;
7
+ abstract appendChild(parent: ElementNode, newChild: ElementNode | TextNode, namespace: ElementNamespace): void;
8
+ abstract prependChild(parent: ElementNode, newChild: ElementNode | TextNode, namespace: ElementNamespace): void;
9
+ abstract removeProperty(node: ElementNode, key: string, namespace: ElementNamespace): void;
10
+ abstract setStyle(target: ElementNode, key: string, value: any, namespace: ElementNamespace): void;
11
+ abstract removeStyle(target: ElementNode, key: string, namespace: ElementNamespace): void;
12
+ abstract setClass(target: ElementNode, value: string, namespace: ElementNamespace): void;
13
+ abstract listen<T = any>(node: ElementNode, type: string, callback: (ev: T) => any, namespace: ElementNamespace): void;
14
+ abstract unListen(node: ElementNode, type: string, callback: (ev: any) => any, namespace: ElementNamespace): void;
15
+ abstract remove(node: ElementNode | TextNode, namespace: ElementNamespace): void;
16
+ abstract cleanChildren(node: ElementNode, namespace: ElementNamespace): void;
17
+ abstract syncTextContent(target: TextNode, content: string, namespace: ElementNamespace): void;
18
+ abstract insertAfter(newNode: ElementNode | TextNode, ref: ElementNode | TextNode, namespace: ElementNamespace): void;
19
+ abstract getNameSpace(type: string, namespace: ElementNamespace): string | void;
20
+ }
@@ -0,0 +1,64 @@
1
+ import { ComponentSetup, JSXNode } from './component';
2
+ import { NativeNode } from './injection-tokens';
3
+ export interface Props {
4
+ children?: JSXNode | JSXNode[];
5
+ }
6
+ export declare function Fragment(props: Props): () => JSXNode | JSXNode[];
7
+ export type Key = any;
8
+ export declare function jsx(type: string | ComponentSetup, props: Props & Record<string, any>, key?: Key): ViewFlyNode;
9
+ export declare const jsxs: typeof jsx;
10
+ export interface ViewFlyNode<T = string | ComponentSetup> {
11
+ type: T;
12
+ props: Props & Record<string, any>;
13
+ key?: Key;
14
+ }
15
+ export declare const JSXNodeFactory: {
16
+ createNode<T = string | ComponentSetup<any>>(type: T, props: Props & Record<string, any>, key?: Key): ViewFlyNode<T>;
17
+ };
18
+ /**
19
+ * 给组件的视图元素节点添加自定义属性标记
20
+ * @param marks
21
+ * @param setup
22
+ * @example
23
+ * ```tsx
24
+ * const App = withMark('mark', function(props) {
25
+ * return () => {
26
+ * return <div>...</div>
27
+ * }
28
+ * })
29
+ * ```
30
+ */
31
+ export declare function withMark<T extends ComponentSetup>(marks: string | string[], setup: T): T;
32
+ /**
33
+ * 内部使用
34
+ * @internal
35
+ * @param mark
36
+ * @param render
37
+ */
38
+ export declare function applyMark(mark: string | string[], render: () => JSXNode): JSXNode;
39
+ export interface PortalProps<T extends NativeNode> extends Props {
40
+ host: T;
41
+ }
42
+ /**
43
+ * 将子节点渲染到指定节点
44
+ * @param props
45
+ * @example
46
+ * ```tsx
47
+ * function App() {
48
+ * const modal = document.getElementById('modal')!
49
+ * return () => {
50
+ * return (
51
+ * <div>
52
+ * <Portal host={modal}>
53
+ * 这里的内容将渲染到 modal 节点
54
+ * </Portal>
55
+ * </div>
56
+ * )
57
+ * }
58
+ * }
59
+ * ```
60
+ */
61
+ export declare function Portal<T extends NativeNode>(props: PortalProps<T>): {
62
+ $portalHost: T;
63
+ $render(): JSXNode | JSXNode[];
64
+ };
@@ -0,0 +1,54 @@
1
+ export interface LifeCycleCallback {
2
+ (): void | (() => void);
3
+ }
4
+ /**
5
+ * 当组件挂载后调用回调函数
6
+ * @param callback 回调函数
7
+ * @returns 一个函数,用于停止监听
8
+ * @example
9
+ * ```tsx
10
+ * function App() {
11
+ * onMounted(() => {
12
+ * console.log('App mounted!')
13
+ * return () => {
14
+ * console.log('destroy prev mount!')
15
+ * }
16
+ * })
17
+ * return () => <div>...</div>
18
+ * }
19
+ * ```
20
+ */
21
+ export declare function onMounted(callback: LifeCycleCallback): void;
22
+ /**
23
+ * 当组件视图更新后调用回调函数
24
+ * @param callback 回调函数
25
+ * @returns 一个函数,用于停止监听
26
+ * @example
27
+ * ```tsx
28
+ * function App() {
29
+ * onUpdated(() => {
30
+ * console.log('App updated!')
31
+ * return () => {
32
+ * console.log('destroy prev update!')
33
+ * }
34
+ * })
35
+ * return () => <div>...</div>
36
+ * }
37
+ * ```
38
+ */
39
+ export declare function onUpdated(callback: LifeCycleCallback): () => void;
40
+ /**
41
+ * 当组件销毁后调用回调函数
42
+ * @param callback 回调函数
43
+ * @returns 一个函数,用于停止监听
44
+ * @example
45
+ * ```tsx
46
+ * function App() {
47
+ * onUnmounted(() => {
48
+ * console.log('App unmounted!')
49
+ * })
50
+ * return () => <div>...</div>
51
+ * }
52
+ * ```
53
+ */
54
+ export declare function onUnmounted(callback: () => void): void;
@@ -0,0 +1,50 @@
1
+ import { ComponentInstance } from './component';
2
+ import { RefProp } from './types';
3
+ export type ExtractInstanceType<T, U = T extends (...args: any) => any ? ReturnType<T> : T> = U extends ComponentInstance ? Omit<U, keyof ComponentInstance> : U extends Function ? never : T;
4
+ export interface DynamicRef<T> {
5
+ (value: T): void | (() => void);
6
+ }
7
+ /**
8
+ * 创建一个动态 ref,当 ref 的绑定的元素或组件初始化后,会调用副作用函数,并把元素或组件的实例作为参数传入。
9
+ * @param effect 用于接收实例的副作用函数,该函数还可以返回一个清理副作用的函数,当元素或组件销毁时调用
10
+ * @returns 一个函数,用于清理副作用
11
+ * @example
12
+ * ```tsx
13
+ * function App() {
14
+ * const ref = createDynamicRef<HTMLDivElement>((node) => {
15
+ * console.log(node)
16
+ * return () => {
17
+ * console.log('destroy')
18
+ * }
19
+ * })
20
+ * return () => {
21
+ * return <div ref={ref}>test</div>
22
+ * }
23
+ * }
24
+ * ```
25
+ */
26
+ export declare function createDynamicRef<T, U = ExtractInstanceType<T>>(effect: DynamicRef<U>): DynamicRef<U>;
27
+ export type Ref<T> = {
28
+ readonly value: T;
29
+ };
30
+ /**
31
+ * 创建一个引用对象,并添加到 JSX 节点上属性上,当组件渲染后,即可通过 .value 获取到绑定节点的实例
32
+ * - 当绑定到虚拟 DOM 元素节点上时,value 为当前节点的 DOM 元素
33
+ * - 当绑定到组件节点上时,value 为组件函数返回的对象
34
+ * @example
35
+ * ```tsx
36
+ * function App() {
37
+ * const ref = createRef<HTMLDivElement>()
38
+ * onMounted(() => {
39
+ * console.log(ref.value)
40
+ * })
41
+ * return () => {
42
+ * return <div ref={ref}>...</div>
43
+ * }
44
+ * }
45
+ * ```
46
+ */
47
+ export declare function createRef<T, U = ExtractInstanceType<T> | null>(): Ref<U | null>;
48
+ export type RefEffects = Map<RefProp<any>, (() => void) | void>;
49
+ export declare function applyRefs(ref: RefProp<any> | RefProp<any>[], value: object, refEffects: RefEffects): void;
50
+ export declare function updateRefs(ref: RefProp<any> | RefProp<any>[], value: object, refEffects: RefEffects): void;
@@ -0,0 +1,4 @@
1
+ import { NativeNode, NativeRenderer } from './injection-tokens';
2
+ import { ElementNamespace } from './_utils';
3
+ import { Component } from './component';
4
+ export declare function createRenderer(component: Component, nativeRenderer: NativeRenderer, namespace: ElementNamespace): (host: NativeNode) => void;
@@ -0,0 +1,9 @@
1
+ import { Component, ComponentSetup } from './component';
2
+ /**
3
+ * Viewfly 根组件,用于实现组件状态更新事件通知
4
+ */
5
+ export declare class RootComponent extends Component {
6
+ private refresh;
7
+ constructor(factory: ComponentSetup, refresh: () => void);
8
+ markAsChanged(changedComponent?: Component): void;
9
+ }
@@ -0,0 +1,29 @@
1
+ import { Key, ViewFlyNode } from './jsx-element';
2
+ import { ComponentInstance, ComponentSetup } from './component';
3
+ import { DynamicRef, ExtractInstanceType, Ref } from './ref';
4
+ export type RefProp<T> = Ref<ExtractInstanceType<T> | null> | DynamicRef<ExtractInstanceType<T>>;
5
+ export declare namespace JSX {
6
+ type ElementType = keyof IntrinsicElements | ComponentSetup;
7
+ interface Element extends ViewFlyNode {
8
+ }
9
+ interface KeyedAttributes {
10
+ key?: Key;
11
+ }
12
+ interface IntrinsicAttributes extends KeyedAttributes {
13
+ ref?: any;
14
+ }
15
+ interface ElementClass extends ComponentInstance {
16
+ }
17
+ interface ElementAttributesProperty {
18
+ props: {};
19
+ }
20
+ interface ElementChildrenAttribute {
21
+ children: {};
22
+ }
23
+ interface IntrinsicElements {
24
+ [name: string]: any;
25
+ }
26
+ interface IntrinsicClassAttributes<T> {
27
+ ref?: RefProp<T>;
28
+ }
29
+ }
@@ -0,0 +1,10 @@
1
+ export * from './forward-ref';
2
+ export * from './injectable';
3
+ export * from './injection-token';
4
+ export * from './injector';
5
+ export * from './metadata';
6
+ export * from './null-injector';
7
+ export * from './provider';
8
+ export * from './reflective-injector';
9
+ export * from './reflective-provider';
10
+ export * from './type';
@@ -0,0 +1,10 @@
1
+ export declare class ForwardRef<T = any> {
2
+ private forwardRefFn;
3
+ constructor(forwardRefFn: () => T);
4
+ getRef(): T;
5
+ }
6
+ /**
7
+ * 引用后声明的类的工具函数
8
+ * @param fn
9
+ */
10
+ export declare function forwardRef<T>(fn: () => T): ForwardRef<T>;
@@ -0,0 +1,20 @@
1
+ export declare class Scope {
2
+ name: string;
3
+ constructor(name: string);
4
+ toString(): string;
5
+ }
6
+ export type ProvideScope = 'root' | Scope;
7
+ export interface InjectableOptions {
8
+ provideIn: ProvideScope;
9
+ }
10
+ export interface Injectable {
11
+ provideIn?: ProvideScope;
12
+ }
13
+ export interface InjectableDecorator {
14
+ (options?: InjectableOptions): ClassDecorator;
15
+ new (options?: InjectableOptions): Injectable;
16
+ }
17
+ /**
18
+ * 可注入类的装饰器
19
+ */
20
+ export declare const Injectable: InjectableDecorator;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * 生成自定义依赖注入 token 的类
3
+ */
4
+ export declare class InjectionToken<T> {
5
+ readonly description: string;
6
+ constructor(description: string);
7
+ toString(): string;
8
+ }
@@ -0,0 +1,26 @@
1
+ import { AbstractType, Type } from './type';
2
+ import { InjectionToken } from './injection-token';
3
+ /**
4
+ * 查找规则
5
+ */
6
+ export declare enum InjectFlags {
7
+ /** 默认查找规则 */
8
+ Default = "Default",
9
+ /** 锁定当前容器 */
10
+ Self = "Self",
11
+ /** 跳过当前容器 */
12
+ SkipSelf = "SkipSelf",
13
+ /** 可选查找 */
14
+ Optional = "Optional"
15
+ }
16
+ /**
17
+ * 根据 token 推断返回数据类型
18
+ */
19
+ export type ExtractValueType<T> = T extends Type<any> ? InstanceType<T> : T extends AbstractType<infer K> ? K : T extends InjectionToken<infer V> ? V : never;
20
+ /**
21
+ * DI 容器抽象基类
22
+ */
23
+ export declare abstract class Injector {
24
+ abstract parentInjector: Injector | null;
25
+ abstract get<T extends Type<any> | AbstractType<any> | InjectionToken<any>, U = never>(token: T, notFoundValue?: U, flags?: InjectFlags): ExtractValueType<T> | U;
26
+ }