Create, test and publish Zeplin extensions with no build configuration. ⚗️🦄
You can run Zeplin Extension Manager directly to create an extension:
npx zem create my-extension
You can also use -y
option to create package with default configuration.
npx 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:https://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. Extension packages created using zem include a boilerplate test module. It uses Jest's snapshot testing feature to match the output of your extensions with the expected results. For example, you can take a look at our React Native extension.
Usage: npm run test -- [options]
You can check Jest's docs for 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.
- Get a
zem
access token from your Profile in Zeplin. - 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,
],
},
};
};
Similar to zem, Zero lets you quickly start working on a Zeplin extension with Webpack.