@plasmicapp/cli 0.1.237 → 0.1.239

package/dist/actions/sync-images.js

@@ -13,7 +13,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fixComponentImagesReferences = exports.fixComponentCssReferences = exports.syncProjectImageAssets = void 0;
+const cli_progress_1 = __importDefault(require("cli-progress"));
 const lodash_1 = __importDefault(require("lodash"));
+const node_fetch_1 = __importDefault(require("node-fetch"));
 const upath_1 = __importDefault(require("upath"));
 const deps_1 = require("../deps");
 const config_utils_1 = require("../utils/config-utils");
@@ -28,6 +30,7 @@ function syncProjectImageAssets(context, projectId, branchName, version, imageBu
         const imageFileLocks = lodash_1.default.keyBy(projectLock.fileLocks.filter((fileLock) => fileLock.type === "image"), (fl) => fl.assetId);
         const id2ImageChecksum = new Map(checksums.imageChecksums);
         const deletedImages = lodash_1.default.filter(knownImageConfigs, (i) => !imageBundleIds[i.id] && !id2ImageChecksum.has(i.id));
+        yield ensureImageAssetContents(imageBundles);
         for (const bundle of imageBundles) {
             if (context.cliArgs.quiet !== true) {
                 deps_1.logger.info(`Syncing image: ${bundle.name}@${version}\t['${project.projectName}' ${project.projectId}/${bundle.id} ${project.version}]`);
@@ -87,6 +90,37 @@ function syncProjectImageAssets(context, projectId, branchName, version, imageBu
     });
 }
 exports.syncProjectImageAssets = syncProjectImageAssets;
+function ensureImageAssetContents(bundles) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // The server may send images as a url instead of a base64 blob. In that
+        // case, we fetch the images here in the cli, instead of on the server.
+        // If you have a lot of images, this moves the expensive / long fetch
+        // from the codegen server to the cli
+        const needsFetching = bundles.filter((b) => b.blob.startsWith("https://site-assets.plasmic.app/"));
+        if (needsFetching.length === 0) {
+            return;
+        }
+        const bar = new cli_progress_1.default.SingleBar({
+            format: `Downloading images [{bar}] | {value}/{total}`,
+        });
+        bar.start(needsFetching.length, 0);
+        yield Promise.all(needsFetching.map((bundle) => __awaiter(this, void 0, void 0, function* () {
+            try {
+                const res = yield node_fetch_1.default(bundle.blob);
+                if (res.status !== 200) {
+                    throw new Error(`Fetching ${bundle.blob} failed with status ${res.status}`);
+                }
+                const arrayBuffer = yield res.arrayBuffer();
+                bundle.blob = Buffer.from(arrayBuffer).toString("base64");
+                bar.increment();
+            }
+            catch (err) {
+                deps_1.logger.error(`Failed to fetch image ${bundle.fileName}: ${err}`);
+            }
+        })));
+        bar.stop();
+    });
+}
 function getImagePublicUrl(context, asset) {
     return (lang_utils_1.ensure(context.config.images.publicUrlPrefix) +
         (lang_utils_1.ensure(context.config.images.publicUrlPrefix).endsWith("/") ? "" : "/") +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.237",
+  "version": "0.1.239",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -20,7 +20,8 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.12.1",
-    "@plasmicapp/react-web": "0.2.178",
+    "@plasmicapp/react-web": "0.2.180",
+    "@types/cli-progress": "^3.11.0",
     "@types/findup-sync": "^2.0.2",
     "@types/glob": "^7.1.3",
     "@types/inquirer": "^6.5.0",
@@ -54,6 +55,7 @@
     "@sentry/node": "^5.19.2",
     "axios": "^0.21.1",
     "chalk": "^4.1.0",
+    "cli-progress": "^3.12.0",
     "fast-glob": "^3.2.4",
     "findup-sync": "^4.0.0",
     "fs": "^0.0.1-security",
@@ -77,5 +79,5 @@
     "wrap-ansi": "^7.0.0",
     "yargs": "^15.4.1"
   },
-  "gitHead": "f5d0cd2ad8930d509f48d608bda4829c5158dc00"
+  "gitHead": "c1f2560551d97e2e4b2c52669a262532795f54b2"
 }

package/src/actions/sync-images.ts

@@ -1,4 +1,6 @@
+import cliProgress from "cli-progress";
 import L from "lodash";
+import fetch from "node-fetch";
 import path from "upath";
 import { ChecksumBundle, ImageBundle } from "../api";
 import { logger } from "../deps";
@@ -43,6 +45,8 @@ export async function syncProjectImageAssets(
     (i) => !imageBundleIds[i.id] && !id2ImageChecksum.has(i.id)
   );
 
+  await ensureImageAssetContents(imageBundles);
+
   for (const bundle of imageBundles) {
     if (context.cliArgs.quiet !== true) {
       logger.info(
@@ -125,6 +129,43 @@ export async function syncProjectImageAssets(
   );
 }
 
+async function ensureImageAssetContents(bundles: ImageBundle[]) {
+  // The server may send images as a url instead of a base64 blob. In that
+  // case, we fetch the images here in the cli, instead of on the server.
+  // If you have a lot of images, this moves the expensive / long fetch
+  // from the codegen server to the cli
+  const needsFetching = bundles.filter((b) =>
+    b.blob.startsWith("https://site-assets.plasmic.app/")
+  );
+  if (needsFetching.length === 0) {
+    return;
+  }
+
+  const bar = new cliProgress.SingleBar({
+    format: `Downloading images [{bar}] | {value}/{total}`,
+  });
+  bar.start(needsFetching.length, 0);
+
+  await Promise.all(
+    needsFetching.map(async (bundle) => {
+      try {
+        const res = await fetch(bundle.blob);
+        if (res.status !== 200) {
+          throw new Error(
+            `Fetching ${bundle.blob} failed with status ${res.status}`
+          );
+        }
+        const arrayBuffer = await res.arrayBuffer();
+        bundle.blob = Buffer.from(arrayBuffer).toString("base64");
+        bar.increment();
+      } catch (err) {
+        logger.error(`Failed to fetch image ${bundle.fileName}: ${err}`);
+      }
+    })
+  );
+  bar.stop();
+}
+
 function getImagePublicUrl(context: PlasmicContext, asset: ImageConfig) {
   return (
     ensure(context.config.images.publicUrlPrefix) +