@plasmicapp/cli 0.1.162

package/.eslintrc.js

@@ -0,0 +1,61 @@
+module.exports = {
+  // Make sure we don't end up using .eslintrc.js from our cicd repo
+  root: true,
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    // "eslint:recommended",
+    // "plugin:@typescript-eslint/recommended"
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 11,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "no-restricted-properties": [
+      "error",
+      {
+        property: "readFileSync",
+      },
+      {
+        property: "writeFileSync",
+      },
+      {
+        property: "existsSync",
+      },
+      {
+        property: "unlinkSync",
+      },
+      {
+        property: "renameSync",
+      },
+      {
+        object: "process",
+        property: "exit",
+        message:
+          "CLI can be used as a library. Please throw Error or HandledError instead.",
+      },
+      {
+        object: "console",
+        message:
+          "Please use `logger` so that consumers of the library can control logging.",
+      },
+    ],
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "CallExpression[callee.name='readFileSync']",
+      },
+      {
+        selector: "CallExpression[callee.name='writeFileSync']",
+      },
+      {
+        selector: "CallExpression[callee.name='existsSync']",
+      },
+    ],
+  },
+};

package/.idea/cli.iml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/misc.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/cli.iml" filepath="$PROJECT_DIR$/.idea/cli.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

package/README

@@ -0,0 +1,16 @@
+Public plasmic cli for syncing designs to local code.
+
+Install
+=======
+
+`yarn global add @plasmicapp/cli`
+
+Usage
+=====
+
+`plasmic init` creates the initial plasmic.json file, pointing to your local dev host.
+
+`plasmic sync --projects ...` allows you to sync all components in the specified projects
+down as code files to your current folder.  Once you've run `plasmic init`, you can run
+`plasmic sync` from any subfolder of the folder with the `plasmic.json` file.
+

package/README.internal

