{"id":13527582,"url":"https://github.com/zeplin/zem","last_synced_at":"2025-05-07T04:07:50.180Z","repository":{"id":46075034,"uuid":"124045132","full_name":"zeplin/zem","owner":"zeplin","description":"Create, test and publish Zeplin extensions with no build configuration ⚗️🦄","archived":false,"fork":false,"pushed_at":"2025-05-06T20:30:55.000Z","size":1179,"stargazers_count":80,"open_issues_count":9,"forks_count":9,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-05-07T04:07:43.946Z","etag":null,"topics":["zeplin","zeplin-extension","zeplin-extension-manager"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeplin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-06T08:22:44.000Z","updated_at":"2025-01-01T23:35:28.000Z","dependencies_parsed_at":"2022-09-26T20:21:26.607Z","dependency_job_id":null,"html_url":"https://github.com/zeplin/zem","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fzem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fzem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fzem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeplin%2Fzem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeplin","download_url":"https://codeload.github.com/zeplin/zem/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252810273,"owners_count":21807759,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["zeplin","zeplin-extension","zeplin-extension-manager"],"created_at":"2024-08-01T06:01:52.609Z","updated_at":"2025-05-07T04:07:50.158Z","avatar_url":"https://github.com/zeplin.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Zeplin Extension Manager\n\nCreate, test and publish Zeplin extensions with no build configuration. ⚗️🦄\n\n## Getting started\n\nYou can run Zeplin Extension Manager directly to create an extension:\n\n```sh\nnpx zem create my-extension\n```\n\nYou can also use `-y` option to create package with default configuration.\n\n```sh\nnpx zem create my-extension -y\n```\n\n## Overview\n\nExtensions 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.\n\n### Scripts\n\n#### `npm start`\n\nStarts 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.\n\nFollow the [tutorial](https://github.com/zeplin/zeplin-extension-documentation/blob/master/tutorial.md#adding-a-local-extension) to learn how to add a local extension to a Zeplin project.\n\n```\nUsage: npm start -- [options]\n\nOptions:\n\n  -h --host \u003chost\u003e                    Host name (default: localhost)\n  -p --port \u003cport\u003e                    Port (default: 7070)\n  -a --allowed-hosts \u003callowed-hosts\u003e  Allowed hosts\n```\n\n#### `npm run build`\n\nBuilds extension source, creating resources targeting production environment.\n\n```\nUsage: npm run build -- [options]\n\nOptions:\n\n  -d --dev  Target development environment\n```\n\n#### `npm run exec`\n\nExecutes extension function(s) with sample data.\n\nThis is a super useful script to debug and test your extension, without running in it Zeplin.\n\n```\nUsage: npm run exec -- [function-name] [options]\n\nOptions:\n\n  --no-build                    Use existing build.\n  --defaults \u003cdefault-options\u003e  Set default extension option values (e.g, flag=false,prefix=\\\"pre\\\")\n```\n\n#### `npm run test`\n\nRuns 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](https://github.com/zeplin/react-native-extension/blob/develop/src/index.test.js).\n\n```\nUsage: npm run test -- [options]\n```\n\nYou can check [Jest's docs](https://jestjs.io/docs/en/cli.html) for options.\n\n#### `npm run clean`\n\nCleans build directory.\n\n\n#### `npm run publish`\n\nPublish extension, sending it for review to be listed on [extensions.zeplin.io](https://extensions.zeplin.io).\n\n```\nUsage: npm run publish -- [options]\n\nOptions:\n\n  --path \u003cbuild-path\u003e           Path for the extension build to publish (default: Path used by the build command)\n```\n\n\n##### Usage with access token:\n\nZeplin Extension Manager can authenticate using an access token instead of your Zeplin credentials which makes it easier to integrate it into your CI workflow.\n\n1. Get a `zem` access token from your [Profile](https://app.zeplin.io/profile/connected-apps) in Zeplin.\n2. Set `ZEM_ACCESS_TOKEN` environment variable in your CI.\n\n## Tidbits\n\n- 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.\n- Add an ESLint configuration and the source code will automatically be linted before building.\n- You can create `webpack.zem.js` at your root to customize webpack config. The module should export a function\nthat takes current webpack config as an argument and return customized webpack config. For example:\n\n```javascript\nmodule.exports = function({ module: { rules, ...module }, ...webpackConfig }) {\n  return {\n    ...webpackConfig,\n\n    resolve: {\n      extensions: [\".ts\"]\n    },\n    module: {\n      ...module,\n      rules: [\n        {\n          test: /\\.tsx?$/,\n          use: \"ts-loader\",\n          exclude: /node_modules/,\n        },\n        ...rules,\n      ],\n    },\n  };\n};\n```\n\n## Community solutions\n\n### Zero\n\n[baybara-pavel/zero](https://github.com/baybara-pavel/zero)\n\nSimilar to zem, Zero lets you quickly start working on a Zeplin extension with Webpack.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeplin%2Fzem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeplin%2Fzem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeplin%2Fzem/lists"}