Skip to content

make solid work with start again #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 25, 2025
Merged

make solid work with start again #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions frameworks/solid/project/base/src/components/Header.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const icons = new Set([
"Menu",
"X",
"House",
"Home",
Copy link
Member

@birkskyum birkskyum Oct 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the "Home" has been renamed "House" in lucide-solid

Copy link
Contributor Author

@brenelz brenelz Oct 25, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are you sure? When i tested it was complaining about Home being missing

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-10-25 at 19 51 51

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then we need to change the place its actually used too

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2025-10-25 at 19 53 50

"Globe",
"ChevronDown",
"ChevronRight",
Expand Down
38 changes: 38 additions & 0 deletions frameworks/solid/project/base/src/routes/__root.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ import <%= integration.jsName %> from "<%= relativePath(integration.path) %>";
<% if (addOnEnabled['solid-ui']) { %>
import "@fontsource/inter"
<% } %>

<% if (addOnEnabled.start) { %>
import { HydrationScript } from 'solid-js/web'
import { Suspense } from 'solid-js'
<% } %>

<% if (addOns.length || integrations.length || routes.length) { %>import Header from '../components/Header'
<% } %>
<% for(const addOn of addOns) {
Expand All @@ -21,6 +27,37 @@ export const Route = createRootRouteWithContext()({
shellComponent: RootComponent,
})

<% if (addOnEnabled.start) { %>
function RootComponent() {
return (
<html>
<head>
<HydrationScript />
</head>
<body>
<HeadContent />
<Suspense>
<% for(const integration of integrations.filter(i => i.type === 'provider')) { %>
<<%= integration.jsName %>>
<% } %>
<% if (addOns.length || integrations.length || routes.length) { %>
<Header />
<% } %>
<Outlet />
<TanStackRouterDevtools />
<% for(const integration of integrations.filter(i => i.type === 'layout')) { %>
<<%= integration.jsName %> />
<% } %>
<% for(const integration of integrations.filter(i => i.type === 'provider').reverse()) { %>
</<%= integration.jsName %>>
<% } %>
</Suspense>
<Scripts />
</body>
</html>
);
}
<% } else { %>
function RootComponent() {
return (
<>
Expand All @@ -43,3 +80,4 @@ function RootComponent() {
</>
)
}
<% } %>
2 changes: 1 addition & 1 deletion frameworks/solid/src/checksum.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = '82c4550425f4f669cf913e75164cbfdc8b1b64e2afe548339297eeb6c9e581c9'
export const contentChecksum = '4db9b64a6be7a440ed6fa534528bd1b1f9256f1039d02a446f4612c4c4605e2a'
4 changes: 2 additions & 2 deletions frameworks/solid/tests/snapshots/solid/solid-cr-ts-start-npm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
"/.vscode/settings.json": "{\n \"files.watcherExclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"search.exclude\": {\n \"**/routeTree.gen.ts\": true\n },\n \"files.readonlyInclude\": {\n \"**/routeTree.gen.ts\": true\n }\n}\n",
"/public/manifest.json": "{\n \"short_name\": \"TanStack App\",\n \"name\": \"Create TanStack App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n \"sizes\": \"64x64 32x32 24x24 16x16\",\n \"type\": \"image/x-icon\"\n },\n {\n \"src\": \"logo192.png\",\n \"type\": \"image/png\",\n \"sizes\": \"192x192\"\n },\n {\n \"src\": \"logo512.png\",\n \"type\": \"image/png\",\n \"sizes\": \"512x512\"\n }\n ],\n \"start_url\": \".\",\n \"display\": \"standalone\",\n \"theme_color\": \"#000000\",\n \"background_color\": \"#ffffff\"\n}\n",
"/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
"/src/components/Header.tsx": "import { Link } from '@tanstack/solid-router'\n\nimport { createSignal } from 'solid-js'\nimport {\n ChevronDown,\n ChevronRight,\n Globe,\n House,\n Layers,\n Menu,\n X,\n} from 'lucide-solid'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = createSignal(false)\n const [groupedExpanded, setGroupedExpanded] = createSignal<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header class=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n class=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 class=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n class=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n class={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${\n isOpen() ? 'translate-x-0' : '-translate-x-full'\n }`}\n >\n <div class=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 class=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n class=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n aria-label=\"Close menu\"\n >\n <X size={24} />\n </button>\n </div>\n\n <nav class=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Home size={20} />\n <span class=\"font-medium\">Home</span>\n </Link>\n\n {/* Demo Links Start */}\n\n <Link\n to=\"/demo/start/server-funcs\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Globe size={20} />\n <span class=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n",
"/src/components/Header.tsx": "import { Link } from '@tanstack/solid-router'\n\nimport { createSignal } from 'solid-js'\nimport {\n ChevronDown,\n ChevronRight,\n Globe,\n Home,\n House,\n Layers,\n Menu,\n X,\n} from 'lucide-solid'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = createSignal(false)\n const [groupedExpanded, setGroupedExpanded] = createSignal<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header class=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n class=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 class=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n class=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n class={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${\n isOpen() ? 'translate-x-0' : '-translate-x-full'\n }`}\n >\n <div class=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 class=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n class=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n aria-label=\"Close menu\"\n >\n <X size={24} />\n </button>\n </div>\n\n <nav class=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Home size={20} />\n <span class=\"font-medium\">Home</span>\n </Link>\n\n {/* Demo Links Start */}\n\n <Link\n to=\"/demo/start/server-funcs\"\n onClick={() => setIsOpen(false)}\n class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n class:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Globe size={20} />\n <span class=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n",
"/src/router.tsx": "import { createRouter } from '@tanstack/solid-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n const router = createRouter({\n routeTree,\n scrollRestoration: true,\n })\n return router\n}\n",
"/src/routes/__root.tsx": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRouteWithContext,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport Header from '../components/Header'\n\nimport styleCss from '../styles.css?url'\n\nexport const Route = createRootRouteWithContext()({\n head: () => ({\n links: [{ rel: 'stylesheet', href: styleCss }],\n }),\n shellComponent: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <>\n <HeadContent />\n\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n\n <Scripts />\n </>\n )\n}\n",
"/src/routes/__root.tsx": "import {\n HeadContent,\n Outlet,\n Scripts,\n createRootRouteWithContext,\n} from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport { HydrationScript } from 'solid-js/web'\nimport { Suspense } from 'solid-js'\n\nimport Header from '../components/Header'\n\nimport styleCss from '../styles.css?url'\n\nexport const Route = createRootRouteWithContext()({\n head: () => ({\n links: [{ rel: 'stylesheet', href: styleCss }],\n }),\n shellComponent: RootComponent,\n})\n\nfunction RootComponent() {\n return (\n <html>\n <head>\n <HydrationScript />\n </head>\n <body>\n <HeadContent />\n <Suspense>\n <Header />\n\n <Outlet />\n <TanStackRouterDevtools />\n </Suspense>\n <Scripts />\n </body>\n </html>\n )\n}\n",
"/src/routes/demo.start.server-funcs.tsx": "import * as fs from 'fs'\nimport { createFileRoute, useRouter } from '@tanstack/solid-router'\nimport { createServerFn } from '@tanstack/solid-start'\n\nconst filePath = 'count.txt'\n\nasync function readCount() {\n return parseInt(\n await fs.promises.readFile(filePath, 'utf-8').catch(() => '0'),\n )\n}\n\nconst getCount = createServerFn({\n method: 'GET',\n}).handler(() => {\n return readCount()\n})\n\nconst updateCount = createServerFn({ method: 'POST' })\n .inputValidator((d: number) => d)\n .handler(async ({ data }) => {\n const count = await readCount()\n await fs.promises.writeFile(filePath, `${count + data}`)\n })\n\nexport const Route = createFileRoute('/demo/start/server-funcs')({\n component: Home,\n loader: async () => await getCount(),\n})\n\nfunction Home() {\n const router = useRouter()\n const state = Route.useLoaderData()\n\n return (\n <div class=\"p-4\">\n <button\n onClick={() => {\n updateCount({ data: 1 }).then(() => {\n router.invalidate()\n })\n }}\n class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"\n >\n Add 1 to {state()}?\n </button>\n </div>\n )\n}\n",
"/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport { For } from 'solid-js'\nimport {\n Zap,\n Server,\n Route as RouteIcon,\n Shield,\n Waves,\n Sparkles,\n} from 'lucide-solid'\n\nexport const Route = createFileRoute('/')({ component: App })\n\nfunction App() {\n const features = [\n {\n icon: <Zap class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Powerful Server Functions',\n description:\n 'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.',\n },\n {\n icon: <Server class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Flexible Server Side Rendering',\n description:\n 'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.',\n },\n {\n icon: <RouteIcon class=\"w-12 h-12 text-cyan-400\" />,\n title: 'API Routes',\n description:\n 'Build type-safe API endpoints alongside your application. No separate backend needed.',\n },\n {\n icon: <Shield class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Strongly Typed Everything',\n description:\n 'End-to-end type safety from server to client. Catch errors before they reach production.',\n },\n {\n icon: <Waves class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Full Streaming Support',\n description:\n 'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',\n },\n {\n icon: <Sparkles class=\"w-12 h-12 text-cyan-400\" />,\n title: 'Next Generation Ready',\n description:\n 'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',\n },\n ]\n\n return (\n <div class=\"min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900\">\n <section class=\"relative py-20 px-6 text-center overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10\"></div>\n <div class=\"relative max-w-5xl mx-auto\">\n <div class=\"flex items-center justify-center gap-6 mb-6\">\n <img\n src=\"/tanstack-circle-logo.png\"\n alt=\"TanStack Logo\"\n class=\"w-24 h-24 md:w-32 md:h-32\"\n />\n <h1 class=\"text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]\">\n <span class=\"text-gray-300\">TANSTACK</span>{' '}\n <span class=\"bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\">\n START\n </span>\n </h1>\n </div>\n <p class=\"text-2xl md:text-3xl text-gray-300 mb-4 font-light\">\n The framework for next generation AI applications\n </p>\n <p class=\"text-lg text-gray-400 max-w-3xl mx-auto mb-8\">\n Full-stack framework powered by TanStack Router for React and Solid.\n Build modern applications with server functions, streaming, and type\n safety.\n </p>\n <div class=\"flex flex-col items-center gap-4\">\n <a\n href=\"https://tanstack.com/start\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n class=\"px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50\"\n >\n Documentation\n </a>\n <p class=\"text-gray-400 text-sm mt-2\">\n Begin your TanStack Start journey by editing{' '}\n <code class=\"px-2 py-1 bg-slate-700 rounded text-cyan-400\">\n /src/routes/index.tsx\n </code>\n </p>\n </div>\n </div>\n </section>\n\n <section class=\"py-16 px-6 max-w-7xl mx-auto\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <For each={features}>\n {(feature) => (\n <div class=\"bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10\">\n <div class=\"mb-4\">{feature.icon}</div>\n <h3 class=\"text-xl font-semibold text-white mb-3\">\n {feature.title}\n </h3>\n <p class=\"text-gray-400 leading-relaxed\">\n {feature.description}\n </p>\n </div>\n )}\n </For>\n </div>\n </section>\n </div>\n )\n}\n",
"/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n @apply m-0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n",
Expand Down