@plasmicapp/cli 0.1.162

package/dist/utils/code-utils.js

@@ -0,0 +1,457 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatScript = exports.maybeConvertTsxToJsx = exports.tsxToJsx = exports.fixAllImportStatements = exports.mkFixImportContext = exports.isLocalModulePath = exports.replaceImports = exports.ensureImportDefaultSpecifier = exports.ensureImportSpecifierWithAlias = exports.formatAsLocal = void 0;
+const babel = __importStar(require("@babel/core"));
+const generator_1 = __importDefault(require("@babel/generator"));
+const parser = __importStar(require("@babel/parser"));
+const traverse_1 = __importDefault(require("@babel/traverse"));
+const lodash_1 = __importDefault(require("lodash"));
+const Prettier = __importStar(require("prettier"));
+const prettier_1 = require("prettier");
+const ts = __importStar(require("typescript"));
+const upath_1 = __importDefault(require("upath"));
+const sync_images_1 = require("../actions/sync-images");
+const deps_1 = require("../deps");
+const error_1 = require("../utils/error");
+const file_utils_1 = require("./file-utils");
+const lang_utils_1 = require("./lang-utils");
+exports.formatAsLocal = (content, filePath, baseDir, defaultOpts = {}) => {
+    const opts = prettier_1.resolveConfig.sync(baseDir) || defaultOpts;
+    opts.filepath = filePath;
+    // Running Prettier multiple times may actually yield different results!
+    // Here we run it twice, just to be safe... :-/
+    const res = Prettier.format(content, opts);
+    const res2 = Prettier.format(res, opts);
+    return res2;
+};
+const nodeToFormattedCode = (n, baseDir, unformatted, commentsToRemove) => {
+    const c = generator_1.default(n, {
+        retainLines: true,
+        shouldPrintComment: (c) => !commentsToRemove || !commentsToRemove.has(c),
+    }).code;
+    return unformatted
+        ? c
+        : exports.formatAsLocal(c, "/tmp/x.tsx", baseDir, {
+            trailingComma: "none",
+            arrowParens: "avoid",
+        });
+};
+function findImportSpecifierWithAlias(importDecl, local) {
+    for (const spec of importDecl.specifiers) {
+        if (spec.type === "ImportSpecifier" && spec.local.name === local) {
+            return spec;
+        }
+    }
+    return undefined;
+}
+function findImportDefaultSpecifier(importDecl) {
+    for (const spec of importDecl.specifiers) {
+        if (spec.type === "ImportDefaultSpecifier") {
+            return spec;
+        }
+    }
+    return undefined;
+}
+function ensureImportSpecifierWithAlias(decl, imported, alias) {
+    const existing = findImportSpecifierWithAlias(decl, alias);
+    if (existing) {
+        if (existing.imported.type === "Identifier") {
+            existing.imported.name = imported;
+        }
+        else {
+            existing.imported.value = imported;
+        }
+    }
+    else {
+        decl.specifiers = decl.specifiers.filter((specifier) => {
+            if (specifier.type === "ImportDefaultSpecifier" &&
+                specifier.local.name === alias) {
+                // If we are importing a default for a name that will collide with our
+                // desired alias, then the default import is wrong and we skip it.
+                return false;
+            }
+            return true;
+        });
+        decl.specifiers.push(babel.types.importSpecifier(babel.types.identifier(alias), babel.types.identifier(imported)));
+    }
+}
+exports.ensureImportSpecifierWithAlias = ensureImportSpecifierWithAlias;
+function ensureImportDefaultSpecifier(decl, defaultExport) {
+    const existing = findImportDefaultSpecifier(decl);
+    if (existing) {
+        existing.local.name = defaultExport;
+    }
+    else {
+        decl.specifiers.splice(0, 0, babel.types.importDefaultSpecifier(babel.types.identifier(defaultExport)));
+    }
+}
+exports.ensureImportDefaultSpecifier = ensureImportDefaultSpecifier;
+function tryParsePlasmicImportSpec(node) {
+    var _a;
+    const c = (_a = node.trailingComments) === null || _a === void 0 ? void 0 : _a[0];
+    if (!c) {
+        return undefined;
+    }
+    const m = c.value.match(/plasmic-import:\s+([\w-]+)(?:\/(component|css|render|globalVariant|projectcss|defaultcss|icon|picture|jsBundle|codeComponent))?/);
+    if (m) {
+        return { id: m[1], type: m[2] };
+    }
+    return undefined;
+}
+function filterUnformattedMarker(code, changed) {
+    const lines = code.split("\n");
+    const isUnformattedMarker = (line) => line.trim() === "// plasmic-unformatted";
+    changed = changed || lines.some(isUnformattedMarker);
+    code = lines.filter((line) => !isUnformattedMarker(line)).join("\n");
+    return [code, changed];
+}
+/**
+ * Given the argument `code` string, for module at `fromPath`, replaces all Plasmic imports
+ * for modules found in `compConfigsMap`.
+ */
+function replaceImports(context, code, fromPath, fixImportContext, removeImportDirective, baseDir, changed = false) {
+    [code, changed] = filterUnformattedMarker(code, changed);
+    const file = parser.parse(code, {
+        strictMode: true,
+        sourceType: "module",
+        plugins: [
+            // At a minimum, we need to parse jsx and typescript
+            "jsx",
+            "typescript",
+            // There are also various features that people may have... May just
+            // need to add as we encounter them...
+            "classProperties",
+        ],
+    });
+    const commentsToRemove = new Set();
+    file.program.body.forEach((stmt) => {
+        var _a;
+        if (stmt.type !== "ImportDeclaration") {
+            return;
+        }
+        const importStmt = stmt;
+        const spec = tryParsePlasmicImportSpec(importStmt);
+        if (!spec) {
+            return;
+        }
+        changed = true;
+        if (removeImportDirective) {
+            commentsToRemove.add(((_a = stmt.trailingComments) === null || _a === void 0 ? void 0 : _a[0].value) || "");
+        }
+        const type = spec.type;
+        const uuid = spec.id;
+        if (type === "component") {
+            // instantiation of a mapped or managed component
+            const compConfig = fixImportContext.components[uuid];
+            if (!compConfig) {
+                throwMissingReference(context, "component", uuid, fromPath);
+            }
+            const { modulePath, exportName } = compConfig.importSpec;
+            if (exportName) {
+                // ensure import { ${exportName} as ${compConfig.name} }
+                ensureImportSpecifierWithAlias(stmt, exportName, compConfig.name);
+            }
+            else {
+                // Keep the same name as it might be different from compConfig.name due
+                // to name collisions.
+                // ensureImportDefaultSpecifier(stmt, compConfig.name);
+            }
+            const realPath = makeImportPath(context, fromPath, modulePath, true);
+            stmt.source.value = realPath;
+        }
+        else if (type === "render") {
+            // import of the PP blackbox
+            const compConfig = fixImportContext.components[uuid];
+            if (!compConfig) {
+                throwMissingReference(context, "component", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, compConfig.renderModuleFilePath, true);
+            stmt.source.value = realPath;
+        }
+        else if (type === "css") {
+            // import of the PP css file
+            const compConfig = fixImportContext.components[uuid];
+            if (!compConfig) {
+                throwMissingReference(context, "component", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, compConfig.cssFilePath, false);
+            stmt.source.value = realPath;
+        }
+        else if (type === "globalVariant") {
+            // import of global context
+            const variantConfig = fixImportContext.globalVariants[uuid];
+            if (!variantConfig) {
+                throwMissingReference(context, "global variant", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, variantConfig.contextFilePath, true);
+            stmt.source.value = realPath;
+        }
+        else if (type === "icon") {
+            // import of global context
+            const iconConfig = fixImportContext.icons[uuid];
+            if (!iconConfig) {
+                throwMissingReference(context, "icon", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, iconConfig.moduleFilePath, true);
+            stmt.source.value = realPath;
+        }
+        else if (type === "picture") {
+            const imageConfig = fixImportContext.images[uuid];
+            if (!imageConfig) {
+                throwMissingReference(context, "image", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, imageConfig.filePath, false);
+            stmt.source.value = realPath;
+        }
+        else if (type === "projectcss") {
+            const projectConfig = fixImportContext.projects[uuid];
+            if (!projectConfig) {
+                throwMissingReference(context, "project", uuid, fromPath);
+            }
+            const realPath = makeImportPath(context, fromPath, projectConfig.cssFilePath, false);
+            stmt.source.value = realPath;
+        }
+        else if (type === "defaultcss") {
+            const realPath = makeImportPath(context, fromPath, fixImportContext.config.style.defaultStyleCssFilePath, false);
+            stmt.source.value = realPath;
+        }
+        else if (type === "codeComponent") {
+            const meta = fixImportContext.codeComponentMetas[uuid];
+            if (meta.componentImportPath[0] === ".") {
+                // Relative path from the project root
+                const toPath = upath_1.default.join(process.cwd(), meta.componentImportPath);
+                lang_utils_1.assert(upath_1.default.isAbsolute(toPath));
+                const realPath = makeImportPath(context, fromPath, toPath, true, true);
+                stmt.source.value = realPath;
+            }
+            else {
+                // npm package
+                stmt.source.value = meta.componentImportPath;
+            }
+        }
+    });
+    if (!changed) {
+        return code;
+    }
+    return nodeToFormattedCode(file, baseDir, !changed, commentsToRemove);
+}
+exports.replaceImports = replaceImports;
+function throwMissingReference(context, itemType, uuid, fromPath) {
+    let recFix = `Please make sure projects that "${uuid}" depends on have already been synced.`;
+    if (context.cliArgs.nonRecursive) {
+        recFix = `Please run "plasmic sync" without the --non-recursive flag to sync dependencies.`;
+    }
+    else if (!context.cliArgs.force) {
+        recFix = `Please run "plasmic sync" with --force flag to force-sync the dependencies.`;
+    }
+    throw new error_1.HandledError(`Encountered Plasmic ${itemType} "${uuid}" in ${fromPath} that are being used but have not been synced. ${recFix}`);
+}
+function makeImportPath(context, fromPath, toPath, stripExt, forceRelative = false) {
+    let result = toPath;
+    if (forceRelative || isLocalModulePath(toPath)) {
+        result = upath_1.default.relative(file_utils_1.makeFilePath(context, upath_1.default.dirname(fromPath)), file_utils_1.makeFilePath(context, toPath));
+        if (!result.startsWith(".")) {
+            result = `./${result}`;
+        }
+    }
+    if (stripExt) {
+        result = file_utils_1.stripExtension(result);
+    }
+    return result;
+}
+/**
+ * Returns true if the argument ComponentConfig.importSpec.modulePath is referencing
+ * a local file
+ */
+function isLocalModulePath(modulePath) {
+    // It is a local file reference if the importPath includes the file extension
+    return !!upath_1.default.extname(modulePath);
+}
+exports.isLocalModulePath = isLocalModulePath;
+exports.mkFixImportContext = (config) => {
+    const allComponents = lang_utils_1.flatMap(config.projects, (p) => p.components);
+    const components = lodash_1.default.keyBy(allComponents, (c) => c.id);
+    const allCodeComponents = lang_utils_1.flatMap(config.projects, (p) => p.codeComponents || []);
+    const codeComponentMetas = lodash_1.default.keyBy(allCodeComponents, (c) => c.id);
+    const globalVariants = lodash_1.default.keyBy(config.globalVariants.variantGroups, (c) => c.id);
+    const icons = lodash_1.default.keyBy(lang_utils_1.flatMap(config.projects, (p) => p.icons), (c) => c.id);
+    const images = lodash_1.default.keyBy(lang_utils_1.flatMap(config.projects, (p) => p.images), (c) => c.id);
+    const projects = lodash_1.default.keyBy(config.projects, (p) => p.projectId);
+    return {
+        config,
+        components,
+        codeComponentMetas,
+        globalVariants,
+        icons,
+        images,
+        projects,
+    };
+};
+/**
+ * Assuming that all the files referenced in PlasmicConfig are correct, fixes import statements using PlasmicConfig
+ * file locations as the source of truth.
+ */
+function fixAllImportStatements(context, baseDir, summary) {
+    return __awaiter(this, void 0, void 0, function* () {
+        deps_1.logger.info("Fixing import statements...");
+        const config = context.config;
+        const fixImportContext = exports.mkFixImportContext(config);
+        for (const project of config.projects) {
+            for (const compConfig of project.components) {
+                const compSummary = summary === null || summary === void 0 ? void 0 : summary.get(compConfig.id);
+                if (summary && !compSummary) {
+                    continue;
+                }
+                const fixSkeletonModule = compSummary
+                    ? compSummary.skeletonModuleModified
+                    : true;
+                if (!summary || compSummary) {
+                    yield fixComponentImportStatements(context, compConfig, fixImportContext, fixSkeletonModule, baseDir);
+                }
+            }
+        }
+    });
+}
+exports.fixAllImportStatements = fixAllImportStatements;
+function fixComponentImportStatements(context, compConfig, fixImportContext, fixSkeletonModule, baseDir) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // If ComponentConfig.importPath is still a local file, we best-effort also fix up the import statements there.
+        if (isLocalModulePath(compConfig.importSpec.modulePath) &&
+            fixSkeletonModule) {
+            yield fixFileImportStatements(context, compConfig.importSpec.modulePath, fixImportContext, true, baseDir);
+        }
+        let renderModuleChanged = false;
+        if (["files", "public-files"].includes(context.config.images.scheme)) {
+            yield sync_images_1.fixComponentCssReferences(context, fixImportContext, compConfig.cssFilePath);
+            if (context.config.images.scheme === "public-files") {
+                renderModuleChanged = yield sync_images_1.fixComponentImagesReferences(context, fixImportContext, compConfig.renderModuleFilePath);
+            }
+        }
+        // Fix file imports and run prettier just after fixing image references
+        yield fixFileImportStatements(context, compConfig.renderModuleFilePath, fixImportContext, false, baseDir, renderModuleChanged);
+    });
+}
+function fixFileImportStatements(context, srcDirFilePath, fixImportContext, removeImportDirective, baseDir, fileHasChanged = false) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const filePath = file_utils_1.makeFilePath(context, srcDirFilePath);
+        if (!file_utils_1.existsBuffered(filePath)) {
+            deps_1.logger.warn(`Cannot fix imports in non-existing file ${srcDirFilePath}. Check your plasmic.json file for invalid entries.`);
+            return;
+        }
+        const prevContent = file_utils_1.readFileText(filePath).toString();
+        const newContent = replaceImports(context, prevContent, srcDirFilePath, fixImportContext, removeImportDirective, baseDir, fileHasChanged);
+        if (prevContent !== newContent) {
+            yield file_utils_1.writeFileContent(context, srcDirFilePath, newContent, {
+                force: true,
+            });
+        }
+    });
+}
+class CompilerOptions {
+    static getOpts() {
+        if (!this.opts) {
+            let curDir = __dirname;
+            let configPath = "";
+            do {
+                curDir = upath_1.default.join(curDir, "..");
+                configPath = upath_1.default.join(curDir, "tsconfig-transform.json");
+            } while (!file_utils_1.existsBuffered(configPath));
+            const c = ts.readConfigFile(configPath, (path) => file_utils_1.readFileText(path));
+            this.opts = ts.convertCompilerOptionsFromJson(c.config.compilerOptions, ".").options;
+        }
+        return this.opts;
+    }
+}
+CompilerOptions.opts = undefined;
+exports.tsxToJsx = (code) => {
+    // when the code has jsx pragma, typescript will remove comments, and remove
+    // "import React from 'React'" if React is unused. So we first invalidate it.
+    // We also need to add the usageMagic to prevent typescript from remove the
+    // import of ncreatePlasmicElementProxy.
+    const usageMagic = "\ncreatePlasmicElementProxy();";
+    const jsxPragmas = ["jsx", "jsxFrag", "jsxRuntime", "jsxImportSource"];
+    function prepForTranspile(str) {
+        for (const p of jsxPragmas) {
+            str = str.replace(`/** @${p} `, `/** @ ${p} `);
+        }
+        return str + usageMagic;
+    }
+    function fixPostTranspile(str) {
+        for (const p of jsxPragmas) {
+            str = str.replace(`/** @ ${p} `, `/** @${p} `);
+        }
+        str = str.replace(usageMagic, "");
+        return str;
+    }
+    let result = ts.transpileModule(prepForTranspile(code), {
+        compilerOptions: CompilerOptions.getOpts(),
+    });
+    return fixPostTranspile(result.outputText);
+};
+function maybeConvertTsxToJsx(fileName, content, baseDir) {
+    if (fileName.endsWith("tsx")) {
+        const jsFileName = file_utils_1.stripExtension(fileName) + ".jsx";
+        const jsContent = exports.formatScript(exports.tsxToJsx(content), baseDir);
+        return [jsFileName, jsContent];
+    }
+    return [fileName, content];
+}
+exports.maybeConvertTsxToJsx = maybeConvertTsxToJsx;
+exports.formatScript = (code, baseDir) => {
+    const file = parser.parse(code, {
+        strictMode: true,
+        sourceType: "module",
+        plugins: ["jsx", "typescript"],
+    });
+    let newLineMarker = "THIS_SHALL_BE_NEW_LINE";
+    while (code.includes(newLineMarker)) {
+        newLineMarker = newLineMarker + "_REALLY";
+    }
+    traverse_1.default(file, {
+        Statement: function (path) {
+            if (file.program.body.includes(path.node) &&
+                path.node.type !== "ImportDeclaration") {
+                path.insertBefore(babel.types.stringLiteral(newLineMarker));
+                path.skip();
+            }
+        },
+    });
+    const withmarkers = nodeToFormattedCode(file, baseDir, true);
+    const withNewLines = withmarkers.replace(new RegExp(`"${newLineMarker}"`, "g"), "\n");
+    return exports.formatAsLocal(withNewLines, "/tmp/x.tsx", baseDir, {
+        printWidth: 80,
+        tabWidth: 2,
+        useTabs: false,
+    });
+};