@comergehq/studio 0.1.13 → 0.1.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
@@ -68,6 +68,7 @@
     "react-native": "*",
     "react-native-safe-area-context": "*",
     "react-native-svg": "*",
+    "react-native-zip-archive": "*",
     "react-native-view-shot": "*"
   },
   "peerDependenciesMeta": {}

package/src/data/apps/bundles/remote.ts

@@ -11,6 +11,11 @@ export interface BundlesRemoteDataSource {
     bundleId: string,
     options?: { redirect?: boolean }
   ): Promise<ServiceResponse<{ url: string; redirect: boolean }>>;
+  getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<ServiceResponse<{ url: string; redirect: boolean }>>;
 }
 
 class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDataSource {
@@ -40,6 +45,18 @@ class BundlesRemoteDataSourceImpl extends BaseRemote implements BundlesRemoteDat
     );
     return data;
   }
+
+  async getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<ServiceResponse<{ url: string; redirect: boolean }>> {
+    const { data } = await api.get<ServiceResponse<{ url: string; redirect: boolean }>>(
+      `/v1/apps/${encodeURIComponent(appId)}/bundles/${encodeURIComponent(bundleId)}/assets/download`,
+      { params: { redirect: options?.redirect ?? false, kind: options?.kind } }
+    );
+    return data;
+  }
 }
 
 export const bundlesRemoteDataSource: BundlesRemoteDataSource = new BundlesRemoteDataSourceImpl();

package/src/data/apps/bundles/repository.ts

@@ -7,6 +7,11 @@ export interface BundlesRepository {
   initiate(appId: string, payload: InitiateBundleRequest): Promise<Bundle>;
   getById(appId: string, bundleId: string): Promise<Bundle>;
   getSignedDownloadUrl(appId: string, bundleId: string, options?: { redirect?: boolean }): Promise<{ url: string; redirect: boolean }>;
+  getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<{ url: string; redirect: boolean }>;
 }
 
 class BundlesRepositoryImpl extends BaseRepository implements BundlesRepository {
@@ -28,6 +33,15 @@ class BundlesRepositoryImpl extends BaseRepository implements BundlesRepository
     const res = await this.remote.getSignedDownloadUrl(appId, bundleId, options);
     return this.unwrapOrThrow(res);
   }
+
+  async getSignedAssetsDownloadUrl(
+    appId: string,
+    bundleId: string,
+    options?: { redirect?: boolean; kind?: string }
+  ): Promise<{ url: string; redirect: boolean }> {
+    const res = await this.remote.getSignedAssetsDownloadUrl(appId, bundleId, options);
+    return this.unwrapOrThrow(res);
+  }
 }
 
 export const bundlesRepository: BundlesRepository = new BundlesRepositoryImpl(bundlesRemoteDataSource);

package/src/data/apps/bundles/types.ts

@@ -2,6 +2,20 @@ export type Platform = 'ios' | 'android';
 
 export type BundleStatus = 'pending' | 'building' | 'succeeded' | 'failed';
 
