new examples

This commit is contained in:
Andras Bacsai
2025-12-26 11:40:00 +01:00
parent 35e4d33085
commit d3a2a9d83b
1164 changed files with 101362 additions and 160055 deletions

View File

@@ -0,0 +1,11 @@
node_modules/
.git/
.gitignore
.env
.env.local
*.md
.DS_Store
*.log
npm-debug.log*
.vinxi/
.output/

3
node/tanstack-start/ssr/.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
node_modules/
.vinxi/
.output/

View File

@@ -0,0 +1,3 @@
import { defineConfig } from '@tanstack/start/config';
export default defineConfig({});

View File

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

View File

@@ -0,0 +1,16 @@
import { createRootRoute, Outlet } from '@tanstack/react-router';
export const Route = createRootRoute({
component: () => (
<html>
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TanStack Start</title>
</head>
<body>
<Outlet />
</body>
</html>
),
});

View File

@@ -0,0 +1,19 @@
import { json } from '@tanstack/react-start';
import { createAPIFileRoute } from '@tanstack/react-start/api';
// Runtime env vars (read at server startup)
const RUNTIME_PRIVATE_VAR = process.env.RUNTIME_PRIVATE_VAR || 'default-value';
const RUNTIME_PUBLIC_VAR = process.env.RUNTIME_PUBLIC_VAR || 'default-value';
console.log('=== Runtime Variables ===');
console.log('RUNTIME_PRIVATE_VAR:', RUNTIME_PRIVATE_VAR);
console.log('RUNTIME_PUBLIC_VAR:', RUNTIME_PUBLIC_VAR);
export const APIRoute = createAPIFileRoute('/api/env')({
GET: () => {
return json({
runtimePrivateVar: RUNTIME_PRIVATE_VAR,
runtimePublicVar: RUNTIME_PUBLIC_VAR,
});
},
});

View File

@@ -0,0 +1,49 @@
import { createFileRoute } from '@tanstack/react-router';
import { useEffect, useState } from 'react';
export const Route = createFileRoute('/')({
component: Home,
});
function Home() {
// Build-time public var (baked into bundle)
const buildPublicVar = import.meta.env.VITE_BUILD_PUBLIC_VAR || 'default-value';
// Runtime vars (fetched from server API)
const [runtimePrivateVar, setRuntimePrivateVar] = useState('loading...');
const [runtimePublicVar, setRuntimePublicVar] = useState('loading...');
useEffect(() => {
console.log('=== Build-time Variables ===');
console.log('VITE_BUILD_PUBLIC_VAR:', buildPublicVar);
// Fetch runtime vars from server API
fetch('/api/env')
.then((res) => res.json())
.then((data) => {
setRuntimePrivateVar(data.runtimePrivateVar);
setRuntimePublicVar(data.runtimePublicVar);
console.log('=== Runtime Variables ===');
console.log('RUNTIME_PRIVATE_VAR:', data.runtimePrivateVar);
console.log('RUNTIME_PUBLIC_VAR:', data.runtimePublicVar);
})
.catch(() => {
setRuntimePrivateVar('error');
setRuntimePublicVar('error');
});
}, [buildPublicVar]);
return (
<>
<div style={{ padding: '20px', background: '#f0f0f0', margin: '20px', borderRadius: '8px' }}>
<h2>Environment Variable Test</h2>
<h3>Build-time (baked into bundle)</h3>
<p><strong>VITE_BUILD_PUBLIC_VAR:</strong> {buildPublicVar}</p>
<h3>Runtime (read at server startup)</h3>
<p><strong>RUNTIME_PRIVATE_VAR:</strong> {runtimePrivateVar}</p>
<p><strong>RUNTIME_PUBLIC_VAR:</strong> {runtimePublicVar}</p>
</div>
<h1>Hello from TanStack Start!</h1>
</>
);
}

View File

@@ -0,0 +1,21 @@
{
"name": "ssr",
"type": "module",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start"
},
"dependencies": {
"@tanstack/react-router": "^1.93.0",
"@tanstack/start": "^1.93.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"vinxi": "^0.5.1"
},
"devDependencies": {
"@types/react": "^19.0.0",
"@types/react-dom": "^19.0.0",
"typescript": "^5.7.2"
}
}

View File

@@ -0,0 +1,13 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ESNext",
"moduleResolution": "bundler",
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react-jsx",
"noEmit": true
},
"include": ["app/**/*", "app.config.ts"]
}