Add TanStack Start example integration with Builder.io (#3984)

This PR adds a new example demonstrating the integration of Builder.io
with TanStack Router.

The example includes:
- Server-side rendering (SSR) support
- Builder component registry
- Catch-all route for Builder pages
- Quick setup instructions

This helps expand our framework support to include TanStack Start, which
is gaining popularity for React applications.

Author: paprikaf

.gitignore

@@ -1,41 +1,7 @@
-node_modules
-*.log
-dist
-test-lib/**/*.js
-coverage
-.history
-.nyc_output
-.idea
-.vscode
-.next
-firebase.json
-temp
-yarn-error.log
-.build
-Pods/
-
-**/xcuserdata/*
-**/build/*
-
-**/.pnp.*
-**/.yarn/*
-!**/.yarn/patches
-!**/.yarn/plugins
-!**/.yarn/releases
-!**/.yarn/sdks
-!**/.yarn/versions
-
-# macOS
-.DS_Store
-
-.cache
-.rpt2_cache/
-
-.env
-.vercel
-
-.nx/cache
-.nx-cache
-.nx/workspace-data
-
-!packages/sdks/e2e/react-native-74/.eas/build/*
+/nbproject/
+/.idea/*
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+*.sublime-project

examples/tanstack-start/.gitignore

@@ -0,0 +1,22 @@
+node_modules
+package-lock.json
+yarn.lock
+
+.DS_Store
+.cache
+.env
+.vercel
+.output
+.vinxi
+
+/build/
+/api/
+/server/build
+/public/build
+.vinxi
+# Sentry Config File
+.env.sentry-build-plugin
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

examples/tanstack-start/.prettierignore

@@ -0,0 +1,4 @@
+**/build
+**/public
+pnpm-lock.yaml
+routeTree.gen.ts

examples/tanstack-start/app.config.ts

@@ -0,0 +1,13 @@
+// app.config.ts
+import { defineConfig } from '@tanstack/react-start/config'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+export default defineConfig({
+  vite: {
+    plugins: [
+      tsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+    ],
+  },
+})

examples/tanstack-start/app/builder_registry.ts

@@ -0,0 +1,16 @@
+import { type RegisteredComponent } from "@builder.io/sdk-react";
+import { Test } from "./components/test";
+
+export const customComponents: RegisteredComponent[] = [
+  {
+    component: Test,
+    name: "Test",
+    inputs: [
+      {
+        name: "text",
+        type: "string",
+        defaultValue: "Hello world",
+      },
+    ],
+  },
+];

examples/tanstack-start/app/client.tsx

@@ -0,0 +1,8 @@
+/// <reference types="vinxi/types/client" />
+import { hydrateRoot } from 'react-dom/client'
+import { StartClient } from '@tanstack/react-start'
+import { createRouter } from './router'
+
+const router = createRouter()
+
+hydrateRoot(document, <StartClient router={router} />)

examples/tanstack-start/app/components/builder.tsx

@@ -0,0 +1,14 @@
+import {
+    Content,
+    isPreviewing,
+} from '@builder.io/sdk-react';
+import { ComponentProps } from 'react';
+
+type BuilderContentProps = Omit<ComponentProps<typeof Content>, 'content'> & {
+    content: any;
+}
+
+export function RenderBuilderContent(props: BuilderContentProps) {
+    // Always render the Content component - it handles the preview mode internally
+    return <Content {...props} />
+}

examples/tanstack-start/app/components/test.tsx

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react'
+
+interface TestProps {
+  children?: ReactNode
+}
+
+export function Test({ children }: TestProps) {
+  return (
+    <div>
+        <p>Test Component</p>
+        {children}
+    </div>
+  )
+}

examples/tanstack-start/app/routeTree.gen.ts

@@ -0,0 +1,88 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as SplatImport } from './routes/$'
+
+// Create/Update Routes
+
+const SplatRoute = SplatImport.update({
+  id: '/$',
+  path: '/$',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/$': {
+      id: '/$'
+      path: '/$'
+      fullPath: '/$'
+      preLoaderRoute: typeof SplatImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/$': typeof SplatRoute
+}
+
+export interface FileRoutesByTo {
+  '/$': typeof SplatRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/$': typeof SplatRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/$'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/$'
+  id: '__root__' | '/$'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  SplatRoute: typeof SplatRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  SplatRoute: SplatRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/$"
+      ]
+    },
+    "/$": {
+      "filePath": "$.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

examples/tanstack-start/app/router.tsx

@@ -0,0 +1,17 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router'
+import { routeTree } from './routeTree.gen'
+
+export function createRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+  })
+
+  return router
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>
+  }
+}