refactor: Extracting project creation out to own package

.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`).

.github/workflows/ci.yml

@@ -18,7 +18,7 @@ jobs:
  runs-on: ubuntu-latest
  strategy:
  matrix:
- node-version: [12.x, 14.x]
+ node-version: [14.x, 16.x]
  steps:
  - uses: actions/checkout@v2
  with:

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.

package.json

@@ -4,6 +4,8 @@
  "packages/*"
  ],
  "scripts": {
+ "cli": "yarn workspace cli",
+ "create-cli": "yarn workspace @preactjs/create-cli-app",
  "pretest": "yarn lint",
  "test": "lerna run test --stream",
  "prettier": "prettier --write **/*.{js,ts,tsx,json,css,scss,md,yml}",
@@ -16,13 +18,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",
  "lerna": "^4.0.0",
  "lint-staged": "^11.0.0",
  "ncp": "^2.0.0",

packages/cli/global.d.ts

@@ -7,6 +7,15 @@ declare namespace jest {
  }
 }
 
+// Modified from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/shelljs/index.d.ts
+declare module 'shelljs' {
+ const shell: {
+ cd: (string) => void;
+ exec: (string) => { stdout: string; stderr: string; code: number };
+ };
+ export = shell;
+}
+
 declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;