feat(transforms): support encrypt closure bind (#896)

- part of #881

## todo

- [x] implement transform
- [ ] add example #897
  - [ ] no-op encode/decode
  - [ ] flight serialize without key
  - [ ] flight serialize with key

Author: hi-ogawa

packages/transforms/src/hoist.test.ts

@@ -4,12 +4,14 @@ import { transformHoistInlineDirective } from "./hoist";
 import { debugSourceMap } from "./test-utils";
 
 describe(transformHoistInlineDirective, () => {
-  async function testTransform(input: string) {
+  async function testTransform(input: string, options?: { encode?: boolean }) {
     const ast = await parseAstAsync(input);
     const { output } = transformHoistInlineDirective(input, ast, {
       runtime: (value, name) =>
         `$$register(${value}, "<id>", ${JSON.stringify(name)})`,
       directive: "use server",
+      encode: options?.encode ? (v) => `__enc(${v})` : undefined,
+      decode: options?.encode ? (v) => `__dec(${v})` : undefined,
     });
     if (!output.hasChanged()) {
       return;
@@ -84,6 +86,11 @@ export default function w() {
       /* #__PURE__ */ Object.defineProperty($$hoist_2_w, "name", { value: "w" });
       "
     `);
+
+    // nothing to encode
+    expect(await testTransform(input, { encode: true })).toBe(
+      await testTransform(input),
+    );
   });
 
   it("closure", async () => {
@@ -207,6 +214,28 @@ function Counter() {
       /* #__PURE__ */ Object.defineProperty($$hoist_0_anonymous_server_function, "name", { value: "anonymous_server_function" });
       "
     `);
+
+    expect(await testTransform(input, { encode: true })).toMatchInlineSnapshot(`
+      "
+      let count = 0;
+
+      function Counter() {
+        const name = "value";
+
+        return {
+          type: "form",
+          action: /* #__PURE__ */ $$register($$hoist_0_anonymous_server_function, "<id>", "$$hoist_0_anonymous_server_function").bind(null, __enc([name]))
+        }
+      }
+
+      ;export function $$hoist_0_anonymous_server_function($$hoist_encoded, formData) {
+            const [name] = __dec($$hoist_encoded);
+      "use server";
+            count += Number(formData.get(name));
+          };
+      /* #__PURE__ */ Object.defineProperty($$hoist_0_anonymous_server_function, "name", { value: "anonymous_server_function" });
+      "
+    `);
   });
 
   it("higher order", async () => {
@@ -252,5 +281,32 @@ function validator(action) {
       /* #__PURE__ */ Object.defineProperty($$hoist_1_anonymous_server_function, "name", { value: "anonymous_server_function" });
       "
     `);
+
+    expect(await testTransform(input, { encode: true })).toMatchInlineSnapshot(`
+      "
+      export default function Page() {
+        const x = 0;
+        const action = validator(/* #__PURE__ */ $$register($$hoist_0_anonymous_server_function, "<id>", "$$hoist_0_anonymous_server_function").bind(null, __enc([x])))
+      }
+
+      function validator(action) {
+        return /* #__PURE__ */ $$register($$hoist_1_anonymous_server_function, "<id>", "$$hoist_1_anonymous_server_function").bind(null, __enc([action]));
+      }
+
+      ;export async function $$hoist_0_anonymous_server_function($$hoist_encoded, y) {
+          const [x] = __dec($$hoist_encoded);
+      "use server";
+          return x + y;
+        };
+      /* #__PURE__ */ Object.defineProperty($$hoist_0_anonymous_server_function, "name", { value: "anonymous_server_function" });
+
+      ;export async function $$hoist_1_anonymous_server_function($$hoist_encoded, arg) {
+          const [action] = __dec($$hoist_encoded);
+      "use server";
+          return action(arg);
+        };
+      /* #__PURE__ */ Object.defineProperty($$hoist_1_anonymous_server_function, "name", { value: "anonymous_server_function" });
+      "
+    `);
   });
 });

packages/transforms/src/hoist.ts

@@ -12,10 +12,13 @@ export function transformHoistInlineDirective(
     runtime,
     directive,
     rejectNonAsyncFunction,
+    ...options
   }: {
     runtime: (value: string, name: string) => string;
     directive: string;
     rejectNonAsyncFunction?: boolean;
+    encode?: (value: string) => string;
+    decode?: (value: string) => string;
   },
 ) {
   const output = new MagicString(input);
@@ -59,10 +62,20 @@ export function transformHoistInlineDirective(
           const owner = scope.find_owner(ref);
           return owner && owner !== scope && owner !== analyzed.scope;
         });
-        const newParams = [
+        let newParams = [
           ...bindVars,
           ...node.params.map((n) => input.slice(n.start, n.end)),
         ].join(", ");
+        if (bindVars.length > 0 && options.decode) {
+          newParams = [
+            "$$hoist_encoded",
+            ...node.params.map((n) => input.slice(n.start, n.end)),
+          ].join(", ");
+          output.appendLeft(
+            node.body.body[0]!.start,
+            `const [${bindVars.join(",")}] = ${options.decode("$$hoist_encoded")};\n`,
+          );
+        }
 
         // append a new `FunctionDeclaration` at the end
         const newName =
@@ -82,7 +95,10 @@ export function transformHoistInlineDirective(
         // replace original declartion with action register + bind
         let newCode = `/* #__PURE__ */ ${runtime(newName, newName)}`;
         if (bindVars.length > 0) {
-          newCode = `${newCode}.bind(${["null", ...bindVars].join(", ")})`;
+          const bindArgs = options.encode
+            ? options.encode("[" + bindVars.join(", ") + "]")
+            : bindVars.join(", ");
+          newCode = `${newCode}.bind(null, ${bindArgs})`;
         }
         if (declName) {
           newCode = `const ${declName} = ${newCode};`;

packages/transforms/src/server-action.ts

@@ -12,6 +12,8 @@ export function transformServerActionServer(
   options: {
     runtime: (value: string, name: string) => string;
     rejectNonAsyncFunction?: boolean;
+    encode?: (value: string) => string;
+    decode?: (value: string) => string;
   },
 ) {
   // TODO: unify (generalize transformHoistInlineDirective to support top leve directive case)