@tanstack/create 0.61.1 → 0.61.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tanstack/create
 
+## 0.61.2
+
+### Patch Changes
+
+- Improve generated app reliability and CLI compatibility. ([`791bef6`](https://github.com/TanStack/cli/commit/791bef6b5472df5b5e2bffe5c1714c4052a97ac3))
+
+  - Fix React Query provider scaffolding (including Query + tRPC combinations) so generated apps build correctly.
+  - Fix Prisma add-on package template rendering by exposing package-manager execute helper in `package.json.ejs` context.
+  - Restore `--tailwind` and `--no-tailwind` as deprecated compatibility flags that are accepted but ignored with clear warnings.
+  - Align CLI/docs examples with the current Tailwind-always-on behavior.
+  - Update Convex demo import to type-only `Id` import to avoid runtime resolution issues.
+
 ## 0.61.1
 
 ### Patch Changes

package/dist/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation } from 'convex/react'
 import { Trash2, Plus, Check, Circle } from 'lucide-react'
 
 import { api } from '../../../convex/_generated/api'
-import { Id } from '../../../convex/_generated/dataModel'
+import type { Id } from '../../../convex/_generated/dataModel'
 
 export const Route = createFileRoute('/demo/convex')({
   ssr: false,

package/dist/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<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 },
@@ -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>
+  )
 }
 <% } %>

package/dist/package-json.js

@@ -1,5 +1,6 @@
 import { render } from 'ejs';
-import { sortObject } from './utils.js';
+import { formatCommand, sortObject } from './utils.js';
+import { getPackageManagerExecuteCommand } from './package-manager.js';
 export function mergePackageJSON(packageJSON, overlayPackageJSON) {
     return {
         ...packageJSON,
@@ -19,6 +20,10 @@ export function mergePackageJSON(packageJSON, overlayPackageJSON) {
     };
 }
 export function createPackageJSON(options) {
+    const packageManager = options.packageManager;
+    function getPackageManagerExecuteScript(pkg, args = []) {
+        return formatCommand(getPackageManagerExecuteCommand(packageManager, pkg, args));
+    }
     let packageJSON = {
         ...JSON.parse(JSON.stringify(options.framework.basePackageJSON)),
         name: options.projectName,
@@ -50,6 +55,7 @@ export function createPackageJSON(options) {
                 }, {}),
                 addOnOption: options.addOnOptions,
                 addOns: options.chosenAddOns,
+                getPackageManagerExecuteScript,
             };
             try {
                 const renderedTemplate = render(addOn.packageTemplate, templateValues);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/create",
-  "version": "0.61.1",
+  "version": "0.61.2",
   "description": "TanStack Application Builder Engine",
   "type": "module",
   "main": "./dist/index.js",

package/src/frameworks/react/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -4,7 +4,7 @@ import { useQuery, useMutation } from 'convex/react'
 import { Trash2, Plus, Check, Circle } from 'lucide-react'
 
 import { api } from '../../../convex/_generated/api'
-import { Id } from '../../../convex/_generated/dataModel'
+import type { Id } from '../../../convex/_generated/dataModel'
 
 export const Route = createFileRoute('/demo/convex')({
   ssr: false,

package/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<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 },
@@ -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>
+  )
 }
 <% } %>

package/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<string> = [],
+  ) {
+    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 {

package/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',
+    )
+  })
 })