Merge pull request #2 from easyops-cn/steve/useEffect

Steve/useEffect

Author: weareoutman

apps/test/src/Pages/Layout.tsx

@@ -1,14 +1,57 @@
-import { createPortal, useState } from "@next-tsx/core";
+import {
+  createPortal,
+  useState,
+  useEffect,
+  showMessage,
+  sessionStore,
+} from "@next-tsx/core";
 import MyModal from "../Components/MyModal";
 
 export default function Layout() {
-  const [a, _setA] = useState<string | null>(null);
+  const [a, setA] = useState<string | null>(null);
+  const b = a ? "value" : "null";
+  const [c, setC] = useState<number>(0);
+
+  useEffect(() => {
+    if (a) {
+      showMessage({
+        type: "success",
+        content: "Value of a changed: " + a + " / " + b + " / " + c,
+      });
+
+      sessionStore.setItem("myKey", { a, b, c });
+    }
+  }, [a, b, c]);
+
+  const dataSource = {
+    name: "Tom",
+    age: 30,
+  };
 
   return (
     <>
-      <div title={a!.length > 0 ? (a as string) : "default"}>
-        <h1>My App</h1>
-      </div>
+      <button
+        onClick={() => {
+          setA("New Value");
+          setC((prev) => prev + 42);
+        }}
+      >
+        My App
+      </button>
+      <pre>{JSON.stringify(sessionStore.getItem("myKey"), null, 2)}</pre>
+      <eo-descriptions
+        dataSource={dataSource}
+        list={[
+          {
+            label: "Name",
+            render: (d) => <strong>{d.name}</strong>,
+          },
+          {
+            label: "Age",
+            render: (d) => <em>{d.age}</em>,
+          },
+        ]}
+      />
       {createPortal(<MyModal />)}
     </>
   );

docs/DESIGN.md

@@ -0,0 +1,20 @@
+## 文件目录结构
+
+```
+apps/
+└── YOUR-APP-ID/
+    └── src/
+        ├── Components/
+        ├── Contexts/
+        ├── Pages/
+        ├── Utils/
+        ├── app.json
+        ├── i18n.json
+        └── index.tsx
+```
+
+### 组件
+
+```tsx
+// ./src/Components/
+```

package.json

@@ -9,6 +9,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "prepare": "husky",
+    "serve": "brick-container-serve",
     "start": "lerna run start",
     "build": "lerna run build --concurrency=2",
     "test": "test-next-project",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "@babel/types": "^7.27.6",
     "@next-core/babel-preset-next": "^1.0.26",
+    "@next-core/brick-container": "^3.23.7",
     "@next-core/eslint-config-next": "^3.0.1",
     "@types/jest": "^29.5.14",
     "@types/js-yaml": "^3.12.10",

packages/converter/src/convertComponent.ts

@@ -29,6 +29,7 @@ import convertCodeBlock from "./convertCodeBlock.js";
 import { getAppTplName, getViewTplName } from "./modules/getTplName.js";
 import { convertRoutes } from "./modules/convertRoutes.js";
 import { convertLifeCycle } from "./convertLifeCycle.js";
+import { convertProperties } from "./convertProperties.js";
 
 const PORTAL_COMPONENTS = ["eo-modal", "eo-drawer"];
 
@@ -135,8 +136,14 @@ export async function convertComponent(
           component.name.toLowerCase() === component.name
         ) {
           brick = {
-            brick: component.name.replaceAll("_", ".").replaceAll("--", "."),
-            properties: component.properties,
+            brick: component.name.replaceAll("--", "."),
+            properties: await convertProperties(
+              component.properties,
+              mod,
+              state,
+              options,
+              scope
+            ),
           };
         } else {
           // eslint-disable-next-line no-console
@@ -164,7 +171,13 @@ export async function convertComponent(
           state.app.appType === "app"
             ? getAppTplName(tplName)
             : getViewTplName(tplName, options.rootId),
-        properties: component.properties,
+        properties: await convertProperties(
+          component.properties,
+          mod,
+          state,
+          options,
+          scope
+        ),
       };
     } else {
       // eslint-disable-next-line no-console

packages/converter/src/convertEvents.ts

@@ -158,6 +158,11 @@ function convertEventHandler(
         action: `history.${handler.payload.method}`,
         args: handler.payload.args,
       };
+    case "store":
+      return {
+        action: `${handler.payload.type}Storage.${handler.payload.method}`,
+        args: handler.payload.args,
+      };
     case "show_message":
       return {
         action: `message.${handler.payload.type}` as "message.info",

packages/converter/src/convertProperties.ts

@@ -0,0 +1,57 @@
+import { isRenderUseBrick, type ParsedModule } from "@next-tsx/parser";
+import { isObject } from "@next-core/utils/general";
+import type { BrickConf } from "@next-core/types";
+import type { ConvertOptions, ConvertState } from "./interfaces.js";
+import { convertComponent } from "./convertComponent.js";
+import { deepReplaceVariables } from "./deepReplaceVariables.js";
+
+export async function convertProperties(
+  properties: Record<string, unknown>,
+  mod: ParsedModule,
+  state: ConvertState,
+  options: ConvertOptions,
+  scope: "page" | "view" | "template"
+) {
+  const convertPropValue = async (value: unknown): Promise<unknown> => {
+    if (Array.isArray(value)) {
+      return Promise.all(value.map((item) => convertPropValue(item)));
+    }
+
+    if (isObject(value)) {
+      return Object.fromEntries(
+        await Promise.all(
+          Object.entries(value).map(async ([k, v]) => {
+            if (k === "render" && isObject(v) && isRenderUseBrick(v)) {
+              const patterns = new Map<string, string>();
+              if (v.params.length > 0) {
+                patterns.set(v.params[0], "DATA");
+              }
+              const useBrick = (
+                await Promise.all(
+                  v.children.map(
+                    (child) =>
+                      convertComponent(
+                        child,
+                        mod,
+                        state,
+                        options,
+                        scope
+                      ) as Promise<BrickConf | BrickConf[]>
+                  )
+                )
+              ).flatMap((child) => deepReplaceVariables(child, patterns));
+              return ["useBrick", useBrick];
+            }
+            return [k, await convertPropValue(v)];
+          })
+        )
+      );
+    }
+
+    return value;
+  };
+
+  const props = (await convertPropValue(properties)) as Record<string, unknown>;
+
+  return props;
+}

packages/converter/src/modules/convertModule.ts

@@ -91,20 +91,34 @@ async function parseModulePart(
   const { component } = part;
 
   for (const binding of component.bindingMap.values()) {
+    let conf: ContextConf;
     if (binding.kind === "resource") {
-      context.push(convertDataSource(binding.resource!));
+      conf = convertDataSource(binding.resource!);
     } else if (
       binding.kind === "state" ||
       binding.kind === "constant" ||
       binding.kind === "param"
     ) {
-      context.push({
+      conf = {
         name: binding.id.name,
         value: binding.initialValue,
         expose: binding.kind === "param",
         track: true,
-      });
+      };
+    } else {
+      continue;
     }
+    const effects = component.effectsMap.get(binding.id);
+    if (effects && effects.length > 0) {
+      conf.onChange = effects.map((id) => ({
+        ...(part.type === "template"
+          ? { targetRef: id }
+          : { target: `#${id}` }),
+        args: ["effect"],
+        method: "trigger",
+      }));
+    }
+    context.push(conf);
   }
 
   let children: ComponentChild[] | undefined;

packages/core/index.d.ts

@@ -28,6 +28,15 @@ export function useResource<T = any>(
   }
 ): [data: T, refetch: () => void];
 
+/**
+ * 在依赖项数组变化时执行回调函数。
+ *
+ * 注意与 React 中的 useEffect 行为略有不同：
+ * - 初始渲染时不会执行 callback，仅在 deps 变化时执行 callback
+ * - 不支持返回清理函数
+ */
+export function useEffect(callback: () => void, deps: unknown[]): void;
+
 /** 返回一个 ref 对象，其 `.current` 属性初始化为传入的参数 (`initialValue`) */
 export function useRef<T>(initialValue: T): RefObject<T>;
 
@@ -190,6 +199,24 @@ export function showDialog(options: {
 /** 拷贝一段文本 */
 export function copyText(text: string): Promise<void>;
 
+/**
+ * 本地存储对象，数据存储在浏览器的 Local Storage 中，生命周期为永久。
+ * 可存储任意能被 JSON 序列化的数据。
+ */
+export const localStore: Store;
+
+/**
+ * 会话存储对象，数据存储在浏览器的 Session Storage 中，生命周期为当前会话。
+ * 可存储任意能被 JSON 序列化的数据。
+ */
+export const sessionStore: Store;
+
+export interface Store {
+  getItem<T = any>(key: string): T | null;
+  setItem<T = any>(key: string, value: T): void;
+  removeItem(key: string): void;
+}
+
 /**
  * 平台部署的基础路径，通常为 `/next/`。
  *

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

@@ -482,6 +482,7 @@ exports[`parseApp should work 1`] = `
               "slot": undefined,
             },
           ],
+          "effectsMap": Map {},
           "id": Node {
             "end": 263,
             "loc": SourceLocation {
@@ -535,6 +536,7 @@ exports[`parseApp should work 1`] = `
                 "slot": undefined,
               },
             ],
+            "effectsMap": Map {},
             "id": Node {
               "end": 1303,
               "loc": SourceLocation {
@@ -718,6 +720,7 @@ exports[`parseApp should work 1`] = `
               "slot": undefined,
             },
           ],
+          "effectsMap": Map {},
           "id": Node {
             "end": 124,
             "loc": SourceLocation {
@@ -787,6 +790,7 @@ exports[`parseApp should work 1`] = `
               "slot": undefined,
             },
           ],
+          "effectsMap": Map {},
           "id": Node {
             "end": 29,
             "loc": SourceLocation {
@@ -849,6 +853,7 @@ exports[`parseApp should work 1`] = `
               "slot": undefined,
             },
           ],
+          "effectsMap": Map {},
           "id": Node {
             "end": 31,
             "loc": SourceLocation {

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

@@ -253,6 +253,7 @@ exports[`parseTemplate should work 1`] = `
             "slot": undefined,
           },
         ],
+        "effectsMap": Map {},
         "id": Node {
           "end": 49,
           "loc": SourceLocation {