@tanstack/cta-engine 0.10.0-alpha.21 → 0.10.0-alpha.25

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/init.ts

@@ -0,0 +1,9 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/react.ts

@@ -0,0 +1,4 @@
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { TRPCRouter } from "@/integrations/trpc/router";
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<TRPCRouter>();

package/templates/react/add-on/tRPC/assets/src/integrations/trpc/router.ts

@@ -0,0 +1,18 @@
+import { TRPCError } from '@trpc/server'
+import type { TRPCRouterRecord } from '@trpc/server'
+// import { z } from 'zod'
+
+import { createTRPCRouter, publicProcedure } from './init'
+
+const peopleRouter = {
+  list: publicProcedure.query(async () =>
+    fetch('https://swapi.dev/api/people')
+      .then((res) => res.json())
+      .then((d) => d.results as { name: string }[]),
+  ),
+} satisfies TRPCRouterRecord
+
+export const trpcRouter = createTRPCRouter({
+  people: peopleRouter,
+})
+export type TRPCRouter = typeof trpcRouter

package/templates/react/add-on/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -0,0 +1,16 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { trpcRouter } from '@/integrations/trpc/router'
+
+function handler({ request }: { request: Request }) {
+  return fetchRequestHandler({
+    req: request,
+    router: trpcRouter,
+    endpoint: '/api/trpc',
+  })
+}
+
+export const APIRoute = createAPIFileRoute('/api/trpc/$')({
+  GET: handler,
+  POST: handler,
+})

package/templates/react/add-on/tRPC/info.json

@@ -0,0 +1,9 @@
+{
+  "name": "tRPC",
+  "description": "Integrate tRPC into your application.",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "link": "https://trpc.io/",
+  "routes": [],
+  "dependsOn": ["tanstack-query", "start"]
+}

package/templates/react/add-on/tRPC/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@trpc/tanstack-react-query": "^11.0.0",
+    "superjson": "^2.2.2",
+    "zod": "^3.24.2"
+  }
+}

package/templates/react/add-on/table/assets/src/data/demo-table-data.ts

@@ -0,0 +1,50 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+  id: number
+  firstName: string
+  lastName: string
+  age: number
+  visits: number
+  progress: number
+  status: 'relationship' | 'complicated' | 'single'
+  subRows?: Person[]
+}
+
+const range = (len: number) => {
+  const arr: number[] = []
+  for (let i = 0; i < len; i++) {
+    arr.push(i)
+  }
+  return arr
+}
+
+const newPerson = (num: number): Person => {
+  return {
+    id: num,
+    firstName: faker.person.firstName(),
+    lastName: faker.person.lastName(),
+    age: faker.number.int(40),
+    visits: faker.number.int(1000),
+    progress: faker.number.int(100),
+    status: faker.helpers.shuffle<Person['status']>([
+      'relationship',
+      'complicated',
+      'single',
+    ])[0]!,
+  }
+}
+
+export function makeData(...lens: number[]) {
+  const makeDataLevel = (depth = 0): Person[] => {
+    const len = lens[depth]!
+    return range(len).map((index): Person => {
+      return {
+        ...newPerson(index),
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined,
+      }
+    })
+  }
+
+  return makeDataLevel()
+}

package/templates/react/add-on/table/assets/src/routes/demo.table.tsx.ejs

