EvalTS (end to end type safety) (hyperbrew#53)

* evalTS start * getSequenceLengthInFrames added to ppro utils * disable sourcemap temporarily * build config working * cleanup * remove sourcemapping * cleanup and add to all templates * cleanup
galaddirie · Feb 9, 2023 · 816b546 · 816b546
1 parent 81cc56b
commit 816b546
Show file tree

Hide file tree

Showing 18 changed files with 281 additions and 2 deletions.
diff --git a/cep.config.ts b/cep.config.ts
@@ -21,6 +21,14 @@ const config: CEP_Config = {
       name: "PPRO",
       version: "[0.0,99.9]",
     },
+    {
+      name: "ILST",
+      version: "[0.0,99.9]",
+    },
+    {
+      name: "PHXS",
+      version: "[0.0,99.9]",
+    },
     {
       name: "FLPR",
       version: "[0.0,99.9]",

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "scripts": {
     "dev": "vite",
     "watch": "tsc && vite build --watch true",
-    "build": "rimraf dist/* && tsc && vite build --watch false",
+    "build": "rimraf dist/* && tsc -p \"tsconfig-build.json\" && vite build --watch false",
     "zxp": "rimraf dist/* && tsc && cross-env ZXP_PACKAGE=true vite build --watch false",
     "zip": "rimraf dist/* && tsc && cross-env ZIP_PACKAGE=true vite build --watch false",
     "serve": "cross-env SERVE_PANEL=true vite preview",
@@ -14,6 +14,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "source-map-js": "^1.0.2",
     "vue": "^3.2.45"
   },
   "devDependencies": {

diff --git a/src/js/lib/es-types/index.ts b/src/js/lib/es-types/index.ts
@@ -0,0 +1,3 @@
+export type Scripts = {
+  [key: string]: (a: any, ...ags: any) => any;
+};
diff --git a/src/js/lib/utils.ts b/src/js/lib/utils.ts
@@ -1,6 +1,7 @@
 import CSInterface from "../lib/csinterface";
 import Vulcan, { VulcanMessage } from "../lib/vulcan";
 import { ns } from "../../shared/shared";
+import { fs } from "./node";
 
 export const csi = new CSInterface();
 export const vulcan = new Vulcan();
@@ -13,6 +14,17 @@ export const openLinkInBrowser = (url: string) => {
   }
 };
 
+/**
+ * @function EvalES
+ * Evaluates a string in ExtendScript scoped to the project's namespace
+ * Optionally, pass true to the isGlobal param to avoid scoping
+ *
+ * @param script    The script as a string to be evaluated
+ * @param isGlobal  Optional. Defaults to false,
+ *
+ * @return String Result.
+ */
+
 export const evalES = (script: string, isGlobal = false): Promise<string> => {
   return new Promise(function (resolve, reject) {
     const pre = isGlobal
@@ -28,6 +40,74 @@ export const evalES = (script: string, isGlobal = false): Promise<string> => {
   });
 };
 
+import type { Scripts } from "@esTypes/index";
+
+type ArgTypes<F extends Function> = F extends (...args: infer A) => any
+  ? A
+  : never;
+type ReturnType<F extends Function> = F extends (...args: infer A) => infer B
+  ? B
+  : never;
+
+/**
+ * @description End-to-end type-safe ExtendScript evaluation with error handling
+ * Call ExtendScript functions from CEP with type-safe parameters and return types.
+ * Any ExtendScript errors are captured and logged to the CEP console for tracing
+ *
+ * @param functionName The name of the function to be evaluated.
+ * @param args the list of arguments taken by the function.
+ *
+ * @example
+ * evalTS("helloStr", "test").then((res) => {
+ *    // Do stuff
+ * });
+ *
+ * @return Promise resolving to function native return type.
+ */
+
+export const evalTS = <
+  Key extends string & keyof Scripts,
+  Func extends Function & Scripts[Key]
+>(
+  functionName: Key,
+  ...args: ArgTypes<Func>
+): Promise<ReturnType<Func>> => {
+  return new Promise(function (resolve, reject) {
+    const formattedArgs = args.map((arg) => {
+      if (typeof arg === "object") {
+        return JSON.stringify(arg);
+      } else if (typeof arg == "string") {
+        return `"${arg}"`;
+      } else {
+        return arg;
+      }
+    });
+    csi.evalScript(
+      `try{
+          var host = typeof $ !== 'undefined' ? $ : window;
+          var res = host["${ns}"].${functionName}(${formattedArgs.join(",")});
+          JSON.stringify(res);
+        }catch(e){
+          e.fileName = new File(e.fileName).fsName;
+          JSON.stringify(e);
+        }`,
+      (res: string) => {
+        try {
+          const parsed = JSON.parse(res);
+          if (parsed.name === "ReferenceError") {
+            console.error("REFERENCE ERROR");
+            reject(parsed);
+          } else {
+            resolve(parsed);
+          }
+        } catch (error) {
+          reject(res);
+        }
+      }
+    );
+  });
+};
+
 export const evalFile = (file: string) => {
   return evalES(
     "typeof $ !== 'undefined' ? $.evalFile(\"" +

diff --git a/src/js/main/main.tsx b/src/js/main/main.tsx
@@ -6,6 +6,7 @@ import {
   evalFile,
   openLinkInBrowser,
   subscribeBackgroundColor,
+  evalTS,
 } from "../lib/utils";
 
 import reactLogo from "../assets/react.svg";
@@ -23,10 +24,32 @@ const Main = () => {
   const [bgColor, setBgColor] = useState("#282c34");
   const [count, setCount] = useState(0);
 
+  //* Demonstration of Traditional string eval-based ExtendScript Interaction
   const jsxTest = () => {
     console.log(evalES(`helloWorld("${csi.getApplicationID()}")`));
   };
 
+  //* Demonstration of End-to-End Type-safe ExtendScript Interaction
+  const jsxTestTS = () => {
+    evalTS("helloStr", "test").then((res) => {
+      console.log(res);
+    });
+    evalTS("helloNum", 1000).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloArrayStr", ["ddddd", "aaaaaa", "zzzzzzz"]).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloObj", { height: 90, width: 100 }).then((res) => {
+      console.log(typeof res, res);
+      console.log(res.x);
+      console.log(res.y);
+    });
+    evalTS("helloError", "test").catch((e) => {
+      console.log("there was an error", e);
+    });
+  };
+
   const nodeTest = () => {
     alert(
       `Node.js ${process.version}\nPlatform: ${
@@ -86,6 +109,7 @@ const Main = () => {
           <button onClick={jsxTest}>
             <img className="icon-button" src={adobe} />
           </button>
+          <button onClick={jsxTestTS}>Ts</button>
         </div>
         <p>
           Edit <code>main.tsx</code> and save to test HMR updates.

diff --git a/src/js/template-react/main.tsx b/src/js/template-react/main.tsx
@@ -6,6 +6,7 @@ import {
   evalFile,
   openLinkInBrowser,
   subscribeBackgroundColor,
+  evalTS,
 } from "../lib/utils";
 
 import reactLogo from "../assets/react.svg";
@@ -23,10 +24,32 @@ const Main = () => {
   const [bgColor, setBgColor] = useState("#282c34");
   const [count, setCount] = useState(0);
 
+  //* Demonstration of Traditional string eval-based ExtendScript Interaction
   const jsxTest = () => {
     console.log(evalES(`helloWorld("${csi.getApplicationID()}")`));
   };
 
+  //* Demonstration of End-to-End Type-safe ExtendScript Interaction
+  const jsxTestTS = () => {
+    evalTS("helloStr", "test").then((res) => {
+      console.log(res);
+    });
+    evalTS("helloNum", 1000).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloArrayStr", ["ddddd", "aaaaaa", "zzzzzzz"]).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloObj", { height: 90, width: 100 }).then((res) => {
+      console.log(typeof res, res);
+      console.log(res.x);
+      console.log(res.y);
+    });
+    evalTS("helloError", "test").catch((e) => {
+      console.log("there was an error", e);
+    });
+  };
+
   const nodeTest = () => {
     alert(
       `Node.js ${process.version}\nPlatform: ${
@@ -86,6 +109,7 @@ const Main = () => {
           <button onClick={jsxTest}>
             <img className="icon-button" src={adobe} />
           </button>
+          <button onClick={jsxTestTS}>Ts</button>
         </div>
         <p>
           Edit <code>main.tsx</code> and save to test HMR updates.

diff --git a/src/js/template-svelte/main.svelte b/src/js/template-svelte/main.svelte
@@ -5,6 +5,7 @@
     csi,
     evalES,
     evalFile,
+    evalTS,
     openLinkInBrowser,
     subscribeBackgroundColor,
   } from "../lib/utils";
@@ -24,10 +25,32 @@
   let count: number = 0;
   let backgroundColor: string = "#282c34";
 
+  //* Demonstration of Traditional string eval-based ExtendScript Interaction
   const jsxTest = () => {
     console.log(evalES(`helloWorld("${csi.getApplicationID()}")`));
   };
 
+  //* Demonstration of End-to-End Type-safe ExtendScript Interaction
+  const jsxTestTS = () => {
+    evalTS("helloStr", "test").then((res) => {
+      console.log(res);
+    });
+    evalTS("helloNum", 1000).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloArrayStr", ["ddddd", "aaaaaa", "zzzzzzz"]).then((res) => {
+      console.log(typeof res, res);
+    });
+    evalTS("helloObj", { height: 90, width: 100 }).then((res) => {
+      console.log(typeof res, res);
+      console.log(res.x);
+      console.log(res.y);
+    });
+    evalTS("helloError", "test").catch((e) => {
+      console.log("there was an error", e);
+    });
+  };
+
   const nodeTest = () => {
     alert(
       `Node.js ${process.version}\nPlatform: ${
@@ -85,6 +108,7 @@
       <button on:click={jsxTest}>
         <img class="icon-button" src={adobe} alt="" />
       </button>
+      <button on:click={jsxTestTS}>Ts</button>
     </div>
 
     <p>Edit <code>main.svelte</code> and save to test HMR updates.</p>

diff --git a/src/js/template-vue/main.vue b/src/js/template-vue/main.vue
@@ -5,6 +5,7 @@ import {
   csi,
   evalES,
   evalFile,
+  evalTS,
   openLinkInBrowser,
   subscribeBackgroundColor,
 } from "../lib/utils";
@@ -13,10 +14,32 @@ import "../index.scss";
 const count = ref(0);
 const backgroundColor = ref("#282c34");
 
+//* Demonstration of Traditional string eval-based ExtendScript Interaction
 const jsxTest = () => {
   console.log(evalES(`helloWorld("${csi.getApplicationID()}")`));
 };
 
+//* Demonstration of End-to-End Type-safe ExtendScript Interaction
+const jsxTestTS = () => {
+  evalTS("helloStr", "test").then((res) => {
+    console.log(res);
+  });
+  evalTS("helloNum", 1000).then((res) => {
+    console.log(typeof res, res);
+  });
+  evalTS("helloArrayStr", ["ddddd", "aaaaaa", "zzzzzzz"]).then((res) => {
+    console.log(typeof res, res);
+  });
+  evalTS("helloObj", { height: 90, width: 100 }).then((res) => {
+    console.log(typeof res, res);
+    console.log(res.x);
+    console.log(res.y);
+  });
+  evalTS("helloError", "test").catch((e) => {
+    console.log("there was an error", e);
+  });
+};
+
 const nodeTest = () => {
   alert(
     `Node.js ${process.version}\nPlatform: ${
@@ -74,6 +97,7 @@ onMounted(() => {
         <button @click="jsxTest">
           <img class="icon-button" src="../assets/adobe.svg" />
         </button>
+        <button @click="jsxTestTS">Ts</button>
       </div>
 
       <p>Edit <code>main.vue</code> and save to test HMR updates.</p>

diff --git a/src/jsx/aeft/aeft.ts b/src/jsx/aeft/aeft.ts
@@ -1,3 +1,12 @@
+import {
+  helloError,
+  helloStr,
+  helloNum,
+  helloArrayStr,
+  helloObj,
+} from "../utils/samples";
+export { helloError, helloStr, helloNum, helloArrayStr, helloObj };
+
 export const helloWorld = () => {
   alert("Hello from After Effects!");
   app.project.activeItem;

diff --git a/src/jsx/ilst/ilst.ts b/src/jsx/ilst/ilst.ts
@@ -1,3 +1,12 @@
+import {
+  helloError,
+  helloStr,
+  helloNum,
+  helloArrayStr,
+  helloObj,
+} from "../utils/samples";
+export { helloError, helloStr, helloNum, helloArrayStr, helloObj };
+
 export const helloWorld = () => {
   alert("Hello from Illustrator");
   app.activeDocument.path;

diff --git a/src/jsx/index.ts b/src/jsx/index.ts
@@ -37,3 +37,9 @@ switch (BridgeTalk.appName) {
 //@ts-ignore
 const host = typeof $ !== "undefined" ? $ : window;
 host[ns] = main;
+
+export type Scripts = typeof aeft &
+  typeof ilst &
+  typeof anim &
+  typeof ppro &
+  typeof phxs;
diff --git a/src/jsx/phxs/phxs.ts b/src/jsx/phxs/phxs.ts
@@ -1,3 +1,12 @@
+import {
+  helloError,
+  helloStr,
+  helloNum,
+  helloArrayStr,
+  helloObj,
+} from "../utils/samples";
+export { helloError, helloStr, helloNum, helloArrayStr, helloObj };
+
 export const helloWorld = () => {
   app.activeDocument;
   alert("Hello from Photoshop");

diff --git a/src/jsx/ppro/ppro-utils.ts b/src/jsx/ppro/ppro-utils.ts
@@ -17,3 +17,11 @@ export const deleteItem = (item: ProjectItem) => {
     tmpBin.deleteBin();
   }
 };
+
+export const getSequenceLengthInFrames = (seq: Sequence) => {
+  const settings = seq.getSettings();
+  const end = seq.end;
+  const fps = settings.videoFrameRate.ticks;
+  const frames = parseInt(end) / parseInt(fps);
+  return frames;
+};