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

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

@@ -1,16 +0,0 @@
-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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,50 +0,0 @@
-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

@@ -1,373 +0,0 @@
-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

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,7 +0,0 @@
-{
-  "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

@@ -1,5 +0,0 @@
-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

@@ -1,70 +0,0 @@
-<% 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

@@ -1,53 +0,0 @@
-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

@@ -1,13 +0,0 @@
-{
-  "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

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