@zeplin/cli - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

components.json

@@ -6,11 +6,8 @@ {
     "styleguides": [],
-    "plugins": [
-        {
-            "name": "@zeplin/cli-connect-react-plugin",
-            "config": {
-                "url": "",
-                "startScript": ""
-            }
+    "plugins": [{
+        "name": "@zeplin/cli-connect-react-plugin",
+        "config": {
+            "url": "http://localhost:9009"
         }
-    ],
+    }],
     "links": [
@@ -49,26 +46,17 @@ {
             ],
-            "metadata": {
-                "storybook": {
-                    "kind": "HeleKind",
-                    "stories": [
-                        "HeleS   tory1",
-                        "HeleSt    ory2"
-                    ]
-                },
-                "styleguidist": {
-                    "kind": "HeleStyleguidist"
-                },
-                "designsystem": {
-                    "urlPath": "/example/Button"
-                }
+            "storybook": {
+                "kind": "HeleKind",
+                "stories": [
+                    "HeleS   tory1",
+                    "HeleSt    ory2"
+                ]
+            },
+            "styleguidist": {
+                "kind": "HeleStyleguidist"
+            },
+            "designsystem": {
+                "urlPath": "/example/Button"
             }
-        },
-        {
-            "name": "Text Area",
-            "path": "MyComponent.jsx",
-            "zeplinNames": [
-                "asdasd"
-            ]
         }
     ]
 }

dist/package.d.ts

@@ -36,3 +36,2 @@ export declare const name: string;
     "@types/ci-info": string;
-    "@types/dedent": string;
     "@types/express": string;
@@ -62,3 +61,3 @@ "@types/fs-extra": string;
     "commander": string;
-    "dedent": string;
+    "endent": string;
     "express": string;
@@ -69,3 +68,4 @@ "fs-extra": string;
     "jsonwebtoken": string;
+    "ts-dedent": string;
     "url-join": string;
 };

dist/package.json

 {
     "name": "@zeplin/cli",
-    "version": "0.3.0",
+    "version": "0.3.1",
     "description": "Zeplin CLI",
@@ -37,3 +37,2 @@ "main": "./dist/src/app",
         "@types/ci-info": "^2.0.0",
-        "@types/dedent": "^0.7.0",
         "@types/express": "^4.17.2",
@@ -63,3 +62,3 @@ "@types/fs-extra": "^8.0.0",
         "commander": "^3.0.1",
-        "dedent": "^0.7.0",
+        "endent": "^1.3.0",
         "express": "^4.17.1",
@@ -70,4 +69,5 @@ "fs-extra": "^8.1.0",
         "jsonwebtoken": "^8.5.1",
+        "ts-dedent": "^1.1.0",
         "url-join": "^4.0.1"
     }
 }

dist/src/app.js

@@ -39,3 +39,3 @@ #!/usr/bin/env node
     .version(package_json_1.version);
-console.log(`Zeplin CLI - v${package_json_1.version}\n`);
+console.log(`\nZeplin CLI - v${package_json_1.version}\n`);
 const connectCommand = program.command("connect")
@@ -42,0 +42,0 @@ .description("Connect components to code")

dist/src/commands/connect/index.js

@@ -16,3 +16,3 @@ "use strict";
 const chalk_1 = __importDefault(require("chalk"));
