@plasmicapp/cli 0.1.164 → 0.1.168

package/dist/__mocks__/api.js

@@ -50,7 +50,7 @@ function mockProjectToProjectVersionMeta(mock, componentIdOrNames) {
             .filter((c) => !componentIdOrNames ||
             componentIdOrNames.includes(c.name) ||
             componentIdOrNames.includes(c.id))
-            .map((c) => c.id) });
+            .map((c) => c.id), indirect: false });
 }
 /**
  * Call this in test to setup the data model
@@ -250,6 +250,8 @@ class PlasmicApi {
                     globalVariantChecksums: [],
                     projectCssChecksum: "",
                 },
+                usedNpmPackages: [],
+                externalCssImports: [],
             };
             return result;
         });
@@ -274,6 +276,12 @@ class PlasmicApi {
             throw new Error("Unimplemented");
         });
     }
+    latestCodegenVersion() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return "0.0.1";
+        });
+    }
+    ;
     requiredPackages() {
         return __awaiter(this, void 0, void 0, function* () {
             return {

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

@@ -82,14 +82,14 @@ function ensureRequiredPackages(context, baseDir, yes) {
             // Exit so the user can run again with the new cli
             throw new error_1.HandledError();
         }
-        const reactWebVersion = npm_utils_1.findInstalledVersion(context, "@plasmicapp/react-web");
+        const reactWebVersion = npm_utils_1.findInstalledVersion(context, baseDir, "@plasmicapp/react-web");
         if (!reactWebVersion ||
             semver.gt(requireds["@plasmicapp/react-web"], reactWebVersion)) {
             yield confirmInstall("@plasmicapp/react-web", requireds["@plasmicapp/react-web"], { global: false, dev: false });
         }
         if (context.config.code.reactRuntime === "automatic") {
             // Using automatic runtime requires installing the @plasmicapp/react-web-runtime package
-            const runtimeVersion = npm_utils_1.findInstalledVersion(context, "@plasmicapp/react-web-runtime");
+            const runtimeVersion = npm_utils_1.findInstalledVersion(context, baseDir, "@plasmicapp/react-web-runtime");
             if (!runtimeVersion ||
                 semver.gt(requireds["@plasmicapp/react-web-runtime"], runtimeVersion)) {
                 yield confirmInstall("@plasmicapp/react-web-runtime", requireds["@plasmicapp/react-web-runtime"], { global: false, dev: false });
@@ -150,6 +150,7 @@ function sync(opts, metadataDefaults) {
                 versionRange: versionRange || ((_a = projectConfigMap[projectId]) === null || _a === void 0 ? void 0 : _a.version) || "latest",
                 componentIdOrNames: undefined,
                 projectApiToken: projectApiToken || projectIdToToken.get(projectId),
+                indirect: false,
             };
         });
         const projectSyncParams = projectWithVersion.length
@@ -159,6 +160,7 @@ function sync(opts, metadataDefaults) {
                 versionRange: p.version,
                 componentIdOrNames: undefined,
                 projectApiToken: p.projectApiToken,
+                indirect: !!p.indirect,
             }));
         // Short-circuit if nothing to sync
         if (projectSyncParams.length === 0) {
@@ -206,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, 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) => {
@@ -221,11 +225,20 @@ function sync(opts, metadataDefaults) {
                 }
             }));
             yield syncStyleConfig(context, yield context.api.genStyleConfig(context.config.style));
-            // Update project version if specified and successfully synced.
+            // Update project version and indirect status if specified and
+            // successfully synced.
             if (projectWithVersion.length) {
                 const versionMap = {};
                 projectWithVersion.forEach((p) => (versionMap[p.projectId] = p.versionRange));
-                context.config.projects.forEach((p) => (p.version = versionMap[p.projectId] || p.version));
+                const indirectMap = {};
+                projectsToSync.forEach((p) => (indirectMap[p.projectId] = p.indirect));
+                context.config.projects.forEach((p) => {
+                    p.version = versionMap[p.projectId] || p.version;
+                    // Only update `indirect` if it is set in current config.
+                    if (p.projectId in indirectMap && p.indirect) {
+                        p.indirect = indirectMap[p.projectId];
+                    }
+                });
             }
             // Fix imports
             const fixImportContext = code_utils_1.mkFixImportContext(context.config);
@@ -244,9 +257,22 @@ function sync(opts, metadataDefaults) {
                 const config = Object.assign(Object.assign({}, loaderConfig), { projects: lodash_1.default.sortBy(lodash_1.default.uniqBy([...freshIdsAndTokens, ...((_b = loaderConfig === null || loaderConfig === void 0 ? void 0 : loaderConfig.projects) !== null && _b !== void 0 ? _b : [])], (p) => p.projectId), (p) => p.projectId) });
                 writeLoaderConfig(opts, config);
             }
+            const codegenVersion = yield context.api.latestCodegenVersion();
+            context.lock.projects.forEach(p => {
+                if (projectsToSync.some(syncedProject => syncedProject.projectId === p.projectId)) {
+                    p.codegenVersion = codegenVersion;
+                }
+            });
             // 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 || []) {
@@ -261,6 +287,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;
@@ -281,7 +321,7 @@ function fixFileExtension(context) {
         });
     });
 }
-function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds, projectVersion, dependencies, summary, pendingMerge, 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;
@@ -301,6 +341,7 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds
             checksums: existingChecksums,
             codeOpts: context.config.code,
             metadata: get_context_1.generateMetadata(Object.assign(Object.assign({}, metadataDefaults), { platform: context.config.platform }), opts.metadata),
+            indirect,
         });
         // Convert from TSX => JSX
         if (context.config.code.lang === "js") {
@@ -319,11 +360,13 @@ function syncProject(context, opts, projectIdsAndTokens, projectId, componentIds
             });
         }
         yield sync_global_variants_1.syncGlobalVariants(context, projectBundle.projectConfig, projectBundle.globalVariants, projectBundle.checksums, opts.baseDir);
-        yield syncProjectConfig(context, projectBundle.projectConfig, projectApiToken, projectVersion, dependencies, projectBundle.components, opts.forceOverwrite, !!opts.appendJsxOnMissingBase, summary, pendingMerge, projectBundle.checksums, opts.baseDir);
+        yield syncProjectConfig(context, projectBundle.projectConfig, projectApiToken, projectVersion, dependencies, projectBundle.components, opts.forceOverwrite, !!opts.appendJsxOnMissingBase, summary, pendingMerge, projectBundle.checksums, opts.baseDir, indirect);
         syncCodeComponentsMeta(context, projectId, projectBundle.codeComponentMetas);
         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) {
@@ -336,7 +379,7 @@ function syncStyleConfig(context, response) {
         });
     });
 }
-function syncProjectConfig(context, projectBundle, projectApiToken, version, dependencies, componentBundles, forceOverwrite, appendJsxOnMissingBase, summary, pendingMerge, checksums, baseDir) {
+function syncProjectConfig(context, projectBundle, projectApiToken, version, dependencies, componentBundles, forceOverwrite, appendJsxOnMissingBase, summary, pendingMerge, checksums, baseDir, indirect) {
     return __awaiter(this, void 0, void 0, function* () {
         const defaultCssFilePath = file_utils_1.defaultResourcePath(context, projectBundle.projectName, projectBundle.cssFileName);
         const isNew = !context.config.projects.find((p) => p.projectId === projectBundle.projectId);
@@ -346,13 +389,13 @@ function syncProjectConfig(context, projectBundle, projectApiToken, version, dep
             projectName: projectBundle.projectName,
             version,
             cssFilePath: defaultCssFilePath,
+            indirect,
         }));
         // Update missing/outdated props
         projectConfig.projectName = projectBundle.projectName;
         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

@@ -58,6 +58,7 @@ export interface ProjectVersionMeta {
     dependencies: {
         [projectId: string]: string;
     };
+    indirect: boolean;
 }
 export interface VersionResolution {
     projects: ProjectVersionMeta[];
@@ -79,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 {
@@ -124,6 +127,7 @@ export interface ProjectIdAndToken {
 }
 export declare class PlasmicApi {
     private auth;
+    private codegenVersion?;
     constructor(auth: AuthConfig);
     genStyleConfig(styleOpts?: StyleConfig): Promise<StyleConfigResponse>;
     /**
@@ -143,6 +147,7 @@ export declare class PlasmicApi {
     }[], recursive?: boolean): Promise<VersionResolution>;
     getCurrentUser(): Promise<import("axios").AxiosResponse<any>>;
     requiredPackages(): Promise<RequiredPackages>;
+    latestCodegenVersion(): Promise<string>;
     /**
      * Code-gen endpoint.
      * This will fetch components at an exact specified version.
@@ -165,6 +170,7 @@ export declare class PlasmicApi {
         stylesOpts: StyleConfig;
         codeOpts: CodeConfig;
         checksums: ChecksumBundle;
+        indirect: boolean;
         metadata?: Metadata;
     }): Promise<ProjectBundle>;
     uploadBundle(projectId: string, bundleName: string, bundleJs: string, css: string[], metaJson: string, genModulePath: string | undefined, genCssPaths: string[], pkgVersion: string | undefined, extraPropMetaJson: string | undefined, themeProviderWrapper: string | undefined, themeModule: string | undefined): Promise<StyleTokensMap>;

package/dist/api.js

@@ -66,6 +66,15 @@ class PlasmicApi {
             return Object.assign({}, resp.data);
         });
     }
+    latestCodegenVersion() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.codegenVersion) {
+                const resp = yield this.post(`${this.codegenHost}/api/v1/code/latest-codegen-version`);
+                this.codegenVersion = resp.data;
+            }
+            return this.codegenVersion;
+        });
+    }
     /**
      * Code-gen endpoint.
      * This will fetch components at an exact specified version.

package/dist/migrations/0.1.166-indirect.d.ts

@@ -0,0 +1,2 @@
+import { PlasmicConfig } from "../utils/config-utils";
+export declare function ensureIndirect(config: PlasmicConfig): PlasmicConfig;

package/dist/migrations/0.1.166-indirect.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ensureIndirect = void 0;
+function ensureIndirect(config) {
+    for (const p of config.projects) {
+        if (p.indirect === undefined) {
+            p.indirect = false;
+        }
+    }
+    return config;
+}
+exports.ensureIndirect = ensureIndirect;

package/dist/migrations/migrations.js

@@ -40,6 +40,7 @@ const npm_utils_1 = require("../utils/npm-utils");
 const user_utils_1 = require("../utils/user-utils");
 const _0_1_110_fileLocks_1 = require("./0.1.110-fileLocks");
 const _0_1_146_addReactRuntime_1 = require("./0.1.146-addReactRuntime");
+const _0_1_166_indirect_1 = require("./0.1.166-indirect");
 const _0_1_27_migrateInit_1 = require("./0.1.27-migrateInit");
 const _0_1_28_tsToTsx_1 = require("./0.1.28-tsToTsx");
 const _0_1_31_ensureProjectIcons_1 = require("./0.1.31-ensureProjectIcons");
@@ -56,6 +57,7 @@ exports.MIGRATIONS = {
     "0.1.64": _0_1_64_imageFiles_1.ensureImageFiles,
     "0.1.95": _0_1_95_componentType_1.ensureComponentType,
     "0.1.146": _0_1_146_addReactRuntime_1.ensureReactRuntime,
+    "0.1.166": _0_1_166_indirect_1.ensureIndirect,
 };
 exports.LOCK_MIGRATIONS = {
     "0.1.110": _0_1_110_fileLocks_1.ensureFileLocks,

package/dist/plasmic.schema.json

@@ -296,6 +296,10 @@
                     },
                     "type": "array"
                 },
+                "indirect": {
+                    "description": "True if the project was installed indirectly (as a dependency); if set,\ncodegen will not generate pages.",
+                    "type": "boolean"
+                },
                 "jsBundleThemes": {
                     "items": {
                         "$ref": "#/definitions/JsBundleThemeConfig"
@@ -324,6 +328,7 @@
                 "cssFilePath",
                 "icons",
                 "images",
+                "indirect",
                 "projectId",
                 "projectName",
                 "version"

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

@@ -138,12 +138,15 @@ exports.project1Config = {
     icons: [],
     images: [],
     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/dist/utils/config-utils.d.ts

@@ -126,6 +126,11 @@ export interface ProjectConfig {
     icons: IconConfig[];
     /** Metadata for each synced image in this project */
     images: ImageConfig[];
