refactor: Extracting project creation out to own package (#1708)

* refactor: Extracting out project creation to own package * docs: Adding changeset * refactor: Misc edits to common deps & workspace helper scripts * test: Fixing 'create' test suite * ci: Increase minimum Node version * chore: Fix typos * docs: Update ReadMe instructions * chore: Better (and untaken) package name * docs: Update changeset * test: Update 'create' test suite & build output hashes * docs: Expounding upon changeset
preactjs · Jan 7, 2023 · d353b87 · d353b87
1 parent 6088c86
commit d353b87
Show file tree

Hide file tree

Showing 24 changed files with 365 additions and 618 deletions.
diff --git a/.changeset/tiny-garlics-argue.md b/.changeset/tiny-garlics-argue.md
@@ -0,0 +1,14 @@
+---
+'preact-cli': major
+'create-preact-cli': major
+---
+
+Extracts project creation functionality from `preact-cli` into `create-preact-cli`
+
+Setting up new `preact-cli` projects with `npx` is slow, as all dependencies of `preact-cli` would need to be installed, even though only a handful are used for project initialization. On the other hand, suggesting global installs is less than attractive due to NPM's poor default install location (requires `sudo`) and this can get out of sync over time.
+
+By extracting project initialization into its own package, we can provide much, much faster project setup times.
+
+To setup a new project, users will use `npm init preact-cli ...` or `yarn create preact-cli ...`.
+
+Additionally, the `--yarn` flag has been removed in favour of using the yarn initializer (`yarn create`).
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
     timeout-minutes: 10
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
     steps:
       - uses: actions/checkout@v2
         with:

diff --git a/README.md b/README.md
@@ -50,13 +50,15 @@
 ### Usage
 
 ```sh
-$ npx preact-cli create <template-name> <project-name>
+$ npm init preact-cli <template-name> <project-name>
+
+$ yarn create preact-cli <template-name> <project-name>
 ```
 
 Example:
 
 ```sh
-$ npx preact-cli create default my-project
+$ npm init preact-cli default my-project
 ```
 
 The above command pulls the template from [preactjs-templates/default], prompts for some information, and generates the project at `./my-project/`.
@@ -65,7 +67,7 @@ The above command pulls the template from [preactjs-templates/default], prompts
 
 The purpose of official preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to preact.js.
 
-All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npx preact-cli create <template-name> <project-name>` to use that template.
+All official project templates are repos in the [preactjs-templates organization]. When a new template is added to the organization, you will be able to run `npm init preact-cli <template-name> <project-name>` to use that template.
 
 Current available templates include:
 
@@ -81,35 +83,40 @@ Current available templates include:
 
 - [widget-typescript] - Widget template implemented in TypeScript
 
-> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npx preact-cli create <username>/<repository> <project-name>`
+> 💁 Tip: Any Github repo with a `'template'` folder can be used as a custom template: <br /> `npm init preact-cli <username>/<repository> <project-name>`
 
 ### CLI Options
 
+#### preact list
+
+Lists all the official preactjs-cli repositories
+
+```sh
+$ [npm init / yarn create] preact-cli list
+```
+
 #### preact create
 
 Create a project to quick start development.
 
 ```
-$ npx preact-cli create <template-name> <project-name>
+$ [npm init / yarn create] preact-cli <template-name> <project-name>
 
   --name        The application name.
   --cwd         A directory to use instead of $PWD.
   --force       Force option to create the directory for the new app  [boolean] [default: false]
-  --yarn        Installs dependencies with yarn.                      [boolean] [default: false]
   --git         Initialize version control using git.                 [boolean] [default: false]
   --install     Installs dependencies.                                [boolean] [default: true]
 ```
 
-Note: If you don't specify enough data to the `npx preact-cli create` command, it will prompt the required questions.
-
 #### preact build
 
 Create a production build
 
 You can disable `default: true` flags by prefixing them with `--no-<option>`; for example, `--no-sw`, `--no-prerender`, and `--no-inline-css`.
 
 ```
-$ preact build
+$ [npm run / yarn] preact build
 
     --src              Specify source directory  (default src)
     --dest             Specify output directory  (default build)
@@ -134,7 +141,7 @@ $ preact build
 Spin up a development server with multiple features like `hot-module-replacement`, `module-watcher`
 
 ```
-$ preact watch
+$ [npm run / yarn] preact watch
 
     --src              Specify source directory  (default src)
     --cwd              A directory to use instead of $PWD  (default .)
@@ -161,18 +168,14 @@ Note:
 1. You can run dev server using `HTTPS` then you can use the following `HTTPS=true preact watch`
 2. You can run the dev server on a different port using `PORT=8091 preact watch`
 
-#### preact list
+#### preact info
 
-Lists all the official preactjs-cli repositories
+Prints debugging information concerning the local environment.
 
 ```sh
-$ preact list
+$ [npm run / yarn] preact info
 ```
 
-#### preact info
-
-Prints debugging information concerning the local environment.
-
 ### Pre-rendering
 
 Preact CLI in order to follow [PRPL] pattern renders initial route (`/`) into generated static `index.html` - this ensures that users get to see your page before any JavaScript is run, and thus providing users with slow devices or poor connection your website's content much faster.

diff --git a/package.json b/package.json
@@ -4,9 +4,12 @@
     "packages/*"
   ],
   "scripts": {
+    "cli": "yarn workspace preact-cli",
+    "create-cli": "yarn workspace create-preact-cli",
     "pretest": "yarn lint",
     "test": "run-p test:*",
-    "test:cli": "yarn workspace preact-cli test",
+    "test:cli": "yarn cli test",
+    "test:create-cli": "yarn create-cli test",
     "prettier": "prettier --write **/*.{js,ts,tsx,json,css,scss,md,yml}",
     "lint": "eslint .",
     "changeset": "changeset",
@@ -25,13 +28,15 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.0",
     "@changesets/cli": "^2.16.0",
+    "@types/jest": "^24.9.1",
     "babel-eslint": "^10.0.1",
     "eslint": "^7.24.0",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "husky": "^6.0.0",
+    "jest": "^24.9.0",
     "lint-staged": "^11.0.0",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",

diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -5,9 +5,7 @@
   "keywords": [
     "preact",
     "cli",
-    "pwa",
-    "project",
-    "generator"
+    "pwa"
   ],
   "homepage": "https://github.com/preactjs/preact-cli",
   "bugs": "https://github.com/preactjs/preact-cli/issues",
@@ -52,7 +50,6 @@
     "console-clear": "^1.0.0",
     "copy-webpack-plugin": "^9.1.0",
     "critters-webpack-plugin": "^3.0.2",
-    "cross-spawn-promise": "^0.10.1",
     "css-loader": "^6.6.0",
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "^16.0.0",
@@ -61,8 +58,6 @@
     "esm": "^3.2.25",
     "fork-ts-checker-webpack-plugin": "^7.1.1",
     "get-port": "^5.0.0",
-    "gittar": "^0.1.0",
-    "glob": "^8.0.3",
     "html-webpack-plugin": "^5.5.0",
     "html-webpack-skip-assets-plugin": "1.0.3",
     "ip": "^1.1.8",
@@ -72,13 +67,11 @@
     "minimatch": "^3.0.3",
     "native-url": "0.3.4",
     "optimize-plugin": "^1.3.0",
-    "ora": "^5.4.1",
     "postcss": "^8.4.13",
     "postcss-load-config": "^3.1.4",
     "postcss-loader": "^6.2.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "promise-polyfill": "^8.2.3",
-    "prompts": "^2.4.2",
     "react-refresh": "0.11.0",
     "rimraf": "^3.0.2",
     "sade": "^1.8.1",
@@ -90,15 +83,13 @@
     "terser-webpack-plugin": "^5.3.0",
     "typescript": "^4.6.4",
     "update-notifier": "^5.1.0",
-    "validate-npm-package-name": "^4.0.0",
     "webpack": "^5.67.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.9.0",
     "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.8.0",
     "webpack-plugin-replace": "^1.2.0",
     "webpack-remove-empty-scripts": "^0.7.2",
-    "which": "^2.0.2",
     "workbox-cacheable-response": "^6.5.3",
     "workbox-core": "^6.5.3",
     "workbox-precaching": "^6.5.3",
@@ -108,9 +99,8 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/jest": "^24.9.1",
+    "glob": "^8.0.3",
     "html-looks-like": "^1.0.2",
-    "jest": "^24.9.0",
     "less": "^4.1.3",
     "less-loader": "^10.2.0",
     "ncp": "^2.0.0",