Enhance application transporters to handle assets and fonts (#971)

Author: anserwaseem

.changeset/afraid-garlics-joke.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/js-commons": patch
+---
+
+Enhance application transporters to handle assets and fonts

packages/js-commons/src/core/firebase.ts

@@ -25,6 +25,7 @@ import {
   omitBy,
   pick,
   set,
+  toNumber,
 } from "lodash-es";
 import { getFunctions, httpsCallable } from "firebase/functions";
 import { ArtifactProps, EnsembleDocumentType } from "./dto";
@@ -99,7 +100,6 @@ export const getFirestoreApplicationTransporter = (
   },
 
   put: async (app: ApplicationDTO, userId: string): Promise<ApplicationDTO> => {
-    // if (!db) return {} as ApplicationDTO;
     const timestamp = Timestamp.now();
     const userRef = doc(db, CollectionsName.Users, userId);
     const appDocRef = doc(db, CollectionsName.Apps, app.id);
@@ -131,7 +131,16 @@ export const getFirestoreApplicationTransporter = (
       CollectionsName.InternalArtifacts,
     );
 
-    const { screens, widgets, scripts, translations, theme, env } = app;
+    const {
+      screens,
+      widgets,
+      scripts,
+      translations,
+      theme,
+      env,
+      assets,
+      fonts,
+    } = app;
 
     screens.forEach((screen) => {
       const screenRef = doc(artifactsRef, screen.id);
@@ -223,6 +232,22 @@ export const getFirestoreApplicationTransporter = (
     }
 
     await batch.commit();
+
+    const assetPromises = assets?.map((asset) =>
+      firestoreStoreAsset(db.app, app.id, asset.fileName, asset.content),
+    );
+    if (assetPromises) await Promise.all(assetPromises);
+
+    const fontPromises = fonts?.map((font) =>
+      firestoreStoreAsset(db.app, app.id, font.name, font.content, {
+        fontFamily: font.fontFamily,
+        fontWeight: toNumber(font.fontWeight),
+        fontStyle: font.fontStyle,
+        fontType: font.fontType,
+      }),
+    );
+    if (fontPromises) await Promise.all(fontPromises);
+
     return app;
   },
 });
@@ -234,7 +259,7 @@ export const firestoreStoreAsset = async (
   fileData: string | Buffer,
   font?: {
     fontFamily?: string;
-    weight?: number;
+    fontWeight?: number;
     fontStyle?: string;
     fontType?: string;
   },
@@ -250,7 +275,7 @@ export const firestoreStoreAsset = async (
     ...(!isEmpty(font)
       ? {
           fontFamily: font.fontFamily,
-          weight: font.weight,
+          weight: font.fontWeight,
           type: font.fontStyle,
           fontType: font.fontType,
         }

packages/js-commons/src/core/local-files.ts

@@ -72,7 +72,9 @@ export const getLocalApplicationTransporter = (
             return;
           }
 
-          const content = await readFile(filePath, { encoding: "utf-8" });
+          const content = await readFile(filePath, {
+            encoding: isAssetOrFont(document) ? "base64" : "utf-8",
+          });
 
           return {
             ...document,
@@ -212,14 +214,20 @@ export const localStoreAsset = async (
   fileData: string | Buffer,
   font?: {
     fontFamily?: string;
-    weight?: number;
+    fontWeight?: number;
     fontStyle?: string;
     fontType?: string;
   },
-  options?: { existingAppMetadata?: ApplicationLocalMeta },
+  options?: {
+    existingAppMetadata?: ApplicationLocalMeta;
+  },
 ): Promise<{ relativePath: string; assetDocument: EnsembleDocument }> => {
   const appsMetadata = await getGlobalMetadata();
-  const appMetadata = appsMetadata[appId] || options?.existingAppMetadata;
+  const existingAppMetadata = appsMetadata[appId];
+  const appMetadata =
+    options?.existingAppMetadata ||
+    (existingAppMetadata &&
+      (await getAppManifest(existingAppMetadata.projectPath)));
   if (!appMetadata) {
     throw new Error(`App ${appId} not found in local metadata`);
   }
@@ -253,6 +261,7 @@ export const localStoreAsset = async (
   const { relativePath } = await saveArtifact(assetDocument, appMetadata, {
     relativePath: fileName,
   });
+
   return { relativePath, assetDocument };
 };
 
@@ -368,27 +377,29 @@ const setGlobalMetadata = async (
   await writeJsonData(filePath, metadata);
 };
 
-const getAppManifest = async (projectPath: string): Promise<HasManifest> => {
+const getAppManifest = async (
+  projectPath: string,
+): Promise<ApplicationLocalMeta> => {
   const filePath = join(projectPath, APP_MANIFEST_FILE);
 
   // Check if the file exists
   if (!existsSync(filePath)) {
-    return {};
+    return {} as ApplicationLocalMeta;
   }
 
   const manifest = readJsonFile<ApplicationLocalMeta>(filePath);
   return manifest;
 };
 
 const setAppManifest = async (
-  manifest: HasManifest,
+  appMetadata: ApplicationLocalMeta,
   projectPath: string,
 ): Promise<void> => {
   ensureDir(projectPath);
 
   const filePath = join(projectPath, APP_MANIFEST_FILE);
 
-  await writeJsonData(filePath, manifest, true);
+  await writeJsonData(filePath, appMetadata, true);
 };
 
 const readJsonFile = async <T>(filePath: string): Promise<T> => {
@@ -416,7 +427,7 @@ const ensureDir = (path: string): void => {
   if (!existsSync(path)) mkdirSync(path, { recursive: true });
 };
 
-const isAssetOrFont = (document: EnsembleDocument): boolean => {
+const isAssetOrFont = (document: Partial<EnsembleDocument>): boolean => {
   return (
     document.type === EnsembleDocumentType.Asset ||
     document.type === EnsembleDocumentType.Font
@@ -432,7 +443,7 @@ const fetchFileData = async (url: string): Promise<Buffer> => {
 const extractFontData = (fontDoc: FontDTO): object => {
   return {
     fontFamily: fontDoc.fontFamily,
-    weight: fontDoc.fontWeight,
+    fontWeight: fontDoc.fontWeight,
     fontStyle: fontDoc.fontStyle,
     fontType: fontDoc.fontType,
   };

packages/js-commons/src/core/service.ts

@@ -27,6 +27,8 @@ export const bundleApp = (
     env: documents.find((d) => d.type === EnsembleDocumentType.Environment),
     translations: documents.filter((d) => d.type === EnsembleDocumentType.I18n),
     scripts: documents.filter((d) => d.type === EnsembleDocumentType.Script),
+    assets: documents.filter((d) => d.type === EnsembleDocumentType.Asset),
+    fonts: documents.filter((d) => d.type === EnsembleDocumentType.Font),
   });
 };