*/
+import { watcherInstance } from './watch'
+
// redirect all APIs from @vue/reactivity
export * from '@vue/reactivity'
+export * from "./setup/setupComponents"
export { watch as baseWatch } from '@vue/reactivity'
// lifecycle hooks
@@ -23,7 +26,11 @@ export { useReadonly, useShallowReadonly } from './readonly'
export { useComputed } from './computed'
// watch and hooks
-export { watch, useWatch } from './watch'
+export { watcherInstance, useWatch } from './watch'
+//兼容处理
+const watch=watcherInstance.watch.bind(watcherInstance);
+export {watch};
+export * from "./observer"
export type { WatchOptions, MultiWatchSources } from './watch'
// watchEffect and hooks
diff --git a/src/observer/index.tsx b/src/observer/index.tsx
new file mode 100644
index 0000000..6c6ffc0
--- /dev/null
+++ b/src/observer/index.tsx
@@ -0,0 +1,40 @@
+import { FunctionComponent, ReactElement, useMemo } from "react";
+import { useComputed } from "../computed";
+import React from "react";
+import { useOnce } from "../useOnce";
+
+//允许组件直接对外部响应式容器进行反应
+//自动缓存dom
+/**
+ * 对应mobx的observe
+ * 全函数监听
+ * 让func在另一个组件的上下文中执行
+ */
+function observe(Func:(p:P)=>ReactElement){
+ const t:FunctionComponent=(p)=>{
+
+ //todo:设法让执行过程在computed上下文中 同时保持函数上下文不变
+ return Func(p);
+ }
+ return t;
+}
+
+// let Comp=observe((p:{
+// aaa:number
+// })=>{
+// return
+// })
+// let a=
+
+
+
+/**
+ * 对应mobx的组件
+ * 函数中不能调用hook
+ */
+export function Observer({children}:{
+ children:()=>ReactElement
+}){
+ const v=useComputed(()=>children())
+ return v.value;
+}
diff --git a/src/reactivity.ts b/src/reactivity.ts
index 4fc2bd5..cb9ccd8 100644
--- a/src/reactivity.ts
+++ b/src/reactivity.ts
@@ -5,6 +5,10 @@
import { useWatch } from './watch'
import { useForceUpdate } from './_utils'
+import { useCallback, useMemo } from 'react'
+import { mapValues } from 'lodash'
+import { list } from 'ts-pystyle'
+import { isReactive, isRef } from '@vue/reactivity'
/**
* Converts some of the 'raw Vue' data, which is not already wrapped in a hook,
@@ -40,3 +44,30 @@ export function useReactivity(getter: () => T): T {
useWatch(() => getter(), forceUpdate, { deep: true })
return getter()
}
+
+function objToArr(obj:any){
+ function *inner(){
+ for(let k in obj){
+ yield obj[k]
+ }
+ }
+ return list(inner());
+}
+/**
+ * 执行对象内监听 过滤非ref reactive
+ * 针对构造setupComponent支持
+ * @param getter
+ * @returns
+ */
+export function useReactivityObject(getter: () => T): T {
+ const forceUpdate = useForceUpdate()
+ // deep > watch > traverse(getter()) > ref | array | set | map | plain object(reactive) > force update
+ const f=useCallback(()=>{
+ const t=getter();
+ const ar=objToArr(t).filter(v=>isRef(v)||isReactive(v))
+ return ar;
+ },[getter])
+ const v=useMemo(()=>f(),[f])
+ useWatch(() => v, forceUpdate, { deep: true })
+ return getter()
+}
diff --git a/src/setup/setupComponents.tsx b/src/setup/setupComponents.tsx
new file mode 100644
index 0000000..443f63b
--- /dev/null
+++ b/src/setup/setupComponents.tsx
@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+import { useOnce } from "../useOnce";
+import { isReactive, isRef, reactive } from "@vue/reactivity";
+import React from "react";
+import { useReactivity, useReactivityObject } from "../reactivity";
+import { mapValues } from "lodash";
+
+export interface ISetupComponent {
+ setup(p: P): T;
+ render(ctx: T): ReactElement;
+}
+
+export function SetupComponentRenderer(p: {
+ target: ISetupComponent;
+ props: any;
+}) {
+ const store = useOnce(() => {
+ let t = p.target.setup(p.props);
+ return t;
+ });
+ const t=useReactivityObject(()=>store)
+ // let t = mapValues(store, (v, k) => {
+ // if (isRef(v) || isReactive(v)) {
+ // return useReactivity(() => v);
+ // } else return v;
+ // });
+ const RenderComp = p.target.render;
+ return ;
+}
+
+/**
+ * 定义一个veact组件
+ * @param v 类似vue的定义对象
+ * @returns
+ */
+export function defineSetupComponent(v: ISetupComponent) {
+ return (props: P) => {
+ return ;
+ };
+}
diff --git a/src/useImState.ts b/src/useImState.ts
new file mode 100644
index 0000000..c7fed6b
--- /dev/null
+++ b/src/useImState.ts
@@ -0,0 +1,7 @@
+/**
+ * 立即执行state
+ */
+
+export default function useImState(init:()=>T){
+
+}
diff --git a/src/useOnce.ts b/src/useOnce.ts
new file mode 100644
index 0000000..9b67421
--- /dev/null
+++ b/src/useOnce.ts
@@ -0,0 +1,16 @@
+import { useRef } from "react";
+
+/**
+ * 保证函数只执行一次 后每次返回同样的结果
+ * @param func 执行一次并返回结果的函数
+ * @returns
+ */
+export function useOnce(func: () => T) {
+ const first = useRef(true);
+ const data = useRef(undefined);
+ if (first.current) {
+ first.current = false;
+ data.current = func();
+ }
+ return data.current as T;
+}
diff --git a/src/watch.ts b/src/watch.ts
index f7dd1ef..b9d5eec 100644
--- a/src/watch.ts
+++ b/src/watch.ts
@@ -1,9 +1,10 @@
+
/**
* @module veact.watch
* @author Surmon
*/
-import { useState as useReactState } from 'react'
+import { MutableRefObject, useCallback, useEffect, useState as useReactState, useRef } from 'react'
import { watch as vueWatch } from '@vue/reactivity'
import type {
ReactiveMarker,
@@ -12,8 +13,9 @@ import type {
WatchSource,
WatchHandle,
} from '@vue/reactivity'
-import { onBeforeUnmount } from './lifecycle'
+import { onBeforeUnmount, onMounted } from './lifecycle'
import { logger } from './_logger'
+import { useOnce } from './useOnce'
// changelog: https://github.com/vuejs/core/blob/main/CHANGELOG.md
// https://github.com/vuejs/core/blob/main/packages/runtime-core/src/apiWatch.ts
@@ -32,10 +34,10 @@ export type MultiWatchSources = (WatchSource | object)[]
type MaybeUndefined = I extends true ? T | undefined : T
type MapSources = {
[K in keyof T]: T[K] extends WatchSource
- ? MaybeUndefined
- : T[K] extends object
- ? MaybeUndefined
- : never
+ ? MaybeUndefined
+ : T[K] extends object
+ ? MaybeUndefined
+ : never
}
/**
@@ -54,48 +56,51 @@ type MapSources = {
* })
* ```
*/
+export class WatchHelper {
-// overload: single source + cb
-export function watch = false>(
- source: WatchSource,
- callback: WatchCallback>,
- options?: WatchOptions,
-): WatchHandle
-
-// overload: reactive array or tuple of multiple sources + cb
-export function watch, Immediate extends Readonly = false>(
- sources: readonly [...T] | T,
- callback: [T] extends [ReactiveMarker]
- ? WatchCallback>
- : WatchCallback, MapSources>,
- options?: WatchOptions,
-): WatchHandle
-
-// overload: array of multiple sources + cb
-export function watch = false>(
- sources: [...T],
- callback: WatchCallback, MapSources>,
- options?: WatchOptions,
-): WatchHandle
-
-// overload: watching reactive object w/ cb
-export function watch = false>(
- source: T,
- callback: WatchCallback>,
- options?: WatchOptions,
-): WatchHandle
-
-// implementation
-export function watch = false>(
- source: T | WatchSource,
- callback: WatchCallback,
- options: WatchOptions = {},
-): WatchHandle {
- return vueWatch(source as any, callback, {
- ...options,
- onWarn: logger.warn,
- scheduler: (job) => job(),
- })
+ //type tricky
+ // overload: single source + cb
+ watch = false, >(
+ source: WatchSource,
+ callback: WatchCallback>,
+ options?: WatchOptions,
+ ): R
+
+ // overload: reactive array or tuple of multiple sources + cb
+ watch, Immediate extends Readonly = false>(
+ sources: readonly [...T] | T,
+ callback: [T] extends [ReactiveMarker]
+ ? WatchCallback>
+ : WatchCallback, MapSources>,
+ options?: WatchOptions,
+ ): R
+
+ // overload: array of multiple sources + cb
+ watch = false>(
+ sources: [...T],
+ callback: WatchCallback, MapSources>,
+ options?: WatchOptions,
+ ): R
+
+ // overload: watching reactive object w/ cb
+ watch = false>(
+ source: T,
+ callback: WatchCallback>,
+ options?: WatchOptions,
+ ): R
+
+ // implementation
+ watch = false>(
+ source: T | WatchSource,
+ callback: WatchCallback,
+ options: WatchOptions = {},
+ ): R {
+ return vueWatch(source as any, callback, {
+ ...options,
+ onWarn: logger.warn,
+ scheduler: (job) => job(),
+ }) as any
+ }
}
/**
@@ -114,8 +119,40 @@ export function watch = false>(
* })
* ```
*/
-export const useWatch: typeof watch = (source: any, callback: any, options = {}) => {
- const [watchHandle] = useReactState(() => watch(source as any, callback, options))
- onBeforeUnmount(() => watchHandle.stop())
- return watchHandle
+
+export const watcherInstance=new WatchHelper();
+
+export const useWatch: (InstanceType>>)["watch"] = (source: any, callback: any, options = {}) => {
+ const watcher = useRef()
+ //执行watch
+ const cancelWatch = useCallback(() => {
+ if (watcher.current) {
+ watcher.current();
+ watcher.current = undefined;
+ }
+ }, [])
+ const doWatch = useCallback(() => {
+ if (watcher.current) cancelWatch();
+
+ watcher.current = watcherInstance.watch(source as any, (...args) => {
+ console.log("触发更新")
+ callback(...args)
+ }, options)
+
+ }, [])
+ onMounted(() => {
+ console.log("执行监听")
+ doWatch();
+ })
+ onBeforeUnmount(() => {
+ console.log("取消监听")
+ cancelWatch();
+ })
+ useOnce(() => {
+ console.log("初始监听")
+ doWatch();
+ })
+
+ return watcher;
}
+
diff --git "a/\350\256\241\345\210\222.md" "b/\350\256\241\345\210\222.md"
new file mode 100644
index 0000000..3f7b54d
--- /dev/null
+++ "b/\350\256\241\345\210\222.md"
@@ -0,0 +1,7 @@
+# 计划
+- [ ] 添加局部监听器支持，添加observe函数与Observer组件，实现可选全组件刷新与可选局部刷新
+- [ ] 添加vite插件支持自动处理template标签并处理其中的style
+ - [ ] 可选支持属性区分
+ - [ ] 可选支持类prefix支持（纯class支持）
+- [ ] 获取react的Internal dispatcher中的唯一id进行组件标记
+- [ ] 改为直接链接到memoriedState，避免直接使用hook(待定)