@animaapp/anima-sdk-react 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@animaapp/anima-sdk-react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Anima's JavaScript utilities library",
   "author": "Anima App, Inc.",
@@ -16,8 +16,7 @@
     "url": "git+https://github.com/AnimaApp/anima-sdk.git"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
+    "access": "public"
   },
   "scripts": {
     "build": "vite build",
@@ -41,4 +40,4 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5"
   }
-}
+}

package/src/useAnimaCodegen.ts

@@ -1,3 +1,4 @@
+import { arrayBufferToBase64 } from "./utils";
 import type {
   AnimaSDKResult,
   GetCodeParams,
@@ -7,6 +8,14 @@ import { convertCodegenFilesToAnimaFiles } from "@animaapp/anima-sdk";
 import { EventSource } from "eventsource";
 import { useImmer } from "use-immer";
 
+type LocalAssetsStorage =
+  | { strategy: "local"; path: string }
+  | { strategy: "local"; filePath: string; referencePath: string };
+
+export type UseAnimaParams = Omit<GetCodeParams, "assetsStorage"> & {
+  assetsStorage?: GetCodeParams["assetsStorage"] | LocalAssetsStorage;
+};
+
 type Status = "idle" | "pending" | "success" | "aborted" | "error";
 
 type TaskStatus = "pending" | "running" | "finished";
@@ -33,7 +42,30 @@ const defaultProgress: CodegenStatus = {
   },
 };
 