@@ -0,0 +1,46 @@
+Dev Setup
+=========
+
+To use in development, you should first:
+
+  yarn install
+  yarn build
+
+Which generates the js file in dist/.  Then, you should do
+
+  yarn link
+
+Which adds the bin file to the yarn global bin (the location of the global bin is
+at `yarn global bin`.)
+
+If you see the symlink there but can't execute it, you'll need to set the permission
+correctly
+
+  chmod +x `yarn global bin`/plasmic
+
+Debugging
+=========
+
+Example invocation:
+
+    DEBUG_CHDIR=/path/to/target/project \
+        PLASMIC_DEFAULT_HOST=http://localhost:3003 \
+        PLASMIC_DISABLE_AUTH_SEARCH=1 \
+        node --inspect -r ts-node/register src/index.ts \
+        --auth ~/.plasmic.dev.auth \
+        sync
+
+This runs the source in-place from the .ts files so that you can debug the unmangled source code in Chrome devtools.
+
+- `DEBUG_CHDIR`: First cd's into the target directory (which typically has its own node_modules etc., so it's tricky to try to run the source from there).
+- `PLASMIC_DEFAULT_HOST`: Point to your localhost app server (even if you don't already have an auth file set up).
+- `--auth`: Reference your own alternate auth file, if you already have one.
+- `PLASMIC_DISABLE_AUTH_SEARCH`: Prevent auto-searching home and parent dirs for a `.plasmic.auth` file. Useful if you want to not provide any `--auth` (you probably won't use both `--auth` and this together).
+
+Extra hidden API
+================
+
+Additional environment variables, primarily used by PlasmicLoader.
+
+- `PLASMIC_LOADER`: runs in "PlasmicLoader mode."
+- `QUIET`: suppress various output, especially confirmations and subprocesses.

package/README.md

@@ -0,0 +1,17 @@
+Turn your Plasmic designs into components with the plasmic CLI!
+
+### Quickstart
+
+```bash
+# Install the CLI globally:
+npm install -g @plasmicapp/cli # Or: yarn global add @plasmicapp/cli
+
+# Run it!
+plasmic sync --projects yourPlasmicProjectId
+```
+
+### Resources
+
+For end-to-end examples, please check our docs: https://www.plasmic.app/learn/.
+
+For more information about the CLI, run `plasmic -h` or visit: https://www.plasmic.app/learn/cli/.

package/build.sh

@@ -0,0 +1,8 @@
+#/bin/bash
+
+set -o errexit -o nounset
+
+yarn eslint 'src/**'
+tsc
+cp ./tsconfig-transform.json ./dist
+typescript-json-schema tsconfig.json 'PlasmicConfig' --excludePrivate --required > ./dist/plasmic.schema.json

package/dist/__mocks__/api.d.ts

@@ -0,0 +1,16 @@
+export interface MockProject {
+    projectId: string;
+    projectApiToken: string;
+    version: string;
+    projectName: string;
+    components: MockComponent[];
+    dependencies: {
+        [projectId: string]: string;
+    };
+}
+export interface MockComponent {
+    id: string;
+    name: string;
+    projectId?: string;
+    version?: string;
+}

package/dist/__mocks__/api.js

@@ -0,0 +1,297 @@
+"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 });
+const lodash_1 = __importDefault(require("lodash"));
+const lang_utils_1 = require("../utils/lang-utils");
+const semver = __importStar(require("../utils/semver"));
+const api = jest.genMockFromModule("../api");
+/**
+ * Store a simplified data model for use with testing
+ */
+// Keyed by (projectId, version)
+const PROJECTS = [];
+function clear() {
+    while (PROJECTS.length > 0) {
+        PROJECTS.shift();
+    }
+}
+function mockProjectToProjectVersionMeta(mock, componentIdOrNames) {
+    return Object.assign(Object.assign({}, mock), { componentIds: mock.components
+            .filter((c) => !componentIdOrNames ||
+            componentIdOrNames.includes(c.name) ||
+            componentIdOrNames.includes(c.id))
+            .map((c) => c.id) });
+}
+/**
+ * Call this in test to setup the data model
+ * @param id componentId
+ * @param comp MockComponent
+ */
+function addMockProject(proj) {
+    const projectId = proj.projectId;
+    const version = proj.version;
+    // Populate projectId and version into each component
+    // will be useful when reading / writing components to files
+    proj.components = proj.components.map((c) => {
+        return Object.assign(Object.assign({}, c), { projectId,
+            version });
+    });
+    const existing = getMockProject(projectId, version);
+    if (!existing) {
+        PROJECTS.push(proj);
+    }
+    else {
+        existing.components = proj.components;
+        existing.dependencies = proj.dependencies;
+    }
+}
+/**
+ * Used to interpret data that's stored in the "codegen" files from the Mock server
+ * @param data
+ */
+function stringToMockComponent(data) {
+    if (!data) {
+        return;
+    }
+    const withoutComments = data.startsWith("//") ? data.slice(2) : data;
+    const cleaned = withoutComments.trim();
+    return JSON.parse(cleaned);
+}
+/**
+ * Used to write mock data into files for testing.
+ * Useful to see what version was written
+ * Need to prefix with a comment to satisfy the parser used in `fixAllImports`
+ * @param component
+ */
+function mockComponentToString(component) {
+    return "// " + JSON.stringify(component);
+}
+function getMockProject(projectId, version) {
+    return PROJECTS.find((m) => m.projectId === projectId && m.version === version);
+}
+/**
+ * Only fetch top-level components that match the projectId (optionally also componentIdOrNames + version)
+ * Does not crawl the dependency tree
+ * @param projectId
+ * @param componentIdOrNames
+ * @param versionRange
+ */
+function getMockComponents(projectId, version, componentIdOrNames) {
+    const project = getMockProject(projectId, version);
+    return !project
+        ? []
+        : project.components.filter((c) => !componentIdOrNames ||
+            componentIdOrNames.includes(c.id) ||
+            componentIdOrNames.includes(c.name));
+}
+function genFilename(base, suffix) {
+    return "Plasmic" + base + "." + suffix;
+}
+function genComponentBundle(component) {
+    return {
+        renderModule: mockComponentToString(component),
+        skeletonModule: mockComponentToString(component),
+        cssRules: `theClass {color: blue;}`,
+        renderModuleFileName: genFilename(component.name, "tsx"),
+        skeletonModuleFileName: component.name + ".tsx",
+        cssFileName: genFilename(component.name, "css"),
+        componentName: component.name,
+        id: component.id,
+        scheme: "blackbox",
+        nameInIdToUuid: [],
+        isPage: false,
+    };
+}
+function genEmptyStyleTokensMap() {
+    return {
+        props: [],
+        global: {
+            meta: {
+                source: "plasmic.app",
+            },
+        },
+    };
+}
+function genProjectMetaBundle(projectId) {
+    return {
+        projectId,
+        projectName: projectId,
+        cssFileName: genFilename(projectId, "css"),
+        cssRules: `theClass {color: green;}`,
+        jsBundleThemes: [],
+    };
+}
+function* getDeps(projects) {
+    const queue = [...projects];
+    while (queue.length > 0) {
+        const curr = lang_utils_1.ensure(queue.shift());
+        for (const [projectId, version] of lodash_1.default.toPairs(curr.dependencies)) {
+            const mockProject = lang_utils_1.ensure(getMockProject(projectId, version));
+            const projectMeta = mockProjectToProjectVersionMeta(mockProject);
+            yield projectMeta;
+            queue.push(projectMeta);
+        }
+    }
+}
+class PlasmicApi {
+    constructor(auth) {
+        this.auth = auth;
+        this.lastProjectIdsAndTokens = [];
+    }
+    genStyleConfig() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const result = {
+                defaultStyleCssFileName: genFilename("default", "css"),
+                defaultStyleCssRules: `theClass {color: red;}`,
+            };
+            return result;
+        });
+    }
+    resolveSync(projects, recursive) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const results = {
+                projects: [],
+                dependencies: [],
+                conflicts: [],
+            };
+            // Get top level projects
+            projects.forEach((proj) => {
+                const availableProjects = Array.from(PROJECTS.values()).filter((p) => p.projectId === proj.projectId);
+                if (!((this.auth.user && this.auth.token) ||
+                    availableProjects.every((p) => p.projectApiToken === proj.projectApiToken))) {
+                    throw new Error("No user+token, and project API tokens don't match");
+                }
+                const availableVersions = availableProjects.map((p) => p.version);
+                const version = semver.maxSatisfying(availableVersions, proj.versionRange);
+                if (version) {
+                    const mockProject = lang_utils_1.ensure(getMockProject(proj.projectId, version));
+                    const projectMeta = mockProjectToProjectVersionMeta(mockProject, proj.componentIdOrNames);
+                    results.projects.push(projectMeta);
+                }
+            });
+            // Get dependencies
+            if (!!recursive) {
+                const deps = [...getDeps(results.projects)];
+                results.dependencies.push(...deps);
+            }
+            return results;
+        });
+    }
+    getCurrentUser() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return true;
+        });
+    }
+    projectComponents(projectId, opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { componentIdOrNames, version } = opts;
+            if (PROJECTS.length <= 0) {
+                throw new Error("Remember to call __addMockProject first!");
+            }
+            const maybeTokenPair = this.lastProjectIdsAndTokens.find((pair) => pair.projectId === projectId);
+            const project = lang_utils_1.ensure(PROJECTS.find((p) => p.projectId === projectId));
+            if (!((this.auth.user && this.auth.token) ||
+                project.projectApiToken === (maybeTokenPair === null || maybeTokenPair === void 0 ? void 0 : maybeTokenPair.projectApiToken))) {
+                throw new Error("No user+token and project API tokens don't match");
+            }
+            // Server also require tokens for the dependencies.
+            const deps = [...getDeps([mockProjectToProjectVersionMeta(project)])];
+            if (!deps.every((dep) => this.lastProjectIdsAndTokens.find((p) => p.projectId === dep.projectId))) {
+                throw new Error("No user+token and project API tokens don't match on a dependency");
+            }
+            const mockComponents = getMockComponents(projectId, version, componentIdOrNames);
+            if (mockComponents.length <= 0) {
+                throw new Error(`Code gen failed: no components match the parameters ${JSON.stringify({ projectId, version, componentIdOrNames }, undefined, 2)}`);
+            }
+            const components = mockComponents.map((c) => genComponentBundle(c));
+            const result = {
+                components,
+                codeComponentMetas: [],
+                projectConfig: genProjectMetaBundle(projectId),
+                globalVariants: [],
+                usedTokens: genEmptyStyleTokensMap(),
+                iconAssets: [],
+                imageAssets: [],
+                checksums: {
+                    renderModuleChecksums: components.map((c) => [c.id, c.renderModule]),
+                    cssRulesChecksums: components.map((c) => [c.id, c.cssRules]),
+                    imageChecksums: [],
+                    iconChecksums: [],
+                    globalVariantChecksums: [],
+                    projectCssChecksum: "",
+                },
+            };
+            return result;
+        });
+    }
+    uploadBundle(projectId, bundleName, bundleJs, css, metaJson) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Unimplemented");
+        });
+    }
+    projectStyleTokens(projectId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Unimplemented");
+        });
+    }
+    projectIcons(projectId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Unimplemented");
+        });
+    }
+    projectSyncMetadata(projectId, revision, rethrowAppError) {
+        return __awaiter(this, void 0, void 0, function* () {
+            throw new Error("Unimplemented");
+        });
+    }
+    requiredPackages() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return {
+                "@plasmicapp/loader": "0.0.1",
+                "@plasmicapp/cli": "0.0.1",
+                "@plasmicapp/react-web": "0.0.1",
+                "@plasmicapp/react-web-runtime": "0.0.1",
+            };
+        });
+    }
+    connectSocket() { }
+    attachProjectIdsAndTokens(idsAndTokens) {
+        this.lastProjectIdsAndTokens = idsAndTokens;
+    }
+}
+api.PlasmicApi = PlasmicApi;
+api.clear = clear;
+api.getMockProject = getMockProject;
+api.addMockProject = addMockProject;
+api.stringToMockComponent = stringToMockComponent;
+module.exports = api;

package/dist/__tests__/code-utils-spec.d.ts

@@ -0,0 +1 @@
+export {};