+    /**
+     * True if the project was installed indirectly (as a dependency); if set,
+     * codegen will not generate pages.
+     */
+    indirect: boolean;
 }
 export declare function createProjectConfig(base: {
     projectId: string;
@@ -133,6 +138,7 @@ export declare function createProjectConfig(base: {
     projectName: string;
     version: string;
     cssFilePath: string;
+    indirect: boolean;
 }): ProjectConfig;
 export interface TokensConfig {
     scheme: "theo";
@@ -219,6 +225,7 @@ export interface ProjectLock {
     };
     lang: "ts" | "js";
     fileLocks: FileLock[];
+    codegenVersion?: string;
 }
 export interface PlasmicLock {
     projects: ProjectLock[];

package/dist/utils/config-utils.js

@@ -39,6 +39,7 @@ function createProjectConfig(base) {
         components: [],
         icons: [],
         images: [],
+        indirect: base.indirect,
     };
 }
 exports.createProjectConfig = createProjectConfig;
@@ -148,6 +149,7 @@ function getOrAddProjectConfig(context, projectId, base // if one doesn't exist,
                 icons: [],
                 images: [],
                 jsBundleThemes: [],
+                indirect: false,
             };
         context.config.projects.push(project);
     }

package/dist/utils/npm-utils.d.ts

@@ -10,7 +10,7 @@ export declare function warnLatest(context: PlasmicContext, pkg: string, baseDir
     requiredMsg: () => string;
     updateMsg: (curVersion: string, latestVersion: string) => string;
 }, yes?: boolean): Promise<void>;