-type StreamMessageByType<T extends StreamCodgenMessage['type']> = Extract<StreamCodgenMessage, { type: T }>;
+type StreamMessageByType<T extends StreamCodgenMessage["type"]> = Extract<
+  StreamCodgenMessage,
+  { type: T }
+>;
+
+const getAssetsLocalStrategyParams = (
+  localAssetsStorage: LocalAssetsStorage
+) => {
+  if ("path" in localAssetsStorage) {
+    return {
+      filePath: localAssetsStorage.path.replace(/^\//, ""),
+      referencePath:
+        localAssetsStorage.path === "/" ? "" : localAssetsStorage.path, // Workaround to avoid duplicated slashes in the URL. Ideally, the fix should be done in Codegen.
+    };
+  }
+
+  return {
+    filePath: localAssetsStorage.filePath.replace(/^\//, ""),
+    referencePath:
+      localAssetsStorage.referencePath === "/"
+        ? ""
+        : localAssetsStorage.referencePath,
+  };
+};
 
 export const useAnimaCodegen = ({
   url,
@@ -44,7 +76,9 @@ export const useAnimaCodegen = ({
 }) => {
   const [status, updateStatus] = useImmer<CodegenStatus>(defaultProgress);
 
-  const getCode = async <T = GetCodeParams>(params: T) => {
+  const getCode = async <T extends UseAnimaParams = UseAnimaParams>(
+    params: T
+  ) => {
     updateStatus((draft) => {
       draft.status = "pending";
       draft.error = null;
@@ -52,6 +86,19 @@ export const useAnimaCodegen = ({
       draft.tasks = defaultProgress.tasks;
     });
 
+    const initialParams = structuredClone(params);
+
+    if (params.assetsStorage?.strategy === "local") {
+      const { referencePath } = getAssetsLocalStrategyParams(
+        params.assetsStorage
+      );
+
+      params.assetsStorage = {
+        strategy: "external",
+        url: referencePath,
+      };
+    }
+
     const es = new EventSource(url, {
       fetch: (url, init) =>
         fetch(url, {
@@ -65,12 +112,11 @@ export const useAnimaCodegen = ({
       result: AnimaSDKResult | null;
       error: Error | null;
     }>((resolve) => {
-
       const result: Partial<AnimaSDKResult> = {};
 
       // Add specific event listeners
-      es.addEventListener('start', (event) => {
-        const message = JSON.parse(event.data) as StreamMessageByType<'start'>;
+      es.addEventListener("start", (event) => {
+        const message = JSON.parse(event.data) as StreamMessageByType<"start">;
         result.sessionId = message.sessionId;
 
         updateStatus((draft) => {
@@ -78,8 +124,10 @@ export const useAnimaCodegen = ({
         });
       });
 
-      es.addEventListener('pre_codegen', (event) => {
-        const message = JSON.parse(event.data) as StreamMessageByType<'pre_codegen'>;
+      es.addEventListener("pre_codegen", (event) => {
+        const message = JSON.parse(
+          event.data
+        ) as StreamMessageByType<"pre_codegen">;
         if (message.message === "Anima model built") {
           updateStatus((draft) => {
             draft.tasks.fetchDesign.status = "finished";
@@ -89,13 +137,15 @@ export const useAnimaCodegen = ({
         }
       });
 
-      es.addEventListener('figma_metadata', (e) => {
-        const message = JSON.parse(e.data) as StreamMessageByType<'figma_metadata'>;
+      es.addEventListener("figma_metadata", (e) => {
+        const message = JSON.parse(
+          e.data
+        ) as StreamMessageByType<"figma_metadata">;
         result.figmaFileName = message.figmaFileName;
         result.figmaSelectedFrameName = message.figmaSelectedFrameName;
       });
 
-      es.addEventListener('aborted', (e) => {
+      es.addEventListener("aborted", () => {
         updateStatus((draft) => {
           draft.status = "aborted";
         });
@@ -105,8 +155,10 @@ export const useAnimaCodegen = ({
         });
       });
 
-      es.addEventListener('generating_code', (e) => {
-        const message = JSON.parse(e.data) as StreamMessageByType<'generating_code'>;
+      es.addEventListener("generating_code", (event) => {
+        const message = JSON.parse(
+          event.data
+        ) as StreamMessageByType<"generating_code">;
         if (message.payload.status === "success") {
           const codegenFiles = message.payload.files as Record<
             string,
@@ -121,22 +173,33 @@ export const useAnimaCodegen = ({
         });
       });
 
-      es.addEventListener('codegen_completed', (e) => {
+      es.addEventListener("codegen_completed", () => {
         updateStatus((draft) => {
           draft.tasks.codeGeneration.status = "finished";
         });
       });
 
-      es.addEventListener('assets_uploaded', (e) => {
+      es.addEventListener("assets_uploaded", () => {
         updateStatus((draft) => {
           draft.tasks.uploadAssets.status = "finished";
         });
       });
 
-      es.addEventListener('error', (e: ErrorEvent | MessageEvent) => {
+      es.addEventListener("assets_list", (event) => {
+        const message = JSON.parse(
+          event.data
+        ) as StreamMessageByType<"assets_list">;
+
+        result.assets = message.payload.assets;
+      });
+
+      // TODO: For some reason, we receive errors even after the `done` event is triggered.
+      es.addEventListener("error", (error: ErrorEvent | MessageEvent) => {
         // Differentiate between an error message from the server and an error event from the EventSource
-        if (e instanceof MessageEvent) {
-          const message = JSON.parse(e.data) as StreamMessageByType<'error'>;
+        if (error instanceof MessageEvent) {
+          const message = JSON.parse(
+            error.data
+          ) as StreamMessageByType<"error">;
           updateStatus((draft) => {
             draft.status = "error";
             draft.error = new Error(message.payload.message);
@@ -148,21 +211,21 @@ export const useAnimaCodegen = ({
           });
         } else {
           // It's an EventSource error (e.g. HTTP error)
-          console.error('EventSource error:', e);
+          console.error("EventSource error:", error);
 
           updateStatus((draft) => {
             draft.status = "error";
-            draft.error = new Error("HTTP error: " + e.message);
+            draft.error = new Error("HTTP error: " + error.message);
           });
 
           resolve({
             result: null,
-            error: new Error("HTTP error: " + e.message),
+            error: new Error("HTTP error: " + error.message),
           });
         }
       });
 
-      es.addEventListener('done', (event) => {
+      es.addEventListener("done", () => {
         updateStatus((draft) => {
           draft.status = "success";
           draft.result = result as AnimaSDKResult;
@@ -173,7 +236,45 @@ export const useAnimaCodegen = ({
     });
 
     try {
-      const { result, error } = await promise;
+      const { result: r, error } = await promise;
+
+      const result = structuredClone(r);
+
+      // Ideally, we should download the assets within the `assets_uploaded` event handler, since it'll improve the performance.
+      // But for some reason, it doesn't work. So, we download the assets here.
+      if (
+        initialParams.assetsStorage?.strategy === "local" &&
+        result?.assets?.length
+      ) {
+        const { filePath } = getAssetsLocalStrategyParams(
+          initialParams.assetsStorage
+        );
+
+        const downloadAssetsPromises = result.assets.map(async (asset) => {
+          const response = await fetch(asset.url);
+          const buffer = await response.arrayBuffer();
+          return {
+            assetName: asset.name,
+            base64: arrayBufferToBase64(buffer),
+          };
+        });
+
+        const assets = await Promise.allSettled(downloadAssetsPromises);
+        for (const assetPromise of assets) {
+          const assetsList: Record<string, string> = {};
+          if (assetPromise.status === "fulfilled") {
+            const { assetName, base64 } = assetPromise.value;
+
+            assetsList[assetName] = base64;
+
+            const assetPath = filePath ? `${filePath}/${assetName}` : assetName;
+            result.files[assetPath] = {
+              content: base64,
+              isBinary: true,
+            };
+          }
+        }
+      }
 
       if (error) {
         return { result: null, error };

package/src/utils.ts

@@ -0,0 +1,10 @@
+export const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+  var binary = "";
+  var bytes = new Uint8Array(buffer);
+  var len = bytes.byteLength;
+  for (var i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+
+  return btoa(binary);
+};