🚧 初步新增了web/react两个模块

Author: Gaubee

deno.json

@@ -16,6 +16,8 @@
     "workspace": [
         "flow",
         "util",
+        "react",
+        "web",
         "denokit",
         "nodekit"
     ],

react/README.md

@@ -0,0 +1,3 @@
+# @gaubee/react
+
+该项目提供了一些 react 开发相关的封装，旨在提升 react 项目开发相关的易用性

react/deno.json

@@ -0,0 +1,18 @@
+{
+    "name": "@gaubee/react",
+    "version": "0.1.0",
+    "exports": {
+        ".": "./src/mod.ts"
+    },
+    "publish": {
+        "include": [
+            "LICENSE",
+            "README.md",
+            "src/**/*.ts"
+        ],
+        "exclude": [
+            "src/**/*.bench.ts",
+            "src/**/*.test.ts"
+        ]
+    }
+}

react/package.json

@@ -0,0 +1,6 @@
+{
+  "private": true,
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

react/src/async_effect.mts

@@ -0,0 +1,30 @@
+import { abort_signal_race, type PromiseMaybe } from "@gaubee/util";
+import type React, { type DependencyList, useEffect, useInsertionEffect, useLayoutEffect } from "react";
+
+export const asyncEffectCallback = (fn: (signal: AbortSignalWithRace) => Promise<void>): React.EffectCallback => {
+  return () => {
+    const abort = new AbortController();
+    fn(
+      Object.assign(abort.signal, {
+        race: (...args: Slice1<Parameters<typeof abort_signal_race>>) => abort_signal_race(abort.signal, ...args),
+      }) as AbortSignalWithRace,
+    );
+    return () => abort.abort();
+  };
+};
+type Slice1<T> = T extends [any, ...infer R] ? R : never;
+export type AbortSignalWithRace = AbortSignal & {
+  race: <T>(fn_or_promise: PromiseLike<T> | (() => PromiseLike<T>)) => PromiseMaybe<T>;
+};
+
+export const useAsyncEffect = (fn: (signal: AbortSignalWithRace) => Promise<void>, deps?: DependencyList): void => {
+  useEffect(asyncEffectCallback(fn), deps);
+};
+
+export const useAsyncLayoutEffect = (fn: (signal: AbortSignalWithRace) => Promise<void>, deps?: DependencyList): void => {
+  useLayoutEffect(asyncEffectCallback(fn), deps);
+};
+
+export const useAsyncInsertionEffect = (fn: (signal: AbortSignalWithRace) => Promise<void>, deps?: DependencyList): void => {
+  useInsertionEffect(asyncEffectCallback(fn), deps);
+};

react/src/mod.mts

@@ -0,0 +1,8 @@
+export * from "./async_effect.mts";
+export * from "./types.mts";
+export * from "./use_easy_state.mts";
+export * from "./use_flow.mts";
+export * from "./use_fun_query_state.tsx";
+export * from "./use_page_query_state.tsx";
+export * from "./use_ref.mts";
+export * from "./use_refresh.mts";

react/src/types.mts

@@ -0,0 +1,2 @@
+export type FunctionComponentType<T> = T extends React.FunctionComponent<infer P> ? P : never;
+export type FCType<T> = FunctionComponentType<T>;

react/src/use_easy_state.mts

@@ -0,0 +1,26 @@
+import { obj_assign_props } from "@gaubee/util";
+import { type Dispatch, type SetStateAction, useState } from "react";
+
+export type ReactState<T> = [T, Dispatch<SetStateAction<T>>];
+export interface EasyState<T> extends ReactState<T> {
+    value: T;
+    dispatch: Dispatch<SetStateAction<T>>;
+}
+export interface UseEasyState {
+    <T>(initialState: T | (() => T)): EasyState<T>;
+    <T>(initialState?: undefined): EasyState<T | undefined>;
+}
+export const easy_state_proto = obj_assign_props([], {
+    get value() {
+        return this[0];
+    },
+    set value(value) {
+        this[1](value);
+    },
+} as ThisType<ReactState<any>>);
+
+export const useEasyState: UseEasyState = <T extends unknown>(initialState?: T) => {
+    const state = useState(initialState);
+    Object.setPrototypeOf(state, easy_state_proto);
+    return state as EasyState<T>;
+};

react/src/use_flow.mts

@@ -0,0 +1,27 @@
+import { type SetStateAction, useInsertionEffect, useState } from "react";
+
+import { type SharedFlow, StateFlow } from "@gaubee/flow";
+import { type EasyState, type ReactState, easy_state_proto } from "./use_easy_state.mts";
+interface UseFlow {
+  <T>(flow: StateFlow<T>, state?: ReactState<T>): EasyState<T>;
+  <T>(flow: SharedFlow<T>, state: ReactState<T>): EasyState<T>;
+  <T>(flow: SharedFlow<T | undefined>, state?: ReactState<T | undefined>): EasyState<T | undefined>;
+}
+
+export const useFlow: UseFlow = <T extends unknown>(flow: SharedFlow<T>, state?: ReactState<T>) => {
+  if (state == null) {
+    state = (flow instanceof StateFlow ? useState(flow.value) : useState()) as ReactState<T>;
+  }
+  const [value, setValue] = state;
+  const setValue2 = (valAc: SetStateAction<T>) => {
+    flow.emit(typeof valAc === "function" ? (valAc as (prevState: T) => T)(value) : valAc);
+  };
+  useInsertionEffect(() => {
+    // if (flow instanceof StateFlow) {
+    //   setValue(flow.value);
+    // }
+    const off = flow.on(setValue);
+    return () => void off();
+  }, [flow]);
+  return Object.setPrototypeOf([value, setValue2], easy_state_proto) as EasyState<T>;
+};

react/src/use_fun_query_state.tsx

@@ -0,0 +1,83 @@
+import { obj_assign_props } from "@gaubee/util";
+import { useEffect, useState } from "react";
+import { renderBuilder } from "./common_render_builder.tsx";
+import { f7PtrFactory } from "./page_ptr.mts";
+
+type FunQueryApi<I extends any[] = any[], O = any> = (...args: I) => Promise<O>;
+type FunQueryInput<FDef extends FunQueryApi> =
+  FDef extends FunQueryApi<infer I, any> ? I : never;
+type FunQueryOutput<FDef extends FunQueryApi> =
+  FDef extends FunQueryApi<any, infer O> ? O : never;
+type FunQueryActionOptions = {
+  signal?: AbortSignal;
+};
+export const useFunQueryState = <FDef extends FunQueryApi>(
+  initValue: FunQueryOutput<FDef>,
+  api: FDef,
+  exec: (
+    api: FDef,
+    input: FunQueryInput<FDef>,
+    opts?: FunQueryActionOptions,
+  ) => Promise<FunQueryOutput<FDef>> = (api, input) => api(...input),
+) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [value, setValue] = useState<FunQueryOutput<FDef>>(initValue);
+  const [error, setError] = useState<unknown>(null);
+  const doQuery = async (
+    input: FunQueryInput<FDef>,
+    opts?: FunQueryActionOptions,
+  ) => {
+    setIsLoading(true);
+    try {
+      const output = await exec(api, input, opts);
+      setValue(output);
+      setError(null);
+      return output;
+    } catch (err) {
+      setError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const queryWithDestructor = (input: FunQueryInput<FDef>) => {
+    const aborter = new AbortController();
+    doQuery(input, {
+      signal: aborter.signal,
+    });
+    return () => aborter.abort("cancel");
+  };
+  const useQuery = (input: FunQueryInput<FDef>, deps?: any[]) => {
+    useEffect(() => queryWithDestructor(input), deps ?? input);
+    return result;
+  };
+  const f7OnPageInit = (input: FunQueryInput<FDef>) =>
+    f7PtrFactory(() => doQuery(input));
+
+  const f7OnPtrRefresh = (input: FunQueryInput<FDef>) => {
+    return (done: () => void) => {
+      doQuery(input).finally(done);
+    };
+  };
+  const result = obj_assign_props(
+    {
+      get value() {
+        return value;
+      },
+      set value(value) {
+        setValue(value);
+      },
+    },
+    Object.freeze({
+      isLoading,
+      doQuery: doQuery,
+      queryWithDestructor,
+      useQuery,
+      f7OnPtrRefresh: f7OnPtrRefresh,
+      f7OnPageInit,
+      get render() {
+        return renderBuilder(!isLoading, value, error);
+      },
+    }),
+  );
+  return result;
+};