create-tsrouter-app 0.3.0-alpha.5 → 0.3.0-alpha.7

package/README.md

@@ -43,7 +43,7 @@ Available options:
 
 - `--template <type>`: Choose between `file-router`, `typescript`, or `javascript`
 - `--tailwind`: Enable Tailwind CSS
-- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, or `bun`)
+- `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`)
 - `--no-git`: Do not initialize a git repository
 
 When using flags, the CLI will display which options were provided and only prompt for the remaining choices.
@@ -88,7 +88,7 @@ Enable Tailwind CSS either through the interactive CLI or by adding the `--tailw
 
 ### Package Manager
 
-Choose your preferred package manager (`npm`, `bun`, `yarn`, or `pnpm`) either through the interactive CLI or using the `--package-manager` flag.
+Choose your preferred package manager (`npm`, `bun`, `yarn`, `pnpm`, or `deno`) either through the interactive CLI or using the `--package-manager` flag.
 
 Extensive documentation on using the TanStack Router, migrating to a File Base Routing approach, as well as integrating [@tanstack/react-query](https://tanstack.com/query/latest) and [@tanstack/store](https://tanstack.com/store/latest) can be found in the generated `README.md` for your project.
 

package/dist/add-ons.js

@@ -5,7 +5,7 @@ import { fileURLToPath } from 'node:url';
 function isDirectory(path) {
     return statSync(path).isDirectory();
 }
-export async function getAllAddOns(framework) {
+export async function getAllAddOns(framework, template) {
     const addOns = [];
     for (const type of ['add-on', 'example']) {
         const addOnsBase = fileURLToPath(new URL(`../templates/${framework}/${type}`, import.meta.url));
@@ -15,6 +15,10 @@ export async function getAllAddOns(framework) {
         for (const dir of await readdirSync(addOnsBase).filter((file) => isDirectory(resolve(addOnsBase, file)))) {
             const filePath = resolve(addOnsBase, dir, 'info.json');
             const fileContent = await readFile(filePath, 'utf-8');
+            const info = JSON.parse(fileContent);
+            if (!info.templates.includes(template)) {
+                continue;
+            }
             let packageAdditions = {};
             if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
                 packageAdditions = JSON.parse(await readFile(resolve(addOnsBase, dir, 'package.json'), 'utf-8'));
@@ -24,9 +28,9 @@ export async function getAllAddOns(framework) {
                 readme = await readFile(resolve(addOnsBase, dir, 'README.md'), 'utf-8');
             }
             addOns.push({
+                ...info,
                 id: dir,
                 type,
-                ...JSON.parse(fileContent),
                 directory: resolve(addOnsBase, dir),
                 packageAdditions,
                 readme,
@@ -36,9 +40,9 @@ export async function getAllAddOns(framework) {
     return addOns;
 }
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
-export async function finalizeAddOns(framework, chosenAddOnIDs) {
+export async function finalizeAddOns(framework, template, chosenAddOnIDs) {
     const finalAddOnIDs = new Set(chosenAddOnIDs);
-    const addOns = await getAllAddOns(framework);
+    const addOns = await getAllAddOns(framework, template);
     for (const addOnID of finalAddOnIDs) {
         const addOn = addOns.find((a) => a.id === addOnID);
         if (!addOn) {

package/dist/create-app.js

@@ -124,22 +124,30 @@ async function copyFilesRecursively(source, target, copyFile, templateFile) {
         }
     }
     else {
-        if (source.endsWith('.ejs')) {
-            const targetPath = target.replace('.ejs', '');
-            await mkdir(dirname(targetPath), {
-                recursive: true,
-            });
+        let targetFile = basename(target).replace(/_dot_/, '.');
+        let isTemplate = false;
+        if (targetFile.endsWith('.ejs')) {
+            targetFile = targetFile.replace('.ejs', '');
+            isTemplate = true;
+        }
+        let isAppend = false;
+        if (targetFile.endsWith('.append')) {
+            targetFile = targetFile.replace('.append', '');
+            isAppend = true;
+        }
+        const targetPath = resolve(dirname(target), targetFile);
+        await mkdir(dirname(targetPath), {
+            recursive: true,
+        });
+        if (isTemplate) {
             await templateFile(source, targetPath);
         }
         else {
-            await mkdir(dirname(target), {
-                recursive: true,
-            });
-            if (source.endsWith('.append')) {
-                await appendFile(target.replace('.append', ''), (await readFile(source)).toString());
+            if (isAppend) {
+                await appendFile(targetPath, (await readFile(source)).toString());
             }
             else {
-                await copyFile(source, target);
+                await copyFile(source, targetPath);
             }
         }
     }
@@ -160,7 +168,7 @@ export async function createApp(options) {
     await mkdir(targetDir, { recursive: true });
     // Setup the .vscode directory
     await mkdir(resolve(targetDir, '.vscode'), { recursive: true });
-    await copyFile(resolve(templateDirBase, '.vscode/settings.json'), resolve(targetDir, '.vscode/settings.json'));
+    await copyFile(resolve(templateDirBase, '_dot_vscode/settings.json'), resolve(targetDir, '.vscode/settings.json'));
     // Fill the public directory
     await mkdir(resolve(targetDir, 'public'), { recursive: true });
     copyFiles(templateDirBase, [
@@ -267,7 +275,7 @@ export async function createApp(options) {
         }
     }
     // Add .gitignore
-    await copyFile(resolve(templateDirBase, 'gitignore'), resolve(targetDir, '.gitignore'));
+    await copyFile(resolve(templateDirBase, '_dot_gitignore'), resolve(targetDir, '.gitignore'));
     // Create the README.md
     await templateFile(templateDirBase, 'README.md.ejs');
     // Install dependencies
@@ -286,7 +294,7 @@ export async function createApp(options) {
 
 Use the following commands to start your app:
 % cd ${options.projectName}
-% ${options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
+% ${options.packageManager === 'deno' ? 'deno start' : options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
 
 Please read README.md for more information on testing, styling, adding routes, react-query, etc.
 `);

