@tanstack/create 0.61.0 → 0.61.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- add missing .js extensions to ESM imports ([#369](https://github.com/TanStack/cli/pull/369))
+
 ## 0.61.0
 
 ### Minor Changes

package/dist/file-helpers.js

@@ -3,7 +3,7 @@ import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
 import { basename, extname, resolve } from 'node:path';
 import parseGitignore from 'parse-gitignore';
 import ignore from 'ignore';
-import { hasDrive, stripDrive } from './utils';
+import { hasDrive, stripDrive } from './utils.js';
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico'];
 export function readFileHelper(path) {
     if (isBinaryFile(path)) {

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/frameworks/react/project/base/src/router.tsx.ejs

@@ -0,0 +1,27 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+<% if (addOnEnabled['tanstack-query']) { %>
+import { getContext } from './integrations/tanstack-query/root-provider'
+<% } %>
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+<% if (addOnEnabled['tanstack-query']) { %>
+    context: getContext(),
+<% } else if (addOnEnabled['apollo-client']) { %>
+    context: {} as any,
+<% } %>
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/dist/frameworks/react/toolchains/eslint/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "lint": "eslint",
-    "format": "prettier",
+    "format": "prettier --check .",
     "check": "prettier --write . && eslint --fix"
   },
   "devDependencies": {

package/dist/frameworks/solid/project/base/src/router.tsx.ejs

@@ -0,0 +1,25 @@
+import { createRouter as createTanStackRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+<% if (addOnEnabled['tanstack-query']) { %>
+import { getContext } from './integrations/tanstack-query/provider'
+<% } %>
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+<% if (addOnEnabled['tanstack-query']) { %>
+    context: getContext(),
+<% } %>
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/dist/frameworks/solid/toolchains/eslint/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "lint": "eslint",
-    "format": "prettier",
+    "format": "prettier --check .",
     "check": "prettier --write . && eslint --fix"
   },
   "devDependencies": {

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/dist/types/file-helpers.d.ts

@@ -1,4 +1,4 @@
-import type { Environment } from './types';
+import type { Environment } from './types.js';
 export declare function readFileHelper(path: string): string;
 export declare function isBinaryFile(path: string): boolean;
 export declare function convertBinaryContentsToBase64(contents: any): string;

package/package.json

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

package/src/file-helpers.ts

@@ -4,8 +4,8 @@ import { basename, extname, resolve } from 'node:path'
 import parseGitignore from 'parse-gitignore'
 import ignore from 'ignore'
 
-import { hasDrive, stripDrive } from './utils'
-import type { Environment } from './types'
+import { hasDrive, stripDrive } from './utils.js'
+import type { Environment } from './types.js'
 
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.svg', '.ico']
 
@@ -232,10 +232,10 @@ const PROJECT_FILES = ['package.json']
 export function createIgnore(path: string, includeProjectFiles = true) {
   const ignoreList = existsSync(resolve(path, '.gitignore'))
     ? (
-        parseGitignore(
-          readFileSync(resolve(path, '.gitignore')),
-        ) as unknown as { patterns: Array<string> }
-      ).patterns
+      parseGitignore(
+        readFileSync(resolve(path, '.gitignore')),
+      ) as unknown as { patterns: Array<string> }
+    ).patterns
     : []
   const ig = ignore().add(ignoreList)
   return (filePath: string) => {

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/frameworks/react/project/base/src/router.tsx.ejs

@@ -0,0 +1,27 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+<% if (addOnEnabled['tanstack-query']) { %>
+import { getContext } from './integrations/tanstack-query/root-provider'
+<% } %>
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+<% if (addOnEnabled['tanstack-query']) { %>
+    context: getContext(),
+<% } else if (addOnEnabled['apollo-client']) { %>
+    context: {} as any,
+<% } %>
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/src/frameworks/react/toolchains/eslint/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "lint": "eslint",
-    "format": "prettier",
+    "format": "prettier --check .",
     "check": "prettier --write . && eslint --fix"
   },
   "devDependencies": {

package/src/frameworks/solid/project/base/src/router.tsx.ejs

@@ -0,0 +1,25 @@
+import { createRouter as createTanStackRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+<% if (addOnEnabled['tanstack-query']) { %>
+import { getContext } from './integrations/tanstack-query/provider'
+<% } %>
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+<% if (addOnEnabled['tanstack-query']) { %>
+    context: getContext(),
+<% } %>
+    scrollRestoration: true,
+    defaultPreload: 'intent',
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}

package/src/frameworks/solid/toolchains/eslint/package.json

@@ -1,7 +1,7 @@
 {
   "scripts": {
     "lint": "eslint",
-    "format": "prettier",
+    "format": "prettier --check .",
     "check": "prettier --write . && eslint --fix"
   },
   "devDependencies": {

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