diff --git a/cli-aliases/create-start-app/README.md b/cli-aliases/create-start-app/README.md index f8bb9303..3131402a 100644 --- a/cli-aliases/create-start-app/README.md +++ b/cli-aliases/create-start-app/README.md @@ -31,7 +31,7 @@ This will start an interactive CLI that guides you through the setup process, al You can also use command line flags to specify your preferences directly: ```bash -pnpm dlx create-start-app@latest my-app --tailwind --package-manager pnpm +pnpm dlx create-start-app@latest my-app --package-manager pnpm ``` Available options: @@ -40,6 +40,7 @@ Available options: - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`) - `--no-git`: Do not initialize a git repository - `--add-ons`: Enable add-on selection or specify add-ons to install +- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) When using flags, the CLI will display which options were provided and only prompt for the remaining choices. diff --git a/cli-aliases/create-tanstack-app/README.md b/cli-aliases/create-tanstack-app/README.md index 53033587..5b491b6d 100644 --- a/cli-aliases/create-tanstack-app/README.md +++ b/cli-aliases/create-tanstack-app/README.md @@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio | `pnpm dlx create-tanstack-app@latest my-app` | Create a new app | | `pnpm dlx create-tanstack-app@latest my-app --template file-router` | Create a new file based app | | `pnpm dlx create-tanstack-app@latest my-app --template typescript` | Create a new TypeScript app using the Code Router | -| `pnpm dlx create-tanstack-app@latest my-app --tailwind` | Add Tailwind CSS support | +| `pnpm dlx create-tanstack-app@latest my-app --tailwind` | Deprecated compatibility flag (ignored) | | `pnpm dlx create-tanstack-app@latest my-app --framework solid` | Create a Solid app | | `pnpm dlx create-tanstack-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router | @@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al You can also use command line flags to specify your preferences directly: ```bash -pnpm dlx create-tanstack-app@latest my-app --template file-router --tailwind --package-manager pnpm +pnpm dlx create-tanstack-app@latest my-app --template file-router --package-manager pnpm ``` Available options: - `--template `: Choose between `file-router`, `typescript`, or `javascript` -- `--tailwind`: Enable Tailwind CSS +- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`) - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`) - `--no-git`: Do not initialize a git repository @@ -88,7 +88,7 @@ pnpm dlx create-tanstack-app@latest my-app --template typescript ### Tailwind CSS -Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/). +Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored. ### Package Manager diff --git a/cli-aliases/create-tanstack/README.md b/cli-aliases/create-tanstack/README.md index 1e639250..3d9714a5 100644 --- a/cli-aliases/create-tanstack/README.md +++ b/cli-aliases/create-tanstack/README.md @@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio | `pnpm dlx create-tanstack@latest my-app` | Create a new app | | `pnpm dlx create-tanstack@latest my-app --template file-router` | Create a new file based app | | `pnpm dlx create-tanstack@latest my-app --template typescript` | Create a new TypeScript app using the Code Router | -| `pnpm dlx create-tanstack@latest my-app --tailwind` | Add Tailwind CSS support | +| `pnpm dlx create-tanstack@latest my-app --tailwind` | Deprecated compatibility flag (ignored) | | `pnpm dlx create-tanstack@latest my-app --framework solid` | Create a Solid app | | `pnpm dlx create-tanstack@latest my-app --framework solid --template file-router` | Create a Solid app with file-router | @@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al You can also use command line flags to specify your preferences directly: ```bash -pnpm dlx create-tanstack@latest my-app --template file-router --tailwind --package-manager pnpm +pnpm dlx create-tanstack@latest my-app --template file-router --package-manager pnpm ``` Available options: - `--template `: Choose between `file-router`, `typescript`, or `javascript` -- `--tailwind`: Enable Tailwind CSS +- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`) - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`) - `--no-git`: Do not initialize a git repository @@ -88,7 +88,7 @@ pnpm dlx create-tanstack@latest my-app --template typescript ### Tailwind CSS -Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/). +Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored. ### Package Manager diff --git a/cli-aliases/create-tsrouter-app/README.md b/cli-aliases/create-tsrouter-app/README.md index b9c6adb3..f8a0c2da 100644 --- a/cli-aliases/create-tsrouter-app/README.md +++ b/cli-aliases/create-tsrouter-app/README.md @@ -13,7 +13,7 @@ To maintain compatability with `create-react-app` you can build a new applicatio | `pnpm dlx create-tsrouter-app@latest my-app` | Create a new app | | `pnpm dlx create-tsrouter-app@latest my-app --template file-router` | Create a new file based app | | `pnpm dlx create-tsrouter-app@latest my-app --template typescript` | Create a new TypeScript app using the Code Router | -| `pnpm dlx create-tsrouter-app@latest my-app --tailwind` | Add Tailwind CSS support | +| `pnpm dlx create-tsrouter-app@latest my-app --tailwind` | Deprecated compatibility flag (ignored) | | `pnpm dlx create-tsrouter-app@latest my-app --framework solid` | Create a Solid app | | `pnpm dlx create-tsrouter-app@latest my-app --framework solid --template file-router` | Create a Solid app with file-router | @@ -38,13 +38,13 @@ This will start an interactive CLI that guides you through the setup process, al You can also use command line flags to specify your preferences directly: ```bash -pnpm dlx create-tsrouter-app@latest my-app --template file-router --tailwind --package-manager pnpm +pnpm dlx create-tsrouter-app@latest my-app --template file-router --package-manager pnpm ``` Available options: - `--template `: Choose between `file-router`, `typescript`, or `javascript` -- `--tailwind`: Enable Tailwind CSS +- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) - `--package-manager`: Specify your preferred package manager (`npm`, `yarn`, `pnpm`, `bun`, or `deno`) - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`) - `--no-git`: Do not initialize a git repository @@ -88,7 +88,7 @@ pnpm dlx create-tsrouter-app@latest my-app --template typescript ### Tailwind CSS -Enable Tailwind CSS either through the interactive CLI or by adding the `--tailwind` flag. This will automatically configure [Tailwind V4](https://tailwindcss.com/). +Tailwind CSS is always configured by default. `--tailwind` / `--no-tailwind` are accepted for compatibility but ignored. ### Package Manager diff --git a/cli-aliases/ts-create-start/README.md b/cli-aliases/ts-create-start/README.md index ec78b1cc..dffe8b8a 100644 --- a/cli-aliases/ts-create-start/README.md +++ b/cli-aliases/ts-create-start/README.md @@ -31,7 +31,7 @@ This will start an interactive CLI that guides you through the setup process, al You can also use command line flags to specify your preferences directly: ```bash -pnpm create @tanstack/start@latest my-app --tailwind --package-manager pnpm +pnpm create @tanstack/start@latest my-app --package-manager pnpm ``` Available options: @@ -40,6 +40,7 @@ Available options: - `--toolchain`: Specify your toolchain solution for formatting/linting (`biome`, `eslint`) - `--no-git`: Do not initialize a git repository - `--add-ons`: Enable add-on selection or specify add-ons to install +- `--tailwind` / `--no-tailwind`: Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) When using flags, the CLI will display which options were provided and only prompt for the remaining choices. diff --git a/docs/cli-reference.md b/docs/cli-reference.md index 3684e211..e74dd044 100644 --- a/docs/cli-reference.md +++ b/docs/cli-reference.md @@ -20,7 +20,7 @@ tanstack create [project-name] [options] | `--router-only` | Create Router-only SPA without TanStack Start (no SSR) | | `--toolchain ` | Toolchain add-on (use `--list-add-ons` to see options) | | `--deployment ` | Deployment add-on (use `--list-add-ons` to see options) | -| `--tailwind` / `--no-tailwind` | Include/skip Tailwind CSS | +| `--tailwind` / `--no-tailwind` | Deprecated compatibility flags; accepted but ignored (Tailwind is always enabled) | | `--no-git` | Skip git init | | `--no-install` | Skip dependency install | | `-y, --yes` | Use defaults, skip prompts | diff --git a/packages/cli/src/cli.ts b/packages/cli/src/cli.ts index 1aaa1a57..710f154f 100644 --- a/packages/cli/src/cli.ts +++ b/packages/cli/src/cli.ts @@ -408,6 +408,14 @@ export function cli({ '--template ', 'Deprecated: compatibility flag from create-tsrouter-app', ) + .option( + '--tailwind', + 'Deprecated: compatibility flag; Tailwind is always enabled', + ) + .option( + '--no-tailwind', + 'Deprecated: compatibility flag; Tailwind opt-out is ignored', + ) if (deployments.size > 0) { cmd.option( diff --git a/packages/cli/src/command-line.ts b/packages/cli/src/command-line.ts index 5197fa63..6b4142f5 100644 --- a/packages/cli/src/command-line.ts +++ b/packages/cli/src/command-line.ts @@ -37,6 +37,18 @@ export function validateLegacyCreateFlags(cliOptions: CliOptions): { ) } + if (cliOptions.tailwind === true) { + warnings.push( + 'The --tailwind flag is deprecated and ignored. Tailwind is always enabled in TanStack Start scaffolds.', + ) + } + + if (cliOptions.tailwind === false) { + warnings.push( + 'The --no-tailwind flag is deprecated and ignored. Tailwind opt-out is intentionally unsupported to keep add-on permutations maintainable; remove Tailwind after scaffolding if needed.', + ) + } + if (!cliOptions.template) { return { warnings } } diff --git a/packages/cli/src/types.ts b/packages/cli/src/types.ts index bbc0ed4a..4800a25e 100644 --- a/packages/cli/src/types.ts +++ b/packages/cli/src/types.ts @@ -22,4 +22,5 @@ export interface CliOptions { force?: boolean routerOnly?: boolean template?: string + tailwind?: boolean } diff --git a/packages/cli/tests/command-line.test.ts b/packages/cli/tests/command-line.test.ts index 7134e177..1ebee5be 100644 --- a/packages/cli/tests/command-line.test.ts +++ b/packages/cli/tests/command-line.test.ts @@ -319,6 +319,19 @@ describe('validateLegacyCreateFlags', () => { expect(result.warnings[0]).toContain('--router-only') }) + it('warns when --tailwind is used', () => { + const result = validateLegacyCreateFlags({ tailwind: true }) + expect(result.error).toBeUndefined() + expect(result.warnings[0]).toContain('--tailwind') + }) + + it('warns heavily when --no-tailwind is used', () => { + const result = validateLegacyCreateFlags({ tailwind: false }) + expect(result.error).toBeUndefined() + expect(result.warnings[0]).toContain('--no-tailwind') + expect(result.warnings[0]).toContain('intentionally unsupported') + }) + it('errors for JavaScript templates', () => { const result = validateLegacyCreateFlags({ template: 'javascript' }) expect(result.error).toContain('JavaScript/JSX templates are not supported') diff --git a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs index 1d88ddb9..2a05d80c 100644 --- a/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs +++ b/packages/create/src/frameworks/react/add-ons/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs @@ -1,10 +1,12 @@ <% if (addOnEnabled.tRPC) { %> -import { QueryClient } from "@tanstack/react-query"; +import type { ReactNode } from 'react' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import superjson from "superjson"; import { createTRPCClient, httpBatchStreamLink } from "@trpc/client"; import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query"; import type { TRPCRouter } from "@/integrations/trpc/router"; +import { TRPCProvider } from '@/integrations/trpc/react' function getUrl() { const base = (() => { @@ -23,7 +25,18 @@ export const trpcClient = createTRPCClient({ ], }); +let context: + | { + queryClient: QueryClient + trpc: ReturnType> + } + | undefined + export function getContext() { + if (context) { + return context + } + const queryClient = new QueryClient({ defaultOptions: { dehydrate: { serializeData: superjson.serialize }, @@ -35,18 +48,64 @@ export function getContext() { client: trpcClient, queryClient: queryClient, }); - return { + context = { queryClient, trpc: serverHelpers, - }; + } + + return context +} + +export default function TanStackQueryProvider({ + children, +}: { + children: ReactNode +}) { + const { queryClient } = getContext() + + return ( + + + {children} + + + ) } <% } else { %> -import { QueryClient } from '@tanstack/react-query' +import type { ReactNode } from 'react' +import { QueryClient, QueryClientProvider } from '@tanstack/react-query' + +let context: + | { + queryClient: QueryClient + } + | undefined export function getContext() { + if (context) { + return context + } + const queryClient = new QueryClient(); - return { + + context = { queryClient, - }; + } + + return context +} + +export default function TanStackQueryProvider({ + children, +}: { + children: ReactNode +}) { + const { queryClient } = getContext() + + return ( + + {children} + + ) } <% } %> diff --git a/packages/create/src/package-json.ts b/packages/create/src/package-json.ts index b23640b7..abc70e90 100644 --- a/packages/create/src/package-json.ts +++ b/packages/create/src/package-json.ts @@ -1,6 +1,6 @@ import { render } from 'ejs' -import { sortObject } from './utils.js' - +import { formatCommand, sortObject } from './utils.js' +import { getPackageManagerExecuteCommand } from './package-manager.js' import type { Options } from './types.js' export function mergePackageJSON( @@ -26,6 +26,15 @@ export function mergePackageJSON( } export function createPackageJSON(options: Options) { + const packageManager = options.packageManager + + function getPackageManagerExecuteScript( + pkg: string, + args: Array = [], + ) { + return formatCommand(getPackageManagerExecuteCommand(packageManager, pkg, args)) + } + let packageJSON = { ...JSON.parse(JSON.stringify(options.framework.basePackageJSON)), name: options.projectName, @@ -63,6 +72,7 @@ export function createPackageJSON(options: Options) { ), addOnOption: options.addOnOptions, addOns: options.chosenAddOns, + getPackageManagerExecuteScript, } try { diff --git a/packages/create/tests/package-json.test.ts b/packages/create/tests/package-json.test.ts index f0e9712e..fabd4752 100644 --- a/packages/create/tests/package-json.test.ts +++ b/packages/create/tests/package-json.test.ts @@ -91,4 +91,33 @@ describe('createPackageJSON', () => { onlyBuiltDependencies: ['better-sqlite3'], }) }) + + it('should provide execute command helper in package templates', () => { + const packageJSON = createPackageJSON({ + chosenAddOns: [ + { + packageTemplate: + '{"scripts":{"post-cta-init":"<%- getPackageManagerExecuteScript(\'create-db@latest\', [\'--user-agent\', \'tanstack/tsrouter\']) %>"}}', + }, + ], + packageManager: 'npm', + addOnOptions: {}, + mode: 'file-router', + typescript: true, + tailwind: true, + projectName: 'test', + framework: { + basePackageJSON: {}, + optionalPackages: { + typescript: {}, + tailwindcss: {}, + 'file-router': {}, + }, + } as unknown as Framework, + } as unknown as Options) + + expect(packageJSON.scripts['post-cta-init']).toBe( + 'npx -y create-db@latest --user-agent tanstack/tsrouter', + ) + }) })