-const dedent_1 = __importDefault(require("dedent"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const config_1 = require("./config");
@@ -45,3 +45,3 @@ const plugin_1 = require("./plugin");
         catch (error) {
-            error.message = dedent_1.default `
+            error.message = ts_dedent_1.default `
             ${chalk_1.default.bold `Connecting components to Zeplin components failed.`}
@@ -48,0 +48,0 @@

dist/src/commands/connect/plugin.js

@@ -23,3 +23,3 @@ "use strict";
 const chalk_1 = __importDefault(require("chalk"));
-const dedent_1 = __importDefault(require("dedent"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const url_join_1 = __importDefault(require("url-join"));
@@ -39,3 +39,3 @@ const errors_1 = require("../../errors");
     catch (e) {
-        const error = new errors_1.CLIError(dedent_1.default `
+        const error = new errors_1.CLIError(ts_dedent_1.default `
             Could not find plugin ${chalk_1.default.bold(pluginName)} failed.
@@ -55,3 +55,3 @@ Please make sure that it's globally installed and try again.
         !(typeof pluginInstance.supports === "function")) {
-        throw new errors_1.CLIError(dedent_1.default `
+        throw new errors_1.CLIError(ts_dedent_1.default `
                 ${chalk_1.default.bold(plugin.name)} does not conform Connected Components plugin interface.
@@ -105,7 +105,16 @@ Please make sure that the plugin implements the requirements listed on the documentation.
         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)));
+        try {
+            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)));
+            }
         }
+        catch (err) {
+            throw new errors_1.CLIError(ts_dedent_1.default `
+                Error occurred while processing ${chalk_1.default.bold(component.path)} with ${chalk_1.default.bold(plugin.name)}:
+
+                ${err.message}
+            `, err.stack);
+        }
     }));
@@ -112,0 +121,0 @@ yield Promise.all(pluginPromises);

dist/src/commands/connect/service.js

@@ -16,3 +16,3 @@ "use strict";
 const chalk_1 = __importDefault(require("chalk"));
-const dedent_1 = __importDefault(require("dedent"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const ci_info_1 = require("ci-info");
@@ -37,3 +37,3 @@ const api_1 = require("../../api");
                     if (ci_info_1.isCI) {
-                        error.message = dedent_1.default `
+                        error.message = ts_dedent_1.default `
                     ${error.message}
@@ -40,0 +40,0 @@ Please update ${chalk_1.default.dim `ZEPLIN_ACCESS_TOKEN`} environment variable.`;

dist/src/commands/login/index.js

@@ -23,3 +23,3 @@ "use strict";
 const chalk_1 = __importDefault(require("chalk"));
-const dedent_1 = __importDefault(require("dedent"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const inquirer_1 = __importDefault(require("inquirer"));
@@ -32,3 +32,3 @@ const envUtil = __importStar(require("../../util/env"));
         if (tokenFromEnv) {
-            console.log(dedent_1.default `${chalk_1.default.dim `ZEPLIN_ACCESS_TOKEN`} is already set.
+            console.log(ts_dedent_1.default `${chalk_1.default.dim `ZEPLIN_ACCESS_TOKEN`} is already set.
                             Remove the environment variable to login via CLI.`);
@@ -35,0 +35,0 @@ }

dist/src/errors/CLIError.d.ts

 export declare class CLIError extends Error {
     details: any;
     constructor(message: string, details?: any);
+    static isCLIError(err: Error): err is CLIError;
 }

dist/src/errors/CLIError.js

@@ -9,4 +9,7 @@ "use strict";
     }
+    static isCLIError(err) {
+        return err instanceof CLIError;
+    }
 }
 exports.CLIError = CLIError;
 //# sourceMappingURL=CLIError.js.map

dist/src/util/command.js

 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+const chalk_1 = __importDefault(require("chalk"));
+const ts_dedent_1 = __importDefault(require("ts-dedent"));
 const env_1 = require("../util/env");
+const errors_1 = require("../errors");
 const errorHandler = (error) => {
     console.log(); // Line break before error output.
     if (env_1.isVerbose()) {
-        console.error(error);
+        console.error(chalk_1.default.redBright(error.stack));
+        if (errors_1.CLIError.isCLIError(error) && error.details) {
+            console.error(chalk_1.default.redBright(ts_dedent_1.default `
+                Details:
+                ${error.details}`));
+        }
     }
     else {
-        console.error(error.message);
+        console.error(ts_dedent_1.default `
+            ${chalk_1.default.redBright(error.message)}
+
+            Use --verbose flag for detailed error output.
+        `);
     }
+    console.log();
     process.exit(1);
@@ -13,0 +29,0 @@ };

