Merge pull request #4571 from easyops-cn/steve/v3-native-function

WHChen-Alex · web-flow · commit 80441d532ef3 · 2024-11-26T14:27:44.000+08:00
feat(): support native mode for storyboard functions
diff --git a/etc/runtime.api.md b/etc/runtime.api.md
@@ -576,7 +576,7 @@ function updateTemplatePreviewSettings(appId: string, templateId: string, settin
 //
 // dist/types/Dialog.d.ts:10:5 - (ae-forgotten-export) The symbol "show_2" needs to be exported by the entry point index.d.ts
 // dist/types/Notification.d.ts:8:5 - (ae-forgotten-export) The symbol "show" needs to be exported by the entry point index.d.ts
-// dist/types/StoryboardFunctionRegistry.d.ts:47:5 - (ae-forgotten-export) The symbol "FunctionCoverageSettings" needs to be exported by the entry point index.d.ts
+// dist/types/StoryboardFunctionRegistry.d.ts:48:5 - (ae-forgotten-export) The symbol "FunctionCoverageSettings" needs to be exported by the entry point index.d.ts
 // dist/types/internal/Runtime.d.ts:34:9 - (ae-forgotten-export) The symbol "AppForCheck" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
diff --git a/packages/runtime/src/StoryboardFunctionRegistry.spec.ts b/packages/runtime/src/StoryboardFunctionRegistry.spec.ts
@@ -106,6 +106,24 @@ describe("StoryboardFunctions", () => {
             }
           `,
         },
+        {
+          name: "nativeMode",
+          source: `
+            function nativeMode() {
+              "native mode";
+              return ["from", "normal", "mode"];
+            }
+          `,
+          transformed: {
+            globals: ["_", "document"],
+            source: `
+              function nativeMode() {
+                "native mode";
+                return document ?? _.split("from native mode", " ");
+              }
+            `,
+          },
+        },
       ],
       {
         id: "my-app",
@@ -137,6 +155,7 @@ describe("StoryboardFunctions", () => {
     expect(fn.checkPermissions("my:action-b")).toBe(false);
     expect(fn.getUniqueId()).not.toBe("42");
     expect(fn.getUniqueId("test-")).not.toBe("test-42");
+    expect(fn.nativeMode()).toEqual(["from", "native", "mode"]);
   });
 
   it("should register no functions", () => {
diff --git a/packages/runtime/src/StoryboardFunctionRegistry.ts b/packages/runtime/src/StoryboardFunctionRegistry.ts
@@ -1,4 +1,8 @@
-import type { MicroApp, StoryboardFunction } from "@next-core/types";
+import type {
+  MicroApp,
+  StoryboardFunction,
+  TransformedFunction,
+} from "@next-core/types";
 import {
   cook,
   precookFunction,
@@ -8,6 +12,7 @@ import {
 } from "@next-core/cook";
 import { supply } from "@next-core/supply";
 import { collectMemberUsageInFunction } from "@next-core/utils/storyboard";
+import { hasOwnProperty } from "@next-core/utils/general";
 import type _ from "lodash";
 import { getGeneralGlobals } from "./internal/compute/getGeneralGlobals.js";
 
@@ -17,7 +22,7 @@ export type ReadonlyStoryboardFunctions = Readonly<Record<string, Function>>;
 /** @internal */
 export type StoryboardFunctionPatch = Pick<
   StoryboardFunction,
-  "source" | "typescript"
+  "source" | "typescript" | "transformed"
 >;
 
 /** @internal */
@@ -50,6 +55,7 @@ export interface RuntimeStoryboardFunction {
   cooked?: Function;
   deps: Set<string> | string[];
   hasPermissionsCheck: boolean;
+  transformed?: TransformedFunction;
 }
 
 /** @internal */
@@ -66,7 +72,7 @@ export interface FunctionCoverageSettings {
 }
 
 /** @internal */
-export type PartialMicroApp = Pick<MicroApp, "id" | "isBuildPush">;
+export type PartialMicroApp = Pick<MicroApp, "id" | "isBuildPush" | "config">;
 
 /** @internal */
 export function StoryboardFunctionRegistryFactory({
@@ -130,13 +136,29 @@ export function StoryboardFunctionRegistryFactory({
         registeredFunctions.set(fn.name, {
           source: fn.source,
           typescript: fn.typescript,
+          transformed: fn.transformed,
           deps,
           hasPermissionsCheck,
         });
       }
     }
   }
 
+  function getGlobalVariables(globals: Set<string> | string[]) {
+    return supply(
+      globals,
+      getGeneralGlobals(globals, {
+        collectCoverage,
+        widgetId,
+        widgetVersion,
+        app: currentApp,
+        storyboardFunctions,
+        isStoryboardFunction: true,
+      }),
+      !!collectCoverage
+    );
+  }
+
   function getStoryboardFunction(name: string): Function | undefined {
     const fn = registeredFunctions.get(name);
     if (!fn) {
@@ -149,67 +171,77 @@ export function StoryboardFunctionRegistryFactory({
     if (collectCoverage) {
       collector = collectCoverage.createCollector(name);
     }
-    const precooked = precookFunction(fn.source, {
-      typescript: fn.typescript,
-      hooks: collector && {
-        beforeVisit: collector.beforeVisit,
-      },
-      cacheKey: fn,
-    });
-    const globalVariables = supply(
-      precooked.attemptToVisitGlobals,
-      getGeneralGlobals(precooked.attemptToVisitGlobals, {
-        collectCoverage,
-        widgetId,
-        widgetVersion,
-        app: currentApp,
-        storyboardFunctions,
-        isStoryboardFunction: true,
-      }),
-      !!collectCoverage
-    );
 
-    fn.cooked = cook(precooked.function, fn.source, {
-      rules: {
-        noVar: true,
-      },
-      globalVariables: overrides
-        ? {
-            ...globalVariables,
-            ...(overrides?.LodashWithStaticFields &&
-            precooked.attemptToVisitGlobals.has("_")
-              ? {
-                  _: {
-                    ...(globalVariables._ as typeof _),
-                    ...overrides.LodashWithStaticFields,
-                  },
-                }
-              : null),
-            ...(overrides?.ArrayConstructor &&
-            precooked.attemptToVisitGlobals.has("Array")
-              ? {
-                  Array: overrides.ArrayConstructor,
-                }
-              : null),
-            ...(overrides?.ObjectWithStaticFields &&
-            precooked.attemptToVisitGlobals.has("Object")
-              ? {
-                  Object: {
-                    ...(globalVariables.Object as typeof Object),
-                    ...overrides.ObjectWithStaticFields,
-                  },
-                }
-              : null),
-          }
-        : globalVariables,
-      ArrayConstructor: overrides?.ArrayConstructor,
-      hooks: collector && {
-        beforeEvaluate: collector.beforeEvaluate,
-        beforeCall: collector.beforeCall,
-        beforeBranch: collector.beforeBranch,
-      },
-      debug: !!debuggerOverrides,
-    }) as Function;
+    // Do not use transformed functions when debugging.
+    const transformed = !overrides && !collector && fn.transformed;
+    if (transformed) {
+      const globalVariables = getGlobalVariables(transformed.globals);
+      // Spread globals as params to prevent accessing forbidden globals.
+      // NOTE: in native mode, forbidden globals are declared as `undefined`,
+      // thus accessing them will not throw a ReferenceError.
+      fn.cooked = new Function(
+        ...transformed.globals,
+        `"use strict";return (${transformed.source})`
+      )(
+        ...transformed.globals.map((key) =>
+          hasOwnProperty(globalVariables, key)
+            ? globalVariables[key]
+            : undefined
+        )
+      );
+    } else {
+      const precooked = precookFunction(fn.source, {
+        typescript: fn.typescript,
+        hooks: collector && {
+          beforeVisit: collector.beforeVisit,
+        },
+        cacheKey: fn,
+      });
+      const globalVariables = getGlobalVariables(
+        precooked.attemptToVisitGlobals
+      );
+      fn.cooked = cook(precooked.function, fn.source, {
+        rules: {
+          noVar: true,
+        },
+        globalVariables: overrides
+          ? {
+              ...globalVariables,
+              ...(overrides?.LodashWithStaticFields &&
+              precooked.attemptToVisitGlobals.has("_")
+                ? {
+                    _: {
+                      ...(globalVariables._ as typeof _),
+                      ...overrides.LodashWithStaticFields,
+                    },
+                  }
+                : null),
+              ...(overrides?.ArrayConstructor &&
+              precooked.attemptToVisitGlobals.has("Array")
+                ? {
+                    Array: overrides.ArrayConstructor,
+                  }
+                : null),
+              ...(overrides?.ObjectWithStaticFields &&
+              precooked.attemptToVisitGlobals.has("Object")
+                ? {
+                    Object: {
+                      ...(globalVariables.Object as typeof Object),
+                      ...overrides.ObjectWithStaticFields,
+                    },
+                  }
+                : null),
+            }
+          : globalVariables,
+        ArrayConstructor: overrides?.ArrayConstructor,
+        hooks: collector && {
+          beforeEvaluate: collector.beforeEvaluate,
+          beforeCall: collector.beforeCall,
+          beforeBranch: collector.beforeBranch,
+        },
+        debug: !!debuggerOverrides,
+      }) as Function;
+    }
     fn.processed = true;
     return fn.cooked;
   }
@@ -234,6 +266,7 @@ export function StoryboardFunctionRegistryFactory({
       registeredFunctions.set(name, {
         source: data.source,
         typescript: data.typescript,
+        transformed: data.transformed,
         deps,
         hasPermissionsCheck,
       });
diff --git a/packages/runtime/src/internal/compute/getGeneralGlobals.ts b/packages/runtime/src/internal/compute/getGeneralGlobals.ts
@@ -23,7 +23,7 @@ export type PartialMicroApp = Pick<MicroApp, "id" | "isBuildPush">;
 // `GeneralGlobals` are globals which are page-state-agnostic,
 // thus they can be used both in storyboard expressions and functions.
 export function getGeneralGlobals(
-  attemptToVisitGlobals: Set<string>,
+  attemptToVisitGlobals: Set<string> | string[],
   options: GeneralGlobalsOptions
 ): Record<string, unknown> {
   const globalVariables: Record<string, unknown> = {};
diff --git a/packages/supply/src/index.ts b/packages/supply/src/index.ts
@@ -3,17 +3,17 @@ import moment from "moment";
 import { pipes } from "@next-core/pipes";
 
 export function supply(
-  attemptToVisitGlobals: Set<string>,
+  attemptToVisitGlobals: Set<string> | string[],
   providedGlobalVariables?: Record<string, unknown>,
   mock?: boolean
 ): Record<string, unknown> {
-  const globalVariables: Record<string, unknown> = {
-    undefined,
-  };
+  const globalVariables: Record<string, unknown> = {};
   // Allow limited browser builtin values.
   for (const variableName of attemptToVisitGlobals) {
     if (!Object.prototype.hasOwnProperty.call(globalVariables, variableName)) {
-      if (
+      if (variableName === "undefined") {
+        globalVariables[variableName] = undefined;
+      } else if (
         providedGlobalVariables &&
         Object.prototype.hasOwnProperty.call(
           providedGlobalVariables,
diff --git a/packages/types/src/manifest.ts b/packages/types/src/manifest.ts
@@ -1357,6 +1357,22 @@ export interface StoryboardFunction {
   deps?: string[];
   /** [Compiled] 是否有使用 `PERMISSIONS.check` */
   perm?: boolean;
+  /**
+   * [Compiled] 编译后的函数
+   *
+   * 在函数内先声明 "native mode"，打包时会将函数转换为原生 JS 代码，以提高执行性能。
+   */
+  transformed?: TransformedFunction;
+}
+
+/**
+ * 编译后的函数
+ */
+export interface TransformedFunction {
+  /** 编译后的 JS 代码 */
+  source: string;
+  /** 要访问的全局对象列表 */
+  globals: string[];
 }
 
 /**
