@flight-framework/cli 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -77
- package/dist/bin.js +416 -0
- package/dist/bin.js.map +1 -1
- package/dist/index.js +416 -0
- package/dist/index.js.map +1 -1
- package/package.json +53 -53
- package/templates/base/README.md.template +26 -26
- package/templates/base/_gitignore +25 -25
- package/templates/base/flight.config.ts.template +15 -15
- package/templates/base/styles/global.css +58 -58
- package/templates/htmx/index.html +18 -18
- package/templates/htmx/package.json.template +18 -18
- package/templates/htmx/vite.config.ts +6 -6
- package/templates/lit/index.html +14 -14
- package/templates/lit/package.json.template +21 -21
- package/templates/lit/src/app-root.ts +18 -18
- package/templates/lit/src/entry-client.ts +5 -5
- package/templates/lit/src/entry-server.ts +9 -9
- package/templates/lit/tsconfig.json +18 -18
- package/templates/lit/vite.config.ts +6 -6
- package/templates/preact/index.html +14 -14
- package/templates/preact/package.json.template +22 -22
- package/templates/preact/src/App.tsx +8 -8
- package/templates/preact/src/entry-client.tsx +11 -11
- package/templates/preact/src/entry-server.tsx +6 -6
- package/templates/preact/tsconfig.json +18 -18
- package/templates/preact/vite.config.ts +8 -8
- package/templates/qwik/index.html +14 -14
- package/templates/qwik/package.json.template +20 -20
- package/templates/qwik/src/App.tsx +10 -10
- package/templates/qwik/src/entry-client.tsx +4 -4
- package/templates/qwik/src/entry-server.tsx +9 -9
- package/templates/qwik/tsconfig.json +18 -18
- package/templates/qwik/vite.config.ts +8 -8
- package/templates/react/index.html +13 -13
- package/templates/react/package.json.template +24 -24
- package/templates/react/src/App.tsx +13 -13
- package/templates/react/src/context/RouterContext.tsx +63 -63
- package/templates/react/src/entry-client.tsx +19 -19
- package/templates/react/src/entry-server.tsx +17 -17
- package/templates/react/tsconfig.json +19 -19
- package/templates/react/vite.config.ts +12 -12
- package/templates/solid/index.html +14 -14
- package/templates/solid/package.json.template +21 -21
- package/templates/solid/src/App.tsx +8 -8
- package/templates/solid/src/entry-client.tsx +11 -11
- package/templates/solid/src/entry-server.tsx +6 -6
- package/templates/solid/tsconfig.json +18 -18
- package/templates/solid/vite.config.ts +8 -8
- package/templates/svelte/index.html +14 -14
- package/templates/svelte/package.json.template +21 -21
- package/templates/svelte/src/App.svelte +4 -4
- package/templates/svelte/src/entry-client.ts +7 -7
- package/templates/svelte/src/entry-server.ts +7 -7
- package/templates/svelte/tsconfig.json +17 -17
- package/templates/svelte/vite.config.ts +8 -8
- package/templates/vanilla/index.html +14 -14
- package/templates/vanilla/package.json.template +19 -19
- package/templates/vanilla/src/main.ts +10 -10
- package/templates/vanilla/tsconfig.json +16 -16
- package/templates/vanilla/vite.config.ts +6 -6
- package/templates/vue/index.html +14 -14
- package/templates/vue/package.json.template +21 -21
- package/templates/vue/src/App.vue +6 -6
- package/templates/vue/src/entry-client.ts +12 -12
- package/templates/vue/src/entry-server.ts +8 -8
- package/templates/vue/tsconfig.json +17 -17
- package/templates/vue/vite.config.ts +8 -8
- package/LICENSE +0 -21
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import renderToString from 'preact-render-to-string';
|
|
2
|
-
import App from './App';
|
|
3
|
-
|
|
4
|
-
export function render(_url: string): string {
|
|
5
|
-
return renderToString(<App />);
|
|
6
|
-
}
|
|
1
|
+
import renderToString from 'preact-render-to-string';
|
|
2
|
+
import App from './App';
|
|
3
|
+
|
|
4
|
+
export function render(_url: string): string {
|
|
5
|
+
return renderToString(<App />);
|
|
6
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2022",
|
|
4
|
-
"module": "ESNext",
|
|
5
|
-
"moduleResolution": "bundler",
|
|
6
|
-
"lib": [
|
|
7
|
-
"ES2022",
|
|
8
|
-
"DOM"
|
|
9
|
-
],
|
|
10
|
-
"strict": true,
|
|
11
|
-
"noEmit": true,
|
|
12
|
-
"skipLibCheck": true,
|
|
13
|
-
"jsx": "react-jsx",
|
|
14
|
-
"jsxImportSource": "preact"
|
|
15
|
-
},
|
|
16
|
-
"include": [
|
|
17
|
-
"src"
|
|
18
|
-
]
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"lib": [
|
|
7
|
+
"ES2022",
|
|
8
|
+
"DOM"
|
|
9
|
+
],
|
|
10
|
+
"strict": true,
|
|
11
|
+
"noEmit": true,
|
|
12
|
+
"skipLibCheck": true,
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"jsxImportSource": "preact"
|
|
15
|
+
},
|
|
16
|
+
"include": [
|
|
17
|
+
"src"
|
|
18
|
+
]
|
|
19
19
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import preact from '@preact/preset-vite';
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
plugins: [preact()],
|
|
6
|
-
server: { port: 5173 },
|
|
7
|
-
build: { target: 'es2022' },
|
|
8
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import preact from '@preact/preset-vite';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [preact()],
|
|
6
|
+
server: { port: 5173 },
|
|
7
|
+
build: { target: 'es2022' },
|
|
8
|
+
});
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>{{PROJECT_NAME}}</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<div id="root"><!--ssr-outlet--></div>
|
|
12
|
-
<script type="module" src="/src/entry-client.tsx"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>{{PROJECT_NAME}}</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"><!--ssr-outlet--></div>
|
|
12
|
+
<script type="module" src="/src/entry-client.tsx"></script>
|
|
13
|
+
</body>
|
|
14
|
+
|
|
15
15
|
</html>
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "{{PROJECT_NAME}}",
|
|
3
|
-
"version": "0.0.1",
|
|
4
|
-
"private": true,
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "flight dev",
|
|
8
|
-
"build": "flight build",
|
|
9
|
-
"preview": "flight preview"
|
|
10
|
-
},
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"@flight-framework/core": "^0.0.1",
|
|
13
|
-
"{{BUNDLER_PACKAGE}}": "^0.0.1",
|
|
14
|
-
"@builder.io/qwik": "^2.0.0"
|
|
15
|
-
},
|
|
16
|
-
"devDependencies": {
|
|
17
|
-
"typescript": "^5.7.0",
|
|
18
|
-
"vite": "^6.0.0"
|
|
19
|
-
}
|
|
20
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "{{PROJECT_NAME}}",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "flight dev",
|
|
8
|
+
"build": "flight build",
|
|
9
|
+
"preview": "flight preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"@flight-framework/core": "^0.0.1",
|
|
13
|
+
"{{BUNDLER_PACKAGE}}": "^0.0.1",
|
|
14
|
+
"@builder.io/qwik": "^2.0.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"typescript": "^5.7.0",
|
|
18
|
+
"vite": "^6.0.0"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { component$ } from '@builder.io/qwik';
|
|
2
|
-
|
|
3
|
-
export default component$(() => {
|
|
4
|
-
return (
|
|
5
|
-
<main>
|
|
6
|
-
<h1>Flight ✈️</h1>
|
|
7
|
-
<p>Edit <code>src/App.tsx</code> to get started.</p>
|
|
8
|
-
</main>
|
|
9
|
-
);
|
|
10
|
-
});
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
|
+
|
|
3
|
+
export default component$(() => {
|
|
4
|
+
return (
|
|
5
|
+
<main>
|
|
6
|
+
<h1>Flight ✈️</h1>
|
|
7
|
+
<p>Edit <code>src/App.tsx</code> to get started.</p>
|
|
8
|
+
</main>
|
|
9
|
+
);
|
|
10
|
+
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './styles/global.css';
|
|
2
|
-
|
|
3
|
-
// Qwik uses resumability - no hydration needed
|
|
4
|
-
console.log('Qwik app resumed');
|
|
1
|
+
import './styles/global.css';
|
|
2
|
+
|
|
3
|
+
// Qwik uses resumability - no hydration needed
|
|
4
|
+
console.log('Qwik app resumed');
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { renderToString } from '@builder.io/qwik/server';
|
|
2
|
-
import App from './App';
|
|
3
|
-
|
|
4
|
-
export async function render(_url: string): Promise<string> {
|
|
5
|
-
const { html } = await renderToString(<App />, {
|
|
6
|
-
containerTagName: 'div',
|
|
7
|
-
});
|
|
8
|
-
return html;
|
|
9
|
-
}
|
|
1
|
+
import { renderToString } from '@builder.io/qwik/server';
|
|
2
|
+
import App from './App';
|
|
3
|
+
|
|
4
|
+
export async function render(_url: string): Promise<string> {
|
|
5
|
+
const { html } = await renderToString(<App />, {
|
|
6
|
+
containerTagName: 'div',
|
|
7
|
+
});
|
|
8
|
+
return html;
|
|
9
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2022",
|
|
4
|
-
"module": "ESNext",
|
|
5
|
-
"moduleResolution": "bundler",
|
|
6
|
-
"lib": [
|
|
7
|
-
"ES2022",
|
|
8
|
-
"DOM"
|
|
9
|
-
],
|
|
10
|
-
"strict": true,
|
|
11
|
-
"noEmit": true,
|
|
12
|
-
"skipLibCheck": true,
|
|
13
|
-
"jsx": "react-jsx",
|
|
14
|
-
"jsxImportSource": "@builder.io/qwik"
|
|
15
|
-
},
|
|
16
|
-
"include": [
|
|
17
|
-
"src"
|
|
18
|
-
]
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"lib": [
|
|
7
|
+
"ES2022",
|
|
8
|
+
"DOM"
|
|
9
|
+
],
|
|
10
|
+
"strict": true,
|
|
11
|
+
"noEmit": true,
|
|
12
|
+
"skipLibCheck": true,
|
|
13
|
+
"jsx": "react-jsx",
|
|
14
|
+
"jsxImportSource": "@builder.io/qwik"
|
|
15
|
+
},
|
|
16
|
+
"include": [
|
|
17
|
+
"src"
|
|
18
|
+
]
|
|
19
19
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import { qwikVite } from '@builder.io/qwik/optimizer';
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
plugins: [qwikVite()],
|
|
6
|
-
server: { port: 5173 },
|
|
7
|
-
build: { target: 'es2022' },
|
|
8
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import { qwikVite } from '@builder.io/qwik/optimizer';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [qwikVite()],
|
|
6
|
+
server: { port: 5173 },
|
|
7
|
+
build: { target: 'es2022' },
|
|
8
|
+
});
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>{{PROJECT_NAME}}</title>
|
|
7
|
-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="root"><!--ssr-outlet--></div>
|
|
11
|
-
<script type="module" src="/src/entry-client.tsx"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>{{PROJECT_NAME}}</title>
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"><!--ssr-outlet--></div>
|
|
11
|
+
<script type="module" src="/src/entry-client.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "{{PROJECT_NAME}}",
|
|
3
|
-
"version": "0.0.1",
|
|
4
|
-
"private": true,
|
|
5
|
-
"type": "module",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "flight dev",
|
|
8
|
-
"build": "flight build",
|
|
9
|
-
"preview": "flight preview"
|
|
10
|
-
},
|
|
11
|
-
"dependencies": {
|
|
12
|
-
"@flight-framework/core": "^0.0.1",
|
|
13
|
-
"{{BUNDLER_PACKAGE}}": "^0.0.1",
|
|
14
|
-
"react": "^19.0.0",
|
|
15
|
-
"react-dom": "^19.0.0"
|
|
16
|
-
},
|
|
17
|
-
"devDependencies": {
|
|
18
|
-
"@vitejs/plugin-react": "^4.3.0",
|
|
19
|
-
"@types/react": "^19.0.0",
|
|
20
|
-
"@types/react-dom": "^19.0.0",
|
|
21
|
-
"typescript": "^5.7.0",
|
|
22
|
-
"vite": "^6.0.0"
|
|
23
|
-
}
|
|
24
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "{{PROJECT_NAME}}",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"private": true,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "flight dev",
|
|
8
|
+
"build": "flight build",
|
|
9
|
+
"preview": "flight preview"
|
|
10
|
+
},
|
|
11
|
+
"dependencies": {
|
|
12
|
+
"@flight-framework/core": "^0.0.1",
|
|
13
|
+
"{{BUNDLER_PACKAGE}}": "^0.0.1",
|
|
14
|
+
"react": "^19.0.0",
|
|
15
|
+
"react-dom": "^19.0.0"
|
|
16
|
+
},
|
|
17
|
+
"devDependencies": {
|
|
18
|
+
"@vitejs/plugin-react": "^4.3.0",
|
|
19
|
+
"@types/react": "^19.0.0",
|
|
20
|
+
"@types/react-dom": "^19.0.0",
|
|
21
|
+
"typescript": "^5.7.0",
|
|
22
|
+
"vite": "^6.0.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { useRouter } from './context/RouterContext';
|
|
2
|
-
|
|
3
|
-
export default function App() {
|
|
4
|
-
const { path } = useRouter();
|
|
5
|
-
|
|
6
|
-
return (
|
|
7
|
-
<main>
|
|
8
|
-
<h1>Welcome to Flight</h1>
|
|
9
|
-
<p>Current path: {path}</p>
|
|
10
|
-
<p>Edit <code>src/App.tsx</code> to get started.</p>
|
|
11
|
-
</main>
|
|
12
|
-
);
|
|
13
|
-
}
|
|
1
|
+
import { useRouter } from './context/RouterContext';
|
|
2
|
+
|
|
3
|
+
export default function App() {
|
|
4
|
+
const { path } = useRouter();
|
|
5
|
+
|
|
6
|
+
return (
|
|
7
|
+
<main>
|
|
8
|
+
<h1>Welcome to Flight</h1>
|
|
9
|
+
<p>Current path: {path}</p>
|
|
10
|
+
<p>Edit <code>src/App.tsx</code> to get started.</p>
|
|
11
|
+
</main>
|
|
12
|
+
);
|
|
13
|
+
}
|
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import { createContext, useState, useEffect, useContext, type ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
interface RouterContextValue {
|
|
4
|
-
path: string;
|
|
5
|
-
navigate: (to: string) => void;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Router Context for SSR-safe path sharing
|
|
10
|
-
* - Server: receives URL from request
|
|
11
|
-
* - Client: syncs with browser location
|
|
12
|
-
*/
|
|
13
|
-
const RouterContext = createContext<RouterContextValue>({
|
|
14
|
-
path: '/',
|
|
15
|
-
navigate: () => { },
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
export function useRouter() {
|
|
19
|
-
return useContext(RouterContext);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
interface RouterProviderProps {
|
|
23
|
-
children: ReactNode;
|
|
24
|
-
initialPath?: string;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Router Provider - wraps app to provide current path
|
|
29
|
-
*
|
|
30
|
-
* Usage:
|
|
31
|
-
* - Server: <RouterProvider initialPath={url}><App /></RouterProvider>
|
|
32
|
-
* - Client: <RouterProvider><App /></RouterProvider>
|
|
33
|
-
*/
|
|
34
|
-
export function RouterProvider({ children, initialPath = '/' }: RouterProviderProps) {
|
|
35
|
-
const isClient = typeof window !== 'undefined';
|
|
36
|
-
|
|
37
|
-
const [path, setPath] = useState(
|
|
38
|
-
isClient ? window.location.pathname : initialPath
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
const navigate = (to: string) => {
|
|
42
|
-
if (isClient) {
|
|
43
|
-
window.history.pushState({}, '', to);
|
|
44
|
-
setPath(to);
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
useEffect(() => {
|
|
49
|
-
if (!isClient) return;
|
|
50
|
-
|
|
51
|
-
const handlePopState = () => setPath(window.location.pathname);
|
|
52
|
-
window.addEventListener('popstate', handlePopState);
|
|
53
|
-
return () => window.removeEventListener('popstate', handlePopState);
|
|
54
|
-
}, [isClient]);
|
|
55
|
-
|
|
56
|
-
return (
|
|
57
|
-
<RouterContext.Provider value={{ path, navigate }}>
|
|
58
|
-
{children}
|
|
59
|
-
</RouterContext.Provider>
|
|
60
|
-
);
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
export default RouterProvider;
|
|
1
|
+
import { createContext, useState, useEffect, useContext, type ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
interface RouterContextValue {
|
|
4
|
+
path: string;
|
|
5
|
+
navigate: (to: string) => void;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Router Context for SSR-safe path sharing
|
|
10
|
+
* - Server: receives URL from request
|
|
11
|
+
* - Client: syncs with browser location
|
|
12
|
+
*/
|
|
13
|
+
const RouterContext = createContext<RouterContextValue>({
|
|
14
|
+
path: '/',
|
|
15
|
+
navigate: () => { },
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export function useRouter() {
|
|
19
|
+
return useContext(RouterContext);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
interface RouterProviderProps {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
initialPath?: string;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Router Provider - wraps app to provide current path
|
|
29
|
+
*
|
|
30
|
+
* Usage:
|
|
31
|
+
* - Server: <RouterProvider initialPath={url}><App /></RouterProvider>
|
|
32
|
+
* - Client: <RouterProvider><App /></RouterProvider>
|
|
33
|
+
*/
|
|
34
|
+
export function RouterProvider({ children, initialPath = '/' }: RouterProviderProps) {
|
|
35
|
+
const isClient = typeof window !== 'undefined';
|
|
36
|
+
|
|
37
|
+
const [path, setPath] = useState(
|
|
38
|
+
isClient ? window.location.pathname : initialPath
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
const navigate = (to: string) => {
|
|
42
|
+
if (isClient) {
|
|
43
|
+
window.history.pushState({}, '', to);
|
|
44
|
+
setPath(to);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (!isClient) return;
|
|
50
|
+
|
|
51
|
+
const handlePopState = () => setPath(window.location.pathname);
|
|
52
|
+
window.addEventListener('popstate', handlePopState);
|
|
53
|
+
return () => window.removeEventListener('popstate', handlePopState);
|
|
54
|
+
}, [isClient]);
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<RouterContext.Provider value={{ path, navigate }}>
|
|
58
|
+
{children}
|
|
59
|
+
</RouterContext.Provider>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export default RouterProvider;
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { hydrateRoot, createRoot } from 'react-dom/client';
|
|
2
|
-
import { RouterProvider } from './context/RouterContext';
|
|
3
|
-
import App from './App';
|
|
4
|
-
import './styles/global.css';
|
|
5
|
-
|
|
6
|
-
const root = document.getElementById('root')!;
|
|
7
|
-
|
|
8
|
-
const app = (
|
|
9
|
-
<RouterProvider>
|
|
10
|
-
<App />
|
|
11
|
-
</RouterProvider>
|
|
12
|
-
);
|
|
13
|
-
|
|
14
|
-
// Hydrate SSR content or render client-only
|
|
15
|
-
if (root.innerHTML.trim()) {
|
|
16
|
-
hydrateRoot(root, app);
|
|
17
|
-
} else {
|
|
18
|
-
createRoot(root).render(app);
|
|
19
|
-
}
|
|
1
|
+
import { hydrateRoot, createRoot } from 'react-dom/client';
|
|
2
|
+
import { RouterProvider } from './context/RouterContext';
|
|
3
|
+
import App from './App';
|
|
4
|
+
import './styles/global.css';
|
|
5
|
+
|
|
6
|
+
const root = document.getElementById('root')!;
|
|
7
|
+
|
|
8
|
+
const app = (
|
|
9
|
+
<RouterProvider>
|
|
10
|
+
<App />
|
|
11
|
+
</RouterProvider>
|
|
12
|
+
);
|
|
13
|
+
|
|
14
|
+
// Hydrate SSR content or render client-only
|
|
15
|
+
if (root.innerHTML.trim()) {
|
|
16
|
+
hydrateRoot(root, app);
|
|
17
|
+
} else {
|
|
18
|
+
createRoot(root).render(app);
|
|
19
|
+
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { renderToString } from 'react-dom/server';
|
|
2
|
-
import { RouterProvider } from './context/RouterContext';
|
|
3
|
-
import App from './App';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Server-side render function
|
|
7
|
-
* Called by Flight for each page request
|
|
8
|
-
*
|
|
9
|
-
* @param url - Request URL path (e.g., '/about', '/products/123')
|
|
10
|
-
*/
|
|
11
|
-
export function render(url: string): string {
|
|
12
|
-
return renderToString(
|
|
13
|
-
<RouterProvider initialPath={url}>
|
|
14
|
-
<App />
|
|
15
|
-
</RouterProvider>
|
|
16
|
-
);
|
|
17
|
-
}
|
|
1
|
+
import { renderToString } from 'react-dom/server';
|
|
2
|
+
import { RouterProvider } from './context/RouterContext';
|
|
3
|
+
import App from './App';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Server-side render function
|
|
7
|
+
* Called by Flight for each page request
|
|
8
|
+
*
|
|
9
|
+
* @param url - Request URL path (e.g., '/about', '/products/123')
|
|
10
|
+
*/
|
|
11
|
+
export function render(url: string): string {
|
|
12
|
+
return renderToString(
|
|
13
|
+
<RouterProvider initialPath={url}>
|
|
14
|
+
<App />
|
|
15
|
+
</RouterProvider>
|
|
16
|
+
);
|
|
17
|
+
}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "ES2022",
|
|
4
|
-
"module": "ESNext",
|
|
5
|
-
"moduleResolution": "bundler",
|
|
6
|
-
"lib": [
|
|
7
|
-
"ES2022",
|
|
8
|
-
"DOM",
|
|
9
|
-
"DOM.Iterable"
|
|
10
|
-
],
|
|
11
|
-
"strict": true,
|
|
12
|
-
"noEmit": true,
|
|
13
|
-
"esModuleInterop": true,
|
|
14
|
-
"skipLibCheck": true,
|
|
15
|
-
"jsx": "react-jsx"
|
|
16
|
-
},
|
|
17
|
-
"include": [
|
|
18
|
-
"src"
|
|
19
|
-
]
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"module": "ESNext",
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"lib": [
|
|
7
|
+
"ES2022",
|
|
8
|
+
"DOM",
|
|
9
|
+
"DOM.Iterable"
|
|
10
|
+
],
|
|
11
|
+
"strict": true,
|
|
12
|
+
"noEmit": true,
|
|
13
|
+
"esModuleInterop": true,
|
|
14
|
+
"skipLibCheck": true,
|
|
15
|
+
"jsx": "react-jsx"
|
|
16
|
+
},
|
|
17
|
+
"include": [
|
|
18
|
+
"src"
|
|
19
|
+
]
|
|
20
20
|
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { defineConfig } from 'vite';
|
|
2
|
-
import react from '@vitejs/plugin-react';
|
|
3
|
-
|
|
4
|
-
export default defineConfig({
|
|
5
|
-
plugins: [react()],
|
|
6
|
-
server: {
|
|
7
|
-
port: 5173,
|
|
8
|
-
},
|
|
9
|
-
build: {
|
|
10
|
-
target: 'es2022',
|
|
11
|
-
},
|
|
12
|
-
});
|
|
1
|
+
import { defineConfig } from 'vite';
|
|
2
|
+
import react from '@vitejs/plugin-react';
|
|
3
|
+
|
|
4
|
+
export default defineConfig({
|
|
5
|
+
plugins: [react()],
|
|
6
|
+
server: {
|
|
7
|
+
port: 5173,
|
|
8
|
+
},
|
|
9
|
+
build: {
|
|
10
|
+
target: 'es2022',
|
|
11
|
+
},
|
|
12
|
+
});
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>{{PROJECT_NAME}}</title>
|
|
8
|
-
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<div id="root"><!--ssr-outlet--></div>
|
|
12
|
-
<script type="module" src="/src/entry-client.tsx"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>{{PROJECT_NAME}}</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root"><!--ssr-outlet--></div>
|
|
12
|
+
<script type="module" src="/src/entry-client.tsx"></script>
|
|
13
|
+
</body>
|
|
14
|
+
|
|
15
15
|
</html>
|