Skip to content

Commit 8c46427

Browse files
jherrjherr
committed
fix: temporarily simplifying cloudflare server functions example
1 parent 985175d commit 8c46427

File tree

6 files changed

+52
-12
lines changed

6 files changed

+52
-12
lines changed

‎frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx‎ renamed to ‎frameworks/react-cra/add-ons/start/assets/src/routes/demo/start.server-funcs.tsx.ejs‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,45 @@
1-
import fs from 'node:fs'
1+
<% if (addOnEnabled.cloudflare) { %>import { useState } from "react";
2+
import { createFileRoute } from "@tanstack/react-router";
3+
import { createServerFn } from "@tanstack/react-start";
4+
5+
const getCurrentServerTime = createServerFn({
6+
method: "GET",
7+
}).handler(async () => await new Date().toISOString());
8+
9+
export const Route = createFileRoute("/demo/start/server-funcs")({
10+
component: Home,
11+
loader: async () => await getCurrentServerTime(),
12+
});
13+
14+
function Home() {
15+
const originalTime = Route.useLoaderData();
16+
const [time, setTime] = useState(originalTime);
17+
18+
return (
19+
<div
20+
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
21+
style={{
22+
backgroundImage:
23+
"radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)",
24+
}}
25+
>
26+
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
27+
<h1 className="text-2xl mb-4">Start Server Functions - Server Time</h1>
28+
<div className="flex flex-col gap-2">
29+
<div className="text-xl">Starting Time: {originalTime}</div>
30+
<div className="text-xl">Current Time: {time}</div>
31+
<button
32+
className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
33+
onClick={async () => setTime(await getCurrentServerTime())}
34+
>
35+
Refresh
36+
</button>
37+
</div>
38+
</div>
39+
</div>
40+
);
41+
}
42+
<% } else { %>import fs from 'node:fs'
243
import { useCallback, useState } from 'react'
344
import { createFileRoute, useRouter } from '@tanstack/react-router'
445
import { createServerFn } from '@tanstack/react-start'
@@ -95,3 +136,4 @@ function Home() {
95136
</div>
96137
)
97138
}
139+
<% } %>

