@zeplin/cli - npm Package Compare versions

Comparing version 0.2.7 to 0.3.0

dist/package.json

 {
     "name": "@zeplin/cli",
-    "version": "0.2.7",
+    "version": "0.3.0",
     "description": "Zeplin CLI",
     "main": "./dist/src/app",
-    "types": "./dist/src/types/index",
+    "types": "./dist/types/index",
     "bin": {
@@ -12,5 +12,8 @@ "zeplin": "dist/src/app.js"
         "test": "jest",
-        "build": "tsc",
+        "build": "tsc && npm run prepare-api",
+        "build:clean": "rm -rf dist/ && npm run build",
         "lint": "eslint --ext .js,.ts .",
-        "prepare": "npm run build"
+        "prepare": "npm run build:clean",
+        "prepare-api": "api-extractor run",
+        "generate-docs": "api-documenter markdown --input-folder temp/ --output-folder docs/"
     },
@@ -32,2 +35,4 @@ "husky": {
     "devDependencies": {
+        "@microsoft/api-documenter": "^7.7.2",
+        "@microsoft/api-extractor": "^7.7.0",
         "@types/ci-info": "^2.0.0",
@@ -51,4 +56,3 @@ "@types/dedent": "^0.7.0",
         "ts-jest": "^24.1.0",
-        "ts-node": "^8.3.0",
-        "typescript": "^3.6.2"
+        "typescript": "^3.7.3"
     },
@@ -55,0 +59,0 @@ "dependencies": {

dist/src/api/index.d.ts

 import { AxiosInstance } from "axios";
 import { LoginRequest, LoginResponse } from "./interfaces";
-import { ConnectedComponentList } from "../commands/connect/interfaces";
+import { ConnectedComponentList } from "../commands/connect/interfaces/api";
 declare type BarrelType = "projects" | "styleguides";
@@ -5,0 +5,0 @@ export declare class ZeplinApi {

dist/src/commands/connect/config.d.ts

@@ -1,4 +0,4 @@
-import { ComponentConfigFile } from "./interfaces";
+import { ComponentConfigFile } from "./interfaces/config";
 declare const getComponentConfigFile: (filePath: string) => Promise<ComponentConfigFile>;
 declare const getComponentConfigFiles: (configFilePaths: string[]) => Promise<ComponentConfigFile[]>;
 export { getComponentConfigFile, getComponentConfigFiles };

dist/src/commands/connect/config.js

@@ -25,3 +25,3 @@ "use strict";
 const errors_1 = require("../../errors");
-const urlConfigSchema = joi_1.default.object({
+const linkConfigSchema = joi_1.default.object({
     type: joi_1.default.string(),
@@ -49,6 +49,11 @@ name: joi_1.default.string().optional(),
 });
+const pluginSchema = joi_1.default.object({
+    name: joi_1.default.string(),
+    config: joi_1.default.object().unknown().optional()
+});
 const componentConfigFileSchema = joi_1.default.object({
     projects: joi_1.default.array().items(joi_1.default.string()).optional(),
     styleguides: joi_1.default.array().items(joi_1.default.string()).optional(),
-    links: joi_1.default.array().items(urlConfigSchema).optional(),
+    plugins: joi_1.default.array().items(pluginSchema).optional(),
+    links: joi_1.default.array().items(linkConfigSchema).optional(),
     components: joi_1.default.array().items(componentConfigSchema).min(1),
@@ -55,0 +60,0 @@ github: githubConfigSchema.optional()

dist/src/commands/connect/index.js

@@ -27,4 +27,5 @@ "use strict";
             const componentConfigFiles = yield config_1.getComponentConfigFiles(configFiles);
-            const pluginInstances = yield plugin_1.importPlugins(plugins);
-            const connectedBarrels = yield plugin_1.connectComponentConfigFiles(componentConfigFiles, pluginInstances);
+            const globalPlugins = plugins.map(p => ({ name: p }));
+            const globalPluginInstances = yield plugin_1.initializePlugins(globalPlugins);
+            const connectedBarrels = yield plugin_1.connectComponentConfigFiles(componentConfigFiles, globalPluginInstances);
             if (devMode) {
@@ -31,0 +32,0 @@ console.log("Starting development server…");

dist/src/commands/connect/plugin.d.ts

@@ -1,4 +0,5 @@
-import { ComponentConfigFile, ConnectedBarrelComponents, ConnectPluginModule } from "./interfaces";
-declare const importPlugins: (plugins: string[]) => Promise<ConnectPluginModule[]>;
-declare const connectComponentConfigFiles: (componentConfigFiles: ComponentConfigFile[], pluginModules: ConnectPluginModule[]) => Promise<ConnectedBarrelComponents[]>;
-export { importPlugins, connectComponentConfigFiles };
+import { ComponentConfigFile, ConnectPluginInstance, Plugin } from "./interfaces/config";
+import { ConnectedBarrelComponents } from "./interfaces/api";
+declare const initializePlugins: (plugins: Plugin[]) => Promise<ConnectPluginInstance[]>;
+declare const connectComponentConfigFiles: (componentConfigFiles: ComponentConfigFile[], globalPluginInstances: ConnectPluginInstance[]) => Promise<ConnectedBarrelComponents[]>;
+export { initializePlugins, connectComponentConfigFiles };

dist/src/commands/connect/plugin.js

@@ -22,28 +22,51 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const chalk_1 = __importDefault(require("chalk"));
+const dedent_1 = __importDefault(require("dedent"));
+const url_join_1 = __importDefault(require("url-join"));
 const errors_1 = require("../../errors");
-const url_join_1 = __importDefault(require("url-join"));
 const defaults_1 = require("../../config/defaults");
-const dedent_1 = __importDefault(require("dedent"));
-const chalk_1 = __importDefault(require("chalk"));
-// Helper method to initialize plugin classses
-const createInstance = (pluginName, Plugin) => {
+const ALLOWED_LINK_TYPES = [
+    "styleguidist" /* styleguidist */,
+    "storybook" /* storybook */,
+    "github" /* github */,
+    "custom" /* custom */
+];
+const importPlugin = (pluginName) => __awaiter(void 0, void 0, void 0, function* () {
     try {
-        const plugin = new Plugin();
-        // Check that plugin implements the required methods
-        if (!plugin.process || !plugin.supports) {
-            throw new Error();
-        }
-        plugin.name = pluginName;
-        return plugin;
+        return (yield Promise.resolve().then(() => __importStar(require(pluginName)))).default;
     }
     catch (e) {
         const error = new errors_1.CLIError(dedent_1.default `
-            ${chalk_1.default.bold(pluginName)} does not conform Connected Components plugin interface.
-            Please make sure that the plugin implements the requirements listed on the documentation.
-            https://github.com/zeplin/cli/blob/develop/PLUGIN.md
-        `); // TODO add documentation link
+            Could not find plugin ${chalk_1.default.bold(pluginName)} failed.
+            Please make sure that it's globally installed and try again.
+                npm install -g ${pluginName}
+        `);
         error.stack = e.stack;
         throw error;
     }
-};
+});
+const createPluginInstance = (plugin) => __awaiter(void 0, void 0, void 0, function* () {
+    const PluginClass = yield importPlugin(plugin.name);
+    const pluginInstance = new PluginClass();
+    // Check that plugin implements the required functions
+    if (!(typeof pluginInstance.process === "function") ||
+        !(typeof pluginInstance.supports === "function")) {
+        throw new errors_1.CLIError(dedent_1.default `
+                ${chalk_1.default.bold(plugin.name)} does not conform Connected Components plugin interface.
+                Please make sure that the plugin implements the requirements listed on the documentation.
+                https://github.com/zeplin/cli/blob/develop/PLUGIN.md
+        `);
+    }
+    pluginInstance.name = plugin.name;
+    if (typeof pluginInstance.init === "function") {
+        pluginInstance.init({ config: plugin.config });
+    }
+    return pluginInstance;
+});
+const initializePlugins = (plugins) => __awaiter(void 0, void 0, void 0, function* () {
+    const imports = plugins.map(plugin => createPluginInstance(plugin));
+    const pluginInstances = yield Promise.all(imports);
+    return pluginInstances;
+});
+exports.initializePlugins = initializePlugins;
 const removeEmptyFields = (componentData) => {
@@ -55,2 +78,3 @@ if (typeof componentData.description === "undefined" || componentData.description.trim() === "") {
         delete componentData.snippet;
+        delete componentData.lang;
     }
@@ -67,56 +91,41 @@ return componentData;
 };
-const importPlugin = (pluginName) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return (yield Promise.resolve().then(() => __importStar(require(pluginName)))).default;
+const processLink = (link) => {
+    if (!ALLOWED_LINK_TYPES.includes(link.type)) {
+        link.type = "custom" /* custom */;
     }
-    catch (e) {
-        const error = new errors_1.CLIError(dedent_1.default `
-            Finding plugin module ${chalk_1.default.bold(pluginName)} failed.
-            Please make sure that it's installed and try again.
-        `);
-        error.stack = e.stack;
-        throw error;
-    }
-});
-const importPlugins = (plugins) => __awaiter(void 0, void 0, void 0, function* () {
-    const imports = plugins.map((pluginName) => __awaiter(void 0, void 0, void 0, function* () {
-        const pluginConstructor = yield importPlugin(pluginName);
-        return createInstance(pluginName, pluginConstructor);
-    }));
-    const pluginInstances = yield Promise.all(imports);
-    return pluginInstances;
-});
-exports.importPlugins = importPlugins;
+    return link;
+};
 const connectComponentConfig = (component, componentConfigFile, plugins) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a;
     const data = [];
-    if (plugins.length > 0) {
-        // Execute all language plugins on the component if supports
-        const pluginPromises = plugins.map((plugin) => __awaiter(void 0, void 0, void 0, function* () {
-            if (plugin.supports(component)) {
-                const componentData = yield plugin.process(component);
-                data.push(Object.assign({ plugin: plugin.name }, removeEmptyFields(componentData)));
-            }
-        }));
-        yield Promise.all(pluginPromises);
-    }
-    // TODO move urlPath preparation to service layer
     const urlPaths = [];
-    if (componentConfigFile.links) {
-        componentConfigFile.links.forEach(link => {
-            const { name, type, url } = link;
-            if (type === "storybook" && component.storybook) {
-                const preparedUrls = prepareStorybookLinks(url, component.storybook);
-                preparedUrls.forEach(preparedUrl => {
-                    urlPaths.push({ name, type, url: preparedUrl });
-                });
+    // Execute all plugins
+    const pluginPromises = plugins.map((plugin) => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        if (plugin.supports(component)) {
+            const componentData = yield plugin.process(component);
+            data.push(Object.assign({ plugin: plugin.name }, removeEmptyFields(componentData)));
+            (_b = componentData.links) === null || _b === void 0 ? void 0 : _b.forEach(link => urlPaths.push(processLink(link)));
+        }
+    }));
+    yield Promise.all(pluginPromises);
+    (_a = componentConfigFile.links) === null || _a === void 0 ? void 0 : _a.forEach(link => {
+        const { name, type, url } = link;
+        if (type === "storybook" && component.storybook) {
+            const preparedUrls = prepareStorybookLinks(url, component.storybook);
+            preparedUrls.forEach(preparedUrl => {
+                urlPaths.push({ name, type: "storybook" /* storybook */, url: preparedUrl });
+            });
+        }
+        else if (type === "styleguidist" && component.styleguidist) {
+            const encodedKind = encodeURIComponent(component.styleguidist.kind);
+            urlPaths.push({ name, type: "styleguidist" /* styleguidist */, url: url_join_1.default(url, `#${encodedKind}`) });
+        }
+        else if (component[type]) {
+            const customUrlPath = component[type].urlPath;
+            if (customUrlPath) {
+                urlPaths.push({ name, type: "custom" /* custom */, url: url_join_1.default(url, customUrlPath) });
             }
-            else if (type === "styleguidist" && component.styleguidist) {
-                const encodedKind = encodeURIComponent(component.styleguidist.kind);
-                urlPaths.push({ name, type, url: url_join_1.default(url, `#${encodedKind}`) });
-            }
-            else if (component[type]) {
-                urlPaths.push({ name, type: "custom", url: url_join_1.default(url, component[type].urlPath) });
-            }
-        });
-    }
+        }
+    });
     if (componentConfigFile.github) {
@@ -129,3 +138,3 @@ const url = componentConfigFile.github.url || defaults_1.defaults.github.url;
         urlPaths.push({
-            type: "github",
+            type: "github" /* github */,
             url: url_join_1.default(url, repository, "/blob/", branch, path, componentPath)
@@ -142,4 +151,14 @@ });
 });
-const connectComponentConfigFile = (componentConfigFile, connectPlugins) => __awaiter(void 0, void 0, void 0, function* () {
-    const connectedComponents = yield Promise.all(componentConfigFile.components.map(component => connectComponentConfig(component, componentConfigFile, connectPlugins)));
+const connectComponentConfigFile = (componentConfigFile, globalPluginInstances) => __awaiter(void 0, void 0, void 0, function* () {
+    const pluginsFromConfigFile = yield initializePlugins(componentConfigFile.plugins || []);
+    /**
+     * Global plugins and plugins from the config file may have the same plugin
+     * Filter global plugin instances to avoid duplicate plugin invocation.
+     *
+     * Favor plugins from config file against plugins from commandline args
+     * since config file may have custom plugin configuration.
+     */
+    const filteredGlobalPlugins = Array.from(globalPluginInstances)
+        .filter(g => !pluginsFromConfigFile.some(p => p.name === g.name));
+    const connectedComponents = yield Promise.all(componentConfigFile.components.map(component => connectComponentConfig(component, componentConfigFile, [...filteredGlobalPlugins, ...pluginsFromConfigFile])));
     return {
@@ -151,4 +170,4 @@ projects: componentConfigFile.projects || [],
 });
-const connectComponentConfigFiles = (componentConfigFiles, pluginModules) => {
-    const promises = componentConfigFiles.map(componentConfigFile => connectComponentConfigFile(componentConfigFile, pluginModules));
+const connectComponentConfigFiles = (componentConfigFiles, globalPluginInstances) => {
+    const promises = componentConfigFiles.map(componentConfigFile => connectComponentConfigFile(componentConfigFile, globalPluginInstances));
     return Promise.all(promises);
@@ -155,0 +174,0 @@ };

dist/src/commands/connect/server/index.d.ts

@@ -1,2 +0,2 @@
-import { ConnectedBarrelComponents, ConnectedComponent } from "../interfaces";
+import { ConnectedBarrelComponents, ConnectedComponent } from "../interfaces/api";
 export declare class ConnectDevServer {
@@ -3,0 +3,0 @@ connectedBarrels: ConnectedBarrelComponents[];

dist/src/commands/connect/service.d.ts

 import { ZeplinApi } from "../../api";
 import { AuthenticationService } from "../../service/auth";
-import { ConnectedBarrelComponents } from "./interfaces";
+import { ConnectedBarrelComponents } from "./interfaces/api";
 export declare class ConnectedComponentsService {
@@ -5,0 +5,0 @@ zeplinApi: ZeplinApi;

package.json

 {
   "name": "@zeplin/cli",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Zeplin CLI",
   "main": "./dist/src/app",
-  "types": "./dist/src/types/index",
+  "types": "./dist/types/index",
   "bin": {
@@ -12,5 +12,8 @@ "zeplin": "dist/src/app.js"
     "test": "jest",
-    "build": "tsc",
+    "build": "tsc && npm run prepare-api",
+    "build:clean": "rm -rf dist/ && npm run build",
     "lint": "eslint --ext .js,.ts .",
-    "prepare": "npm run build"
+    "prepare": "npm run build:clean",
+    "prepare-api": "api-extractor run",
+    "generate-docs": "api-documenter markdown --input-folder temp/ --output-folder docs/"
   },
@@ -32,2 +35,4 @@ "husky": {
   "devDependencies": {
+    "@microsoft/api-documenter": "^7.7.2",
+    "@microsoft/api-extractor": "^7.7.0",
     "@types/ci-info": "^2.0.0",
@@ -51,4 +56,3 @@ "@types/dedent": "^0.7.0",
     "ts-jest": "^24.1.0",
-    "ts-node": "^8.3.0",
-    "typescript": "^3.6.2"
+    "typescript": "^3.7.3"
   },
@@ -55,0 +59,0 @@ "dependencies": {

README.md

@@ -19,7 +19,5 @@ # Zeplin CLI
 
-Placeholder description here.
+You can use `connect` command to connect your components to Zeplin. `connect` command requires a component configuration file. This file contains all information about the components on your codebase and their corresponding Zeplin components. For details, please refer to the [configuration documentation](./docs/cli.componentconfigfile.md)
 
-```
-zeplin connect
-```
+You can also use [VSCode extension](https://marketplace.visualstudio.com/) to prepare the configuration file.
 
@@ -46,4 +44,20 @@ | Options               | Description                                     | Default                 |
 
-#### Connected Components Plugins
+### Connected Components Plugins
 
+You can enhance your connected components using plugins. Plugins can generate component descriptions, code snippets and special links for your components.
+
+#### Offical Plugins
+
+| NPM package name                   | Description                                         |
+|----------------------------------- |-----------------------------------------------------|
+| @zeplin/cli-connect-react-plugin   | Generates snippet samples using React PropTypes     |
+| @zeplin/cli-connect-angular-plugin | Generate snippets using Angular components          |
+| @zeplin/cli-connect-swift-plugin   | Generates snippet using Swift components **(*)**    |
+
+(*) - Since the language has no popular convention of component like React components, we have defined a sample component format for this language.
+The plugin is only compatible with this component convention. **Feel free to use these plugins as a base for a custom plugin compatible with your own codebase.**
+Check [Custom Plugins](#custom-plugins) below.
+
+#### Plugin Usage
+
 Install connect plugin using npm.
@@ -60,23 +74,6 @@
 
-#### Offical Plugins
+You can also fill `plugins` field in [component configuration file](./docs/cli.componentconfigfile.plugins.md) with NPM package names and their custom configuration parameters to execute them without `-p` argument.
 
-| NPM package name                  | Description                                         |
-|-----------------------------------|-----------------------------------------------------|
-| @zeplin/cli-connect-react-plugin  | Generates snippet samples using React PropTypes     |
-| @zeplin/cli-connect-swift-plugin  | Generates snippet using Swift components **(*)**    |
-| @zeplin/cli-connect-kotlin-plugin | Generate snippets using Kotlin components **(*)**   |
-
-(*) - Since the language has no popular convention of component like React components, we have defined a sample component for the language.
-The plugin is only compatible with this component convention. **Feel free to use these plugins as a base for a custom plugin compatible with your own codebase.**
-Check [Custom Plugins](#custom-plugins) below.
-
-
 #### Custom Plugins
 
-You can develop a custom plugin to extract/generate description and snippets of your code base.
-
-```
-npm install --save-dev @zeplin/cli
-```
-
-You can find details about plugin development [here](https://github.com/zeplin/cli/blob/develop/PLUGIN.md).
+You can develop a custom plugin to extract/generate description and snippets of your code base. You can find details about plugin development [here](./PLUGIN.md).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

201537

increased by60.97%

Number of package files

130

increased by10.17%

Lines of code

3831

increased by108.21%

Number of low supply chain risk alerts

2

decreased by-33.33%

Number of medium supply chain risk alerts

4

decreased by-20%

Worsened metrics

Dev dependency count

21

increased by5%

Number of lines in readme file

77

decreased by-3.75%

No dependency changes