Create, test and publish Zeplin extensions with no build configuration. ⚗️🦄

If you use npm 5.2+, you can run Zeplin Extension Manager directly to create an extension:

npx zem create my-extension

Otherwise, you can install Zeplin Extension Manager globally and run it right after:

npm install -g zem
zem create my-extension

You can also use -y option to create package with default configuration.

npx zem create my-extension -y

or

npm install -g zem
zem create my-extension -y

Extensions created using the manager have built-in scripts to ease development, build, test and publish processes. No need to setup tools like Webpack or Babel—they are preconfigured and hidden by the manager.

Starts a local server, serving the extension (by default, at http://localhost:7070). Hostname, port and the list of hosts allowed to access the local server can be provided as options.

Follow the tutorial to learn how to add a local extension to a Zeplin project.

Usage: npm start -- [options]

Options:

  -h --host <host>                    Host name (default: localhost)
  -p --port <port>                    Port (default: 7070)
  -a --allowed-hosts <allowed-hosts>  Allowed hosts

Builds extension source, creating resources targeting production environment.

Usage: npm run build -- [options]

Options:

  -d --dev  Target development environment

Executes extension function(s) with sample data.

This is a super useful script to debug and test your extension, without running in it Zeplin.

Usage: npm run exec -- [function-name] [options]

Options:

  --no-build                    Use existing build.
  --defaults <default-options>  Set default extension option values (e.g, flag=false,prefix=\"pre\")

Runs test scripts via jest. You can check jest for options.

Usage: npm run test -- [options]

Cleans build directory.

Publish extension, sending it for review to be listed on extensions.zeplin.io.

Usage: npm run publish -- [options]

Options:

  --path <build-path>           Path for the extension build to publish (default: Path used by the build command)

Zeplin Extension Manager can authenticate using an access token instead of your Zeplin credentials which makes it easier to integrate it into your CI workflow.

1. Get a zem access token from your Profile in Zeplin.
2. Set ZEM_ACCESS_TOKEN environment variable in your CI.

• Modules are transpiled to target Safari 9.1, as extensions are run both on the Web app and on the Mac app using JavaScriptCore, supporting macOS El Capitan.
• Add an ESLint configuration and the source code will automatically be linted before building.
• You can create webpack.zem.js at your root to customize webpack config. The module should export a function that takes current webpack config as an argument and return customized webpack config. For example:

module.exports = function({ module: { rules, ...module }, ...webpackConfig }) {
  return {
    ...webpackConfig,

    resolve: {
      extensions: [".ts"]
    },
    module: {
      ...module,
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
        ...rules,
      ],
    },
  };
};

baybara-pavel/zero

Similar to zem, Zero lets you quickly start working on a Zeplin extension with Webpack.