@@ -0,0 +1,373 @@
+import React from 'react'
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  sortingFns,
+  useReactTable,
+} from '@tanstack/react-table'
+import { compareItems, rankItem } from '@tanstack/match-sorter-utils'
+
+import { makeData } from '../data/demo-table-data'
+
+import type {
+  Column,
+  ColumnDef,
+  ColumnFiltersState,
+  FilterFn,
+  SortingFn,
+} from '@tanstack/react-table'
+import type { RankingInfo } from '@tanstack/match-sorter-utils'
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } %>
+import type { Person } from '../data/demo-table-data'
+<% if (fileRouter) { %>
+export const Route = createFileRoute('/demo/table')({
+  component: TableDemo,
+})
+<% } %>
+
+declare module '@tanstack/react-table' {
+  interface FilterFns {
+    fuzzy: FilterFn<unknown>
+  }
+  interface FilterMeta {
+    itemRank: RankingInfo
+  }
+}
+
+// Define a custom fuzzy filter function that will apply ranking info to rows (using match-sorter utils)
+const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
+  // Rank the item
+  const itemRank = rankItem(row.getValue(columnId), value)
+
+  // Store the itemRank info
+  addMeta({
+    itemRank,
+  })
+
+  // Return if the item should be filtered in/out
+  return itemRank.passed
+}
+
+// Define a custom fuzzy sort function that will sort by rank if the row has ranking information
+const fuzzySort: SortingFn<any> = (rowA, rowB, columnId) => {
+  let dir = 0
+
+  // Only sort by rank if the column has ranking information
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId]?.itemRank!,
+      rowB.columnFiltersMeta[columnId]?.itemRank!,
+    )
+  }
+
+  // Provide an alphanumeric fallback for when the item ranks are equal
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir
+}
+
+function TableDemo() {
+  const rerender = React.useReducer(() => ({}), {})[1]
+
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  )
+  const [globalFilter, setGlobalFilter] = React.useState('')
+
+  const columns = React.useMemo<ColumnDef<Person, any>[]>(
+    () => [
+      {
+        accessorKey: 'id',
+        filterFn: 'equalsString', //note: normal non-fuzzy filter column - exact match required
+      },
+      {
+        accessorKey: 'firstName',
+        cell: (info) => info.getValue(),
+        filterFn: 'includesStringSensitive', //note: normal non-fuzzy filter column - case sensitive
+      },
+      {
+        accessorFn: (row) => row.lastName,
+        id: 'lastName',
+        cell: (info) => info.getValue(),
+        header: () => <span>Last Name</span>,
+        filterFn: 'includesString', //note: normal non-fuzzy filter column - case insensitive
+      },
+      {
+        accessorFn: (row) => `${row.firstName} ${row.lastName}`,
+        id: 'fullName',
+        header: 'Full Name',
+        cell: (info) => info.getValue(),
+        filterFn: 'fuzzy', //using our custom fuzzy filter function
+        // filterFn: fuzzyFilter, //or just define with the function
+        sortingFn: fuzzySort, //sort by fuzzy rank (falls back to alphanumeric)
+      },
+    ],
+    [],
+  )
+
+  const [data, setData] = React.useState<Person[]>(() => makeData(5_000))
+  const refreshData = () => setData((_old) => makeData(50_000)) //stress test
+
+  const table = useReactTable({
+    data,
+    columns,
+    filterFns: {
+      fuzzy: fuzzyFilter, //define as a filter function that can be used in column definitions
+    },
+    state: {
+      columnFilters,
+      globalFilter,
+    },
+    onColumnFiltersChange: setColumnFilters,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'fuzzy', //apply fuzzy filter to the global filter (most common use case for fuzzy filter)
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(), //client side filtering
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    debugTable: true,
+    debugHeaders: true,
+    debugColumns: false,
+  })
+
+  //apply the fuzzy sort if the fullName column is being filtered
+  React.useEffect(() => {
+    if (table.getState().columnFilters[0]?.id === 'fullName') {
+      if (table.getState().sorting[0]?.id !== 'fullName') {
+        table.setSorting([{ id: 'fullName', desc: false }])
+      }
+    }
+  }, [table.getState().columnFilters[0]?.id])
+
+  return (
+    <div className="min-h-screen bg-gray-900 p-6">
+      <div>
+        <DebouncedInput
+          value={globalFilter ?? ''}
+          onChange={(value) => setGlobalFilter(String(value))}
+          className="w-full p-3 bg-gray-800 text-white rounded-lg border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          placeholder="Search all columns..."
+        />
+      </div>
+      <div className="h-4" />
+      <div className="overflow-x-auto rounded-lg border border-gray-700">
+        <table className="w-full text-sm text-gray-200">
+          <thead className="bg-gray-800 text-gray-100">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <th
+                      key={header.id}
+                      colSpan={header.colSpan}
+                      className="px-4 py-3 text-left"
+                    >
+                      {header.isPlaceholder ? null : (
+                        <>
+                          <div
+                            {...{
+                              className: header.column.getCanSort()
+                                ? 'cursor-pointer select-none hover:text-blue-400 transition-colors'
+                                : '',
+                              onClick: header.column.getToggleSortingHandler(),
+                            }}
+                          >
+                            {flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                            {{
+                              asc: ' 🔼',
+                              desc: ' 🔽',
+                            }[header.column.getIsSorted() as string] ?? null}
+                          </div>
+                          {header.column.getCanFilter() ? (
+                            <div className="mt-2">
+                              <Filter column={header.column} />
+                            </div>
+                          ) : null}
+                        </>
+                      )}
+                    </th>
+                  )
+                })}
+              </tr>
+            ))}
+          </thead>
+          <tbody className="divide-y divide-gray-700">
+            {table.getRowModel().rows.map((row) => {
+              return (
+                <tr
+                  key={row.id}
+                  className="hover:bg-gray-800 transition-colors"
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    return (
+                      <td key={cell.id} className="px-4 py-3">
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    )
+                  })}
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      <div className="h-4" />
+      <div className="flex flex-wrap items-center gap-2 text-gray-200">
+        <button
+          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<<'}
+        </button>
+        <button
+          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          {'<'}
+        </button>
+        <button
+          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>'}
+        </button>
+        <button
+          className="px-3 py-1 bg-gray-800 rounded-md hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          {'>>'}
+        </button>
+        <span className="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {table.getState().pagination.pageIndex + 1} of{' '}
+            {table.getPageCount()}
+          </strong>
+        </span>
+        <span className="flex items-center gap-1">
+          | Go to page:
+          <input
+            type="number"
+            defaultValue={table.getState().pagination.pageIndex + 1}
+            onChange={(e) => {
+              const page = e.target.value ? Number(e.target.value) - 1 : 0
+              table.setPageIndex(page)
+            }}
+            className="w-16 px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+          />
+        </span>
+        <select
+          value={table.getState().pagination.pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.target.value))
+          }}
+          className="px-2 py-1 bg-gray-800 rounded-md border border-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+        >
+          {[10, 20, 30, 40, 50].map((pageSize) => (
+            <option key={pageSize} value={pageSize}>
+              Show {pageSize}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="mt-4 text-gray-400">
+        {table.getPrePaginationRowModel().rows.length} Rows
+      </div>
+      <div className="mt-4 flex gap-2">
+        <button
+          onClick={() => rerender()}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Force Rerender
+        </button>
+        <button
+          onClick={() => refreshData()}
+          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Refresh Data
+        </button>
+      </div>
+      <pre className="mt-4 p-4 bg-gray-800 rounded-lg text-gray-300 overflow-auto">
+        {JSON.stringify(
+          {
+            columnFilters: table.getState().columnFilters,
+            globalFilter: table.getState().globalFilter,
+          },
+          null,
+          2,
+        )}
+      </pre>
+    </div>
+  )
+}
+
+function Filter({ column }: { column: Column<any, unknown> }) {
+  const columnFilterValue = column.getFilterValue()
+
+  return (
+    <DebouncedInput
+      type="text"
+      value={(columnFilterValue ?? '') as string}
+      onChange={(value) => column.setFilterValue(value)}
+      placeholder={`Search...`}
+      className="w-full px-2 py-1 bg-gray-700 text-white rounded-md border border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
+    />
+  )
+}
+
+// A typical debounced input react component
+function DebouncedInput({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}: {
+  value: string | number
+  onChange: (value: string | number) => void
+  debounce?: number
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'>) {
+  const [value, setValue] = React.useState(initialValue)
+
+  React.useEffect(() => {
+    setValue(initialValue)
+  }, [initialValue])
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value)
+    }, debounce)
+
+    return () => clearTimeout(timeout)
+  }, [value])
+
+  return (
+    <input
+      {...props}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/table',
+  component: TableDemo,
+  getParentRoute: () => parentRoute,
+})
+<% } %>
+  

