@tanstack/cta-framework-react-cra 0.41.2 → 0.43.0

package/add-ons/drizzle/assets/drizzle.config.ts.ejs

@@ -1,7 +1,7 @@
 import { config } from "dotenv";
 import { defineConfig } from 'drizzle-kit';
 
-config();
+config({ path: ['.env.local', '.env'] });
 
 export default defineConfig({
   out: "./drizzle",

package/add-ons/drizzle/assets/src/db/index.ts.ejs

@@ -1,27 +1,10 @@
-import { config } from 'dotenv'
-<% if (addOnOption.drizzle.database === 'postgresql') { %>
-import { drizzle } from 'drizzle-orm/node-postgres';
-import { Pool } from 'pg';
+import { drizzle } from <% if (addOnOption.drizzle.database === 'postgresql') { %>
+'drizzle-orm/node-postgres';
 <% } else if (addOnOption.drizzle.database === 'mysql') {%>
-import { drizzle } from 'drizzle-orm/mysql2';
-import mysql from 'mysql2/promise';
+'drizzle-orm/mysql2';
 <% } else if (addOnOption.drizzle.database === 'sqlite') {%>
-import { drizzle } from 'drizzle-orm/better-sqlite3';
-import Database from 'better-sqlite3';
+'drizzle-orm/better-sqlite3';
 <% } %>
 import * as schema from './schema.ts'
 
-config()
-
-<% if (addOnOption.drizzle.database === 'sqlite') { %>
-const sqlite = new Database(process.env.DATABASE_URL!);
-export const db = drizzle(sqlite, { schema });
-<% } else if (addOnOption.drizzle.database === 'postgresql') { %>
-const pool = new Pool({
-  connectionString: process.env.DATABASE_URL!,
-});
-export const db = drizzle(pool, { schema });
-<% } else if (addOnOption.drizzle.database === 'mysql') { %>
-const connection = await mysql.createConnection(process.env.DATABASE_URL!);
-export const db = drizzle(connection, { schema });
-<% } %>
+export const db = drizzle(process.env.DATABASE_URL!, { schema<% if (addOnOption.drizzle.database === 'mysql') {%>, mode: 'default'<% } %>});

package/add-ons/drizzle/assets/src/db/schema.ts.ejs

@@ -3,8 +3,8 @@ import { pgTable, serial, text, timestamp } from
 'drizzle-orm/pg-core';
 
 export const todos = pgTable('todos', {
-  id: serial('id').primaryKey(),
-  title: text('title').notNull(),
+  id: serial().primaryKey(),
+  title: text().notNull(),
   createdAt: timestamp('created_at').defaultNow(),
 });
 <% } else if (addOnOption.drizzle.database === 'mysql') {
@@ -13,8 +13,8 @@ import { mysqlTable, int, text, timestamp } from
 'drizzle-orm/mysql-core';
 
 export const todos = mysqlTable('todos', {
-  id: int('id').primaryKey().autoincrement(),
-  title: text('title').notNull(),
+  id: int().primaryKey().autoincrement(),
+  title: text().notNull(),
   createdAt: timestamp('created_at', { mode: 'date' }).defaultNow(),
 });
 <% } else if (addOnOption.drizzle.database === 'sqlite') {
@@ -24,9 +24,9 @@ import { sqliteTable, integer, text } from
 import { sql } from 'drizzle-orm';
 
 export const todos = sqliteTable('todos', {
-  id: integer('id', { mode: 'number' }).primaryKey({
+  id: integer({ mode: 'number' }).primaryKey({
 autoIncrement: true }),
-  title: text('title').notNull(),
+  title: text().notNull(),
   createdAt: integer('created_at', { mode: 'timestamp' }).default(sql`(unixepoch())`),
 });
 <% } %>

package/add-ons/drizzle/package.json.ejs

@@ -1,17 +1,15 @@
 {
   "dependencies": {
-    "drizzle-orm": "^0.39.0",
-    "drizzle-kit": "^0.30.0"<% if (addOnOption.drizzle.database === 'postgresql') { %>,
-    "pg": "^8.11.0"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %>,
-    "mysql2": "^3.6.0"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>,
-    "better-sqlite3": "^9.4.0"<% } %>
+    "drizzle-orm": "^0.45.0",
+    "drizzle-kit": "^0.31.8"<% if (addOnOption.drizzle.database === 'postgresql') { %>,
+    "pg": "^8.16.3"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %>,
+    "mysql2": "^3.15.3"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>,
+    "better-sqlite3": "^12.5.0"<% } %>
   },
   "devDependencies": {
     "dotenv": "^16.0.0",
-    "tsx": "^4.0.0",
-    <% if (addOnOption.drizzle.database === 'postgresql') { %>
-    "@types/pg": "^8.10.0"<% } %><% if (addOnOption.drizzle.database === 'mysql') { %>
-    "@types/mysql2": "^3.6.0"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>
+    "tsx": "^4.0.0"<% if (addOnOption.drizzle.database === 'postgresql') { %>,
+    "@types/pg": "^8.15.6"<% } %><% if (addOnOption.drizzle.database === 'sqlite') { %>,
     "@types/better-sqlite3": "^7.6.0"<% } %>
   },
   "scripts": {

package/add-ons/module-federation/package.json

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

package/add-ons/start/assets/src/router.tsx.ejs

@@ -18,13 +18,6 @@ export const getRouter = () => {
         routeTree,
         context: { ...rqContext },
         defaultPreload: "intent",
-        Wrap: (props: { children: React.ReactNode }) => {
-          return (
-            <TanstackQuery.Provider {...rqContext}>
-              {props.children}
-            </TanstackQuery.Provider>
-          );
-        },
       })
 
     setupRouterSsrQueryIntegration({router, queryClient: rqContext.queryClient})

package/dist/checksum.js

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'b722b3f8235cbf4618c508da1b499a8a6a583d8107eebeb9e2ffe19716ddc7e9';
+export const contentChecksum = '83cb054c1f9453daea6c56991d1a7db0155526786b85913eab02e678c4399618';

package/dist/types/checksum.d.ts

@@ -1 +1 @@
-export declare const contentChecksum = "b722b3f8235cbf4618c508da1b499a8a6a583d8107eebeb9e2ffe19716ddc7e9";
+export declare const contentChecksum = "83cb054c1f9453daea6c56991d1a7db0155526786b85913eab02e678c4399618";

package/hosts/cloudflare/package.json

@@ -1,6 +1,6 @@
 {
   "scripts": {
-    "deploy": "wrangler deploy"
+    "deploy": "npm run build && wrangler deploy"
   },
   "dependencies": {
     "@cloudflare/vite-plugin": "^1.13.8"

package/hosts/netlify/assets/netlify.toml

@@ -2,5 +2,6 @@
   command = "vite build"
   dir = "dist/client"
 [dev]
-  command = "vite dev"
-  port = 3000
+  command = "npm run dev"
+  targetPort = 3000
+  port = 8888

package/hosts/netlify/package.json

@@ -1,5 +1,5 @@
 {
-  "dependencies": {
-    "@netlify/vite-plugin-tanstack-start": "^1.0.2"
+  "devDependencies": {
+    "@netlify/vite-plugin-tanstack-start": "^1.2.3"
   }
 }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tanstack/cta-framework-react-cra",
-  "version": "0.41.2",
+  "version": "0.43.0",
   "description": "CTA Framework for React (Create React App)",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/TanStack/create-tsrouter-app.git"
+    "url": "git+https://github.com/TanStack/create-tsrouter-app.git"
   },
   "homepage": "https://tanstack.com/router",
   "funding": {
@@ -23,12 +23,18 @@
   "author": "Jack Herrington <jherr@pobox.com>",
   "license": "MIT",
   "dependencies": {
-    "@tanstack/cta-engine": "0.41.2"
+    "@tanstack/cta-engine": "0.43.0"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",
     "typescript": "^5.6.3",
     "vitest": "^3.1.1"
   },
-  "scripts": {}
+  "scripts": {
+    "prebuild": "node ../../scripts/generate-checksums.js",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "eslint ./src && vitest run",
+    "test:watch": "vitest"
+  }
 }

package/src/checksum.ts

@@ -1,3 +1,3 @@
 // This file is auto-generated. Do not edit manually.
 // Generated from add-ons, examples, hosts, project, and toolchains directories
-export const contentChecksum = 'b722b3f8235cbf4618c508da1b499a8a6a583d8107eebeb9e2ffe19716ddc7e9'
+export const contentChecksum = '83cb054c1f9453daea6c56991d1a7db0155526786b85913eab02e678c4399618'

package/tests/snapshots/react-cra/cr-ts-start-tanstack-query-npm.json

@@ -9,7 +9,7 @@
     "/src/data/demo.punk-songs.ts": "import { createServerFn } from '@tanstack/react-start'\n\nexport const getPunkSongs = createServerFn({\n  method: 'GET',\n}).handler(async () => [\n  { id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },\n  { id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },\n  { id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },\n  { id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },\n  { id: 5, name: 'Fat Lip', artist: 'Sum 41' },\n  { id: 6, name: 'All the Small Things', artist: 'blink-182' },\n  { id: 7, name: 'Beverly Hills', artist: 'Weezer' },\n])\n",
     "/src/integrations/tanstack-query/devtools.tsx": "import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'\n\nexport default {\n  name: 'Tanstack Query',\n  render: <ReactQueryDevtoolsPanel />,\n}\n",
     "/src/integrations/tanstack-query/root-provider.tsx": "import { QueryClient, QueryClientProvider } from '@tanstack/react-query'\n\nexport function getContext() {\n  const queryClient = new QueryClient()\n  return {\n    queryClient,\n  }\n}\n\nexport function Provider({\n  children,\n  queryClient,\n}: {\n  children: React.ReactNode\n  queryClient: QueryClient\n}) {\n  return (\n    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n  )\n}\n",
-    "/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\nimport { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n  const rqContext = TanstackQuery.getContext()\n\n  const router = createRouter({\n    routeTree,\n    context: { ...rqContext },\n    defaultPreload: 'intent',\n    Wrap: (props: { children: React.ReactNode }) => {\n      return (\n        <TanstackQuery.Provider {...rqContext}>\n          {props.children}\n        </TanstackQuery.Provider>\n      )\n    },\n  })\n\n  setupRouterSsrQueryIntegration({ router, queryClient: rqContext.queryClient })\n\n  return router\n}\n",
+    "/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\nimport { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'\nimport * as TanstackQuery from './integrations/tanstack-query/root-provider'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n  const rqContext = TanstackQuery.getContext()\n\n  const router = createRouter({\n    routeTree,\n    context: { ...rqContext },\n    defaultPreload: 'intent',\n  })\n\n  setupRouterSsrQueryIntegration({ router, queryClient: rqContext.queryClient })\n\n  return router\n}\n",
     "/src/routes/__root.tsx": "import {\n  HeadContent,\n  Scripts,\n  createRootRouteWithContext,\n} from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nimport Header from '../components/Header'\n\nimport TanStackQueryDevtools from '../integrations/tanstack-query/devtools'\n\nimport appCss from '../styles.css?url'\n\nimport type { QueryClient } from '@tanstack/react-query'\n\ninterface MyRouterContext {\n  queryClient: QueryClient\n}\n\nexport const Route = createRootRouteWithContext<MyRouterContext>()({\n  head: () => ({\n    meta: [\n      {\n        charSet: 'utf-8',\n      },\n      {\n        name: 'viewport',\n        content: 'width=device-width, initial-scale=1',\n      },\n      {\n        title: 'TanStack Start Starter',\n      },\n    ],\n    links: [\n      {\n        rel: 'stylesheet',\n        href: appCss,\n      },\n    ],\n  }),\n\n  shellComponent: RootDocument,\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <head>\n        <HeadContent />\n      </head>\n      <body>\n        <Header />\n        {children}\n        <TanStackDevtools\n          config={{\n            position: 'bottom-right',\n          }}\n          plugins={[\n            {\n              name: 'Tanstack Router',\n              render: <TanStackRouterDevtoolsPanel />,\n            },\n            TanStackQueryDevtools,\n          ]}\n        />\n        <Scripts />\n      </body>\n    </html>\n  )\n}\n",
     "/src/routes/demo/api.names.ts": "import { createFileRoute } from '@tanstack/react-router'\nimport { json } from '@tanstack/react-start'\n\nexport const Route = createFileRoute('/demo/api/names')({\n  server: {\n    handlers: {\n      GET: () => json(['Alice', 'Bob', 'Charlie']),\n    },\n  },\n})\n",
     "/src/routes/demo/api.tq-todos.ts": "import { createFileRoute } from '@tanstack/react-router'\n\nconst todos = [\n  {\n    id: 1,\n    name: 'Buy groceries',\n  },\n  {\n    id: 2,\n    name: 'Buy mobile phone',\n  },\n  {\n    id: 3,\n    name: 'Buy laptop',\n  },\n]\n\nexport const Route = createFileRoute('/demo/api/tq-todos')({\n  server: {\n    handlers: {\n      GET: () => {\n        return Response.json(todos)\n      },\n      POST: async ({ request }) => {\n        const name = await request.json()\n        const todo = {\n          id: todos.length + 1,\n          name,\n        }\n        todos.push(todo)\n        return Response.json(todo)\n      },\n    },\n  },\n})\n",