fix: better instructions for package managers

Author: jherr

src/create-app.ts

@@ -59,6 +59,44 @@ function createTemplateFile(
     targetFileName?: string,
     extraTemplateValues?: Record<string, any>,
   ) {
+    function getPackageManagerAddScript(
+      packageName: string,
+      isDev: boolean = false,
+    ) {
+      let command
+      switch (options.packageManager) {
+        case 'yarn':
+        case 'pnpm':
+          command = isDev
+            ? `${options.packageManager} add ${packageName} --dev`
+            : `${options.packageManager} add ${packageName}`
+          break
+        default:
+          command = isDev
+            ? `${options.packageManager} install ${packageName} -D`
+            : `${options.packageManager} install ${packageName}`
+          break
+      }
+      return command
+    }
+
+    function getPackageManagerRunScript(scriptName: string) {
+      let command
+      switch (options.packageManager) {
+        case 'yarn':
+        case 'pnpm':
+          command = `${options.packageManager} ${scriptName}`
+          break
+        case 'deno':
+          command = `${options.packageManager} task ${scriptName}`
+          break
+        default:
+          command = `${options.packageManager} run ${scriptName}`
+          break
+      }
+      return command
+    }
+
     const templateValues = {
       packageManager: options.packageManager,
       projectName: projectName,
@@ -77,7 +115,11 @@ function createTemplateFile(
         {},
       ),
       addOns: options.chosenAddOns,
+
       ...extraTemplateValues,
+
+      getPackageManagerAddScript,
+      getPackageManagerRunScript,
     }
 
     const template = await environment.readFile(

templates/react/base/README.md.ejs

@@ -6,23 +6,23 @@ To run this application:
 
 ```bash
 <%= packageManager %> install
-<%= packageManager %> start
+<%= getPackageManagerRunScript('start') %>  
 ```
 
 # Building For Production
 
 To build this application for production:
 
 ```bash
-<%= packageManager %> run build
+<%= getPackageManagerRunScript('build') %>
 ```
 
 ## Testing
 
 This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
 
 ```bash
-<%= packageManager %> run test
+<%= getPackageManagerRunScript('test') %>
 ```
 
 ## Styling
@@ -36,9 +36,9 @@ This project uses CSS for styling.
 This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
 
 ```bash
-<%= packageManager %> run lint
-<%= packageManager %> run format
-<%= packageManager %> run check # runs both lint and format together
+<%= getPackageManagerRunScript('lint') %>
+<%= getPackageManagerRunScript('format') %>
+<%= getPackageManagerRunScript('check') %>
 ```
 <% } %>
 
@@ -183,7 +183,7 @@ More information on layouts can be found in the [Layouts documentation](hthttps:
 First you need to add the Vite plugin for Tanstack Router:
 
 ```bash
-<%= packageManager %> install -D @tanstack/router-plugin
+<%= getPackageManagerAddScript("@tanstack/router-plugin", true) %>
 ```
 
 From there you need to update your `vite.config.js` file to use the plugin:
@@ -391,7 +391,7 @@ React-Query is an excellent addition or alternative to route loading and integra
 First add your dependencies:
 
 ```bash
-<%= packageManager %> install @tanstack/react-query @tanstack/react-query-devtools
+<%= getPackageManagerAddScript("@tanstack/react-query @tanstack/react-query-devtools") %>
 ```
 
 Next we'll need to creata query client and provider. We recommend putting those in `main.<%= jsx %>`.
@@ -474,7 +474,7 @@ Another common requirement for React applications is state management. There are
 First you need to add TanStack Store as a dependency:
 
 ```bash
-<%= packageManager %> install @tanstack/store
+<%= getPackageManagerAddScript("@tanstack/store") %>
 ```
 
 Now let's create a simple counter in the `src/App.<%= jsx %>` file as a demonstration.

templates/solid/base/README.md.ejs

@@ -6,15 +6,15 @@ To run this application:
 
 ```bash
 <%= packageManager %> install
-<%= packageManager %> start
+<%= getPackageManagerRunScript('start') %>
 ```
 
 # Building For Production
 
 To build this application for production:
 
 ```bash
-<%= packageManager %> run build
+<%= getPackageManagerRunScript('build') %>
 ```
 
 ## Styling