package/templates/react/add-on/table/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "Table",
+  "description": "Integrate TanStack Table into your application.",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/table/latest",
+  "routes": [
+    {
+      "url": "/demo/table",
+      "name": "TanStack Table"
+    }
+  ]
+}

package/templates/react/add-on/table/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@faker-js/faker": "^9.6.0",
+    "@tanstack/match-sorter-utils": "^8.19.4",
+    "@tanstack/react-table": "^8.21.2"
+  }
+}

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/layout.tsx

@@ -0,0 +1,5 @@
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+export default function LayoutAddition() {
+  return <ReactQueryDevtools buttonPosition="bottom-right" />
+}

package/templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -0,0 +1,70 @@
+<% if (addOnEnabled.tRPC) { %>
+import { QueryClient } from "@tanstack/react-query";
+import superjson from "superjson";
+import { createTRPCClient, httpBatchStreamLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+
+import { TRPCProvider } from "@/integrations/trpc/react";
+
+import type { TRPCRouter } from "@/integrations/trpc/router";
+
+function getUrl() {
+  const base = (() => {
+    if (typeof window !== "undefined") return "";
+    return `http://localhost:${process.env.PORT ?? 3000}`;
+  })();
+  return `${base}/api/trpc`;
+}
+
+export const trpcClient = createTRPCClient<TRPCRouter>({
+  links: [
+    httpBatchStreamLink({
+      transformer: superjson,
+      url: getUrl(),
+    }),
+  ],
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    dehydrate: { serializeData: superjson.serialize },
+    hydrate: { deserializeData: superjson.deserialize },
+  },
+});
+
+const serverHelpers = createTRPCOptionsProxy({
+  client: trpcClient,
+  queryClient: queryClient,
+});
+
+export function getContext() {
+  return {
+    queryClient,
+    trpc: serverHelpers,
+  };
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
+  );
+}
+<% } else { %>
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export function getContext() {
+  return {
+    queryClient,
+  }
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+<% } %>

package/templates/react/add-on/tanstack-query/assets/src/routes/demo.tanstack-query.tsx.ejs

@@ -0,0 +1,53 @@
+import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import { useTRPC } from "@/integrations/trpc/react";
+<% } %>
+<% if (codeRouter) { %>
+import type { RootRoute } from '@tanstack/react-router'
+<% } else { %>
+export const Route = createFileRoute('/demo/tanstack-query')({
+<% if (addOnEnabled.tRPC) { %>
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.people.list.queryOptions()
+    );
+  },
+<% } %>
+  component: TanStackQueryDemo,
+})
+<% } %>
+function TanStackQueryDemo() {
+<% if (addOnEnabled.tRPC) { %>
+  const trpc = useTRPC();
+  const { data } = useQuery(trpc.people.list.queryOptions());
+<% } else { %>
+  const { data } = useQuery({
+    queryKey: ['people'],
+    queryFn: () => Promise.resolve([
+      { name: 'John Doe' },
+      { name: 'Jane Doe' },
+    ]),
+    initialData: [],
+  })
+<% } %>
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl mb-4">People list from Swapi</h1>
+      <ul>
+        {data.map((person) => (
+          <li key={person.name}>{person.name}</li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+<% if (codeRouter) { %>
+export default (parentRoute: RootRoute) => createRoute({
+  path: '/demo/tanstack-query',
+  component: TanStackQueryDemo,
+  getParentRoute: () => parentRoute,
+})
+<% } %>

package/templates/react/add-on/tanstack-query/info.json

@@ -0,0 +1,13 @@
+{
+  "name": "TanStack Query",
+  "description": "Integrate TanStack Query into your application.",
+  "phase": "add-on",
+  "templates": ["file-router", "code-router"],
+  "link": "https://tanstack.com/query/latest",
+  "routes": [
+    {
+      "url": "/demo/tanstack-query",
+      "name": "TanStack Query"
+    }
+  ]
+}

package/templates/react/add-on/tanstack-query/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tanstack/react-query": "^5.66.5",
+    "@tanstack/react-query-devtools": "^5.66.5"
+  }
+}