package/dist/options.js

@@ -173,10 +173,10 @@ export async function promptForOptions(cliOptions) {
         options.packageManager = cliOptions.packageManager;
     }
     // Select any add-ons
-    const allAddOns = await getAllAddOns(options.framework);
+    const allAddOns = await getAllAddOns(options.framework, options.mode);
     const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on');
     let selectedAddOns = [];
-    if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+    if (options.typescript && cliOptions.addOns && addOns.length > 0) {
         const value = await multiselect({
             message: 'What add-ons would you like for your project:',
             options: addOns.map((addOn) => ({
@@ -186,7 +186,7 @@ export async function promptForOptions(cliOptions) {
             })),
             required: false,
         });
-        if (isCancel(selectedAddOns)) {
+        if (isCancel(value)) {
             cancel('Operation cancelled.');
             process.exit(0);
         }
@@ -195,9 +195,7 @@ export async function promptForOptions(cliOptions) {
     // Select any examples
     const examples = allAddOns.filter((addOn) => addOn.type === 'example');
     let selectedExamples = [];
-    if (options.mode === FILE_ROUTER &&
-        cliOptions.addOns &&
-        examples.length > 0) {
+    if (options.typescript && cliOptions.addOns && examples.length > 0) {
         const value = await multiselect({
             message: 'Would you like any examples?',
             options: examples.map((addOn) => ({
@@ -214,10 +212,7 @@ export async function promptForOptions(cliOptions) {
         selectedExamples = value;
     }
     if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-        options.chosenAddOns = await finalizeAddOns(options.framework, [
-            ...selectedAddOns,
-            ...selectedExamples,
-        ]);
+        options.chosenAddOns = await finalizeAddOns(options.framework, options.mode, [...selectedAddOns, ...selectedExamples]);
         options.tailwind = true;
     }
     else {

package/dist/package-manager.js

@@ -3,6 +3,7 @@ export const SUPPORTED_PACKAGE_MANAGERS = [
     'yarn',
     'pnpm',
     'bun',
+    'deno',
 ];
 export const DEFAULT_PACKAGE_MANAGER = 'npm';
 export function getPackageManager() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-tsrouter-app",
-  "version": "0.3.0-alpha.5",
+  "version": "0.3.0-alpha.7",
   "description": "Tanstack Application Builder",
   "bin": "./dist/index.js",
   "type": "module",

package/src/add-ons.ts

@@ -34,6 +34,7 @@ export type AddOn = {
   name: string
   description: string
   link: string
+  templates: Array<string>
   main?: Array<{
     imports: Array<string>
     initialize: Array<string>
@@ -78,6 +79,7 @@ function isDirectory(path: string): boolean {
 
 export async function getAllAddOns(
   framework: Framework,
+  template: string,
 ): Promise<Array<AddOn>> {
   const addOns: Array<AddOn> = []
 
@@ -95,6 +97,11 @@ export async function getAllAddOns(
     )) {
       const filePath = resolve(addOnsBase, dir, 'info.json')
       const fileContent = await readFile(filePath, 'utf-8')
+      const info = JSON.parse(fileContent)
+
+      if (!info.templates.includes(template)) {
+        continue
+      }
 
       let packageAdditions: Record<string, string> = {}
       if (existsSync(resolve(addOnsBase, dir, 'package.json'))) {
@@ -109,9 +116,9 @@ export async function getAllAddOns(
       }
 
       addOns.push({
+        ...info,
         id: dir,
         type,
-        ...JSON.parse(fileContent),
         directory: resolve(addOnsBase, dir),
         packageAdditions,
         readme,
@@ -125,11 +132,12 @@ export async function getAllAddOns(
 // Turn the list of chosen add-on IDs into a final list of add-ons by resolving dependencies
 export async function finalizeAddOns(
   framework: Framework,
+  template: string,
   chosenAddOnIDs: Array<string>,
 ): Promise<Array<AddOn>> {
   const finalAddOnIDs = new Set(chosenAddOnIDs)
 
-  const addOns = await getAllAddOns(framework)
+  const addOns = await getAllAddOns(framework, template)
 
   for (const addOnID of finalAddOnIDs) {
     const addOn = addOns.find((a) => a.id === addOnID)

package/src/create-app.ts

@@ -195,23 +195,31 @@ async function copyFilesRecursively(
       )
     }
   } else {
-    if (source.endsWith('.ejs')) {
-      const targetPath = target.replace('.ejs', '')
-      await mkdir(dirname(targetPath), {
-        recursive: true,
-      })
+    let targetFile = basename(target).replace(/_dot_/, '.')
+    let isTemplate = false
+    if (targetFile.endsWith('.ejs')) {
+      targetFile = targetFile.replace('.ejs', '')
+      isTemplate = true
+    }
+    let isAppend = false
+    if (targetFile.endsWith('.append')) {
+      targetFile = targetFile.replace('.append', '')
+      isAppend = true
+    }
+
+    const targetPath = resolve(dirname(target), targetFile)
+
+    await mkdir(dirname(targetPath), {
+      recursive: true,
+    })
+
+    if (isTemplate) {
       await templateFile(source, targetPath)
     } else {
-      await mkdir(dirname(target), {
-        recursive: true,
-      })
-      if (source.endsWith('.append')) {
-        await appendFile(
-          target.replace('.append', ''),
-          (await readFile(source)).toString(),
-        )
+      if (isAppend) {
+        await appendFile(targetPath, (await readFile(source)).toString())
       } else {
-        await copyFile(source, target)
+        await copyFile(source, targetPath)
       }
     }
   }
@@ -252,7 +260,7 @@ export async function createApp(options: Required<Options>) {
   // Setup the .vscode directory
   await mkdir(resolve(targetDir, '.vscode'), { recursive: true })
   await copyFile(
-    resolve(templateDirBase, '.vscode/settings.json'),
+    resolve(templateDirBase, '_dot_vscode/settings.json'),
     resolve(targetDir, '.vscode/settings.json'),
   )
 
@@ -427,7 +435,7 @@ export async function createApp(options: Required<Options>) {
 
   // Add .gitignore
   await copyFile(
-    resolve(templateDirBase, 'gitignore'),
+    resolve(templateDirBase, '_dot_gitignore'),
     resolve(targetDir, '.gitignore'),
   )
 
@@ -453,7 +461,7 @@ export async function createApp(options: Required<Options>) {
 
 Use the following commands to start your app:
 % cd ${options.projectName}
-% ${options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
+% ${options.packageManager === 'deno' ? 'deno start' : options.packageManager} ${isAddOnEnabled('start') ? 'dev' : 'start'}
 
 Please read README.md for more information on testing, styling, adding routes, react-query, etc.
 `)

package/src/options.ts

@@ -203,10 +203,10 @@ export async function promptForOptions(
   }
 
   // Select any add-ons
-  const allAddOns = await getAllAddOns(options.framework)
+  const allAddOns = await getAllAddOns(options.framework, options.mode)
   const addOns = allAddOns.filter((addOn) => addOn.type === 'add-on')
   let selectedAddOns: Array<string> = []
-  if (options.mode === FILE_ROUTER && cliOptions.addOns && addOns.length > 0) {
+  if (options.typescript && cliOptions.addOns && addOns.length > 0) {
     const value = await multiselect({
       message: 'What add-ons would you like for your project:',
       options: addOns.map((addOn) => ({
@@ -217,21 +217,17 @@ export async function promptForOptions(
       required: false,
     })
 
-    if (isCancel(selectedAddOns)) {
+    if (isCancel(value)) {
       cancel('Operation cancelled.')
       process.exit(0)
     }
-    selectedAddOns = value as Array<string>
+    selectedAddOns = value
   }
 
   // Select any examples
   const examples = allAddOns.filter((addOn) => addOn.type === 'example')
   let selectedExamples: Array<string> = []
-  if (
-    options.mode === FILE_ROUTER &&
-    cliOptions.addOns &&
-    examples.length > 0
-  ) {
+  if (options.typescript && cliOptions.addOns && examples.length > 0) {
     const value = await multiselect({
       message: 'Would you like any examples?',
       options: examples.map((addOn) => ({
@@ -250,10 +246,11 @@ export async function promptForOptions(
   }
 
   if (selectedAddOns.length > 0 || selectedExamples.length > 0) {
-    options.chosenAddOns = await finalizeAddOns(options.framework, [
-      ...selectedAddOns,
-      ...selectedExamples,
-    ])
+    options.chosenAddOns = await finalizeAddOns(
+      options.framework,
+      options.mode,
+      [...selectedAddOns, ...selectedExamples],
+    )
     options.tailwind = true
   } else {
     options.chosenAddOns = []

package/src/package-manager.ts

@@ -3,6 +3,7 @@ export const SUPPORTED_PACKAGE_MANAGERS = [
   'yarn',
   'pnpm',
   'bun',
+  'deno',
 ] as const
 export type PackageManager = (typeof SUPPORTED_PACKAGE_MANAGERS)[number]
 export const DEFAULT_PACKAGE_MANAGER: PackageManager = 'npm'

package/templates/react/add-on/clerk/info.json

@@ -2,6 +2,7 @@
   "name": "Clerk",
   "description": "Add Clerk authentication to your application.",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://clerk.com",
   "main": {
     "imports": ["import { ClerkProvider } from '@clerk/clerk-react'"],

package/templates/react/add-on/convex/info.json

@@ -3,6 +3,7 @@
   "description": "Add the Convex database to your application.",
   "link": "https://convex.dev",
   "phase": "add-on",
+  "templates": ["file-router"],
   "main": {
     "imports": [
       "import { ConvexProvider } from 'convex/react'",

package/templates/react/add-on/form/info.json

@@ -2,6 +2,7 @@
   "name": "Form",
   "description": "TansStack Form",
   "phase": "add-on",
+  "templates": ["file-router"],
   "link": "https://tanstack.com/form/latest",
   "routes": [
     {

package/templates/react/add-on/module-federation/assets/module-federation.config.js.ejs

@@ -0,0 +1,31 @@
+import packageJSON from './package.json'
+
+function remoteConfig(name, url) {
+  return {
+    type: 'module',
+    name,
+    entry: url,
+    entryGlobalName: 'remote',
+    shareScope: 'default',
+  }
+}
+
+export default {
+  filename: 'remoteEntry.js',
+  name: '<%= projectName %>',
+  exposes: {
+    './DemoMfComponent': './src/demo-mf-component.tsx',
+    './DemoMfSelfContained': './src/demo-mf-self-contained.tsx',
+  },
+  remotes: {},
+  shared: {
+    react: {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies.react,
+    },
+    'react-dom': {
+      singleton: true,
+      requiredVersion: packageJSON.dependencies['react-dom'],
+    },
+  },
+}

package/templates/react/add-on/module-federation/assets/src/demo-mf-component.tsx

@@ -0,0 +1,3 @@
+export function DemoMfComponent() {
+  return <div>Demo Mf Component</div>
+}

package/templates/react/add-on/module-federation/assets/src/demo-mf-self-contained.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+
+function App() {
+  return <div>Hello from self-contained module federation</div>
+}
+
+export function DemoMfSelfContained(rootElement: HTMLElement) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(<App />)
+}

package/templates/react/add-on/module-federation/info.json

@@ -0,0 +1,7 @@
+{
+  "name": "Module Federation",
+  "description": "Module Federation",
+  "phase": "add-on",
+  "templates": ["code-router"],
+  "link": "https://module-federation.io/"
+}

package/templates/react/add-on/module-federation/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "@module-federation/vite": "^1.1.9"
+  }
+}

package/templates/react/add-on/netlify/info.json

@@ -2,5 +2,6 @@
   "name": "Netlify",
   "description": "Netlify deployment setup",
   "link": "https://docs.netlify.com",
-  "phase": "add-on"
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"]
 }

package/templates/react/add-on/sentry/assets/src/app/global-middleware.ts

@@ -0,0 +1,25 @@
+import { createIsomorphicFn } from '@tanstack/start'
+import * as Sentry from "@sentry/react";
+import * as SentryServer from "@sentry/node";
+
+createIsomorphicFn().server(() => {
+    console.log('Sentry init server')
+    SentryServer.init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        tracesSampleRate: 1.0,
+        profilesSampleRate: 1.0,
+    })
+}).client(() => {
+    console.log('Sentry init client')
+    Sentry.init({
+        dsn: import.meta.env.VITE_SENTRY_DSN,
+        tracesSampleRate: 1.0,
+        profilesSampleRate: 1.0,
+        integrations: [
+            Sentry.replayIntegration({
+                maskAllText: false,
+                blockAllMedia: false,
+              })
+        ]
+    })
+})()