Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion cli-aliases/create-start-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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.

Expand Down
8 changes: 4 additions & 4 deletions cli-aliases/create-tanstack-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand All @@ -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 <type>`: 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
Expand Down Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions cli-aliases/create-tanstack/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand All @@ -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 <type>`: 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
Expand Down Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions cli-aliases/create-tsrouter-app/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

Expand All @@ -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 <type>`: 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
Expand Down Expand Up @@ -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

Expand Down
3 changes: 2 additions & 1 deletion cli-aliases/ts-create-start/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/cli-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ tanstack create [project-name] [options]
| `--router-only` | Create Router-only SPA without TanStack Start (no SSR) |
| `--toolchain <id>` | Toolchain add-on (use `--list-add-ons` to see options) |
| `--deployment <id>` | 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 |
Expand Down
8 changes: 8 additions & 0 deletions packages/cli/src/cli.ts
Original file line number Diff line number Diff line change
Expand Up @@ -408,6 +408,14 @@ export function cli({
'--template <type>',
'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<string>(
Expand Down
12 changes: 12 additions & 0 deletions packages/cli/src/command-line.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
}
Expand Down
1 change: 1 addition & 0 deletions packages/cli/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ export interface CliOptions {
force?: boolean
routerOnly?: boolean
template?: string
tailwind?: boolean
}
13 changes: 13 additions & 0 deletions packages/cli/tests/command-line.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Original file line number Diff line number Diff line change
@@ -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 = (() => {
Expand All @@ -23,7 +25,18 @@ export const trpcClient = createTRPCClient<TRPCRouter>({
],
});

let context:
| {
queryClient: QueryClient
trpc: ReturnType<typeof createTRPCOptionsProxy<TRPCRouter>>
}
| undefined

export function getContext() {
if (context) {
return context
}

const queryClient = new QueryClient({
defaultOptions: {
dehydrate: { serializeData: superjson.serialize },
Expand All @@ -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 (
<QueryClientProvider client={queryClient}>
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
{children}
</TRPCProvider>
</QueryClientProvider>
)
}
<% } 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 (
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
)
}
<% } %>
14 changes: 12 additions & 2 deletions packages/create/src/package-json.ts
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -26,6 +26,15 @@ export function mergePackageJSON(
}

export function createPackageJSON(options: Options) {
const packageManager = options.packageManager

function getPackageManagerExecuteScript(
pkg: string,
args: Array<string> = [],
) {
return formatCommand(getPackageManagerExecuteCommand(packageManager, pkg, args))
}

let packageJSON = {
...JSON.parse(JSON.stringify(options.framework.basePackageJSON)),
name: options.projectName,
Expand Down Expand Up @@ -63,6 +72,7 @@ export function createPackageJSON(options: Options) {
),
addOnOption: options.addOnOptions,
addOns: options.chosenAddOns,
getPackageManagerExecuteScript,
}

try {
Expand Down
29 changes: 29 additions & 0 deletions packages/create/tests/package-json.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
)
})
})