extension 1.2.0 → 1.2.1

package/README.md

@@ -1,5 +1,111 @@
-# @extension-create/cli
+[action-image]: https://github.com/cezaraugusto/extension-create/actions/workflows/ci.yml/badge.svg?branch=main
+[action-url]: https://github.com/cezaraugusto/extension-create/actions
+[npm-image]: https://img.shields.io/npm/v/extension-create.svg
+[npm-url]: https://npmjs.org/package/extension-create
+[downloads-image]: https://img.shields.io/npm/dm/extension-create.svg
+[downloads-url]: https://npmjs.org/package/extension-create
+[node]: https://img.shields.io/node/v/extension-create.svg
+[node-url]: https://nodejs.org
+[prs]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
+[prs-url]: https://github.com/cezaraugusto/extension-create/blob/main/CONTRIBUTING.md
+[vunlerabilities]: https://snyk.io/test/github/cezaraugusto/extension-create/badge.svg
+[fossa-image]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension-create.svg?type=shield
+[fossa-url]: https://app.fossa.com/projects/git%2Bgithub.com%2Fcezaraugusto%2Fextension-create?ref=badge_large
 
-> The **CLI** part of [extension-create](https://github.com/cezaraugusto/extension-create). Available as a standalone package.
+# extension-create [![npm][npm-image]][npm-url] [![fossa][fossa-image]][fossa-url] [![workflow][action-image]][action-url] [![downloads][downloads-image]][downloads-url] [![PR's welcome][prs]][prs-url]
 
-This package stores the interface of `extension-create`, used by `[extension](aliases/extension)` and `[extension-create](aliases/extension-create)` aliases.
+<img alt="Logo" align="right" src="https://user-images.githubusercontent.com/4672033/102850460-4d22aa80-43f8-11eb-82db-9efce586f73e.png" width="25%" />
+
+Create cross-browser extensions with no build configuration.
+
+- [Creating an extension](#creating-an-extension) — How to create a new extension.
+- [Getting started immediately](#getting-started-immediately) — Get work done in no time.
+- [I have an extension](#i-have-an-extension) - Use only specific parts of `extension-create`.
+
+`extension-create` helps you develop cross-browser extensions with built-in support for module imports/exports, auto-reload, and more.
+
+## Creating an Extension
+
+```sh
+npx extension-create@latest create my-extension-hello
+cd my-extension-hello
+npm run dev
+```
+
+A new browser instance will open up with your extension ready for development.
+
+You are done. Time to hack on your extension!
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/4672033/106184765-ba0c2b80-6180-11eb-9d0f-d9d00d168290.gif" width="720" alt="npm start">
+</p>
+
+## Getting Started Immediately
+
+### Kickstart any sample from Chrome Extension Samples
+
+The [chrome-extensions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/) project is a great way to kickstart developing your extension.
+
+If we go to the samples repository and look for an extension sample to work, let's say the [page-redder](https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder) sample, all we need is to copy and paste it's URL as an argument for the start command:
+
+#### Command
+
+```sh
+# This command will:
+# 1. Download the Chrome extension sample URL to the current working directory
+# 2. Bundle the downloaded extension using extension-create
+# 3. Enable the extension in Chrome using a fresh user profile
+npx extension-create dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder
+```
+
+<p align="center">
+<img src="https://user-images.githubusercontent.com/4672033/106188671-04dc7200-6186-11eb-940a-52aebab46f31.gif" width="720" alt="npm start">
+</p>
+
+Will not only download the extension but also kickstart a Chrome instance in a fresh profile with your sample extension loaded and default auto-reload support. Try it yourself!
+
+### Use `Microsoft Edge` to kickstart any sample from [chrome-extesions-sample](https://github.com/GoogleChrome/chrome-extensions-samples/)
+
+**You read it!** Just run the command above with the `--browser=edge` flag:
+
+```sh
+npx extension-create dev --browser=edge https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder
+```
+
+And see a Chrome Extension sample running automatically. On Edge!
+
+## I have an extension
+
+Just add `extension-create` to your npm scripts. Here's how it should look in your `package.json`:
+
+```js
+{
+  // ...npm stuff,
+  "scripts": {
+    "start": "npx extension-create start",
+    "dev": "npx extension-create dev",
+    "build": "npx extension-create build"
+  },
+  "devDependencies": {
+    "extension-create": "latest"
+  }
+}
+```
+
+#### Using a specific browser for development
+
+| <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome.svg" alt="Chrome browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge.svg" alt="Microsoft Edge browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox.svg" alt="Mozilla Firefox browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari.svg" alt="Apple Safari browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera.svg" alt="Opera browser logo"> | <img width=120 src="https://raw.githubusercontent.com/alrra/browser-logos/main/src/chromium/chromium.svg" alt="Chromium browser logo"> |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| Google Chrome ✅                                                                                                                 | Microsoft Edge ✅                                                                                                                    | Mozilla Firefox ⛔️                                                                                                                         | Apple Safari ⛔️                                                                                                                       | Opera browser ⛔️                                                                                                             | Chromium (forks) 🤔                                                                                                                    |
+
+If you want to target a specific browser, just pass the `--browser` flag to the dev/start command (Chrome or Edge, soon others), like `npx extension-create dev --browser=edge`.
+
+That's it!
+
+## Program Options Table
+
+For a list of all commands available, see [OPTIONS_TABLE.md](OPTIONS_TABLE.md).
+
+## License
+
+MIT (c) Cezar Augusto.

package/dist/cli.js

@@ -117,7 +117,7 @@ var package_default = {
     node: ">=18"
   },
   name: "extension",
-  version: "1.2.0",
+  version: "1.2.1",
   description: "Create cross-browser extensions with no build configuration.",
   main: "./dist/cli.js",
   types: "./dist/cli.d.ts",
@@ -133,10 +133,11 @@ var package_default = {
     url: "https://cezaraugusto.com"
   },
   scripts: {
+    "compile:readme-files": "node ./scripts/copyMarkdownFilesToCli.js",
     "compile:tailwind-config": "node ./scripts/copyTailwindConfig.js",
     "compile:stylelint-config": "node ./scripts/copyStylelintConfig.js",
     "compile:cli": "tsup-node ./cli.ts --format cjs --dts --target=node18",
-    compile: "yarn compile:tailwind-config && yarn compile:stylelint-config && yarn compile:cli",
+    compile: "yarn compile:readme-files && yarn compile:tailwind-config && yarn compile:stylelint-config &&yarn compile:cli",
     clean: "rm -rf dist",
     test: "jest"
   },
@@ -182,12 +183,50 @@ if (import_semver.default.lte(process.version, "18.0.0")) {
 }
 var extensionCreate = import_commander.program;
 var isExtensionCreateNamespace = package_default.name === "extension-create";
+if (process.env.EXTENSION_ENV === "development") {
+  console.log(`Running extension-create via ${package_default.name}...`);
+}
 extensionCreate.name(package_default.name).description(package_default.description).version(package_default.version).addHelpText("after", messages_default.programHelp());
 extensionCreate.command("create", { isDefault: isExtensionCreateNamespace }).arguments("<project-name|project-path>").usage("create <project-name|project-path> [options]").description("Creates a new extension.").option(
   "-t, --template <template-name>",
   "specify a template for the created project"
-).action(async function(projectName, { template, targetDir }) {
-  await (0, import_create.default)(projectName, { targetDir, template });
+).action(async function(pathOrRemoteUrl, {
+  browser = "chrome",
+  template,
+  ...otherCommandOptions
+}) {
+  const vendors = browser.split(",");
+  switch (pathOrRemoteUrl) {
+    case "dev":
+      for (const vendor of vendors) {
+        await (0, import_develop.extensionDev)(pathOrRemoteUrl, {
+          mode: "development",
+          browser: vendor,
+          ...otherCommandOptions
+        });
+      }
+      break;
+    case "start":
+      for (const vendor of vendors) {
+        await (0, import_develop.extensionStart)(pathOrRemoteUrl, {
+          mode: "production",
+          browser: vendor,
+          ...otherCommandOptions
+        });
+      }
+      break;
+    case "build":
+      for (const vendor of vendors) {
+        await (0, import_develop.extensionBuild)(pathOrRemoteUrl, {
+          browser: vendor,
+          ...otherCommandOptions
+        });
+      }
+      break;
+    default:
+      await (0, import_create.default)(pathOrRemoteUrl, { template });
+      break;
+  }
 });
 extensionCreate.command("dev").arguments("[project-path|remote-url]").usage("dev [project-path|remote-url] [options]").description("Starts the development server (development mode)").option(
   "-u, --user-data-dir <path-to-file | boolean>",

package/package.json

@@ -9,7 +9,7 @@
     "node": ">=18"
   },
   "name": "extension",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Create cross-browser extensions with no build configuration.",
   "main": "./dist/cli.js",
   "types": "./dist/cli.d.ts",
@@ -25,10 +25,11 @@
     "url": "https://cezaraugusto.com"
   },
   "scripts": {
+    "compile:readme-files": "node ./scripts/copyMarkdownFilesToCli.js",
     "compile:tailwind-config": "node ./scripts/copyTailwindConfig.js",
     "compile:stylelint-config": "node ./scripts/copyStylelintConfig.js",
     "compile:cli": "tsup-node ./cli.ts --format cjs --dts --target=node18",
-    "compile": "yarn compile:tailwind-config && yarn compile:stylelint-config && yarn compile:cli",
+    "compile": "yarn compile:readme-files && yarn compile:tailwind-config && yarn compile:stylelint-config &&yarn compile:cli",
     "clean": "rm -rf dist",
     "test": "jest"
   },
@@ -63,4 +64,4 @@
     "tsup": "^8.0.1",
     "typescript": "5.3.3"
   }
-}
+}