+export type BundleAssetKind = 'metro-assets' | string;
+
+export type BundleAsset = {
+  id: string;
+  kind: BundleAssetKind;
+  storageBucket: string;
+  storageKey: string;
+  contentType: string | null;
+  size: number | null;
+  checksumSha256: string | null;
+  createdAt: string;
+  updatedAt: string;
+};
+
 export type Bundle = {
   id: string;
   appId: string;
@@ -15,6 +29,7 @@ export type Bundle = {
   createdAt: string;
   updatedAt: string;
   expiresAt: string | null;
+  assets?: BundleAsset[];
 };
 
 export type InitiateBundleRequest = {

package/src/studio/hooks/useBundleManager.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import * as FileSystem from 'expo-file-system/legacy';
 import { Asset } from 'expo-asset';
+import { unzip } from 'react-native-zip-archive';
 
-import type { Platform as BundlePlatform, Bundle } from '../../data/apps/bundles/types';
+import type { Platform as BundlePlatform, Bundle, BundleAsset } from '../../data/apps/bundles/types';
 import { bundlesRepository } from '../../data/apps/bundles/repository';
 
 function sleep(ms: number): Promise<void> {
@@ -90,6 +91,8 @@ export type UseBundleManagerResult = BundleLoadState & {
 export type EmbeddedBaseBundle = {
   module: number;
   meta?: BaseBundleMeta | null;
+  assetsModule?: number;
+  assetsMeta?: EmbeddedAssetsMeta | null;
 };
 
 export type EmbeddedBaseBundles = {
@@ -97,6 +100,11 @@ export type EmbeddedBaseBundles = {
   android?: EmbeddedBaseBundle;
 };
 
+type EmbeddedAssetsMeta = {
+  checksumSha256: string | null;
+  size: number | null;
+};
+
 function safeName(s: string) {
   return s.replace(/[^a-zA-Z0-9._-]/g, '_');
 }
@@ -114,6 +122,11 @@ async function ensureDir(path: string) {
   await FileSystem.makeDirectoryAsync(path, { intermediates: true });
 }
 
+async function ensureBundleDir(key: string) {
+  await ensureDir(bundlesCacheDir());
+  await ensureDir(bundleDir(key));
+}
+
 function baseBundleKey(appId: string, platform: BundlePlatform): string {
   return `base:${appId}:${platform}`;
 }
@@ -122,16 +135,37 @@ function testBundleKey(appId: string, commitId: string | null | undefined, platf
   return `test:${appId}:${commitId ?? 'head'}:${platform}:${bundleId}`;
 }
 
-function toBundleFileUri(key: string): string {
+function legacyBundleFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.jsbundle`;
 }
 
-function toBundleMetaFileUri(key: string): string {
+function legacyBundleMetaFileUri(key: string): string {
   const dir = bundlesCacheDir();
   return `${dir}${safeName(key)}.meta.json`;
 }
 
+function bundleDir(key: string): string {
+  const dir = bundlesCacheDir();
+  return `${dir}${safeName(key)}/`;
+}
+
+function toBundleFileUri(key: string, platform: BundlePlatform): string {
+  return `${bundleDir(key)}index.${platform}.jsbundle`;
+}
+
+function toBundleMetaFileUri(key: string): string {
+  return `${bundleDir(key)}bundle.meta.json`;
+}
+
+function toAssetsMetaFileUri(key: string): string {
+  return `${bundleDir(key)}assets.meta.json`;
+}
+
+function toAssetsDir(key: string): string {
+  return `${bundleDir(key)}assets/`;
+}
+
 type BaseBundleMeta = {
   fingerprint: string;
   bundleId: string;
@@ -156,7 +190,7 @@ async function writeJsonFile(fileUri: string, value: unknown): Promise<void> {
   try {
     await (FileSystem as any).writeAsStringAsync(fileUri, JSON.stringify(value));
   } catch {
-    
+
   }
 }
 
@@ -170,6 +204,15 @@ async function getExistingNonEmptyFileUri(fileUri: string): Promise<string | nul
   }
 }
 
+async function getExistingBundleFileUri(key: string, platform: BundlePlatform): Promise<string | null> {
+  const nextPath = toBundleFileUri(key, platform);
+  const next = await getExistingNonEmptyFileUri(nextPath);
+  if (next) return next;
+  const legacyPath = legacyBundleFileUri(key);
+  const legacy = await getExistingNonEmptyFileUri(legacyPath);
+  return legacy;
+}
+
 async function downloadIfMissing(url: string, fileUri: string): Promise<string> {
   const existing = await getExistingNonEmptyFileUri(fileUri);
   if (existing) return existing;
@@ -189,9 +232,9 @@ async function deleteFileIfExists(fileUri: string) {
   try {
     const info = await FileSystem.getInfoAsync(fileUri);
     if (!info.exists) return;
-    await FileSystem.deleteAsync(fileUri).catch(() => {});
+    await FileSystem.deleteAsync(fileUri).catch(() => { });
   } catch {
-    
+
   }
 }
 
@@ -202,9 +245,12 @@ async function hydrateBaseFromEmbeddedAsset(
 ): Promise<{ bundlePath: string; meta?: BaseBundleMeta | null } | null> {
   if (!embedded?.module) return null;
   const key = baseBundleKey(appId, platform);
-  const targetUri = toBundleFileUri(key);
-  const existing = await getExistingNonEmptyFileUri(targetUri);
-  if (existing) return { bundlePath: existing, meta: embedded.meta ?? null };
+  const existing = await getExistingBundleFileUri(key, platform);
+  if (existing) {
+    return { bundlePath: existing, meta: embedded.meta ?? null };
+  }
+  await ensureBundleDir(key);
+  const targetUri = toBundleFileUri(key, platform);
 
   const asset = Asset.fromModule(embedded.module);
   await asset.downloadAsync();
@@ -220,8 +266,69 @@ async function hydrateBaseFromEmbeddedAsset(
   return { bundlePath: finalUri, meta: embedded.meta ?? null };
 }
 
-async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: string): Promise<string> {
-  const tmpUri = toBundleFileUri(`tmp:${tmpKey}:${Date.now()}`);
+async function hydrateAssetsFromEmbeddedAsset(
+  appId: string,
+  platform: BundlePlatform,
+  key: string,
+  embedded: EmbeddedBaseBundle | undefined
+): Promise<boolean> {
+  const moduleId = embedded?.assetsModule;
+  if (!moduleId) return false;
+
+  const assetsMeta = embedded?.assetsMeta ?? null;
+  const assetsDir = toAssetsDir(key);
+  const metaUri = toAssetsMetaFileUri(key);
+
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  const checksumMatches =
+    Boolean(existingMeta?.checksumSha256) &&
+    Boolean(assetsMeta?.checksumSha256) &&
+    existingMeta?.checksumSha256 === assetsMeta?.checksumSha256;
+  const embeddedMetaMatches = existingMeta?.storageKey?.startsWith('embedded:');
+  if (assetsDirExists && checksumMatches && embeddedMetaMatches) {
+    return true;
+  }
+
+  await ensureBundleDir(key);
+  await ensureDir(assetsDir);
+
+  const asset = Asset.fromModule(moduleId);
+  await asset.downloadAsync();
+  const sourceUri = asset.localUri ?? asset.uri;
+  if (!sourceUri) return false;
+  const info = await FileSystem.getInfoAsync(sourceUri);
+  if (!info.exists) return false;
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await deleteFileIfExists(zipUri);
+  await FileSystem.copyAsync({ from: sourceUri, to: zipUri });
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
+  } catch {
+  }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+
+  await writeJsonFile(metaUri, {
+    checksumSha256: assetsMeta?.checksumSha256 ?? null,
+    storageKey: `embedded:${assetsMeta?.checksumSha256 ?? 'unknown'}`,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+  return true;
+}
+
+async function safeReplaceFileFromUrl(
+  url: string,
+  targetUri: string,
+  tmpKey: string,
+  platform: BundlePlatform
+): Promise<string> {
+  const tmpKeySafe = `tmp:${tmpKey}:${Date.now()}`;
+  const tmpUri = toBundleFileUri(tmpKeySafe, platform);
+  await ensureDir(bundleDir(tmpKeySafe));
   try {
     await withRetry(
       async () => {
@@ -244,6 +351,107 @@ async function safeReplaceFileFromUrl(url: string, targetUri: string, tmpKey: st
   }
 }
 
+async function safeReplaceFileFromUrlToPath(url: string, targetUri: string, tmpKey: string): Promise<string> {
+  const tmpDir = `${bundlesCacheDir()}tmp/`;
+  await ensureDir(tmpDir);
+  const tmpUri = `${tmpDir}${safeName(tmpKey)}.tmp`;
+  try {
+    await withRetry(
+      async () => {
+        await deleteFileIfExists(tmpUri);
+        await FileSystem.downloadAsync(url, tmpUri);
+        const tmpOk = await getExistingNonEmptyFileUri(tmpUri);
+        if (!tmpOk) throw new Error('Downloaded file is empty.');
+      },
+      { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+    );
+    await deleteFileIfExists(targetUri);
+    await FileSystem.moveAsync({ from: tmpUri, to: targetUri });
+    const finalOk = await getExistingNonEmptyFileUri(targetUri);
+    if (!finalOk) throw new Error('File replacement failed.');
+    return targetUri;
+  } finally {
+    await deleteFileIfExists(tmpUri);
+  }
+}
+
+function getMetroAssets(bundle: Bundle): BundleAsset | null {
+  const assets = bundle.assets ?? [];
+  return assets.find((asset) => asset.kind === 'metro-assets') ?? null;
+}
+
+type AssetsMeta = {
+  checksumSha256: string | null;
+  storageKey: string;
+  updatedAt: string;
+};
+
+async function ensureAssetsForBundle(
+  appId: string,
+  bundle: Bundle,
+  key: string,
+  platform: BundlePlatform
+): Promise<void> {
+  const asset = getMetroAssets(bundle);
+  if (!asset?.storageKey) return;
+
+  await ensureBundleDir(key);
+  const assetsDir = toAssetsDir(key);
+  await ensureDir(assetsDir);
+
+  const metaUri = toAssetsMetaFileUri(key);
+  const existingMeta = await readJsonFile<AssetsMeta>(metaUri);
+  const assetsDirInfo = await FileSystem.getInfoAsync(assetsDir);
+  const assetsDirExists = assetsDirInfo.exists && assetsDirInfo.isDirectory;
+  if (
+    existingMeta?.checksumSha256 &&
+    asset.checksumSha256 &&
+    existingMeta.checksumSha256 === asset.checksumSha256 &&
+    (existingMeta.storageKey === asset.storageKey || existingMeta.storageKey?.startsWith('embedded:')) &&
+    assetsDirExists
+  ) {
+    return;
+  }
+
+  const signed = await withRetry(
+    async () => {
+      return await bundlesRepository.getSignedAssetsDownloadUrl(appId, bundle.id, {
+        redirect: false,
+        kind: asset.kind,
+      });
+    },
+    { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
+  );
+
+  const zipUri = `${bundleDir(key)}assets.zip`;
+  await safeReplaceFileFromUrlToPath(signed.url, zipUri, `${appId}:${bundle.id}:${platform}:${asset.kind}`);
+
+  try {
+    await FileSystem.deleteAsync(assetsDir, { idempotent: true }).catch(() => { });
+  } catch {
+
+  }
+  await ensureDir(assetsDir);
+  await unzipArchive(zipUri, assetsDir);
+  await writeJsonFile(metaUri, {
+    checksumSha256: asset.checksumSha256 ?? null,
+    storageKey: asset.storageKey,
+    updatedAt: new Date().toISOString(),
+  } satisfies AssetsMeta);
+}
+
+async function unzipArchive(sourceUri: string, destDir: string) {
+  try {
+    await unzip(sourceUri, destDir);
+  } catch (e) {
+    throw new Error(
+      `Failed to extract assets archive. Ensure 'react-native-zip-archive' is installed in the host app. ${String(
+        (e as Error)?.message ?? e
+      )}`
+    );
+  }
+}
+
 async function pollBundle(appId: string, bundleId: string, opts: { timeoutMs: number; intervalMs: number }): Promise<Bundle> {
   const start = Date.now();
   while (true) {
@@ -291,21 +499,41 @@ async function resolveBundlePath(
     throw new Error('Bundle build failed.');
   }
 
+  let bundleWithAssets = finalBundle;
+  if (finalBundle.status === 'succeeded' && (!finalBundle.assets || finalBundle.assets.length === 0)) {
+    try {
+      bundleWithAssets = await bundlesRepository.getById(appId, finalBundle.id);
+    } catch {
+      bundleWithAssets = finalBundle;
+    }
+  }
+
   const signed = await withRetry(
     async () => {
       return await bundlesRepository.getSignedDownloadUrl(appId, finalBundle.id, { redirect: false });
     },
     { attempts: 3, baseDelayMs: 500, maxDelayMs: 4000 }
   );
+  const key =
+    mode === 'base'
+      ? baseBundleKey(appId, platform)
+      : testBundleKey(appId, commitId, platform, finalBundle.id);
+  await ensureBundleDir(key);
   const bundlePath =
     mode === 'base'
       ? await safeReplaceFileFromUrl(
-          signed.url,
-          toBundleFileUri(baseBundleKey(appId, platform)),
-          `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`
-        )
-      : await downloadIfMissing(signed.url, toBundleFileUri(testBundleKey(appId, commitId, platform, finalBundle.id)));
-  return { bundlePath, label: 'Ready', bundle: finalBundle };
+        signed.url,
+        toBundleFileUri(key, platform),
+        `${appId}:${commitId ?? 'head'}:${platform}:${finalBundle.id}`,
+        platform
+      )
+      : await downloadIfMissing(signed.url, toBundleFileUri(key, platform));
+  try {
+    await ensureAssetsForBundle(appId, bundleWithAssets, key, platform);
+  } catch {
+
+  }
+  return { bundlePath, label: 'Ready', bundle: bundleWithAssets };
 }
 
 export function useBundleManager({
@@ -360,8 +588,7 @@ export function useBundleManager({
         const dir = bundlesCacheDir();
         await ensureDir(dir);
         const key = baseBundleKey(appId, platform);
-        const uri = toBundleFileUri(key);
-        let existing = await getExistingNonEmptyFileUri(uri);
+        let existing = await getExistingBundleFileUri(key, platform);
         let embeddedMeta: BaseBundleMeta | null = null;
         if (!existing) {
           const embedded = embeddedBaseBundlesRef.current?.[platform];
@@ -370,14 +597,29 @@ export function useBundleManager({
             existing = hydrated.bundlePath;
             embeddedMeta = hydrated.meta ?? null;
             if (embeddedMeta) {
+              await ensureBundleDir(key);
               await writeJsonFile(toBundleMetaFileUri(key), embeddedMeta);
+              await writeJsonFile(legacyBundleMetaFileUri(key), embeddedMeta);
             }
           }
         }
         if (existing) {
           lastBaseBundlePathRef.current = existing;
           setBundlePath(existing);
-          const meta = embeddedMeta ?? (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key)));
+          const meta =
+            embeddedMeta ??
+            (await readJsonFile<BaseBundleMeta>(toBundleMetaFileUri(key))) ??
+            (await readJsonFile<BaseBundleMeta>(legacyBundleMetaFileUri(key)));
+          const embedded = embeddedBaseBundlesRef.current?.[platform];
+          const embeddedFingerprint = embedded?.meta?.fingerprint ?? null;
+          const actualFingerprint = meta?.fingerprint ?? embeddedMeta?.fingerprint ?? null;
+          if (embedded?.assetsModule && embeddedFingerprint && actualFingerprint === embeddedFingerprint) {
+            try {
+              await hydrateAssetsFromEmbeddedAsset(appId, platform, key, embedded);
+            } catch {
+
+            }
+          }
           if (meta?.fingerprint) {
             lastBaseFingerprintRef.current = meta.fingerprint;
           }
@@ -387,7 +629,7 @@ export function useBundleManager({
           }
         }
       } catch {
-       
+
       }
     },
     [platform]
@@ -461,7 +703,16 @@ export function useBundleManager({
         lastBaseFingerprintRef.current = fingerprint;
         hasCompletedFirstNetworkBaseLoadRef.current = true;
         initialHydratedBaseFromDiskRef.current = false;
-        void writeJsonFile(toBundleMetaFileUri(baseBundleKey(src.appId, platform)), {
+        const metaKey = baseBundleKey(src.appId, platform);
+        await ensureBundleDir(metaKey);
+        void writeJsonFile(toBundleMetaFileUri(metaKey), {
+          fingerprint,
+          bundleId: bundle.id,
+          checksumSha256: bundle.checksumSha256 ?? null,
+          size: bundle.size ?? null,
+          updatedAt: new Date().toISOString(),
+        } satisfies BaseBundleMeta);
+        void writeJsonFile(legacyBundleMetaFileUri(metaKey), {
           fingerprint,
           bundleId: bundle.id,
           checksumSha256: bundle.checksumSha256 ?? null,