@plasmicapp/cli 0.1.166 → 0.1.167

package/dist/__mocks__/api.js

@@ -250,6 +250,8 @@ class PlasmicApi {
                     globalVariantChecksums: [],
                     projectCssChecksum: "",
                 },
+                usedNpmPackages: [],
+                externalCssImports: [],
             };
             return result;
         });

package/dist/__tests__/project-api-token-spec.js

@@ -51,20 +51,20 @@ describe("Project API tokens", () => {
         fixtures_1.tmpRepo.writePlasmicJson(Object.assign(Object.assign({}, fixtures_1.defaultPlasmicJson), { projects: [Object.assign(Object.assign({}, fixtures_1.project1Config), { projectApiToken: "blah" })] }));
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         fixtures_1.expectProject1Components();
-        fixtures_1.expectProject1PlasmicJson();
+        fixtures_1.expectProject1PlasmicJson({ projectApiToken: true });
         // Re-run, this time with no auth.
         removeAuth();
-        yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
+        yield expect(sync_1.sync(fixtures_1.opts)).rejects.toThrow("No user+token, and project API tokens don't match");
     }));
     test("is filled in by auth'd user if project exists but token was initially missing", () => __awaiter(void 0, void 0, void 0, function* () {
         fixtures_1.opts.projects = ["projectId1"];
         fixtures_1.tmpRepo.writePlasmicJson(Object.assign(Object.assign({}, fixtures_1.defaultPlasmicJson), { projects: [fixtures_1.project1Config] }));
         yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
         fixtures_1.expectProject1Components();
-        fixtures_1.expectProject1PlasmicJson();
+        fixtures_1.expectProject1PlasmicJson({ projectApiToken: true });
         // Re-run, this time with no auth.
         removeAuth();
-        yield expect(sync_1.sync(fixtures_1.opts)).resolves.toBeUndefined();
+        yield expect(sync_1.sync(fixtures_1.opts)).rejects.toThrow("Unable to authenticate Plasmic. Please run 'plasmic auth' or check the projectApiTokens in your plasmic.json, and try again.");
     }));
     test("when not available, should prompt for auth", () => __awaiter(void 0, void 0, void 0, function* () {
         fixtures_1.opts.projects = ["projectId1"];

package/dist/actions/sync.js

@@ -208,13 +208,15 @@ function sync(opts, metadataDefaults) {
             ...versionResolution.dependencies,
         ].map((p) => lodash_1.default.pick(p, "projectId", "projectApiToken"));
         context.api.attachProjectIdsAndTokens(projectIdsAndTokens);
+        const externalNpmPackages = new Set();
+        const externalCssImports = new Set();
         // Perform the actual sync
         yield file_utils_1.withBufferedFs(() => __awaiter(this, void 0, void 0, function* () {
             var _b;
             // Sync in sequence (no parallelism)
             // going in reverse to get leaves of the dependency tree first
             for (const projectMeta of projectsToSync) {
-                yield syncProject(context, opts, projectIdsAndTokens, projectMeta.projectId, projectMeta.componentIds, projectMeta.version, projectMeta.dependencies, summary, pendingMerge, projectMeta.indirect, metadataDefaults);
+                yield syncProject(context, opts, projectIdsAndTokens, projectMeta.projectId, projectMeta.componentIds, projectMeta.version, projectMeta.dependencies, summary, pendingMerge, projectMeta.indirect, externalNpmPackages, externalCssImports, metadataDefaults);
             }
             // Materialize scheme into each component config.
             context.config.projects.forEach((p) => p.components.forEach((c) => {
@@ -258,6 +260,13 @@ function sync(opts, metadataDefaults) {
             // Write the new ComponentConfigs to disk
             yield config_utils_1.updateConfig(context, context.config, baseDir);
         }));
+        yield checkExternalPkgs(context, baseDir, opts, Array.from(externalNpmPackages.keys()));
+        if (!opts.quiet && externalCssImports.size > 0) {
+            deps_1.logger.info(`This project uses external packages and styles. Make sure to import the following global CSS: ` +
+                Array.from(externalCssImports.keys())
+                    .map((stmt) => `"${stmt}"`)
+                    .join(", "));
+        }
         // Post-sync commands
         if (!opts.ignorePostSync) {
             for (const cmd of context.config.postSyncCommands || []) {
@@ -272,6 +281,20 @@ function sync(opts, metadataDefaults) {
     });
 }
 exports.sync = sync;
+function checkExternalPkgs(context, baseDir, opts, pkgs) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const missingPkgs = pkgs.filter((pkg) => {
+            const installedPkg = npm_utils_1.findInstalledVersion(context, baseDir, pkg);
+            return !installedPkg;
+        });
+        if (missingPkgs.length > 0) {
+            const upgrade = yield user_utils_1.confirmWithUser(`The following packages aren't installed but are required by some projects, would you like to install them? ${missingPkgs.join(", ")}`, opts.yes);
+            if (upgrade) {
+                npm_utils_1.installUpgrade(missingPkgs.join(" "), baseDir);
+            }
+        }
+    });
+}
 function maybeRenamePathExt(context, path, ext) {
     if (!path) {
         return path;
@@ -292,7 +315,7 @@ function fixFileExtension(context) {
         });
     });
 }
-function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds, projectVersion, dependencies, summary, pendingMerge, indirect, metadataDefaults) {
+function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds, projectVersion, dependencies, summary, pendingMerge, indirect, externalNpmPackages, externalCssImports, metadataDefaults) {
     var _a;
     return __awaiter(this, void 0, void 0, function* () {
         const newComponentScheme = opts.newComponentScheme || context.config.code.scheme;
@@ -336,6 +359,8 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds
         yield sync_styles_1.upsertStyleTokens(context, projectBundle.usedTokens);
         yield sync_icons_1.syncProjectIconAssets(context, projectId, projectVersion, projectBundle.iconAssets, projectBundle.checksums, opts.baseDir);
         yield sync_images_1.syncProjectImageAssets(context, projectId, projectVersion, projectBundle.imageAssets, projectBundle.checksums);
+        (projectBundle.usedNpmPackages || []).forEach((pkg) => externalNpmPackages.add(pkg));
+        (projectBundle.externalCssImports || []).forEach((css) => externalCssImports.add(css));
     });
 }
 function syncStyleConfig(context, response) {
@@ -365,7 +390,6 @@ function syncProjectConfig(context, projectBundle, projectApiToken, version, dep
         if (!projectConfig.cssFilePath) {
             projectConfig.cssFilePath = defaultCssFilePath;
         }
-        projectConfig.projectApiToken = projectApiToken;
         // plasmic.lock
         const projectLock = config_utils_1.getOrAddProjectLock(context, projectConfig.projectId);
         projectLock.version = version;

package/dist/api.d.ts

@@ -80,6 +80,8 @@ export interface ProjectBundle {
     iconAssets: IconBundle[];
     imageAssets: ImageBundle[];
     checksums: ChecksumBundle;
+    usedNpmPackages: string[];
+    externalCssImports: string[];
 }
 export declare type ProjectMeta = Omit<ProjectBundle, "projectConfig">;
 export interface StyleConfigResponse {

package/dist/test-common/fixtures.d.ts

@@ -9,5 +9,7 @@ export declare function standardTestSetup(includeDep?: boolean): void;
 export declare function standardTestTeardown(): void;
 export declare function expectProject1Components(): void;
 export declare const project1Config: ProjectConfig;
-export declare function expectProject1PlasmicJson(): void;
+export declare function expectProject1PlasmicJson(optional?: {
+    [k in keyof ProjectConfig]?: boolean;
+}): void;
 export declare function expectProjectAndDepPlasmicJson(): void;

package/dist/test-common/fixtures.js

@@ -140,11 +140,13 @@ exports.project1Config = {
     jsBundleThemes: [],
     indirect: false,
 };
-function expectProject1PlasmicJson() {
+function expectProject1PlasmicJson(optional) {
     const plasmicJson = exports.tmpRepo.readPlasmicJson();
     expect(plasmicJson.projects.length).toEqual(1);
     const projectConfig = plasmicJson.projects[0];
-    expect(projectConfig.projectApiToken).toBe("abc");
+    if (!(optional === null || optional === void 0 ? void 0 : optional.projectApiToken)) {
+        expect(projectConfig.projectApiToken).toBe("abc");
+    }
     expect(projectConfig.components.length).toEqual(2);
     const componentNames = projectConfig.components.map((c) => c.name);
     expect(componentNames).toContain("Button");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.166",
+  "version": "0.1.167",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"

package/src/__mocks__/api.ts

@@ -340,6 +340,8 @@ class PlasmicApi {
         globalVariantChecksums: [],
         projectCssChecksum: "",
       } as ChecksumBundle,
+      usedNpmPackages: [],
+      externalCssImports: [],
     };
     return result;
   }

package/src/__tests__/project-api-token-spec.ts

@@ -71,11 +71,13 @@ describe("Project API tokens", () => {
 
     expectProject1Components();
 
-    expectProject1PlasmicJson();
+    expectProject1PlasmicJson({ projectApiToken: true });
 
     // Re-run, this time with no auth.
     removeAuth();
-    await expect(sync(opts)).resolves.toBeUndefined();
+    await expect(sync(opts)).rejects.toThrow(
+      "No user+token, and project API tokens don't match"
+    );
   });
 
   test("is filled in by auth'd user if project exists but token was initially missing", async () => {
@@ -88,11 +90,13 @@ describe("Project API tokens", () => {
 
     expectProject1Components();
 
-    expectProject1PlasmicJson();
+    expectProject1PlasmicJson({ projectApiToken: true });
 
     // Re-run, this time with no auth.
     removeAuth();
-    await expect(sync(opts)).resolves.toBeUndefined();
+    await expect(sync(opts)).rejects.toThrow(
+      "Unable to authenticate Plasmic. Please run 'plasmic auth' or check the projectApiTokens in your plasmic.json, and try again."
+    );
   });
 
   test("when not available, should prompt for auth", async () => {

package/src/actions/sync.ts

@@ -315,6 +315,8 @@ export async function sync(
   ].map((p) => L.pick(p, "projectId", "projectApiToken"));
 
   context.api.attachProjectIdsAndTokens(projectIdsAndTokens);
+  const externalNpmPackages = new Set<string>();
+  const externalCssImports = new Set<string>();
 
   // Perform the actual sync
   await withBufferedFs(async () => {
@@ -332,6 +334,8 @@ export async function sync(
         summary,
         pendingMerge,
         projectMeta.indirect,
+        externalNpmPackages,
+        externalCssImports,
         metadataDefaults
       );
     }
@@ -416,6 +420,22 @@ export async function sync(
     await updateConfig(context, context.config, baseDir);
   });
 
+  await checkExternalPkgs(
+    context,
+    baseDir,
+    opts,
+    Array.from(externalNpmPackages.keys())
+  );
+
+  if (!opts.quiet && externalCssImports.size > 0) {
+    logger.info(
+      `This project uses external packages and styles. Make sure to import the following global CSS: ` +
+        Array.from(externalCssImports.keys())
+          .map((stmt) => `"${stmt}"`)
+          .join(", ")
+    );
+  }
+
   // Post-sync commands
   if (!opts.ignorePostSync) {
     for (const cmd of context.config.postSyncCommands || []) {
@@ -430,6 +450,30 @@ export async function sync(
   }
 }
 
+async function checkExternalPkgs(
+  context: PlasmicContext,
+  baseDir: string,
+  opts: SyncArgs,
+  pkgs: string[]
+) {
+  const missingPkgs = pkgs.filter((pkg) => {
+    const installedPkg = findInstalledVersion(context, baseDir, pkg);
+    return !installedPkg;
+  });
+  if (missingPkgs.length > 0) {
+    const upgrade = await confirmWithUser(
+      `The following packages aren't installed but are required by some projects, would you like to install them? ${missingPkgs.join(
+        ", "
+      )}`,
+      opts.yes
+    );
+
+    if (upgrade) {
+      installUpgrade(missingPkgs.join(" "), baseDir);
+    }
+  }
+}
+
 function maybeRenamePathExt(
   context: PlasmicContext,
   path: string,
@@ -480,6 +524,8 @@ async function syncProject(
   summary: Map<string, ComponentUpdateSummary>,
   pendingMerge: ComponentPendingMerge[],
   indirect: boolean,
+  externalNpmPackages: Set<string>,
+  externalCssImports: Set<string>,
   metadataDefaults?: Metadata
 ): Promise<void> {
   const newComponentScheme =
@@ -602,6 +648,12 @@ async function syncProject(
     projectBundle.imageAssets,
     projectBundle.checksums
   );
+  (projectBundle.usedNpmPackages || []).forEach((pkg) =>
+    externalNpmPackages.add(pkg)
+  );
+  (projectBundle.externalCssImports || []).forEach((css) =>
+    externalCssImports.add(css)
+  );
 }
 
 async function syncStyleConfig(
@@ -662,7 +714,6 @@ async function syncProjectConfig(
   if (!projectConfig.cssFilePath) {
     projectConfig.cssFilePath = defaultCssFilePath;
   }
-  projectConfig.projectApiToken = projectApiToken;
 
   // plasmic.lock
   const projectLock = getOrAddProjectLock(context, projectConfig.projectId);

package/src/api.ts

@@ -101,6 +101,8 @@ export interface ProjectBundle {
   iconAssets: IconBundle[];
   imageAssets: ImageBundle[];
   checksums: ChecksumBundle;
+  usedNpmPackages: string[];
+  externalCssImports: string[];
 }
 
 export type ProjectMeta = Omit<ProjectBundle, "projectConfig">;

package/src/test-common/fixtures.ts

@@ -150,11 +150,15 @@ export const project1Config: ProjectConfig = {
   indirect: false,
 };
 
-export function expectProject1PlasmicJson() {
+export function expectProject1PlasmicJson(
+  optional?: { [k in keyof ProjectConfig]?: boolean }
+) {
   const plasmicJson = tmpRepo.readPlasmicJson();
   expect(plasmicJson.projects.length).toEqual(1);
   const projectConfig = plasmicJson.projects[0];
-  expect(projectConfig.projectApiToken).toBe("abc");
+  if (!optional?.projectApiToken) {
+    expect(projectConfig.projectApiToken).toBe("abc");
+  }
   expect(projectConfig.components.length).toEqual(2);
   const componentNames = projectConfig.components.map((c) => c.name);
   expect(componentNames).toContain("Button");