Merge pull request #155 from akd-io/feature/136-support-pnpm

Add support for pnpm

Author: akd-io

README.md

@@ -57,6 +57,7 @@ The table below provides an overview of the technologies currently supported by
 | [React](https://reactjs.org/) ⚠                           | [Docs](https://reactjs.org/docs/getting-started.html) - [GitHub repo](https://github.com/facebook/react)                                                             |
 | [TypeScript](https://www.typescriptlang.org/) ⚠           | [Docs](https://www.typescriptlang.org/docs/) - [GitHub repo](https://github.com/microsoft/TypeScript)                                                                |
 | [ESLint](https://eslint.org/) ⚠                           | [Configuration](https://eslint.org/docs/user-guide/configuring/) - [Rules](https://eslint.org/docs/rules/) - [GitHub Repo](https://github.com/eslint/eslint)         |
+| [pnpm](https://pnpm.io/)                                  | [Docs](https://pnpm.io/motivation) - [GitHub repo](https://github.com/pnpm/pnpm)                                                                                     |
 | [Yarn](https://yarnpkg.com/)                              | [CLI Docs](https://yarnpkg.com/cli) - [GitHub repo](https://github.com/yarnpkg/berry)                                                                                |
 | [npm](https://www.npmjs.com/)                             | [CLI Docs](https://docs.npmjs.com/cli/)                                                                                                                              |
 | [Emotion](https://emotion.sh/docs/introduction)           | [Docs](https://emotion.sh/docs/introduction) - [GitHub repo](https://github.com/emotion-js/emotion)                                                                  |
@@ -94,19 +95,19 @@ ARGUMENTS
   APPNAME  The name of your app, optionally including a path prefix. Eg.: "my-app" or "path/to/my-app"
 
 OPTIONS
-  -h, --help                    Shows the CLI help information.
-  -v, --version                 Shows the CLI version information.
-  --chakra                      Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
-  --debug                       Show verbose error messages for debugging purposes.
-  --formatting-pre-commit-hook  Adds a formatting pre-commit hook. (Requires Prettier)
-  --formik                      Adds Formik. (Form library)
-  --framer-motion               Adds Framer Motion. (Animation library)
-  --github-actions              Adds a GitHub Actions continuous integration workflow.
-  --material-ui                 Adds Material UI. (Component library)
-  --package-manager=(yarn|npm)  Sets the preferred package manager. (Required)
-  --prettier                    Adds Prettier. (Code formatting)
-  --react-hook-form             Adds React Hook Form. (Form library)
-  --styling=<styling-method>    Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|tailwind-css|css-modules|css-modules-with-sass
+  -h, --help                         Shows the CLI help information.
+  -v, --version                      Shows the CLI version information.
+  --chakra                           Adds Chakra UI. (Component library) (Requires Emotion and Framer Motion)
+  --debug                            Show verbose error messages for debugging purposes.
+  --formatting-pre-commit-hook       Adds a formatting pre-commit hook. (Requires Prettier)
+  --formik                           Adds Formik. (Form library)
+  --framer-motion                    Adds Framer Motion. (Animation library)
+  --github-actions                   Adds a GitHub Actions continuous integration workflow.
+  --material-ui                      Adds Material UI. (Component library)
+  --package-manager=(pnpm|yarn|npm)  Sets the preferred package manager. (Required)
+  --prettier                         Adds Prettier. (Code formatting)
+  --react-hook-form                  Adds React Hook Form. (Form library)
+  --styling=<styling-method>         Sets the preferred styling method. (Required) <styling-method> = emotion|styled-components|tailwind-css|css-modules|css-modules-with-sass
 ```
 
 ## License

package.json

@@ -48,8 +48,8 @@
     "test": "yarn build && yarn run test-only",
     "test-only": "node lib/tests/e2e/test.js",
     "test:manual": "yarn build && node lib/tests/e2e/manual-test.js --debug",
-    "test:small": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=npm --styling=css-modules",
-    "test:large": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=yarn --styling=emotion --react-hook-form --formik --prettier --formatting-pre-commit-hook --chakra --framer-motion --github-actions",
+    "test:small": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=pnpm --styling=css-modules",
+    "test:large": "yarn build && node lib/tests/e2e/manual-test.js --debug --package-manager=pnpm --styling=emotion --react-hook-form --formik --prettier --formatting-pre-commit-hook --chakra --framer-motion --github-actions",
     "test:cna": "yarn build && node lib/tests/e2e/test-cna.js",
     "version": "oclif-dev readme && git add README.md",
     "format": "prettier --write --ignore-path=.prettierignore .",

src/main/create-next-stack-types.ts

@@ -26,8 +26,8 @@ export type CreateNextStackArgs = UnknownObject // Change to ParserOutput["args"
 export type CreateNextStackFlags = Partial<CreateNextStackParserOutput["flags"]> // Change to CreateNextStackParserOutput["flags"] if it becomes strongly typed in the future. (Currently not a Partial.)
 
 // Package manager flag:
-export const packageManagerOptions = ["yarn", "npm"] as const
-export type PackageManagerOption = typeof packageManagerOptions[number]
+export const packageManagerOptions = ["yarn", "npm", "pnpm"] as const
+export type PackageManager = typeof packageManagerOptions[number]
 export const writablePackageManagerOptions = packageManagerOptions as Writable<
   typeof packageManagerOptions
 >
@@ -67,7 +67,7 @@ export const validateArgs = (
 
 // Valid Flags type and type guard
 export type ValidCreateNextStackFlags = CreateNextStackFlags & {
-  "package-manager": PackageManagerOption
+  "package-manager": PackageManager
   styling: StylingOption
 }
 export const validateFlags = (

src/main/helpers/package-manager-utils.ts

@@ -1,26 +1,37 @@
-import { PackageManagerOption } from "../create-next-stack-types"
+import { PackageManager } from "../create-next-stack-types"
 
-export const installCommand: Record<PackageManagerOption, string> = {
+export const installCommandMap: Record<PackageManager, string> = {
+  pnpm: "pnpm install",
   yarn: "yarn",
   npm: "npm install",
 }
 
-export const cleanInstallCommand: Record<PackageManagerOption, string> = {
-  yarn: "yarn install",
+export const cleanInstallCommandMap: Record<PackageManager, string> = {
+  pnpm: "pnpm install --frozen-lockfile",
+  yarn: "yarn install --frozen-lockfile",
   npm: "npm ci",
 }
 
-export const installSubCommand: Record<PackageManagerOption, string> = {
+export const installSubCommandMap: Record<PackageManager, string> = {
+  pnpm: "add",
   yarn: "add",
   npm: "install",
 }
 
-export const uninstallSubCommand: Record<PackageManagerOption, string> = {
+export const uninstallSubCommandMap: Record<PackageManager, string> = {
+  pnpm: "remove",
   yarn: "remove",
   npm: "uninstall",
 }
 
-export const runCommand: Record<PackageManagerOption, string> = {
+export const runCommandMap: Record<PackageManager, string> = {
+  pnpm: "pnpm",
   yarn: "yarn",
   npm: "npm run",
 }
+
+export const saveDevModifierMap: Record<PackageManager, string> = {
+  pnpm: "--save-dev",
+  yarn: "--dev",
+  npm: "--save-dev",
+}

src/main/plugins/create-next-stack/add-readme/generate-readme.ts

@@ -1,41 +1,44 @@
 import endent from "endent"
 import { ValidCNSInputs } from "../../../create-next-stack-types"
 import { getProjectNameOfPath } from "../../../helpers/get-project-name-of-path"
+import { runCommandMap } from "../../../helpers/package-manager-utils"
 import { generateScriptTableRows } from "./generate-script-table-rows"
 import { generateTechnologyTableRows } from "./generate-technology-table-rows"
 
 export const generateReadme = async (
   inputs: ValidCNSInputs
-): Promise<string> => endent`
-  # ${getProjectNameOfPath(inputs.args.appName)}
+): Promise<string> => {
+  const { args, flags } = inputs
 
-  🎉 Congratulations, your project was successfully generated with [Create Next Stack](https://www.create-next-stack.com/)!
+  const runCommand = runCommandMap[flags["package-manager"]]
 
-  To get started, run:
+  return endent`
+    # ${getProjectNameOfPath(args.appName)}
 
-  \`\`\`bash
-  ${inputs.flags["package-manager"] === "yarn" ? "yarn dev" : "npm run dev"}
-  \`\`\`
+    🎉 Congratulations, your project was successfully generated with [Create Next Stack](https://www.create-next-stack.com/)!
 
-  ## Scripts
+    To get started, run:
 
-  The table below provides names and descriptions of the npm scripts available in this project.
+    \`\`\`bash
+    ${runCommand} dev
+    \`\`\`
 
-  Each script is run using \`${
-    inputs.flags["package-manager"] === "yarn" ? "yarn" : "npm run"
-  } <script-name>\`. For example: \`${
-  inputs.flags["package-manager"] === "yarn" ? "yarn" : "npm run"
-} dev\`.
+    ## Scripts
 
-  | Name | Description |
-  | ---- | ----------- |
-  ${await generateScriptTableRows(inputs)}
+    The table below provides names and descriptions of the npm scripts available in this project.
 
-  ## Technologies
+    Each script is run using \`${runCommand} <script-name>\`. For example: \`${runCommand} dev\`.
 
-  The table below gives an overview of the technologies used in this project, as well as places to learn more about them.
+    | Name | Description |
+    | ---- | ----------- |
+    ${await generateScriptTableRows(inputs)}
 
-  | Name | Links |
-  | ---- | ----- |
-  ${await generateTechnologyTableRows(inputs)}
-`
+    ## Technologies
+
+    The table below gives an overview of the technologies used in this project, as well as places to learn more about them.
+
+    | Name | Links |
+    | ---- | ----- |
+    ${await generateTechnologyTableRows(inputs)}
+  `
+}

src/main/plugins/create-next-stack/create-next-stack.ts

@@ -14,7 +14,7 @@ import { logWarning } from "../../logging"
 import { createPlugin } from "../../plugin"
 import { runCommand } from "../../run-command"
 import { getNameVersionCombo, install, uninstall } from "../../setup/packages"
-import { filterPlugins, plugins } from "../../setup/setup"
+import { filterPlugins } from "../../setup/setup"
 import { prettierPlugin } from "../prettier"
 import { generateApp } from "./add-content/pages/generate-app"
 import { generateDocument } from "./add-content/pages/generate-document"
@@ -123,7 +123,7 @@ export const createNextStackPlugin = createPlugin({
           ]
         })
 
-        const devDeps = plugins.flatMap((plugin) => {
+        const devDeps = filterPlugins(inputs).flatMap((plugin) => {
           return plugin.devDependencies != null
             ? Object.values(plugin.devDependencies)
             : []
@@ -139,15 +139,15 @@ export const createNextStackPlugin = createPlugin({
     },
     uninstallTemporaryDependencies: {
       description: "uninstalling temporary dependencies",
-      run: async ({ flags }) => {
-        const tmpDeps = plugins.flatMap((plugin) => {
+      run: async (inputs) => {
+        const tmpDeps = filterPlugins(inputs).flatMap((plugin) => {
           return plugin.tmpDependencies != null
             ? Object.values(plugin.tmpDependencies)
             : []
         })
 
         if (tmpDeps.length > 0) {
-          await uninstall(tmpDeps, flags["package-manager"])
+          await uninstall(tmpDeps, inputs.flags["package-manager"])
         }
       },
     },

src/main/plugins/github-actions.ts

@@ -3,8 +3,8 @@ import path from "path"
 import { ValidCNSInputs } from "../create-next-stack-types"
 import { makeDirectory, writeFile } from "../helpers/io"
 import {
-  cleanInstallCommand,
-  runCommand,
+  cleanInstallCommandMap,
+  runCommandMap,
 } from "../helpers/package-manager-utils"
 import { createPlugin, evalActive } from "../plugin"
 import { prettierPlugin } from "./prettier"
@@ -82,24 +82,24 @@ const generateCiYml = (inputs: ValidCNSInputs): string => {
               cache: "${packageManager}"
 
           - name: "Install dependencies"
-            run: ${cleanInstallCommand[packageManager]}
+            run: ${cleanInstallCommandMap[packageManager]}
 
           ${
             evalActive(prettierPlugin.active, inputs)
               ? endent`
                   - name: "Check format"
-                    run: ${runCommand[packageManager]} format:check
+                    run: ${runCommandMap[packageManager]} format:check
                 `
               : ""
           }
 
           - name: "Lint"
-            run: ${runCommand[packageManager]} lint
+            run: ${runCommandMap[packageManager]} lint
 
           - name: "Build"
-            run: ${runCommand[packageManager]} build
+            run: ${runCommandMap[packageManager]} build
 
           - name: "Test"
-            run: ${runCommand[packageManager]} test
+            run: ${runCommandMap[packageManager]} test
   `
 }

src/main/plugins/next.ts

@@ -11,7 +11,7 @@ import { generateNextConfig } from "./create-next-stack/add-next-config/generate
 
 const createNextAppPackage: Package = {
   name: "create-next-app",
-  version: "~13.2.3", // Note: Equivalent to 13.2.x. However, when used with npx, the version is interpreted exactly instead of as a range.
+  version: "13.2.3",
 }
 
 export const nextPlugin = createPlugin({
@@ -85,7 +85,7 @@ export const nextPlugin = createPlugin({
         }
 
         await runCommand("npx", [
-          getNameVersionCombo(createNextAppPackage), // Note: npx ignores version ranges. So the tilde in packages["create-next-app"] is ignored and the exact version is used.
+          getNameVersionCombo(createNextAppPackage),
           ...createNextAppArgs,
         ])
 

src/main/plugins/pnpm.ts

@@ -0,0 +1,34 @@
+import { createPlugin } from "../plugin"
+import { runCommand } from "../run-command"
+import { getNameVersionCombo } from "../setup/packages"
+
+export const pnpmPlugin = createPlugin({
+  name: "pnpm",
+  description: "Adds support for pnpm",
+  active: ({ flags }) => Boolean(flags["package-manager"] === "pnpm"),
+  dependencies: { pnpm: { name: "pnpm", version: "latest" } },
+  technologies: [
+    {
+      name: "pnpm",
+      description:
+        "pnpm is a JavaScript package manager compatible with the npm registry that performs better than Yarn and npm by using hard links and symlinks to allow package caching across projects.",
+      links: [
+        { title: "Website", url: "https://pnpm.io/" },
+        { title: "Docs", url: "https://pnpm.io/motivation" },
+        { title: "GitHub", url: "https://github.com/pnpm/pnpm" },
+      ],
+    },
+  ],
+  steps: {
+    updatePnpm: {
+      description: "updating pnpm",
+      run: async () => {
+        await runCommand("npm", [
+          "i",
+          "-g",
+          getNameVersionCombo(pnpmPlugin.dependencies.pnpm),
+        ])
+      },
+    },
+  },
+} as const)

src/main/plugins/yarn.ts

@@ -6,7 +6,7 @@ export const yarnPlugin = createPlugin({
   name: "Yarn",
   description: "Adds support for Yarn",
   active: ({ flags }) => Boolean(flags["package-manager"] === "yarn"),
-  dependencies: { yarn: { name: "yarn", version: "^1.0.0" } },
+  dependencies: { yarn: { name: "yarn", version: "latest" } },
   technologies: [
     {
       name: "Yarn",