Merge branch 'main' into start-client-core-disable-import-order-rule

Author: nlynzaad

docs/router/framework/react/guide/type-safety.md

@@ -26,7 +26,7 @@ const parentRoute = createRoute({
 
 ## Exported Hooks, Components, and Utilities
 
-For the types of your router to work with top-level exports like `Link`, `useNavigate`, `useParams`, etc. they must permeate the type-script module boundary and be registered right into the library. To do this, we use declaration merging on the exported `Register` interface.
+For the types of your router to work with top-level exports like `Link`, `useNavigate`, `useParams`, etc. they must permeate the TypeScript module boundary and be registered right into the library. To do this, we use declaration merging on the exported `Register` interface.
 
 ```ts
 const router = createRouter({

docs/start/config.json

@@ -334,6 +334,10 @@
               "label": "Basic + Static rendering",
               "to": "framework/solid/examples/start-basic-static"
             },
+            {
+              "label": "Basic + Supabase",
+              "to": "framework/solid/examples/start-basic-supabase"
+            },
             {
               "label": "Cloudflare Vite Plugin",
               "to": "framework/solid/examples/start-basic-cloudflare"

docs/start/framework/react/guide/observability.md

@@ -519,6 +519,7 @@ import {
   defaultStreamHandler,
   defineHandlerCallback,
 } from '@tanstack/react-start/server'
+import type { ServerEntry } from '@tanstack/react-start/server-entry'
 
 const customHandler = defineHandlerCallback(async (ctx) => {
   // We do this so that transactions are grouped under the route ID instead of unique URLs
@@ -538,11 +539,11 @@ const customHandler = defineHandlerCallback(async (ctx) => {
 })
 
 export default {
-  fetch(request: Request) {
+  fetch(request) {
     const handler = createStartHandler(customHandler)
     return handler(request)
   },
-}
+} satisfies ServerEntry
 ```
 
 ```bash

docs/start/framework/react/guide/server-entry-point.md

@@ -12,20 +12,20 @@ This is done via the `src/server.ts` file.
 
 ```tsx
 // src/server.ts
-import handler from '@tanstack/react-start/server-entry'
+import handler, { type ServerEntry } from '@tanstack/react-start/server-entry'
 
 export default {
-  fetch(request: Request) {
+  fetch(request) {
     return handler.fetch(request)
   },
-}
+} satisfies ServerEntry
 ```
 
-The entry point must conform to the following interface:
+The default export must conform to the `ServerEntry` interface:
 
-```tsx
+```ts
 export default {
-  fetch(req: Request): Promise<Response> {
+  fetch(req: Request, opts?: RequestOptions): Promise<Response> {
     // ...
   },
 }
@@ -44,6 +44,7 @@ import {
   defaultStreamHandler,
   defineHandlerCallback,
 } from '@tanstack/react-start/server'
+import type { ServerEntry } from '@tanstack/react-start/server-entry'
 
 const customHandler = defineHandlerCallback((ctx) => {
   // add custom logic here
@@ -54,7 +55,7 @@ const fetch = createStartHandler(customHandler)
 
 export default {
   fetch,
-}
+} satisfies ServerEntry
 ```
 
 ## Request context
@@ -64,7 +65,7 @@ When your server needs to pass additional, typed data into request handlers (for
 To add types for your request context, augment the `Register` interface from `@tanstack/react-start` with a `server.requestContext` property. The runtime `context` you pass to `handler.fetch` will then match that type. Example:
 
 ```tsx
-import handler from '@tanstack/react-start/server-entry'
+import handler, { type ServerEntry } from '@tanstack/react-start/server-entry'
 
 type MyRequestContext = {
   hello: string
@@ -80,10 +81,10 @@ declare module '@tanstack/react-start' {
 }
 
 export default {
-  async fetch(request: Request): Promise<Response> {
+  async fetch(request) {
     return handler.fetch(request, { context: { hello: 'world', foo: 123 } })
   },
-}
+} satisfies ServerEntry
 ```
 
 ## Server Configuration

docs/start/framework/solid/getting-started.md

@@ -7,7 +7,7 @@ title: Getting Started
 
 Choose one of the following options to start building a _new_ TanStack Start project:
 
-- [TanStack Start CLI] - Just run `npm create @tanstack/start@latest`. Local, fast, and optionally customizable
+- [TanStack Start CLI] - Just run `npm create @tanstack/start@latest -- --framework solid`. Local, fast, and optionally customizable
 - [TanStack Builder](#) (coming soon!) - A visual interface to configure new TanStack projects with a few clicks
 - [Quick Start Examples](../quick-start) Download or clone one of our official examples
 - [Build a project from scratch](../build-from-scratch) - A guide to building a TanStack Start project line-by-line, file-by-file.

docs/start/framework/solid/quick-start.md

@@ -8,13 +8,13 @@ title: Quick Start
 The fastest way to get a Start project up and running is with the cli. Just run
 
 ```
-pnpm create @tanstack/start@latest
+pnpm create @tanstack/start@latest --framework solid
 ```
 
 or
 
 ```
-npm create @tanstack/start@latest
+npm create @tanstack/start@latest -- --framework solid
 ```
 
 depending on your package manage of choice. You'll be prompted to add things like Tailwind, eslint, and a ton of other options.

e2e/react-router/basic-file-based/tests/app.spec.ts

@@ -296,6 +296,10 @@ test('Should not remount deps when remountDeps does not change ', async ({
   await expect(page.getByTestId('component-mounts')).toContainText(
     'Page component mounts: 1',
   )
+  await page.getByRole('button', { name: 'Regenerate search param' }).click()
+  await expect(page.getByTestId('component-mounts')).toContainText(
+    'Page component mounts: 1',
+  )
 })
 
 test('Should remount deps when remountDeps does change ', async ({ page }) => {
@@ -307,4 +311,8 @@ test('Should remount deps when remountDeps does change ', async ({ page }) => {
   await expect(page.getByTestId('component-mounts')).toContainText(
     'Page component mounts: 2',
   )
+  await page.getByRole('button', { name: 'Regenerate search param' }).click()
+  await expect(page.getByTestId('component-mounts')).toContainText(
+    'Page component mounts: 3',
+  )
 })

e2e/solid-router/basic-file-based/tests/app.spec.ts

@@ -284,6 +284,10 @@ test('Should not remount deps when remountDeps does not change ', async ({
   await expect(page.getByTestId('component-mounts')).toContainText(
     'Page component mounts: 1',
   )
+  await page.getByRole('button', { name: 'Regenerate search param' }).click()
+  await expect(page.getByTestId('component-mounts')).toContainText(
+    'Page component mounts: 1',
+  )
 })
 
 test('Should remount deps when remountDeps does change ', async ({ page }) => {
@@ -295,4 +299,8 @@ test('Should remount deps when remountDeps does change ', async ({ page }) => {
   await expect(page.getByTestId('component-mounts')).toContainText(
     'Page component mounts: 2',
   )
+  await page.getByRole('button', { name: 'Regenerate search param' }).click()
+  await expect(page.getByTestId('component-mounts')).toContainText(
+    'Page component mounts: 3',
+  )
 })

e2e/solid-router/basic-file-based/tests/params.spec.ts

@@ -56,81 +56,6 @@ test.describe('ensure single params have been parsed correctly whilst being stab
   }
 })
 
-test('ensure only applicable params are returned and updated with multiple params', async ({
-  page,
-}) => {
-  await page.goto('/params-ps/named/foo')
-  await page.waitForLoadState('networkidle')
-
-  const pagePathname = new URL(page.url()).pathname
-  expect(pagePathname).toBe('/params-ps/named/foo')
-
-  const fooRenderCount = page.getByTestId('foo-render-count')
-  const fooIndexLink = page.getByTestId('params-foo-links-index')
-  const fooBar1Link = page.getByTestId('params-foo-links-bar1')
-  const fooBar2Link = page.getByTestId('params-foo-links-bar2')
-  const fooBarBazLink = page.getByTestId('params-foo-bar-links-baz')
-  const fooValue = page.getByTestId('params-output')
-  const fooBarValue = page.getByTestId('foo-bar-value')
-  const fooBazInBarValue = page.getByTestId('foo-baz-in-bar-value')
-  const fooBarRenderCount = page.getByTestId('foo-bar-render-count')
-  const fooBazInBarRenderCount = page.getByTestId('foo-baz-in-bar-render-count')
-  const fooBarBazValue = page.getByTestId('foo-bar-baz-value')
-
-  await expect(fooRenderCount).toBeInViewport()
-  await expect(fooValue).toBeInViewport()
-  await expect(fooIndexLink).toBeInViewport()
-  await expect(fooBar1Link).toBeInViewport()
-  await expect(fooBar2Link).toBeInViewport()
-  await expect(fooRenderCount).toHaveText('1')
-  await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
-
-  await fooBar1Link.click()
-  await page.waitForLoadState('networkidle')
-  await expect(fooValue).toBeInViewport()
-  await expect(fooRenderCount).toBeInViewport()
-  await expect(fooBarRenderCount).toBeInViewport()
-  await expect(fooBarValue).toBeInViewport()
-  await expect(fooBazInBarValue).toBeInViewport()
-  await expect(fooBarBazLink).toBeInViewport()
-  await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
-  await expect(fooRenderCount).toHaveText('1')
-  await expect(fooBarRenderCount).toHaveText('1')
-  await expect(fooBarValue).toHaveText('1')
-  await expect(fooBazInBarValue).toHaveText('no param')
-  await expect(fooBazInBarRenderCount).toHaveText('1')
-
-  await fooBarBazLink.click()
-  await page.waitForLoadState('networkidle')
-  await expect(fooValue).toBeInViewport()
-  await expect(fooRenderCount).toBeInViewport()
-  await expect(fooBarRenderCount).toBeInViewport()
-  await expect(fooBarValue).toBeInViewport()
-  await expect(fooBazInBarValue).toBeInViewport()
-  await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
-  await expect(fooRenderCount).toHaveText('1')
-  await expect(fooBarRenderCount).toHaveText('1')
-  await expect(fooBarValue).toHaveText('1')
-  await expect(fooBazInBarValue).toHaveText('1_10')
-  await expect(fooBarBazValue).toHaveText('1_10')
-  await expect(fooBazInBarRenderCount).toHaveText('2')
-
-  await fooBar2Link.click()
-  await expect(fooValue).toBeInViewport()
-  await expect(fooRenderCount).toBeInViewport()
-  await expect(fooBarValue).toBeInViewport()
-  await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
-  await expect(fooRenderCount).toHaveText('1')
-  await expect(fooBarValue).toHaveText('2')
-
-  await fooIndexLink.click()
-  await expect(fooValue).toBeInViewport()
-  await expect(fooRenderCount).toBeInViewport()
-  await expect(fooBarValue).not.toBeInViewport()
-  await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
-  await expect(fooRenderCount).toHaveText('1')
-})
-
 test.describe('params operations + non-nested routes', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/params-ps/non-nested')
@@ -147,9 +72,9 @@ test.describe('params operations + non-nested routes', () => {
       'href',
       '/params-ps/non-nested/foo/bar',
     )
+
     await fooBarLink.click()
     await page.waitForURL('/params-ps/non-nested/foo/bar')
-
     const pagePathname = new URL(page.url()).pathname
     expect(pagePathname).toBe('/params-ps/non-nested/foo/bar')
 
@@ -320,7 +245,7 @@ test.describe('params operations + prefix/suffix', () => {
       await expect(fooBazInBarValue).toBeInViewport()
       await expect(fooValue).toHaveText(JSON.stringify({ foo: 'foo' }))
       await expect(fooRenderCount).toHaveText('1')
-      await expect(fooBarRenderCount).toHaveText('1')
+      await expect(fooBarRenderCount).toHaveText('2')
       await expect(fooBarValue).toHaveText('1')
       await expect(fooBazInBarValue).toHaveText('1_10')
       await expect(fooBarBazValue).toHaveText('1_10')

e2e/solid-router/basic/src/main.tsx

@@ -5,6 +5,7 @@ import {
   Link,
   Outlet,
   RouterProvider,
+  createLink,
   createRootRoute,
   createRoute,
   createRouter,
@@ -28,6 +29,7 @@ const rootRoute = createRootRoute({
 })
 
 function RootComponent() {
+  const SvgLink = createLink('svg')
   return (
     <>
       <HeadContent />
@@ -71,7 +73,23 @@ function RootComponent() {
           }}
         >
           This Route Does Not Exist
-        </Link>
+        </Link>{' '}
+        <div class="flex items-center">
+          <svg width="20" height="20" viewBox="0 0 20 20" role="img">
+            <title id="rectTitle">Link in SVG</title>
+            <SvgLink to="/posts" aria-label="Open posts from SVG">
+              <rect
+                x="0"
+                y="0"
+                width="20"
+                height="20"
+                rx="4"
+                fill="blue"
+                stroke-width="2"
+              />
+            </SvgLink>
+          </svg>
+        </div>
       </div>
       <Outlet />
       <TanStackRouterDevtools position="bottom-right" />