‎frameworks/react-cra/add-ons/start/info.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,42 @@
77
"type": "add-on",
88
"routes": [
99
{
10-
"icon": "Server",
10+
"icon": "SquareFunction",
1111
"url": "/demo/start/server-funcs",
1212
"name": "Start - Server Functions",
1313
"path": "src/routes/demo.start.server-funcs.tsx",
1414
"jsName": "StartServerFuncsDemo"
1515
},
1616
{
17-
"icon": "Server",
17+
"icon": "Network",
1818
"url": "/demo/start/api-request",
1919
"name": "Start - API Request",
2020
"path": "src/routes/demo.start.api-request.tsx",
2121
"jsName": "StartApiRequestDemo"
2222
},
2323
{
24-
"icon": "Server",
24+
"icon": "StickyNote",
2525
"url": "/demo/start/ssr",
2626
"name": "Start - SSR Demos",
2727
"path": "src/routes/demo.start.ssr.index.tsx",
2828
"jsName": "StartSSRDemo",
2929
"children": [
3030
{
31-
"icon": "Server",
31+
"icon": "StickyNote",
3232
"url": "/demo/start/ssr/spa-mode",
3333
"name": "SPA Mode",
3434
"path": "src/routes/demo.start.ssr.spa-mode.tsx",
3535
"jsName": "StartSSRSpamodeDemo"
3636
},
3737
{
38-
"icon": "Server",
38+
"icon": "StickyNote",
3939
"url": "/demo/start/ssr/full-ssr",
4040
"name": "Full SSR",
4141
"path": "src/routes/demo.start.ssr.full-ssr.tsx",
4242
"jsName": "StartSSRFullSsrDemo"
4343
},
4444
{
45-
"icon": "Server",
45+
"icon": "StickyNote",
4646
"url": "/demo/start/ssr/data-only",
4747
"name": "Data Only",
4848
"path": "src/routes/demo.start.ssr.data-only.tsx",

‎frameworks/react-cra/project/base/src/components/Header.tsx.ejs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ const icons = new Set([
66
"Menu",
77
"X",
88
"Home",
9-
"Globe",
109
"ChevronDown",
1110
"ChevronRight",
12-
"Layers",
1311
])
1412
1513
for(const addOn of addOns) {

‎frameworks/react-cra/tests/snapshots/react-cra/cr-ts-start-npm.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"/.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",
66
"/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",
77
"/public/robots.txt": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n",
8-
"/src/components/Header.tsx": "import { Link } from '@tanstack/react-router'\n\nimport { useState } from 'react'\nimport {\n ChevronDown,\n ChevronRight,\n Globe,\n Home,\n Layers,\n Menu,\n Server,\n X,\n} from 'lucide-react'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = useState(false)\n const [groupedExpanded, setGroupedExpanded] = useState<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header className=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n className=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 className=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n className=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n className={`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 className=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 className=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n className=\"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 className=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\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 className=\"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 className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n <Link\n to=\"/demo/start/api-request\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">Start - API Request</span>\n </Link>\n\n <div className=\"flex flex-row justify-between\">\n <Link\n to=\"/demo/start/ssr\"\n onClick={() => setIsOpen(false)}\n className=\"flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">Start - SSR Demos</span>\n </Link>\n <button\n className=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n onClick={() =>\n setGroupedExpanded((prev) => ({\n ...prev,\n StartSSRDemo: !prev.StartSSRDemo,\n }))\n }\n >\n {groupedExpanded.StartSSRDemo ? (\n <ChevronDown size={20} />\n ) : (\n <ChevronRight size={20} />\n )}\n </button>\n </div>\n {groupedExpanded.StartSSRDemo && (\n <div className=\"flex flex-col ml-4\">\n <Link\n to=\"/demo/start/ssr/spa-mode\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">SPA Mode</span>\n </Link>\n\n <Link\n to=\"/demo/start/ssr/full-ssr\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">Full SSR</span>\n </Link>\n\n <Link\n to=\"/demo/start/ssr/data-only\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Server size={20} />\n <span className=\"font-medium\">Data Only</span>\n </Link>\n </div>\n )}\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n",
8+
"/src/components/Header.tsx": "import { Link } from '@tanstack/react-router'\n\nimport { useState } from 'react'\nimport {\n ChevronDown,\n ChevronRight,\n Home,\n Menu,\n Network,\n SquareFunction,\n StickyNote,\n X,\n} from 'lucide-react'\n\nexport default function Header() {\n const [isOpen, setIsOpen] = useState(false)\n const [groupedExpanded, setGroupedExpanded] = useState<\n Record<string, boolean>\n >({})\n\n return (\n <>\n <header className=\"p-4 flex items-center bg-gray-800 text-white shadow-lg\">\n <button\n onClick={() => setIsOpen(true)}\n className=\"p-2 hover:bg-gray-700 rounded-lg transition-colors\"\n aria-label=\"Open menu\"\n >\n <Menu size={24} />\n </button>\n <h1 className=\"ml-4 text-xl font-semibold\">\n <Link to=\"/\">\n <img\n src=\"/tanstack-word-logo-white.svg\"\n alt=\"TanStack Logo\"\n className=\"h-10\"\n />\n </Link>\n </h1>\n </header>\n\n <aside\n className={`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 className=\"flex items-center justify-between p-4 border-b border-gray-700\">\n <h2 className=\"text-xl font-bold\">Navigation</h2>\n <button\n onClick={() => setIsOpen(false)}\n className=\"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 className=\"flex-1 p-4 overflow-y-auto\">\n <Link\n to=\"/\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\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 className=\"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 className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <SquareFunction size={20} />\n <span className=\"font-medium\">Start - Server Functions</span>\n </Link>\n\n <Link\n to=\"/demo/start/api-request\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <Network size={20} />\n <span className=\"font-medium\">Start - API Request</span>\n </Link>\n\n <div className=\"flex flex-row justify-between\">\n <Link\n to=\"/demo/start/ssr\"\n onClick={() => setIsOpen(false)}\n className=\"flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <StickyNote size={20} />\n <span className=\"font-medium\">Start - SSR Demos</span>\n </Link>\n <button\n className=\"p-2 hover:bg-gray-800 rounded-lg transition-colors\"\n onClick={() =>\n setGroupedExpanded((prev) => ({\n ...prev,\n StartSSRDemo: !prev.StartSSRDemo,\n }))\n }\n >\n {groupedExpanded.StartSSRDemo ? (\n <ChevronDown size={20} />\n ) : (\n <ChevronRight size={20} />\n )}\n </button>\n </div>\n {groupedExpanded.StartSSRDemo && (\n <div className=\"flex flex-col ml-4\">\n <Link\n to=\"/demo/start/ssr/spa-mode\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <StickyNote size={20} />\n <span className=\"font-medium\">SPA Mode</span>\n </Link>\n\n <Link\n to=\"/demo/start/ssr/full-ssr\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <StickyNote size={20} />\n <span className=\"font-medium\">Full SSR</span>\n </Link>\n\n <Link\n to=\"/demo/start/ssr/data-only\"\n onClick={() => setIsOpen(false)}\n className=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2\"\n activeProps={{\n className:\n 'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',\n }}\n >\n <StickyNote size={20} />\n <span className=\"font-medium\">Data Only</span>\n </Link>\n </div>\n )}\n\n {/* Demo Links End */}\n </nav>\n </aside>\n </>\n )\n}\n",
99
"/src/data/demo.punk-songs.ts": "import { createServerFn } from '@tanstack/react-start'\n\nexport const getPunkSongs = createServerFn({\n method: 'GET',\n}).handler(async () => [\n { id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },\n { id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },\n { id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },\n { id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },\n { id: 5, name: 'Fat Lip', artist: 'Sum 41' },\n { id: 6, name: 'All the Small Things', artist: 'blink-182' },\n { id: 7, name: 'Beverly Hills', artist: 'Weezer' },\n])\n",
1010
"/src/router.tsx": "import { createRouter } from '@tanstack/react-router'\n\n// Import the generated route tree\nimport { routeTree } from './routeTree.gen'\n\n// Create a new router instance\nexport const getRouter = () => {\n return createRouter({\n routeTree,\n scrollRestoration: true,\n defaultPreloadStaleTime: 0,\n })\n}\n",
1111
"/src/routes/__root.tsx": "import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'\nimport { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'\nimport { TanStackDevtools } from '@tanstack/react-devtools'\n\nimport Header from '../components/Header'\n\nimport appCss from '../styles.css?url'\n\nexport const Route = createRootRoute({\n head: () => ({\n meta: [\n {\n charSet: 'utf-8',\n },\n {\n name: 'viewport',\n content: 'width=device-width, initial-scale=1',\n },\n {\n title: 'TanStack Start Starter',\n },\n ],\n links: [\n {\n rel: 'stylesheet',\n href: appCss,\n },\n ],\n }),\n\n shellComponent: RootDocument,\n})\n\nfunction RootDocument({ children }: { children: React.ReactNode }) {\n return (\n <html lang=\"en\">\n <head>\n <HeadContent />\n </head>\n <body>\n <Header />\n {children}\n <TanStackDevtools\n config={{\n position: 'bottom-right',\n }}\n plugins={[\n {\n name: 'Tanstack Router',\n render: <TanStackRouterDevtoolsPanel />,\n },\n ]}\n />\n <Scripts />\n </body>\n </html>\n )\n}\n",

0 commit comments

Comments
 (0)