Merge pull request #12 from easyops-cn/steve/async

feat(): support update brick properties in event handler

Author: weareoutman

apps/test/src/Components/MyModal.tsx

@@ -1,11 +1,11 @@
 import type { Modal } from "@next-bricks/containers/modal";
-import { type Ref, useImperativeHandle, useRef } from "@next-tsx/core";
+import { type RefObject, useImperativeHandle, useRef } from "@next-tsx/core";
 
 export interface MyModalRef {
   open: () => void;
 }
 
-export default function MyModal({ ref }: { ref?: Ref<MyModalRef> }) {
+export default function MyModal({ ref }: { ref?: RefObject<MyModalRef> }) {
   const modalRef = useRef<Modal | null>(null);
   const formRef = useRef<any | null>(null);
   useImperativeHandle(ref, () => ({
@@ -17,5 +17,9 @@ export default function MyModal({ ref }: { ref?: Ref<MyModalRef> }) {
     },
   }));
 
-  return null;
+  return (
+    <eo-modal ref={modalRef}>
+      <eo-form ref={formRef} />
+    </eo-modal>
+  );
 }

apps/test/src/Pages/About.tsx

@@ -1,6 +1,8 @@
 import {
   callApi,
+  handleHttpError,
   useContext,
+  useRef,
   useResource,
   useSearchParams,
 } from "@next-tsx/core";
@@ -9,17 +11,30 @@ import { LayoutContext } from "../Contexts/LayoutContext";
 export default function About() {
   const { handleClick } = useContext(LayoutContext);
   const params = useSearchParams();
-  const [res] = useResource(
+  const [res, refetch] = useResource(
     () => callApi("my.api@getAboutInfo:1.0.0", { id: params.get("id") }),
     { async: true, fallback: null }
   );
+  const modalRef = useRef();
 
   return (
     <>
-      <div onMount={handleClick}>
+      <div
+        onMount={handleClick}
+        onClick={() => {
+          refetch().then(
+            () => {
+              // eslint-disable-next-line no-console
+              console.log("ok");
+            },
+            (err) => handleHttpError(err)
+          );
+        }}
+      >
         About {params.get("id")} {res}
       </div>
       <div>{res ? <span slot="a">1</span> : <span slot="b">2</span>}</div>
+      <eo-modal ref={modalRef} />
     </>
   );
 }

apps/test/src/Pages/Layout.tsx

@@ -7,6 +7,7 @@ import {
   sessionStore,
   Routes,
   Route,
+  useRef,
 } from "@next-tsx/core";
 import MyModal from "../Components/MyModal";
 import { LayoutContext } from "../Contexts/LayoutContext";
@@ -16,6 +17,7 @@ export default function Layout() {
   const [a, setA] = useState<string | null>(null);
   const b = a ? "value" : "null";
   const [c, setC] = useState<number>(0);
+  const modalRef = useRef();
 
   useEffect(() => {
     if (a) {
@@ -36,6 +38,11 @@ export default function Layout() {
   const handleClick = () => {
     setA("New Value by callback");
     setC((prev) => prev + 42);
+    modalRef.current?.open();
+    modalRef.current.width = 500;
+    Object.assign(modalRef.current, {
+      height: "auto",
+    });
   };
 
   return (
@@ -76,7 +83,7 @@ export default function Layout() {
           <Route path="/about" component={About} />
         </Routes>
       </div>
-      {createPortal(<MyModal />)}
+      {createPortal(<MyModal ref={modalRef} />)}
     </LayoutContext.Provider>
   );
 }

docs/DESIGN.md

@@ -4,17 +4,11 @@
 apps/
 └── YOUR-APP-ID/
     └── src/
-        ├── Components/
-        ├── Contexts/
-        ├── Pages/
-        ├── Utils/
-        ├── app.json
-        ├── i18n.json
-        └── index.tsx
-```
-
-### 组件
-
-```tsx
-// ./src/Components/
+        ├── Components/   # 组件（tpl-*）
+        ├── Contexts/     # 跨组件共享上下文
+        ├── Pages/        # 页面（路由）
+        ├── Utils/        # 辅助函数
+        ├── app.json      # 应用基本信息
+        ├── i18n.json     # 国际化配置
+        └── index.tsx     # 入口文件，定义第一层路由页面
 ```

packages/converter/src/__snapshots__/convertTsx.spec.ts.snap

@@ -195,7 +195,7 @@ exports[`convertTsx should work 1`] = `
                             "args": [],
                             "key": undefined,
                             "method": "open",
-                            "target": "[data-root-id="test-root"] [data-ref="modalRef"]",
+                            "target": "[data-root-id="test-root"] [data-ref="modalRef-0"]",
                           },
                         ],
                         "toggle": [
@@ -311,7 +311,7 @@ exports[`convertTsx should work 1`] = `
           "cancelText": undefined,
           "confirmText": undefined,
           "dataset": {
-            "ref": "modalRef",
+            "ref": "modalRef-0",
           },
           "hideCancelButton": true,
           "keyboard": true,

packages/converter/src/convertEvents.ts

@@ -1,5 +1,9 @@
 import type { BrickEventHandler, BrickEventsMap } from "@next-core/types";
-import type { Component, EventHandler } from "@next-tsx/parser";
+import type {
+  Component,
+  EventHandler,
+  TypeEventHandlerCallback,
+} from "@next-tsx/parser";
 import type { ConvertOptions } from "./interfaces.js";
 
 export function convertEvents(component: Component, options: ConvertOptions) {
@@ -99,18 +103,11 @@ function convertEventHandler(
             ? "state.refresh"
             : "context.refresh",
         args: [handler.payload.name],
+        callback: convertCallback(handler.callback, options),
       };
     case "call_api": {
       const { api, http, tool, params, isRawProvider } = handler.payload;
 
-      const success = handler.callback?.success
-        ? convertEventHandlers(handler.callback.success, options)
-        : undefined;
-
-      const error = handler.callback?.error
-        ? convertEventHandlers(handler.callback.error, options)
-        : undefined;
-
       return {
         key: handler.key,
         ...(isRawProvider
@@ -132,12 +129,21 @@ function convertEventHandler(
                   useProvider: `${api}${api.includes(":") ? "" : ":*"}`,
                   params,
                 }),
-        callback: {
-          ...(success && { success }),
-          ...(error && { error }),
-        },
+        callback: convertCallback(handler.callback, options),
       };
     }
+    case "update_ref":
+      return {
+        key: handler.key,
+        ...(handler.payload.scope === "template"
+          ? {
+              targetRef: handler.payload.ref,
+            }
+          : {
+              target: `${options.rootId ? `[data-root-id="${options.rootId}"] ` : ""}[data-ref="${handler.payload.ref}"]`,
+            }),
+        properties: handler.payload.properties,
+      };
     case "call_ref":
       return {
         key: handler.key,
@@ -208,3 +214,24 @@ function convertEventHandler(
       };
   }
 }
+
+function convertCallback(
+  callback: TypeEventHandlerCallback | undefined,
+  options: ConvertOptions
+): {
+  success?: BrickEventHandler[];
+  error?: BrickEventHandler[];
+} {
+  const success = callback?.success
+    ? convertEventHandlers(callback.success, options)
+    : undefined;
+
+  const error = callback?.error
+    ? convertEventHandlers(callback.error, options)
+    : undefined;
+
+  return {
+    ...(success && { success }),
+    ...(error && { error }),
+  };
+}

packages/core/index.d.ts

@@ -29,7 +29,7 @@ export function useResource<T = any>(
     // 设置 async: true 时则不会阻塞。
     async?: boolean;
   }
-): [data: T, refetch: () => void];
+): [data: T, refetch: () => Promise<void>];
 
 /**
  * 在依赖项数组变化时执行回调函数。
@@ -41,7 +41,7 @@ export function useResource<T = any>(
 export function useEffect(callback: () => void, deps: unknown[]): void;
 
 /** 返回一个 ref 对象，其 `.current` 属性初始化为传入的参数 (`initialValue`) */
-export function useRef<T>(initialValue: T): RefObject<T>;
+export function useRef<T = any>(initialValue?: T): RefObject<T>;
 
 export type Ref<T> = RefObject<T> | null;
 
@@ -102,21 +102,25 @@ export function usePathName(): string;
 export function useHistory(): History;
 
 export interface History {
-  push: (url: string) => void;
-  replace: (url: string) => void;
+  push: (url: string, options?: HistoryOptions) => void;
+  replace: (url: string, options?: HistoryOptions) => void;
   reload: () => void;
   pushQuery: UpdateQuery;
   replaceQuery: UpdateQuery;
 }
 
 export type UpdateQuery = (
   newQuery: Record<string, string | null>,
-  options?: {
+  options?: HistoryOptions & {
     clear?: boolean; // 是否清除已有参数，默认 false
-    notify?: boolean; // 是否通知路由变化，默认 true
   }
 ) => void;
 
+export interface HistoryOptions {
+  notify?: boolean; // 是否通知路由变化，默认 true
+  noIncremental?: boolean; // 是否禁止增量更新，默认 false
+}
+
 export function useLocation(): {
   href: string;
   origin: string;

packages/parser/src/__snapshots__/parseView.spec.ts.snap

@@ -349,6 +349,7 @@ exports[`parseView should work 1`] = `
               "type": "Identifier",
             },
             "kind": "ref",
+            "refName": "modalRef-0",
           },
           Node {
             "end": 1039,
@@ -775,7 +776,7 @@ exports[`parseView should work 1`] = `
                                       "payload": {
                                         "args": [],
                                         "method": "open",
-                                        "ref": "modalRef",
+                                        "ref": "modalRef-0",
                                         "scope": "global",
                                       },
                                     },
@@ -917,7 +918,7 @@ exports[`parseView should work 1`] = `
             : "" %>",
                   "width": "800px",
                 },
-                "ref": "modalRef",
+                "ref": "modalRef-0",
                 "reference": null,
                 "slot": undefined,
               },

packages/parser/src/interfaces.ts

@@ -51,6 +51,7 @@ export interface Events {
 export type EventHandler =
   | TypeEventHandlerOfUpdateVariable
   | TypeEventHandlerOfRefreshDataSource
+  | TypeEventHandlerOfUpdateRef
   | TypeEventHandlerOfCallRef
   | TypeEventHandlerOfCallSelector
   | TypeEventHandlerOfShowMessage
@@ -83,6 +84,16 @@ export interface TypeEventHandlerOfRefreshDataSource extends EventHandlerBase {
     name: string;
     scope?: "global" | "template";
   };
+  callback?: TypeEventHandlerCallback;
+}
+
+export interface TypeEventHandlerOfUpdateRef extends EventHandlerBase {
+  action: "update_ref";
+  payload: {
+    ref: string;
+    properties: Record<string, any>;
+    scope?: "global" | "template";
+  };
 }
 
 export interface TypeEventHandlerOfCallRef extends EventHandlerBase {

packages/parser/src/modules/getUniqueId.ts

@@ -0,0 +1,9 @@
+let counter = 0;
+
+export function getUniqueId(prefix: string) {
+  return `${prefix}${counter++}`;
+}
+
+export function resetUniqueIdCounter() {
+  counter = 0;
+}