package.json

 {
   "name": "@zeplin/cli",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Zeplin CLI",
@@ -37,3 +37,2 @@ "main": "./dist/src/app",
     "@types/ci-info": "^2.0.0",
-    "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.2",
@@ -63,3 +62,3 @@ "@types/fs-extra": "^8.0.0",
     "commander": "^3.0.1",
-    "dedent": "^0.7.0",
+    "endent": "^1.3.0",
     "express": "^4.17.1",
@@ -70,4 +69,5 @@ "fs-extra": "^8.1.0",
     "jsonwebtoken": "^8.5.1",
+    "ts-dedent": "^1.1.0",
     "url-join": "^4.0.1"
   }
 }

PLUGIN.md

@@ -5,3 +5,3 @@ # Connected Components - Plugin Development
 
-Plugins can process the components to generate descriptions and snippets of the them and also create links to other tools.
+Plugins can process the components to generate descriptions and snippets of them and also create links to other tools(e.g. wiki page, design system).
 
@@ -12,3 +12,3 @@ ## Implementation
  - Export the class as a default export in your package entry point
- - Publish to NPM and start to use it as explained in [README.md](./README.md)
+ - Publish to NPM and start to use it as explained in [README.md](./README.md#plugin-usage)
 
@@ -22,5 +22,4 @@ If you want to have type definitions for plugin development install `@zeplin/cli` package as dev dependency.
 
-### Example
-index.ts
-```ts
+### Example of `index.ts`
+```typescript
 import { ConnectPlugin, ComponentConfig, ComponentData, PrismLang } from "@zeplin/cli";
@@ -32,3 +31,3 @@
      * CLI invokes this method once the package is loaded.
-     * PluginContext contains arbitrary configuration set for the plugin
+     * pluginContext contains arbitrary configuration set for the plugin
      * on components config file.
@@ -39,3 +38,3 @@ *
     */
-    async init(context: PluginContext): Promise<void> {
+    async init(pluginContext: PluginContext): Promise<void> {
         // implementation
@@ -54,3 +53,3 @@ }
      * CLI invokes this method for each component in the configuration file
-     * to determine if this plugin should process this component
+     * to determine if this plugin should process this component.
     */
@@ -57,0 +56,0 @@ supports(context: ComponentConfig): boolean {

README.md

 # Zeplin CLI
+Zeplin CLI tool analyzes your components’ source code and publish a high-level overview to be displayed in Zeplin to all developers in your team. You can either publish changes to your components manually, or better yet, you can always keep them in sync by running the Zeplin CLI tool as a step in your CI.
 
+## Connected Components
+
+With the Connected Components feature, as a developer, you will now be able to **connect components in your codebase to their design counterparts** in Zeplin.
+
+Once set up, while inspecting a design in Zeplin, you will be presented with a high-level overview of the component, including links to any source of documentation used by your team, like Storybook or GitHub.
+
+![Connected Components](https://miro.medium.com/max/3200/1*[e-mail])
+
+Zeplin automatically collects your component documentation based on the platform/framework you’re working with; `JSDoc` and `PropTypes` for the React example above.
+
+This high-level overview is completely flexible and can be tailored to your team’s needs. You can customize the description, the code snippet and add links to any source like your internal wiki or your design system documentation.
+
+Here is a quick demo to easily engage this feature: https://zpl.io/connected-components-demo
+
+To summarize the process:
+1. Create a `components.json` file in your repository by using Zeplin Visual Studio Code extension.
+2. Use `connect` command to connect your codebase components as defined in the configuration file. For details, please refer to the [configuration documentation](./docs/cli.componentconfigfile.md)
 ## Installation
@@ -11,45 +29,27 @@
 
-### Usage
+### Overview
 
 ```
-zeplin <command> [options]
+zeplin connect [options]
 ```
 
-## Connected Components
-
-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)
-
-You can also use [VSCode extension](https://marketplace.visualstudio.com/) to prepare the configuration file.
-
 | Options               | Description                                     | Default                 |
 |-----------------------|-------------------------------------------------|-------------------------|
-| -f, --file <file>     | Full path to components config file             | .zeplin/components.json |
+| -f, --file <file>     | Full path to components configuration file      | .zeplin/components.json |
 | -d, --dev             | Activate development mode                       | false                   |
-| --port <port>         | Optional port number for development mode       | 9756                    |
 | -p, --plugin <plugin> | NPM package name of a Zeplin CLI connect plugin |                         |
-| -h, --help            | output usage information                        |                         |
+| -h, --help            | Output usage information                        |                         |
+| --verbose             | Enable verbose logs                             |                         |
 
-#### Examples:
-
-Specify a custom path for components config file.
-```
-zeplin connect -f path/to/your-components.json
-```
-
-You can use multiple config files and multiple plugins at once.
-```
-zeplin connect -f path/to/components.json -f path/to/other/components.json -p plugin-npm-package-name -p other-plugin-npm-package-name
-```
-
 ### Connected Components Plugins
 
-You can enhance your connected components using plugins. Plugins can generate component descriptions, code snippets and special links for your components.
+You can enhance your connected components by using plugins. Plugins can generate component descriptions, code snippets and special links for your components.
 
-#### Offical Plugins
+#### Plugins Developed by Zeplin
 
-| 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 **(*)**    |
+| NPM package name                                                                           | Description                                         |
+|------------------------------------------------------------------------------------------- |-----------------------------------------------------|
+| [@zeplin/cli-connect-react-plugin](https://github.com/zeplin/cli-connect-react-plugin)     | Generates snippet samples using React PropTypes     |
+| [@zeplin/cli-connect-angular-plugin](https://github.com/zeplin/cli-connect-angular-plugin) | Generate snippets using Angular components          |
+| [@zeplin/cli-connect-swift-plugin](https://github.com/zeplin/cli-connect-swift-plugin)     | Generates snippet using Swift components **(*)**    |
 
@@ -72,7 +72,36 @@ (*) - Since the language has no popular convention of component like React components, we have defined a sample component format for this language.
 ```
-
 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.
 
+#### Advanced usage
+Specify a custom path for `components.json` file.
+
+```
+zeplin connect -f path/to/components.json
+```
+
+You can use multiple configuration files and multiple plugins at once. In this case, the configuration files will be analyzed for both plugins.
+
+```
+zeplin connect -f path/to/components.json -f path/to/other/components.json -p plugin-npm-package-name -p other-plugin-npm-package-name
+```
+
 #### Custom Plugins
 
-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).
+You can develop a custom plugin to extract/generate description and snippets of your code base.
+See details about plugin development [here](./PLUGIN.md).
+
+### Using on CI Pipeline
+
+Zeplin CLI can make authentication using an access token instead of your Zeplin credentials. This is convenient to integrate connecting components into your CI pipeline.
+
+1. Get a CLI access token from [your profile page](https://beta.zeplin.io/profile/connectedapps).
+2. Set `ZEPLIN_ACCESS_TOKEN` environment variable in your CI setup.
+
+Alternatively, you can use this token in your local machine as well.
+```
+export ZEPLIN_ACCESS_TOKEN=<YOUR_ACCESS_TOKEN_HERE>
+zeplin connect <options>
+```
+
+## Contribution & Issue Tracking
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for details.

Fixed alerts

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

Improved metrics

Total package byte prevSize

207481

increased by2.95%

Dev dependency count

20

decreased by-4.76%

Lines of code

3846

increased by0.39%

Number of lines in readme file

106

increased by37.66%

Number of medium supply chain risk alerts

3

decreased by-25%

Worsened metrics

Dependency count

13

increased by8.33%

Dependency changes

• + Addedendent@^1.3.0

• + Addedts-dedent@^1.1.0

• + Addedendent@1.4.1(transitive)

• + Addedfast-json-parse@1.0.3(transitive)

• + Addedobjectorarray@1.0.5(transitive)

• + Addedts-dedent@1.2.0(transitive)

• - Removeddedent@^0.7.0