-export declare function findInstalledVersion(context: PlasmicContext, pkg: string): string | undefined;
+export declare function findInstalledVersion(context: PlasmicContext, baseDir: string, pkg: string): any;
 /**
  * Detects if the cli is globally installed.  `rootDir` is the folder
  * where plasmic.json is
@@ -25,4 +25,4 @@ export declare function installCommand(pkg: string, baseDir: string, opts?: {
     global?: boolean;
     dev?: boolean;
 }): string;
-export declare function detectPackageManager(baseDir: string): "yarn" | "npm";
+export declare function detectPackageManager(baseDir: string): "yarn2" | "yarn" | "npm";

package/dist/utils/npm-utils.js

@@ -60,7 +60,7 @@ exports.getParsedPackageJson = getParsedPackageJson;
 // @TODO: is this function still used?
 function warnLatest(context, pkg, baseDir, msgs, yes) {
     return __awaiter(this, void 0, void 0, function* () {
-        const check = yield checkVersion(context, pkg);
+        const check = yield checkVersion(context, baseDir, pkg);
         if (check.type === "up-to-date") {
             return;
         }
@@ -76,7 +76,7 @@ function warnLatest(context, pkg, baseDir, msgs, yes) {
     });
 }
 exports.warnLatest = warnLatest;
-function checkVersion(context, pkg) {
+function checkVersion(context, baseDir, pkg) {
     return __awaiter(this, void 0, void 0, function* () {
         // Try to get the latest version from npm
         let last = null;
@@ -87,7 +87,7 @@ function checkVersion(context, pkg) {
             // This is likely because .npmrc is set to a different registry
             return { type: "wrong-npm-registry" };
         }
-        const cur = findInstalledVersion(context, pkg);
+        const cur = findInstalledVersion(context, baseDir, pkg);
         if (!cur) {
             return { type: "not-installed" };
         }
@@ -101,7 +101,18 @@ function checkVersion(context, pkg) {
         return { type: "up-to-date" };
     });
 }
-function findInstalledVersion(context, pkg) {
+function findInstalledVersion(context, baseDir, pkg) {
+    var _a;
+    const pm = detectPackageManager(baseDir);
+    if (pm === "yarn2") {
+        try {
+            const pkgInfo = JSON.parse(child_process_1.execSync(`yarn info --json ${pkg}`).toString().trim());
+            return (_a = pkgInfo === null || pkgInfo === void 0 ? void 0 : pkgInfo.children) === null || _a === void 0 ? void 0 : _a.Version;
+        }
+        catch (_) {
+            return undefined;
+        }
+    }
     const filename = findInstalledPackageJsonFile(context, pkg);
     if (filename) {
         const json = parsePackageJson(filename);
@@ -190,6 +201,18 @@ function installCommand(pkg, baseDir, opts = {}) {
             return `yarn add --ignore-scripts -W ${pkg}`;
         }
     }
+    else if (mgr === "yarn2") {
+        if (opts.global) {
+            // yarn2 does not support global.
+            return `npm install -g ${pkg}`;
+        }
+        else if (opts.dev) {
+            return `yarn add -D ${pkg}`;
+        }
+        else {
+            return `yarn add ${pkg}`;
+        }
+    }
     else {
         if (opts.global) {
             return `npm install -g ${pkg}`;
@@ -206,10 +229,9 @@ exports.installCommand = installCommand;
 function detectPackageManager(baseDir) {
     const yarnLock = findup_sync_1.default("yarn.lock", { cwd: baseDir });
     if (yarnLock) {
-        return "yarn";
-    }
-    else {
-        return "npm";
+        const yarnVersion = child_process_1.execSync(`yarn --version`).toString().trim();
+        return semver_1.default.gte(yarnVersion, "2.0.0") ? "yarn2" : "yarn";
     }
+    return "npm";
 }
 exports.detectPackageManager = detectPackageManager;

package/dist/utils/resolve-utils.js

@@ -47,6 +47,7 @@ const user_utils_1 = require("./user-utils");
  * @param versionResolution
  */
 function walkDependencyTree(root, available) {
+    root.indirect = false;
     const queue = [root];
     const result = [];
     const getMeta = (projectId, version) => {
@@ -54,7 +55,7 @@ function walkDependencyTree(root, available) {
         if (!meta) {
             throw new Error(`Cannot find projectId=${projectId}, version=${version} in the sync resolution results.`);
         }
-        return meta;
+        return Object.assign(Object.assign({}, meta), { indirect: meta.projectId !== root.projectId });
     };
     while (queue.length > 0) {
         const curr = lang_utils_1.ensure(queue.shift());
@@ -73,6 +74,16 @@ function checkProjectMeta(meta, root, context, opts) {
         const projectId = meta.projectId;
         const projectName = meta.projectName;
         const newVersion = meta.version;
+        const indirect = meta.indirect;
+        // If the codegen version on-disk is invalid, we will sync again the project.
+        const checkCodegenVersion = () => __awaiter(this, void 0, void 0, function* () {
+            const projectLock = context.lock.projects.find((p) => p.projectId === projectId);
+            if (!!(projectLock === null || projectLock === void 0 ? void 0 : projectLock.codegenVersion) && semver.gte(projectLock.codegenVersion, yield context.api.latestCodegenVersion())) {
+                return false;
+            }
+            return true;
+        });
+        const isOnDiskCodeInvalid = yield checkCodegenVersion();
         // Checks newVersion against plasmic.lock
         const checkVersionLock = () => __awaiter(this, void 0, void 0, function* () {
             const projectLock = context.lock.projects.find((p) => p.projectId === projectId);
@@ -86,7 +97,9 @@ function checkProjectMeta(meta, root, context, opts) {
                 meta !== root) {
                 // If this is a dependency (not root), and we're dealing with latest dep version
                 // just skip, it's confusing
-                deps_1.logger.warn(`'${root.projectName}' depends on ${projectName}@${newVersion}. To update this project, explicitly specify this project for sync. Skipping...`);
+                if (!isOnDiskCodeInvalid) {
+                    deps_1.logger.warn(`'${root.projectName}' depends on ${projectName}@${newVersion}. To update this project, explicitly specify this project for sync. Skipping...`);
+                }
                 return false;
             }
             if (semver.isLatest(newVersion)) {
@@ -104,7 +117,9 @@ function checkProjectMeta(meta, root, context, opts) {
                     return true;
                 }
                 else {
-                    deps_1.logger.info(`Project '${projectName}'@${newVersion} is already up to date; skipping. (To force an update, run again with "--force")`);
+                    if (!isOnDiskCodeInvalid) {
+                        deps_1.logger.info(`Project '${projectName}'@${newVersion} is already up to date; skipping. (To force an update, run again with "--force")`);
+                    }
                     return false;
                 }
             }
@@ -145,6 +160,15 @@ function checkProjectMeta(meta, root, context, opts) {
             deps_1.logger.warn(`${projectName}@${newVersion} falls outside the range specified in ${config_utils_1.CONFIG_FILE_NAME} (${versionRange})\nTip: To avoid this warning in the future, update your ${config_utils_1.CONFIG_FILE_NAME}.`);
             return yield user_utils_1.confirmWithUser("Do you want to force it?", opts.force || opts.yes, "n");
         });
+        const checkIndirect = () => __awaiter(this, void 0, void 0, function* () {
+            const projectConfig = context.config.projects.find((p) => p.projectId === projectId);
+            const configIndirect = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.indirect;
+            if (configIndirect && !indirect) {
+                deps_1.logger.warn(`'${projectName}' was synced indirectly before, but a direct sync was requested. If it has page components, they will be synced and saved to plasmic.json.`);
+                return yield user_utils_1.confirmWithUser("Do you want to confirm it?", opts.force || opts.yes, "n");
+            }
+            return true;
+        });
         const projectIds = opts.projects.length > 0
             ? opts.projects
             : context.config.projects.map((p) => p.projectId);
@@ -153,7 +177,24 @@ function checkProjectMeta(meta, root, context, opts) {
             // we should always sync it, even if nothing has changed
             return true;
         }
-        return (yield checkVersionLock()) && (yield checkVersionRange());
+        const checkedVersion = (yield checkVersionLock()) &&
+            (yield checkVersionRange()) &&
+            (yield checkIndirect());
+        if (!checkedVersion && isOnDiskCodeInvalid) {
+            // sync, but try to keep the current version on disk
+            const projectLock = context.lock.projects.find((p) => p.projectId === projectId);
+            const versionOnDisk = projectLock === null || projectLock === void 0 ? void 0 : projectLock.version;
+            deps_1.logger.warn(`Project '${projectName}' was synced by an incompatible version of Plasmic Codegen. Syncing again on the same version ${projectName}@${versionOnDisk}`);
+            meta.version = versionOnDisk !== null && versionOnDisk !== void 0 ? versionOnDisk : meta.version;
+            return true;
+        }
+        else if (checkedVersion) {
+            // sync and upgrade the version
+            return true;
+        }
+        else {
+            return false;
+        }
     });
 }
 /**
@@ -175,13 +216,18 @@ function checkVersionResolution(versionResolution, context, opts) {
                 ? [root]
                 : walkDependencyTree(root, versionResolution.dependencies).reverse();
             for (const m of queue) {
-                // If we haven't seen this yet
                 if (!seen.find((p) => p.projectId === m.projectId)) {
                     if (yield checkProjectMeta(m, root, context, opts)) {
                         result.push(m);
                     }
                     seen.push(m);
                 }
+                else if (root.projectId === m.projectId) {
+                    // If m is the root project and it was already seen (maybe as a dep
+                    // for another project), set indirect = false.
+                    const project = lang_utils_1.ensure(seen.find((p) => p.projectId === m.projectId));
+                    project.indirect = false;
+                }
             }
         }
         // Ignore repeats

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/cli",
-  "version": "0.1.164",
+  "version": "0.1.168",
   "description": "plasmic cli for syncing local code with Plasmic designs",
   "engines": {
     "node": ">=12"
@@ -49,7 +49,9 @@
   "dependencies": {
     "@babel/core": "^7.12.3",
     "@babel/generator": "^7.12.1",
-    "@plasmicapp/code-merger": "^0.0.31",
+    "@babel/parser": "^7.12.3",
+    "@babel/traverse": "^7.12.1",
+    "@plasmicapp/code-merger": "^0.0.33",
     "@sentry/node": "^5.19.2",
     "@types/socket.io-client": "^1.4.34",
     "axios": "^0.21.1",

package/src/__mocks__/api.ts

@@ -61,6 +61,7 @@ function mockProjectToProjectVersionMeta(
           componentIdOrNames.includes(c.id)
       )
       .map((c) => c.id),
+    indirect: false,
   };
 }
 
@@ -339,6 +340,8 @@ class PlasmicApi {
         globalVariantChecksums: [],
         projectCssChecksum: "",
       } as ChecksumBundle,
+      usedNpmPackages: [],
+      externalCssImports: [],
     };
     return result;
   }
@@ -369,6 +372,10 @@ class PlasmicApi {
     throw new Error("Unimplemented");
   }
 
+  async latestCodegenVersion(): Promise<string> {
+    return "0.0.1";
+  };
+
   async requiredPackages(): Promise<RequiredPackages> {
     return {
       "@plasmicapp/loader": "0.0.1",

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

@@ -128,6 +128,7 @@ async function ensureRequiredPackages(
 
   const reactWebVersion = findInstalledVersion(
     context,
+    baseDir,
     "@plasmicapp/react-web"
   );
   if (
@@ -145,6 +146,7 @@ async function ensureRequiredPackages(
     // Using automatic runtime requires installing the @plasmicapp/react-web-runtime package
     const runtimeVersion = findInstalledVersion(
       context,
+      baseDir,
       "@plasmicapp/react-web-runtime"
     );
     if (
@@ -232,6 +234,7 @@ export async function sync(
         versionRange || projectConfigMap[projectId]?.version || "latest",
       componentIdOrNames: undefined, // Get all components!
       projectApiToken: projectApiToken || projectIdToToken.get(projectId),
+      indirect: false,
     };
   });
 
@@ -242,6 +245,7 @@ export async function sync(
         versionRange: p.version,
         componentIdOrNames: undefined, // Get all components!
         projectApiToken: p.projectApiToken,
+        indirect: !!p.indirect,
       }));
 
   // Short-circuit if nothing to sync
@@ -257,7 +261,7 @@ export async function sync(
     try {
       context = await getContext(opts);
     } catch (e) {
-      if (e.message.includes("Unable to authenticate Plasmic")) {
+      if ((e as any).message.includes("Unable to authenticate Plasmic")) {
         const configFileName = process.env.PLASMIC_LOADER
           ? LOADER_CONFIG_FILE_NAME
           : CONFIG_FILE_NAME;
@@ -311,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 () => {
@@ -327,6 +333,9 @@ export async function sync(
         projectMeta.dependencies,
         summary,
         pendingMerge,
+        projectMeta.indirect,
+        externalNpmPackages,
+        externalCssImports,
         metadataDefaults
       );
     }
@@ -345,15 +354,22 @@ export async function sync(
       await context.api.genStyleConfig(context.config.style)
     );
 
-    // Update project version if specified and successfully synced.
+    // Update project version and indirect status if specified and
+    // successfully synced.
     if (projectWithVersion.length) {
       const versionMap: Record<string, string> = {};
       projectWithVersion.forEach(
         (p) => (versionMap[p.projectId] = p.versionRange)
       );
-      context.config.projects.forEach(
-        (p) => (p.version = versionMap[p.projectId] || p.version)
-      );
+      const indirectMap: Record<string, boolean> = {};
+      projectsToSync.forEach((p) => (indirectMap[p.projectId] = p.indirect));
+      context.config.projects.forEach((p) => {
+        p.version = versionMap[p.projectId] || p.version;
+        // Only update `indirect` if it is set in current config.
+        if (p.projectId in indirectMap && p.indirect) {
+          p.indirect = indirectMap[p.projectId];
+        }
+      });
     }
 
     // Fix imports
@@ -400,10 +416,32 @@ export async function sync(
       writeLoaderConfig(opts, config);
     }
 
+    const codegenVersion = await context.api.latestCodegenVersion();
+    context.lock.projects.forEach(p => {
+      if (projectsToSync.some(syncedProject => syncedProject.projectId === p.projectId)) {
+        p.codegenVersion = codegenVersion;
+      }
+    })
     // Write the new ComponentConfigs to disk
     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 || []) {
@@ -418,6 +456,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,
@@ -467,6 +529,9 @@ async function syncProject(
   dependencies: { [projectId: string]: string },
   summary: Map<string, ComponentUpdateSummary>,
   pendingMerge: ComponentPendingMerge[],
+  indirect: boolean,
+  externalNpmPackages: Set<string>,
+  externalCssImports: Set<string>,
   metadataDefaults?: Metadata
 ): Promise<void> {
   const newComponentScheme =
@@ -510,6 +575,7 @@ async function syncProject(
       },
       opts.metadata
     ),
+    indirect,
   });
 
   // Convert from TSX => JSX
@@ -568,7 +634,8 @@ async function syncProject(
     summary,
     pendingMerge,
     projectBundle.checksums,
-    opts.baseDir
+    opts.baseDir,
+    indirect
   );
   syncCodeComponentsMeta(context, projectId, projectBundle.codeComponentMetas);
   await upsertStyleTokens(context, projectBundle.usedTokens);
@@ -587,6 +654,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(
@@ -617,7 +690,8 @@ async function syncProjectConfig(
   summary: Map<string, ComponentUpdateSummary>,
   pendingMerge: ComponentPendingMerge[],
   checksums: ChecksumBundle,
-  baseDir: string
+  baseDir: string,
+  indirect: boolean
 ) {
   const defaultCssFilePath = defaultResourcePath(
     context,
@@ -637,6 +711,7 @@ async function syncProjectConfig(
       projectName: projectBundle.projectName,
       version,
       cssFilePath: defaultCssFilePath,
+      indirect,
     })
   );
 
@@ -645,7 +720,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

@@ -76,6 +76,7 @@ export interface ProjectVersionMeta {
   dependencies: {
     [projectId: string]: string;
   };
+  indirect: boolean;
 }
 
 export interface VersionResolution {
@@ -100,6 +101,8 @@ export interface ProjectBundle {
   iconAssets: IconBundle[];
   imageAssets: ImageBundle[];
   checksums: ChecksumBundle;
+  usedNpmPackages: string[];
+  externalCssImports: string[];
 }
 
 export type ProjectMeta = Omit<ProjectBundle, "projectConfig">;
@@ -158,6 +161,7 @@ export interface ProjectIdAndToken {
 }
 
 export class PlasmicApi {
+  private codegenVersion?: string;
   constructor(private auth: AuthConfig) {}
 
   async genStyleConfig(styleOpts?: StyleConfig): Promise<StyleConfigResponse> {
@@ -210,6 +214,16 @@ export class PlasmicApi {
     return { ...resp.data } as RequiredPackages;
   }
 
+  async latestCodegenVersion(): Promise<string> {
+    if (!this.codegenVersion) {
+      const resp = await this.post(
+        `${this.codegenHost}/api/v1/code/latest-codegen-version`
+      );
+      this.codegenVersion = resp.data as string;
+    }
+    return this.codegenVersion;
+  }
+
   /**
    * Code-gen endpoint.
    * This will fetch components at an exact specified version.
@@ -235,6 +249,7 @@ export class PlasmicApi {
       stylesOpts: StyleConfig;
       codeOpts: CodeConfig;
       checksums: ChecksumBundle;
+      indirect: boolean;
       metadata?: Metadata;
     }
   ): Promise<ProjectBundle> {

package/src/migrations/0.1.166-indirect.ts

@@ -0,0 +1,10 @@
+import { PlasmicConfig } from "../utils/config-utils";
+
+export function ensureIndirect(config: PlasmicConfig) {
+  for (const p of config.projects) {
+    if (p.indirect === undefined) {
+      p.indirect = false;
+    }
+  }
+  return config;
+}

package/src/migrations/migrations.ts

@@ -35,6 +35,7 @@ import {
 import { confirmWithUser } from "../utils/user-utils";
 import { ensureFileLocks } from "./0.1.110-fileLocks";
 import { ensureReactRuntime } from "./0.1.146-addReactRuntime";
+import { ensureIndirect } from "./0.1.166-indirect";
 import { migrateInit } from "./0.1.27-migrateInit";
 import { tsToTsx } from "./0.1.28-tsToTsx";
 import { ensureProjectIcons } from "./0.1.31-ensureProjectIcons";
@@ -64,6 +65,7 @@ export const MIGRATIONS: Record<string, MigrateConfigFunc> = {
   "0.1.64": ensureImageFiles,
   "0.1.95": ensureComponentType,
   "0.1.146": ensureReactRuntime,
+  "0.1.166": ensureIndirect,
 };
 
 export const LOCK_MIGRATIONS: Record<string, MigrateLockFunc> = {

package/src/test-common/fixtures.ts

@@ -147,13 +147,18 @@ export const project1Config: ProjectConfig = {
   icons: [],
   images: [],
   jsBundleThemes: [],
+  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");

package/src/utils/config-utils.ts

@@ -171,6 +171,12 @@ export interface ProjectConfig {
   icons: IconConfig[];
   /** Metadata for each synced image in this project */
   images: ImageConfig[];
+
+  /**
+   * True if the project was installed indirectly (as a dependency); if set,
+   * codegen will not generate pages.
+   */
+  indirect: boolean;
 }
 
 export function createProjectConfig(base: {
@@ -179,6 +185,7 @@ export function createProjectConfig(base: {
   projectName: string;
   version: string;
   cssFilePath: string;
+  indirect: boolean;
 }): ProjectConfig {
   return {
     projectId: base.projectId,
@@ -189,6 +196,7 @@ export function createProjectConfig(base: {
     components: [],
     icons: [],
     images: [],
+    indirect: base.indirect,
   };
 }
 
@@ -310,6 +318,8 @@ export interface ProjectLock {
   lang: "ts" | "js";
   // One for each file whose checksum is computed
   fileLocks: FileLock[];
+  // The version of Codegen when this project was written
+  codegenVersion?: string;
 }
 
 export interface PlasmicLock {
@@ -519,6 +529,7 @@ export function getOrAddProjectConfig(
           icons: [],
           images: [],
           jsBundleThemes: [],
+          indirect: false,
         };
     context.config.projects.push(project);
   }

package/src/utils/npm-utils.ts

@@ -1,4 +1,4 @@
-import { spawnSync } from "child_process";
+import { execSync, spawnSync } from "child_process";
 import glob from "fast-glob";
 import findupSync from "findup-sync";
 import latest from "latest-version";
@@ -54,7 +54,7 @@ export async function warnLatest(
   },
   yes?: boolean
 ) {
-  const check = await checkVersion(context, pkg);
+  const check = await checkVersion(context, baseDir, pkg);
   if (check.type === "up-to-date") {
     return;
   } else if (check.type === "wrong-npm-registry") {
@@ -80,7 +80,11 @@ export async function warnLatest(
   }
 }
 
-async function checkVersion(context: PlasmicContext, pkg: string) {
+async function checkVersion(
+  context: PlasmicContext,
+  baseDir: string,
+  pkg: string
+) {
   // Try to get the latest version from npm
   let last = null;
   try {
@@ -90,7 +94,7 @@ async function checkVersion(context: PlasmicContext, pkg: string) {
     return { type: "wrong-npm-registry" } as const;
   }
 
-  const cur = findInstalledVersion(context, pkg);
+  const cur = findInstalledVersion(context, baseDir, pkg);
   if (!cur) {
     return { type: "not-installed" } as const;
   }
@@ -104,7 +108,23 @@ async function checkVersion(context: PlasmicContext, pkg: string) {
   return { type: "up-to-date" } as const;
 }
 
-export function findInstalledVersion(context: PlasmicContext, pkg: string) {
+export function findInstalledVersion(
+  context: PlasmicContext,
+  baseDir: string,
+  pkg: string
+) {
+  const pm = detectPackageManager(baseDir);
+  if (pm === "yarn2") {
+    try {
+      const pkgInfo = JSON.parse(
+        execSync(`yarn info --json ${pkg}`).toString().trim()
+      );
+      return pkgInfo?.children?.Version;
+    } catch (_) {
+      return undefined;
+    }
+  }
+
   const filename = findInstalledPackageJsonFile(context, pkg);
   if (filename) {
     const json = parsePackageJson(filename);
@@ -202,6 +222,15 @@ export function installCommand(
     } else {
       return `yarn add --ignore-scripts -W ${pkg}`;
     }
+  } else if (mgr === "yarn2") {
+    if (opts.global) {
+      // yarn2 does not support global.
+      return `npm install -g ${pkg}`;
+    } else if (opts.dev) {
+      return `yarn add -D ${pkg}`;
+    } else {
+      return `yarn add ${pkg}`;
+    }
   } else {
     if (opts.global) {
       return `npm install -g ${pkg}`;
@@ -216,8 +245,9 @@ export function installCommand(
 export function detectPackageManager(baseDir: string) {
   const yarnLock = findupSync("yarn.lock", { cwd: baseDir });
   if (yarnLock) {
-    return "yarn";
-  } else {
-    return "npm";
+    const yarnVersion = execSync(`yarn --version`).toString().trim();
+    return semver.gte(yarnVersion, "2.0.0") ? "yarn2" : "yarn";
   }
+
+  return "npm";
 }

package/src/utils/resolve-utils.ts

@@ -1,4 +1,5 @@
 import L from "lodash";
+import { InvalidatedProjectKind } from "typescript";
 import { SyncArgs } from "../actions/sync";
 import { ProjectVersionMeta, VersionResolution } from "../api";
 import { logger } from "../deps";
@@ -19,6 +20,7 @@ function walkDependencyTree(
   root: ProjectVersionMeta,
   available: ProjectVersionMeta[]
 ): ProjectVersionMeta[] {
+  root.indirect = false;
   const queue: ProjectVersionMeta[] = [root];
   const result: ProjectVersionMeta[] = [];
 
@@ -31,7 +33,10 @@ function walkDependencyTree(
         `Cannot find projectId=${projectId}, version=${version} in the sync resolution results.`
       );
     }
-    return meta;
+    return {
+      ...meta,
+      indirect: meta.projectId !== root.projectId,
+    };
   };
 
   while (queue.length > 0) {
@@ -61,6 +66,22 @@ async function checkProjectMeta(
   const projectId = meta.projectId;
   const projectName = meta.projectName;
   const newVersion = meta.version;
+  const indirect = meta.indirect;
+
+  // If the codegen version on-disk is invalid, we will sync again the project.
+  const checkCodegenVersion = async (): Promise<boolean> => {
+    const projectLock = context.lock.projects.find(
+      (p) => p.projectId === projectId
+    );
+
+    if (!!projectLock?.codegenVersion && semver.gte(projectLock.codegenVersion, await context.api.latestCodegenVersion())) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const isOnDiskCodeInvalid = await checkCodegenVersion();
 
   // Checks newVersion against plasmic.lock
   const checkVersionLock = async (): Promise<boolean> => {
@@ -81,9 +102,11 @@ async function checkProjectMeta(
     ) {
       // If this is a dependency (not root), and we're dealing with latest dep version
       // just skip, it's confusing
-      logger.warn(
-        `'${root.projectName}' depends on ${projectName}@${newVersion}. To update this project, explicitly specify this project for sync. Skipping...`
-      );
+      if (!isOnDiskCodeInvalid) {
+        logger.warn(
+          `'${root.projectName}' depends on ${projectName}@${newVersion}. To update this project, explicitly specify this project for sync. Skipping...`
+        );
+      }
       return false;
     }
 
@@ -105,9 +128,11 @@ async function checkProjectMeta(
         );
         return true;
       } else {
-        logger.info(
-          `Project '${projectName}'@${newVersion} is already up to date; skipping. (To force an update, run again with "--force")`
-        );
+        if (!isOnDiskCodeInvalid) { 
+          logger.info(
+            `Project '${projectName}'@${newVersion} is already up to date; skipping. (To force an update, run again with "--force")`
+          );
+        }
         return false;
       }
     }
@@ -177,6 +202,24 @@ async function checkProjectMeta(
     );
   };
 
+  const checkIndirect = async (): Promise<boolean> => {
+    const projectConfig = context.config.projects.find(
+      (p) => p.projectId === projectId
+    );
+    const configIndirect = projectConfig?.indirect;
+    if (configIndirect && !indirect) {
+      logger.warn(
+        `'${projectName}' was synced indirectly before, but a direct sync was requested. If it has page components, they will be synced and saved to plasmic.json.`
+      );
+      return await confirmWithUser(
+        "Do you want to confirm it?",
+        opts.force || opts.yes,
+        "n"
+      );
+    }
+    return true;
+  };
+
   const projectIds =
     opts.projects.length > 0
       ? opts.projects
@@ -187,8 +230,29 @@ async function checkProjectMeta(
     // we should always sync it, even if nothing has changed
     return true;
   }
+  const checkedVersion = 
+    (await checkVersionLock()) &&
+    (await checkVersionRange()) &&
+    (await checkIndirect());
 
-  return (await checkVersionLock()) && (await checkVersionRange());
+ if(!checkedVersion && isOnDiskCodeInvalid) {
+    // sync, but try to keep the current version on disk
+    const projectLock = context.lock.projects.find(
+      (p) => p.projectId === projectId
+    );
+    const versionOnDisk = projectLock?.version;
+    logger.warn(
+      `Project '${projectName}' was synced by an incompatible version of Plasmic Codegen. Syncing again on the same version ${projectName}@${versionOnDisk}`
+    );
+    
+    meta.version = versionOnDisk ?? meta.version;
+    return true;
+  } else if (checkedVersion) {
+    // sync and upgrade the version
+    return true;
+  } else {
+    return false;
+  }
 }
 
 /**
@@ -216,12 +280,16 @@ export async function checkVersionResolution(
       ? [root]
       : walkDependencyTree(root, versionResolution.dependencies).reverse();
     for (const m of queue) {
-      // If we haven't seen this yet
       if (!seen.find((p) => p.projectId === m.projectId)) {
         if (await checkProjectMeta(m, root, context, opts)) {
           result.push(m);
         }
         seen.push(m);
+      } else if (root.projectId === m.projectId) {
+        // If m is the root project and it was already seen (maybe as a dep
+        // for another project), set indirect = false.
+        const project = ensure(seen.find((p) => p.projectId === m.projectId));
+        project.indirect = false;
       }
     }
   }