Hello {str}
; 9 | }; 10 | -------------------------------------------------------------------------------- /templates/vercel-ts/vite.config.ts: -------------------------------------------------------------------------------- 1 | import vercel from "@react-just/vercel"; 2 | import react from "react-just/vite"; 3 | import { defineConfig } from "vite"; 4 | 5 | export default defineConfig({ 6 | plugins: [react(), vercel()], 7 | }); 8 | -------------------------------------------------------------------------------- /docs/reference/core/client.md: -------------------------------------------------------------------------------- 1 | # Client API (`react-just/client`) 2 | 3 | :::warning Low-level API 4 | This is considered a low-level API. It's **not intended for direct use** in applications. Use it only when building custom routing. 5 | ::: 6 | 7 | TODO 8 | -------------------------------------------------------------------------------- /packages/router/src/context/location.ts: -------------------------------------------------------------------------------- 1 | import { Params } from "@/types"; 2 | import { createContext } from "react"; 3 | 4 | const LocationContext = createContext<{ params: Params; url: string } | null>( 5 | null, 6 | ); 7 | 8 | export default LocationContext; 9 | -------------------------------------------------------------------------------- /packages/react-just/vitest.config.ts: -------------------------------------------------------------------------------- 1 | import path from "node:path"; 2 | import { defineConfig } from "vitest/config"; 3 | 4 | export default defineConfig({ 5 | resolve: { 6 | alias: { 7 | "@": path.resolve(import.meta.dirname, "./src"), 8 | }, 9 | }, 10 | }); 11 | -------------------------------------------------------------------------------- /packages/router/src/hooks/use-params.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Params } from "@/types"; 4 | import useLocation from "./use-location"; 5 | 6 | export default function useParams(): Params { 7 | const location = useLocation(); 8 | 9 | return location.params; 10 | } 11 | -------------------------------------------------------------------------------- /packages/node/tsconfig.src.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "strict": true, 5 | "target": "esnext", 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "paths": { 9 | "@/types/*": ["./types/*"] 10 | } 11 | }, 12 | "include": ["src", "types"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/router/src/hooks/use-pathname.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useMemo } from "react"; 4 | import useLocation from "./use-location"; 5 | 6 | export default function usePathname(): string { 7 | const location = useLocation(); 8 | 9 | return useMemo(() => new URL(location.url).pathname, [location.url]); 10 | } 11 | -------------------------------------------------------------------------------- /packages/vercel/tsconfig.src.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "strict": true, 5 | "target": "esnext", 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "paths": { 9 | "@/types/*": ["./types/*"] 10 | } 11 | }, 12 | "include": ["src", "types"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/node/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "bundler", 7 | "skipLibCheck": true, 8 | "paths": { 9 | "@/types/*": ["./types/*"] 10 | } 11 | }, 12 | "include": ["src", "types"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/vercel/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "bundler", 7 | "skipLibCheck": true, 8 | "paths": { 9 | "@/types/*": ["./types/*"] 10 | } 11 | }, 12 | "include": ["src", "types"] 13 | } 14 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "dev": "vitepress dev", 7 | "build": "vitepress build", 8 | "preview": "vitepress preview" 9 | }, 10 | "devDependencies": { 11 | "vitepress": "^1.6.3", 12 | "vitepress-plugin-group-icons": "^1.5.5" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-just/tsconfig.tests.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "strict": true, 5 | "target": "esnext", 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "paths": { 9 | "@/*": ["./src/*"] 10 | } 11 | }, 12 | "include": ["src", "__tests__", "vitest.config.ts"] 13 | } 14 | -------------------------------------------------------------------------------- /packages/router/src/hooks/use-search-params.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useMemo } from "react"; 4 | import useLocation from "./use-location"; 5 | 6 | export default function useSearchParams(): URLSearchParams { 7 | const location = useLocation(); 8 | 9 | return useMemo(() => new URL(location.url).searchParams, [location.url]); 10 | } 11 | -------------------------------------------------------------------------------- /packages/router/tsconfig.src.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "strict": true, 5 | "target": "esnext", 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "jsx": "react-jsx", 9 | "paths": { 10 | "@/types": ["./types/index.d.ts"] 11 | } 12 | }, 13 | "include": ["src", "types"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/router/src/hooks/use-location.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { use } from "react"; 4 | import LocationContext from "../context/location"; 5 | 6 | export default function useLocation() { 7 | const location = use(LocationContext); 8 | 9 | if (!location) throw new Error("useLocation must be used within a Router"); 10 | 11 | return location; 12 | } 13 | -------------------------------------------------------------------------------- /packages/router/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "bundler", 7 | "skipLibCheck": true, 8 | "jsx": "react-jsx", 9 | "paths": { 10 | "@/types": ["./types/index.d.ts"] 11 | } 12 | }, 13 | "include": ["src", "types"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-just/tsconfig.src.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "strict": true, 5 | "target": "esnext", 6 | "module": "esnext", 7 | "moduleResolution": "bundler", 8 | "paths": { 9 | "@/types": ["./types/index.d.ts"], 10 | "@/types/*": ["./types/*"] 11 | } 12 | }, 13 | "include": ["src", "types"] 14 | } 15 | -------------------------------------------------------------------------------- /packages/react-just/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "strict": true, 4 | "target": "esnext", 5 | "module": "esnext", 6 | "moduleResolution": "bundler", 7 | "skipLibCheck": true, 8 | "paths": { 9 | "@/types": ["./types/index.d.ts"], 10 | "@/types/*": ["./types/*"] 11 | } 12 | }, 13 | "include": ["src", "types"] 14 | } 15 | -------------------------------------------------------------------------------- /templates/node-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "vite", 4 | "build": "vite build", 5 | "start": "react-just-node" 6 | }, 7 | "dependencies": { 8 | "@react-just/node": "^0.4.0", 9 | "react": "~19.1", 10 | "react-dom": "~19.1", 11 | "react-just": "^0.4.0" 12 | }, 13 | "devDependencies": { 14 | "vite": "^7.1.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /templates/vercel-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "vite", 4 | "build": "vite build" 5 | }, 6 | "dependencies": { 7 | "react": "~19.1", 8 | "react-dom": "~19.1", 9 | "react-just": "^0.4.0" 10 | }, 11 | "devDependencies": { 12 | "@react-just/vercel": "^0.3.0", 13 | "@types/react": "~19.1", 14 | "vite": "^7.1.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /templates/node-js/src/ServerCounter.css: -------------------------------------------------------------------------------- 1 | .server-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(50% 0.134 242.749); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .server-counter:hover { 14 | background-color: oklch(55% 0.169 243.123); 15 | } 16 | -------------------------------------------------------------------------------- /templates/node-ts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "vite", 4 | "build": "vite build", 5 | "start": "react-just-node" 6 | }, 7 | "dependencies": { 8 | "@react-just/node": "^0.4.0", 9 | "react": "~19.1", 10 | "react-dom": "~19.1", 11 | "react-just": "^0.4.0" 12 | }, 13 | "devDependencies": { 14 | "@types/react": "~19.1", 15 | "vite": "^7.1.7" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /templates/node-ts/src/ServerCounter.css: -------------------------------------------------------------------------------- 1 | .server-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(50% 0.134 242.749); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .server-counter:hover { 14 | background-color: oklch(55% 0.169 243.123); 15 | } 16 | -------------------------------------------------------------------------------- /packages/router/src/hooks/use-navigate.ts: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Navigate } from "@/types"; 4 | import { use } from "react"; 5 | import NavigateContext from "../context/navigate"; 6 | 7 | export default function useNavigate(): Navigate { 8 | const navigate = use(NavigateContext); 9 | 10 | if (!navigate) throw new Error("useNavigate must be used within a Router"); 11 | 12 | return navigate; 13 | } 14 | -------------------------------------------------------------------------------- /templates/node-js/src/ClientCounter.css: -------------------------------------------------------------------------------- 1 | .client-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(43.2% 0.095 166.913); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .client-counter:hover { 14 | background-color: oklch(48.2% 0.151 167.153); 15 | } 16 | -------------------------------------------------------------------------------- /templates/node-ts/src/ClientCounter.css: -------------------------------------------------------------------------------- 1 | .client-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(43.2% 0.095 166.913); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .client-counter:hover { 14 | background-color: oklch(48.2% 0.151 167.153); 15 | } 16 | -------------------------------------------------------------------------------- /templates/vercel-ts/src/ClientCounter.css: -------------------------------------------------------------------------------- 1 | .client-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(43.2% 0.095 166.913); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .client-counter:hover { 14 | background-color: oklch(48.2% 0.151 167.153); 15 | } 16 | -------------------------------------------------------------------------------- /templates/vercel-ts/src/ServerCounter.css: -------------------------------------------------------------------------------- 1 | .server-counter { 2 | border: none; 3 | border-radius: 8px; 4 | padding: 12px 20px; 5 | font-size: 1em; 6 | font-weight: 700; 7 | cursor: pointer; 8 | color: #ffffff; 9 | background-color: oklch(50% 0.134 242.749); 10 | transition: background-color 0.25s; 11 | } 12 | 13 | .server-counter:hover { 14 | background-color: oklch(55% 0.169 243.123); 15 | } 16 | -------------------------------------------------------------------------------- /templates/node-js/src/ClientCounter.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import "./ClientCounter.css"; 4 | 5 | import { useState } from "react"; 6 | 7 | export default function ClientCounter() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /templates/node-ts/src/ClientCounter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import "./ClientCounter.css"; 4 | 5 | import { useState } from "react"; 6 | 7 | export default function ClientCounter() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /templates/vercel-ts/src/ClientCounter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import "./ClientCounter.css"; 4 | 5 | import { useState } from "react"; 6 | 7 | export default function ClientCounter() { 8 | const [count, setCount] = useState(0); 9 | 10 | return ( 11 | 17 | ); 18 | } 19 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import "virtual:group-icons.css"; 2 | import { Theme } from "vitepress"; 3 | import DefaultTheme from "vitepress/theme"; 4 | import Card from "./components/Card.vue"; 5 | import Home from "./components/Home.vue"; 6 | import "./custom.css"; 7 | 8 | export default { 9 | extends: DefaultTheme, 10 | enhanceApp({ app }) { 11 | app.component("Card", Card); 12 | app.component("Home", Home); 13 | }, 14 | } satisfies Theme; 15 | -------------------------------------------------------------------------------- /packages/router/src/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Link } from "./components/Link"; 2 | export { default as Route } from "./components/Route"; 3 | export { default as Router } from "./components/Router"; 4 | export { default as useNavigate } from "./hooks/use-navigate"; 5 | export { default as useParams } from "./hooks/use-params"; 6 | export { default as usePathname } from "./hooks/use-pathname"; 7 | export { default as useSearchParams } from "./hooks/use-search-params"; 8 | -------------------------------------------------------------------------------- /packages/react-just/types/vite.d.ts: -------------------------------------------------------------------------------- 1 | import { PluginOption } from "vite"; 2 | 3 | export interface ReactJustOptions { 4 | app?: string; 5 | } 6 | 7 | export default function react(options?: ReactJustOptions): PluginOption; 8 | 9 | export const ENVIRONMENTS: { 10 | CLIENT: string; 11 | FIZZ_NODE: string; 12 | FLIGHT_NODE: string; 13 | }; 14 | 15 | export const ENTRIES: { 16 | CLIENT: string; 17 | FIZZ_NODE: string; 18 | FLIGHT_NODE: string; 19 | }; 20 | -------------------------------------------------------------------------------- /templates/node-js/src/ServerCounter.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useActionState } from "react"; 4 | import { incrementCount } from "./db"; 5 | import "./ServerCounter.css"; 6 | 7 | export default function ServerCounter({ initialCount }) { 8 | const [count, formAction] = useActionState(incrementCount, initialCount); 9 | 10 | return ( 11 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /templates/node-ts/src/ServerCounter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useActionState } from "react"; 4 | import { incrementCount } from "./db"; 5 | import "./ServerCounter.css"; 6 | 7 | export default function ServerCounter({ 8 | initialCount, 9 | }: { 10 | initialCount: number; 11 | }) { 12 | const [count, formAction] = useActionState(incrementCount, initialCount); 13 | 14 | return ( 15 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /templates/vercel-ts/src/ServerCounter.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useActionState } from "react"; 4 | import { incrementCount } from "./db"; 5 | import "./ServerCounter.css"; 6 | 7 | export default function ServerCounter({ 8 | initialCount, 9 | }: { 10 | initialCount: number; 11 | }) { 12 | const [count, formAction] = useActionState(incrementCount, initialCount); 13 | 14 | return ( 15 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /packages/router/src/components/LocationProvider.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Params } from "@/types"; 4 | import { useMemo } from "react"; 5 | import LocationContext from "../context/location"; 6 | 7 | interface LocationProviderProps { 8 | children: React.ReactNode; 9 | params: Params; 10 | url: string; 11 | } 12 | 13 | export default function LocationProvider({ 14 | children, 15 | params, 16 | url, 17 | }: LocationProviderProps) { 18 | const value = useMemo(() => ({ url, params }), [url, params]); 19 | 20 | returnHello from a server component
28 | 29 | 30 | ); 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/react-just/types/fizz.node.d.ts: -------------------------------------------------------------------------------- 1 | import { PipeableStream, ReactFormState } from "./shared"; 2 | 3 | export function registerClientReference( 4 | implementation: unknown, 5 | moduleId: string | number, 6 | exportName: string | number, 7 | ): unknown; 8 | 9 | export function registerServerReference(id: string): unknown; 10 | 11 | export function renderToPipeableStream( 12 | rscStream: PipeableStream, 13 | options: RenderToPipeableStreamOptions, 14 | ): PipeableStream; 15 | 16 | export interface RenderToPipeableStreamOptions { 17 | formState: ReactFormState | null; 18 | onShellError: (error: unknown) => void; 19 | onShellReady: () => void; 20 | } 21 | -------------------------------------------------------------------------------- /packages/react-just/src/vite/use-client/transform/module.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ModuleDeclaration, Program, Statement } from "estree"; 2 | 3 | export default class Module { 4 | constructor(private program: Program) {} 5 | 6 | public append(...nodes: BodyNode[]) { 7 | this.program.body.push(...nodes); 8 | } 9 | 10 | public remove(node: BodyNode) { 11 | this.program.body.splice(this.program.body.indexOf(node), 1); 12 | } 13 | 14 | public replace(node: BodyNode, newNode: BodyNode) { 15 | this.program.body.splice(this.program.body.indexOf(node), 1, newNode); 16 | } 17 | 18 | public unshift(...nodes: BodyNode[]) { 19 | this.program.body.unshift(...nodes); 20 | } 21 | } 22 | 23 | type BodyNode = Statement | Directive | ModuleDeclaration; 24 | -------------------------------------------------------------------------------- /packages/react-just/src/vite/use-server/transform/module.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ModuleDeclaration, Program, Statement } from "estree"; 2 | 3 | export default class Module { 4 | constructor(private program: Program) {} 5 | 6 | public append(...nodes: BodyNode[]) { 7 | this.program.body.push(...nodes); 8 | } 9 | 10 | public remove(node: BodyNode) { 11 | this.program.body.splice(this.program.body.indexOf(node), 1); 12 | } 13 | 14 | public replace(node: BodyNode, newNode: BodyNode) { 15 | this.program.body.splice(this.program.body.indexOf(node), 1, newNode); 16 | } 17 | 18 | public unshift(...nodes: BodyNode[]) { 19 | this.program.body.unshift(...nodes); 20 | } 21 | } 22 | 23 | type BodyNode = Statement | Directive | ModuleDeclaration; 24 | -------------------------------------------------------------------------------- /packages/vercel/rollup.config.js: -------------------------------------------------------------------------------- 1 | import nodeResolve from "@rollup/plugin-node-resolve"; 2 | import typescript from "@rollup/plugin-typescript"; 3 | import { defineConfig } from "rollup"; 4 | 5 | export default defineConfig({ 6 | input: { handle: "src/handle.ts", vite: "src/vite.ts" }, 7 | output: [ 8 | { 9 | dir: "dist", 10 | format: "esm", 11 | entryFileNames: "[name].mjs", 12 | chunkFileNames: "[name].mjs", 13 | }, 14 | { 15 | dir: "dist", 16 | format: "cjs", 17 | entryFileNames: "[name].cjs", 18 | chunkFileNames: "[name].cjs", 19 | }, 20 | ], 21 | external: (id) => /node_modules/.test(id) || id.startsWith("react-just"), 22 | plugins: [typescript({ tsconfig: "tsconfig.build.json" }), nodeResolve()], 23 | }); 24 | -------------------------------------------------------------------------------- /docs/guide/app-component.md: -------------------------------------------------------------------------------- 1 | # App Component 2 | 3 | The App Component serves as the main entry point of your application. By default, React Just looks for the following files in your project root to use as the module containing the App Component: 4 | 5 | - `src/index.tsx` 6 | - `src/index.jsx` 7 | - `src/index.ts` 8 | - `src/index.js` 9 | 10 | You can override this behavior with the `app` property in the [plugin options](/reference/core/plugin). 11 | 12 | It **must** be a Server Component, exported as `default` from its module, and always return at least the `html` and `body` tags. 13 | 14 | ```tsx [src/index.tsx] {1,3,4,6,7} 15 | export default function App() { 16 | return ( 17 | 18 | 19 |Hello World
20 | 21 | 22 | ); 23 | } 24 | ``` 25 | -------------------------------------------------------------------------------- /docs/reference/core/plugin.md: -------------------------------------------------------------------------------- 1 | # Plugin (`react-just/vite`) 2 | 3 | This Vite plugin enables React with React Server Components (RSC) support and provides a development server. 4 | 5 | ```ts [vite.config.ts] {1,5} 6 | import react from "react-just/vite"; 7 | import { defineConfig } from "vite"; 8 | 9 | export default defineConfig({ 10 | plugins: [react()], 11 | }); 12 | ``` 13 | 14 | ## Options 15 | 16 | ```ts 17 | react(options?: ReactJustOptions); 18 | 19 | interface ReactJustOptions = { 20 | app?: string; 21 | }; 22 | ``` 23 | 24 | The plugin accepts an _optional_ `options` object with the following properties: 25 | 26 | - `app`: Path to the module that exports the App Component. By default, first matching file among: 27 | - `src/index.tsx` 28 | - `src/index.jsx` 29 | - `src/index.ts` 30 | - `src/index.js` 31 | -------------------------------------------------------------------------------- /packages/react-just/src/async-store/node.ts: -------------------------------------------------------------------------------- 1 | import { Context } from "@/types/flight.node"; 2 | import { AsyncLocalStorage } from "node:async_hooks"; 3 | 4 | const asyncLocalStorage = new AsyncLocalStorage
8 |
10 |
11 | ## Server Utilities (`react-just/server`)
12 |
13 |
14 |
17 |
18 | ## Low-Level APIs
19 |
20 |
21 |
23 |
24 |
38 |
--------------------------------------------------------------------------------
/docs/reference.md:
--------------------------------------------------------------------------------
1 | ---
2 | outline: false
3 | ---
4 |
5 | # Reference
6 |
7 |
8 |
11 |
12 | ## Platforms
13 |
14 |
15 |
18 |
19 |
33 |
--------------------------------------------------------------------------------
/packages/react-just/__tests__/use-server/transform/__snapshots__/directive.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`'use server' module level directive > throws an error when the directive is not at the top of the file and doesn't modify the program 1`] = `
4 | "export default a;
5 | export {b};
6 | export * from "pkg";
7 | "use server";
8 | "
9 | `;
10 |
11 | exports[`'use server' module level directive > throws an error when there is no directive and doesn't modify the program 1`] = `
12 | "export default a;
13 | export {b};
14 | export * from "pkg";
15 | "
16 | `;
17 |
18 | exports[`'use server' module level directive > transforms when the directive is found at the top of the file or after other directives 1`] = `
19 | "import {registerServerReference as $$registerServerReference$$} from "react-just";
20 | "use strict";
21 | const $$Ref$$default = $$registerServerReference$$("default");
22 | export {$$Ref$$default as default};
23 | const $$Ref$$b = $$registerServerReference$$("b");
24 | export {$$Ref$$b as b};
25 | "
26 | `;
27 |
--------------------------------------------------------------------------------
/docs/.vitepress/theme/icons/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/react-just/types/handle.node.d.ts:
--------------------------------------------------------------------------------
1 | import { IncomingMessage, ServerResponse } from "node:http";
2 | import React, { ComponentType } from "react";
3 | import { renderToPipeableStream as renderToPipeableHtmlStream } from "./fizz.node";
4 | import {
5 | createTemporaryReferenceSet,
6 | decodeAction,
7 | decodeFormState,
8 | decodeReply,
9 | renderToPipeableStream as renderToPipeableRscStream,
10 | runWithContext,
11 | } from "./flight.node";
12 |
13 | export interface HandleOptions {
14 | App: ComponentType;
15 | createTemporaryReferenceSet: typeof createTemporaryReferenceSet;
16 | decodeAction: typeof decodeAction;
17 | decodeFormState: typeof decodeFormState;
18 | decodeReply: typeof decodeReply;
19 | React: typeof React;
20 | renderToPipeableHtmlStream: typeof renderToPipeableHtmlStream;
21 | renderToPipeableRscStream: typeof renderToPipeableRscStream;
22 | runWithContext: typeof runWithContext;
23 | onShellError?: (error: unknown) => void;
24 | }
25 |
26 | export function createHandle(
27 | options: HandleOptions,
28 | ): (req: IncomingMessage, res: ServerResponse) => void;
29 |
--------------------------------------------------------------------------------
/packages/node/rollup.config.js:
--------------------------------------------------------------------------------
1 | import nodeResolve from "@rollup/plugin-node-resolve";
2 | import typescript from "@rollup/plugin-typescript";
3 | import { defineConfig } from "rollup";
4 |
5 | export default defineConfig([
6 | {
7 | input: { bin: "src/bin.ts", handle: "src/handle.ts", vite: "src/vite.ts" },
8 | output: [
9 | {
10 | dir: "dist",
11 | format: "esm",
12 | entryFileNames: "[name].mjs",
13 | chunkFileNames: "[name].mjs",
14 | },
15 | ],
16 | external: (id) => /node_modules/.test(id) || id.startsWith("react-just"),
17 | plugins: [typescript({ tsconfig: "tsconfig.build.json" }), nodeResolve()],
18 | },
19 | {
20 | input: { handle: "src/handle.ts", vite: "src/vite.ts" },
21 | output: [
22 | {
23 | dir: "dist",
24 | format: "cjs",
25 | entryFileNames: "[name].cjs",
26 | chunkFileNames: "[name].cjs",
27 | },
28 | ],
29 | external: (id) => /node_modules/.test(id) || id.startsWith("react-just"),
30 | plugins: [typescript({ tsconfig: "tsconfig.build.json" }), nodeResolve()],
31 | },
32 | ]);
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 almadoro
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/docs/.vitepress/theme/components/Card.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
44 |
45 |
46 | 48 | {{ title }} 49 |
50 |51 | {{ details }} 52 |
53 |
29 |
35 |
36 |
37 |
38 |
68 |
--------------------------------------------------------------------------------
/packages/node/src/handle.ts:
--------------------------------------------------------------------------------
1 | import { HandleFunction, HandleOptions } from "@/types/handle";
2 | import { createHandle as baseCreateHandle } from "react-just/handle.node";
3 |
4 | export function createHandle(options: HandleOptions): HandleFunction {
5 | const {
6 | App,
7 | createTemporaryReferenceSet,
8 | decodeAction,
9 | decodeFormState,
10 | decodeReply,
11 | React,
12 | renderToPipeableHtmlStream,
13 | renderToPipeableRscStream,
14 | resources,
15 | runWithContext,
16 | } = options;
17 |
18 | const Root = () =>
19 | React.createElement(
20 | React.Fragment,
21 | null,
22 | resources.js.map((src) =>
23 | React.createElement("script", {
24 | key: src,
25 | src,
26 | async: true,
27 | }),
28 | ),
29 | resources.css.map((href) =>
30 | React.createElement("link", {
31 | key: href,
32 | href,
33 | rel: "stylesheet",
34 | precedence: "default",
35 | }),
36 | ),
37 | React.createElement(App),
38 | );
39 |
40 | return baseCreateHandle({
41 | App: Root,
42 | createTemporaryReferenceSet,
43 | decodeAction,
44 | decodeFormState,
45 | decodeReply,
46 | React,
47 | renderToPipeableHtmlStream,
48 | renderToPipeableRscStream,
49 | runWithContext,
50 | });
51 | }
52 |
--------------------------------------------------------------------------------
/packages/vercel/src/handle.ts:
--------------------------------------------------------------------------------
1 | import { HandleFunction, HandleOptions } from "@/types/handle";
2 | import { createHandle as baseCreateHandle } from "react-just/handle.node";
3 |
4 | export function createHandle(options: HandleOptions): HandleFunction {
5 | const {
6 | App,
7 | createTemporaryReferenceSet,
8 | decodeAction,
9 | decodeFormState,
10 | decodeReply,
11 | React,
12 | renderToPipeableHtmlStream,
13 | renderToPipeableRscStream,
14 | resources,
15 | runWithContext,
16 | } = options;
17 |
18 | const Root = () =>
19 | React.createElement(
20 | React.Fragment,
21 | null,
22 | resources.js.map((src) =>
23 | React.createElement("script", {
24 | key: src,
25 | src,
26 | async: true,
27 | }),
28 | ),
29 | resources.css.map((href) =>
30 | React.createElement("link", {
31 | key: href,
32 | href,
33 | rel: "stylesheet",
34 | precedence: "default",
35 | }),
36 | ),
37 | React.createElement(App),
38 | );
39 |
40 | return baseCreateHandle({
41 | App: Root,
42 | createTemporaryReferenceSet,
43 | decodeAction,
44 | decodeFormState,
45 | decodeReply,
46 | React,
47 | renderToPipeableHtmlStream,
48 | renderToPipeableRscStream,
49 | runWithContext,
50 | });
51 | }
52 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-client/directive.ts:
--------------------------------------------------------------------------------
1 | import { ExpressionStatement, Literal, Node, Program } from "estree";
2 |
3 | const USE_CLIENT_DIRECTIVE = "use client";
4 |
5 | /**
6 | * This is quick check to determine if the module could be a use client
7 | * module. Further validation must be done to ensure it's actually a use client
8 | * module with the `getIsUseClientModule` function.
9 | */
10 | export function couldBeUseClientModule(code: string) {
11 | return /['"]use client['"]/.test(code);
12 | }
13 |
14 | export function getIsUseClientModule(program: Program) {
15 | return getUseClientDirective(program) !== null;
16 | }
17 |
18 | export function getUseClientDirective(program: Program) {
19 | // The "use client" directive is at program body level.
20 | // Can be after other directives but before any other type of node.
21 |
22 | for (const node of program.body) {
23 | if (isDirective(node) && node.expression.value === USE_CLIENT_DIRECTIVE)
24 | return node;
25 |
26 | if (node.type !== "ExpressionStatement") break;
27 | }
28 |
29 | return null;
30 | }
31 |
32 | function isDirective(
33 | node: Node,
34 | ): node is ExpressionStatement & { expression: Literal } {
35 | return (
36 | node.type === "ExpressionStatement" &&
37 | node.expression.type === "Literal" &&
38 | typeof node.expression.value === "string"
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/packages/react-just/types/shared.d.ts:
--------------------------------------------------------------------------------
1 | import { Writable } from "node:stream";
2 | import { ReactNode } from "react";
3 |
4 | export interface JustRequest {
5 | readonly headers: Headers;
6 | readonly method: string;
7 | readonly url: string;
8 | }
9 |
10 | export interface JustResponse {
11 | readonly headers: Headers;
12 | }
13 |
14 | export type PipeableStream = {
15 | abort(reason: unknown): void;
16 | pipe
24 |
29 | );
30 | }
31 | ```
32 |
33 | ## Definition
34 |
35 | ```tsx
36 | interface RouteComponentPropsUser Profile
25 |User ID: {params.id}
26 |Current path: {pathname}
27 |Search: {search}
28 |
17 |
19 |
31 |
39 |
40 |
41 |
52 |
--------------------------------------------------------------------------------
/docs/guide/client-and-server-components.md:
--------------------------------------------------------------------------------
1 | # Client and Server Components
2 |
3 | ::: info
4 | From the [React documentation](https://react.dev/reference/rsc/use-client#caveats): "A component usage is considered a **Client Component** if it is defined in module with `use client` directive or when it is a transitive dependency of a module that contains a `use client` directive. Otherwise, it is a **Server Component**."
5 | :::
6 |
7 | Only the [App Component](/guide/app-component) must be a Server Component. Other components (and modules) can run on the server, the client, or both. For example, the following `Counter` component is a Client Component:
8 |
9 | ```tsx [src/Counter.tsx] {1}
10 | "use client";
11 |
12 | import React, { useState } from "react";
13 |
14 | export default function Counter() {
15 | const [count, setCount] = useState(0);
16 |
17 | return (
18 |
21 | );
22 | }
23 | ```
24 |
25 | And the App Component is a Server Component.
26 |
27 | ```tsx [src/index.tsx] {1,8}
28 | import Counter from "./Counter";
29 |
30 | export default async function App() {
31 | return (
32 |
33 |
34 | Hello from the server
35 |65 | Hello React Just with Tailwind! 66 |
67 | 68 | 69 | ); 70 | } 71 | ``` 72 | -------------------------------------------------------------------------------- /docs/reference/router.md: -------------------------------------------------------------------------------- 1 | # Router (`@react-just/router`) 2 | 3 | ## Components 4 | 5 |
6 |
10 |
11 | ## Hooks
12 |
13 |
14 |
19 |
20 | ## Utilities
21 |
22 |
23 |
25 |
26 |
40 |
--------------------------------------------------------------------------------
/docs/reference/router/use-params.md:
--------------------------------------------------------------------------------
1 | # useParams
2 |
3 | `useParams` is a hook that returns the route parameters extracted from the current URL.
4 |
5 | ```tsx
6 | "use client";
7 |
8 | import { useParams } from "@react-just/router";
9 |
10 | function SomeComponent() {
11 | const params = useParams();
12 |
13 | // Route -> /items/:category/:itemId
14 | // URL -> /items/shoes/1023
15 | // `params` -> { category: "shoes", itemId: "1023" }
16 | }
17 | ```
18 |
19 | ## Parameters
20 |
21 | ```tsx
22 | const params = useParams
19 | 
26 |
27 |
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/templates/node-ts/src/index.tsx:
--------------------------------------------------------------------------------
1 | import "./index.css";
2 |
3 | import viteLogo from "./assets/vite.svg";
4 | import ClientCounter from "./ClientCounter";
5 | import { getCount } from "./db";
6 | import ServerCounter from "./ServerCounter";
7 |
8 | export default async function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | Hello, React Just!
20 | 21 |
26 |
27 |
28 |
43 |
29 |
35 | 30 | This is a client counter. If you refresh the page, the count 31 | will reset. 32 |
33 |
36 |
42 | 37 | This is a server counter. If you refresh the page, the count 38 | will not reset. 39 |
40 |44 | Click on the React Just logo or{" "} 45 | 46 | here 47 | {" "} 48 | to learn more 49 |
50 |
51 | 
59 |
60 |
61 | 52 | Powered by{" "} 53 | 54 | Vite 55 | 56 |
57 | 58 |
19 |
26 |
27 |
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/templates/vercel-ts/src/index.tsx:
--------------------------------------------------------------------------------
1 | import "./index.css";
2 |
3 | import viteLogo from "./assets/vite.svg";
4 | import ClientCounter from "./ClientCounter";
5 | import { getCount } from "./db";
6 | import ServerCounter from "./ServerCounter";
7 |
8 | export default async function App() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | Hello, React Just!
20 | 21 |
26 |
27 |
28 |
43 |
29 |
35 | 30 | This is a client counter. If you refresh the page, the count 31 | will reset. 32 |
33 |
36 |
42 | 37 | This is a server counter. If you refresh the page, the count 38 | will not reset. 39 |
40 |44 | Click on the React Just logo or{" "} 45 | 46 | here 47 | {" "} 48 | to learn more 49 |
50 |
51 |
59 |
60 |
61 | 52 | Powered by{" "} 53 | 54 | Vite 55 | 56 |
57 | 58 |
19 |
26 |
27 |
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/docs/reference/router/link.md:
--------------------------------------------------------------------------------
1 | ---
2 | outline: [2, 3]
3 | ---
4 |
5 | # Link
6 |
7 | `Link` is a component that provides declarative navigation between routes with single-page application behavior.
8 |
9 | ```tsx
10 | import { Link } from "@react-just/router";
11 |
12 | function Navigation() {
13 | return (
14 |
19 | );
20 | }
21 | ```
22 |
23 | ## Props
24 |
25 | ```tsx
26 | interface LinkProps extends React.DOMAttributesHello, React Just!
20 | 21 |
26 |
27 |
28 |
43 |
29 |
35 | 30 | This is a client counter. If you refresh the page, the count 31 | will reset. 32 |
33 |
36 |
42 | 37 | This is a server counter. If you refresh the page, the count 38 | will not reset. 39 |
40 |44 | Click on the React Just logo or{" "} 45 | 46 | here 47 | {" "} 48 | to learn more 49 |
50 |
51 |
59 |
60 |
61 | 52 | Powered by{" "} 53 | 54 | Vite 55 | 56 |
57 | 58 |
73 |
74 | Overview
75 |
76 |
77 | Details
78 |
79 |
80 | Settings
81 |
82 |
83 | );
84 | }
85 | ```
86 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-client/transform/export-named-from-source.ts:
--------------------------------------------------------------------------------
1 | import { ExportNamedDeclaration, ImportSpecifier } from "estree";
2 | import { builders } from "estree-toolkit";
3 | import Generator from "./generator";
4 | import Module from "./module";
5 |
6 | /**
7 | * Transforms exports in the form of:
8 | * ```ts
9 | * export { a, b as c, b as d, default, default as e } from "pkg";
10 | * ```
11 | *
12 | * Into:
13 | * ```ts
14 | * import {
15 | * a as $$a$$,
16 | * b as $$c$$,
17 | * b as $$d$$,
18 | * default as $$default$$,
19 | * default as $$e$$
20 | * } from "pkg";
21 | * const $$Ref$$a = $$registerClientReference$$(...);
22 | * const $$Ref$$c = $$registerClientReference$$(...);
23 | * const $$Ref$$d = $$registerClientReference$$(...);
24 | * const $$Ref$$default = $$registerClientReference$$(...);
25 | * const $$Ref$$e = $$registerClientReference$$(...);
26 | * export {
27 | * $$Ref$$a as a,
28 | * $$Ref$$c as c,
29 | * $$Ref$$d as d,
30 | * $$Ref$$default as default,
31 | * $$Ref$$e as e
32 | * };
33 | * ```
34 | */
35 | export default function transformExportNamedFromSource(
36 | node: ExportNamedDeclaration,
37 | module: Module,
38 | generator: Generator,
39 | ) {
40 | const source = node.source!;
41 |
42 | const importSpecifiers: ImportSpecifier[] = [];
43 |
44 | for (const specifier of node.specifiers) {
45 | if (
46 | specifier.local.type !== "Identifier" ||
47 | specifier.exported.type !== "Identifier"
48 | )
49 | /* c8 ignore next */
50 | continue;
51 |
52 | const importIdentifier = specifier.local.name;
53 | const exportIdentifier = specifier.exported.name;
54 | // It's allowed to export an identifier from a module with the same
55 | // name as another identifier within the same module. Add the $$
56 | // prefix and suffix to avoid collisions.
57 | const localIdentifier = "$$" + exportIdentifier + "$$";
58 |
59 | importSpecifiers.push(
60 | builders.importSpecifier(
61 | builders.identifier(importIdentifier),
62 | builders.identifier(localIdentifier),
63 | ),
64 | );
65 |
66 | module.append(
67 | ...generator.createRegisterAndExportReference(
68 | exportIdentifier,
69 | localIdentifier,
70 | ),
71 | );
72 | }
73 |
74 | module.unshift(builders.importDeclaration(importSpecifiers, source));
75 |
76 | module.remove(node);
77 | }
78 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-server/transform/export-named-from-source.ts:
--------------------------------------------------------------------------------
1 | import { ExportNamedDeclaration, ImportSpecifier } from "estree";
2 | import { builders } from "estree-toolkit";
3 | import Generator from "./generator";
4 | import Module from "./module";
5 |
6 | /**
7 | * Transforms exports in the form of:
8 | * ```ts
9 | * export { a, b as c, b as d, default, default as e } from "pkg";
10 | * ```
11 | *
12 | * Into:
13 | * ```ts
14 | * import {
15 | * a as $$a$$,
16 | * b as $$c$$,
17 | * b as $$d$$,
18 | * default as $$default$$,
19 | * default as $$e$$
20 | * } from "pkg";
21 | * const $$Ref$$a = $$registerServerReference$$(...);
22 | * const $$Ref$$c = $$registerServerReference$$(...);
23 | * const $$Ref$$d = $$registerServerReference$$(...);
24 | * const $$Ref$$default = $$registerServerReference$$(...);
25 | * const $$Ref$$e = $$registerServerReference$$(...);
26 | * export {
27 | * $$Ref$$a as a,
28 | * $$Ref$$c as c,
29 | * $$Ref$$d as d,
30 | * $$Ref$$default as default,
31 | * $$Ref$$e as e
32 | * };
33 | * ```
34 | */
35 | export default function transformExportNamedFromSource(
36 | node: ExportNamedDeclaration,
37 | module: Module,
38 | generator: Generator,
39 | ) {
40 | const source = node.source!;
41 |
42 | const importSpecifiers: ImportSpecifier[] = [];
43 |
44 | for (const specifier of node.specifiers) {
45 | if (
46 | specifier.local.type !== "Identifier" ||
47 | specifier.exported.type !== "Identifier"
48 | )
49 | /* c8 ignore next */
50 | continue;
51 |
52 | const importIdentifier = specifier.local.name;
53 | const exportIdentifier = specifier.exported.name;
54 | // It's allowed to export an identifier from a module with the same
55 | // name as another identifier within the same module. Add the $$
56 | // prefix and suffix to avoid collisions.
57 | const localIdentifier = "$$" + exportIdentifier + "$$";
58 |
59 | importSpecifiers.push(
60 | builders.importSpecifier(
61 | builders.identifier(importIdentifier),
62 | builders.identifier(localIdentifier),
63 | ),
64 | );
65 |
66 | module.append(
67 | ...generator.createRegisterAndExportReference(
68 | exportIdentifier,
69 | localIdentifier,
70 | ),
71 | );
72 | }
73 |
74 | module.unshift(builders.importDeclaration(importSpecifiers, source));
75 |
76 | module.remove(node);
77 | }
78 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-client/transform/export-default-declaration.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ClassDeclaration,
3 | ExportDefaultDeclaration,
4 | FunctionDeclaration,
5 | } from "estree";
6 | import { builders } from "estree-toolkit";
7 | import Generator from "./generator";
8 | import Module from "./module";
9 |
10 | /**
11 | * Transforms exports in the form of:
12 | * ```ts
13 | * let a;
14 | * export default a;
15 | *
16 | * export default function b() {}
17 | *
18 | * export default [];
19 | * ```
20 | *
21 | * Into:
22 | * ```ts
23 | * let a;
24 | * const $$Ref$$default = $$registerClientReference$$(...);
25 | * export { $$Ref$$default as default };
26 | *
27 | * function b() {}
28 | * const $$Ref$$default = $$registerClientReference$$(...);
29 | * export { $$Ref$$default as default };
30 | *
31 | * const $$default$$ = [];
32 | * const $$Ref$$default = $$registerClientReference$$(...);
33 | * export { $$Ref$$default as default };
34 | * ```
35 | */
36 | export default function transformExportDefaultDeclaration(
37 | node: ExportDefaultDeclaration,
38 | module: Module,
39 | generator: Generator,
40 | ) {
41 | let implementationIdentifier: string;
42 |
43 | if (node.declaration.type === "Identifier") {
44 | // let a;
45 | // export default a;
46 | implementationIdentifier = node.declaration.name;
47 |
48 | module.remove(node);
49 | } else if (
50 | node.declaration.type === "FunctionDeclaration" ||
51 | node.declaration.type === "ClassDeclaration"
52 | ) {
53 | // export default function b() {}
54 | if (!node.declaration.id)
55 | node.declaration.id = builders.identifier("$$default$$");
56 |
57 | implementationIdentifier = node.declaration.id.name;
58 |
59 | module.replace(
60 | node,
61 | node.declaration as FunctionDeclaration | ClassDeclaration, // identifier is now defined
62 | );
63 | } else {
64 | // export default [];
65 | implementationIdentifier = "$$default$$";
66 |
67 | const variableDeclaration = builders.variableDeclaration("const", [
68 | builders.variableDeclarator(
69 | builders.identifier(implementationIdentifier),
70 | node.declaration,
71 | ),
72 | ]);
73 |
74 | module.replace(node, variableDeclaration);
75 | }
76 |
77 | module.append(
78 | ...generator.createRegisterAndExportReference(
79 | "default",
80 | implementationIdentifier,
81 | ),
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-server/transform/export-default-declaration.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ClassDeclaration,
3 | ExportDefaultDeclaration,
4 | FunctionDeclaration,
5 | } from "estree";
6 | import { builders } from "estree-toolkit";
7 | import Generator from "./generator";
8 | import Module from "./module";
9 |
10 | /**
11 | * Transforms exports in the form of:
12 | * ```ts
13 | * let a;
14 | * export default a;
15 | *
16 | * export default function b() {}
17 | *
18 | * export default () => {}
19 | * ```
20 | *
21 | * Into:
22 | * ```ts
23 | * let a;
24 | * const $$Ref$$default = $$registerServerReference$$(...);
25 | * export { $$Ref$$default as default };
26 | *
27 | * function b() {}
28 | * const $$Ref$$default = $$registerServerReference$$(...);
29 | * export { $$Ref$$default as default };
30 | *
31 | * const $$default$$ = () => {};
32 | * const $$Ref$$default = $$registerServerReference$$(...);
33 | * export { $$Ref$$default as default };
34 | * ```
35 | */
36 | export default function transformExportDefaultDeclaration(
37 | node: ExportDefaultDeclaration,
38 | module: Module,
39 | generator: Generator,
40 | ) {
41 | let implementationIdentifier: string;
42 |
43 | if (node.declaration.type === "Identifier") {
44 | // let a;
45 | // export default a;
46 | implementationIdentifier = node.declaration.name;
47 |
48 | module.remove(node);
49 | } else if (
50 | node.declaration.type === "FunctionDeclaration" ||
51 | node.declaration.type === "ClassDeclaration"
52 | ) {
53 | // export default function b() {}
54 | if (!node.declaration.id)
55 | node.declaration.id = builders.identifier("$$default$$");
56 |
57 | implementationIdentifier = node.declaration.id.name;
58 |
59 | module.replace(
60 | node,
61 | node.declaration as FunctionDeclaration | ClassDeclaration, // identifier is now defined
62 | );
63 | } else {
64 | // export default [];
65 | implementationIdentifier = "$$default$$";
66 |
67 | const variableDeclaration = builders.variableDeclaration("const", [
68 | builders.variableDeclarator(
69 | builders.identifier(implementationIdentifier),
70 | node.declaration,
71 | ),
72 | ]);
73 |
74 | module.replace(node, variableDeclaration);
75 | }
76 |
77 | module.append(
78 | ...generator.createRegisterAndExportReference(
79 | "default",
80 | implementationIdentifier,
81 | ),
82 | );
83 | }
84 |
--------------------------------------------------------------------------------
/packages/node/src/bin.ts:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | import { HandleFunction } from "@/types/handle";
4 | import { program } from "commander";
5 | import mime from "mime/lite";
6 | import fs from "node:fs/promises";
7 | import http from "node:http";
8 | import path from "node:path";
9 | import {
10 | DEFAULT_BUILD_PATH,
11 | SERVER_DIR,
12 | SERVER_ENTRY_FILENAME,
13 | STATIC_DIR,
14 | } from "./constants";
15 |
16 | program
17 | .option("-p, --port
22 |
26 | );
27 | }
28 | ```
29 |
30 | ```ts
31 | "use server";
32 |
33 | export async function addComment() {
34 | const { headers } = request();
35 |
36 | const device = await getDevice(headers.get("user-agent"));
37 |
38 | // ...
39 | }
40 | ```
41 |
42 | ### Parameters
43 |
44 | ```ts
45 | const req = request();
46 | ```
47 |
48 | `request` takes no parameters.
49 |
50 | ### Returns
51 |
52 | ```ts
53 | function request(): JustRequest;
54 |
55 | interface JustRequest {
56 | readonly headers: Headers;
57 | readonly method: string;
58 | readonly url: string;
59 | }
60 | ```
61 |
62 | `request` returns an object with the following properties:
63 |
64 | - `headers`: A standard [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) representing the request headers.
65 | - `method`: The HTTP method of the request (e.g., `GET`, `POST`).
66 | - `url`: The absolute URL of the request. You can create a `URL` instance from it.
67 |
68 | ## `response`
69 |
70 | Access and modify the outgoing HTTP response of a Server Function.
71 |
72 | :::warning Server Functions Only
73 | Changes to the response made during rendering will not take effect.
74 | :::
75 |
76 | ```ts
77 | "use server";
78 |
79 | import { response } from "react-just/server";
80 |
81 | export async function logout() {
82 | const res = response();
83 |
84 | res.headers.append("Set-Cookie", "sessionId=; Max-Age=0; Path=/; HttpOnly");
85 | }
86 | ```
87 |
88 | ### Parameters
89 |
90 | ```ts
91 | const res = response();
92 | ```
93 |
94 | `response` takes no parameters.
95 |
96 | ### Returns
97 |
98 | ```ts
99 | declare function response(): JustResponse;
100 |
101 | interface JustResponse {
102 | readonly headers: Headers;
103 | }
104 | ```
105 |
106 | `response` returns an object containing the following properties:
107 |
108 | - `headers`: A standard [`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers) object representing the response headers. Use it to set headers like `Set-Cookie`.
109 |
--------------------------------------------------------------------------------
/packages/router/src/components/NavigateProvider.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Navigate } from "@/types";
4 | import { ReactNode, useCallback, useEffect } from "react";
5 | import { createFromRscFetch, render, RSC_MIME_TYPE } from "react-just/client";
6 | import NavigateContext from "../context/navigate";
7 | import { removeTrailingSlashes } from "../utils";
8 |
9 | interface NavigateProviderProps {
10 | children: ReactNode;
11 | trailingSlashes: "remove";
12 | }
13 |
14 | export default function NavigateProvider({
15 | children,
16 | trailingSlashes,
17 | }: NavigateProviderProps) {
18 | useEffect(() => {
19 | if (trailingSlashes === "remove")
20 | window.history.replaceState(
21 | null,
22 | "",
23 | removeTrailingSlashes(new URL(window.location.href)),
24 | );
25 | }, [trailingSlashes]);
26 |
27 | useEffect(() => {
28 | const originalPushState = window.history.pushState;
29 | const originalReplaceState = window.history.replaceState;
30 |
31 | window.addEventListener("popstate", onNavigation);
32 |
33 | window.history.pushState = function (...args) {
34 | originalPushState.apply(this, args);
35 | onNavigation();
36 | };
37 |
38 | window.history.replaceState = function (...args) {
39 | originalReplaceState.apply(this, args);
40 | onNavigation();
41 | };
42 |
43 | return () => {
44 | window.removeEventListener("popstate", onNavigation);
45 | window.history.pushState = originalPushState;
46 | window.history.replaceState = originalReplaceState;
47 | };
48 | }, []);
49 |
50 | const navigate = useCallbackMethod: {method}
23 |Pathname: {parsed.pathname}
24 |Device: {device}
25 |
61 | Loading...}>{children}
63 |
64 | );
65 | }
66 | ```
67 |
68 | ```tsx [src/OrderDetail.tsx]
69 | import type { RouteComponentProps } from "@react-just/router";
70 | import { getOrderDetails } from "./queries";
71 |
72 | export default async function OrderDetail({
73 | params,
74 | }: RouteComponentProps<{ orderId: string }>) {
75 | const details = await getOrderDetails(params.orderId);
76 | return (
77 | Orders
62 |
78 |
81 | );
82 | }
83 | ```
84 |
85 | Visit the [Router reference](/reference/router) for more usage details.
86 |
87 | ## Build Your Own
88 |
89 | React Just exposes a client API that lets you load and render a page in RSC format. You can use this to implement your own navigation logic.
90 |
91 | ```tsx
92 | import { createFromRscFetch, render, RSC_MIME_TYPE } from "react-just/client";
93 |
94 | function onNavigation() {
95 | createFromRscFetch(
96 | fetch(window.location.href, { headers: { accept: RSC_MIME_TYPE } }),
97 | ).then(({ tree }) => render(tree));
98 | }
99 | ```
100 |
101 | Visit the [Low Level APIs reference](/reference/core) for more information.
102 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-server/transform/index.ts:
--------------------------------------------------------------------------------
1 | import {
2 | ArrowFunctionExpression,
3 | FunctionDeclaration,
4 | FunctionExpression,
5 | Program,
6 | } from "estree";
7 | import { NodePath, traverse } from "estree-toolkit";
8 | import {
9 | getIsUseServerDirective,
10 | getUseServerModuleDirective,
11 | } from "../directive";
12 | import transformExportDefaultDeclaration from "./export-default-declaration";
13 | import transformExportNamedDeclaration from "./export-named-declaration";
14 | import transformExportNamedFromSource from "./export-named-from-source";
15 | import transformExportNamedSpecifiers from "./export-named-specifiers";
16 | import Generator from "./generator";
17 | import Module from "./module";
18 |
19 | export default function transform(program: Program, options: TransformOptions) {
20 | const { generator, treeshakeImplementation } = options;
21 |
22 | const module = new Module(program);
23 |
24 | // The directive "use server" directive can appear at the top
25 | // of a module.
26 | const useServerModuleDirective = getUseServerModuleDirective(program);
27 |
28 | if (useServerModuleDirective) module.remove(useServerModuleDirective);
29 |
30 | traverse(program, {
31 | ExportAllDeclaration() {
32 | if (!useServerModuleDirective) return;
33 |
34 | throw new Error(
35 | 'export all (`export *`) declarations are not supported on "use server" modules',
36 | );
37 | },
38 | ExportNamedDeclaration(path) {
39 | if (!useServerModuleDirective) return;
40 |
41 | const node = path.node!;
42 | if (node.source) {
43 | transformExportNamedFromSource(node, module, generator);
44 | } else if (node.declaration) {
45 | transformExportNamedDeclaration(node, module, generator);
46 | } else {
47 | transformExportNamedSpecifiers(node, module, generator);
48 | }
49 | },
50 | ExportDefaultDeclaration(path) {
51 | if (!useServerModuleDirective) return;
52 |
53 | const node = path.node!;
54 | transformExportDefaultDeclaration(node, module, generator);
55 | },
56 | // The directive "use server" directive can appear at the top of a function.
57 | ArrowFunctionExpression: FunctionLike,
58 | FunctionDeclaration: FunctionLike,
59 | FunctionExpression: FunctionLike,
60 | });
61 |
62 | if (!useServerModuleDirective)
63 | throw new Error('Expected "use server" directive to exist');
64 |
65 | module.unshift(generator.createRegisterFunctionImport());
66 |
67 | if (treeshakeImplementation)
68 | program.body = generator.createTreeshakedBody(program.body);
69 | }
70 |
71 | export type TransformOptions = {
72 | generator: Generator;
73 | treeshakeImplementation: boolean;
74 | };
75 |
76 | function FunctionLike(
77 | path: NodePath<
78 | FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
79 | >,
80 | ) {
81 | const node = path.node!;
82 |
83 | if (node.body.type !== "BlockStatement") return;
84 |
85 | const firstBlockNode = node.body.body[0];
86 |
87 | const isUseServerDirective =
88 | firstBlockNode && getIsUseServerDirective(firstBlockNode);
89 |
90 | if (!isUseServerDirective) return;
91 |
92 | const async = node.async;
93 |
94 | if (!async) throw new Error("server functions must be async");
95 |
96 | throw new Error("use server directive inside functions not supported yet");
97 | }
98 |
--------------------------------------------------------------------------------
/docs/reference/router/use-navigate.md:
--------------------------------------------------------------------------------
1 | ---
2 | outline: [2, 3]
3 | ---
4 |
5 | # useNavigate
6 |
7 | `useNavigate` is a hook that returns a function to programmatically change routes.
8 |
9 | ```tsx
10 | "use client";
11 |
12 | import { useNavigate } from "@react-just/router";
13 |
14 | function SomeComponent() {
15 | const navigate = useNavigate();
16 |
17 | return ;
18 | }
19 | ```
20 |
21 | ## Parameters
22 |
23 | ```tsx
24 | const navigate = useNavigate();
25 | ```
26 |
27 | `useNavigate` takes no parameters.
28 |
29 | ## Returns
30 |
31 | `useNavigate` returns a navigate function with the following signatures:
32 |
33 | ```tsx
34 | function navigate(href: string, options?: NavigateOptions): void;
35 | function navigate(delta: number): void;
36 |
37 | interface NavigateOptions {
38 | replace?: boolean;
39 | }
40 | ```
41 |
42 | The hook must be used within a [Router](/reference/router/router) component. Otherwise, it throws an error.
43 |
44 | ### Parameters
45 |
46 | **Navigate to URL**
47 |
48 | - `href`: The URL path to navigate to. Can be a relative URL.
49 | - `options`: Navigation options
50 | - `replace`: Replace the current entry in the history stack instead of pushing a new one
51 |
52 | **Navigate by delta**
53 |
54 | - `delta`: A positive or negative number of entries to move in the history stack (negative moves back, positive moves forward).
55 |
56 | ## Examples
57 |
58 | ### Navigate to Another Route
59 |
60 | ```tsx
61 | "use client";
62 |
63 | import { useNavigate } from "@react-just/router";
64 |
65 | function Home() {
66 | const navigate = useNavigate();
67 |
68 | const goToAbout = () => navigate("/about");
69 | const goToContact = () => navigate("/contact");
70 |
71 | return (
72 | Order ID: {params.orderId}
79 |{details}
80 |
73 |
77 | );
78 | }
79 | ```
80 |
81 | ### Navigate Back and Forward in History
82 |
83 | ```tsx
84 | "use client";
85 |
86 | import { useNavigate } from "@react-just/router";
87 |
88 | function Navigation() {
89 | const navigate = useNavigate();
90 |
91 | return (
92 | Home Page
74 | 75 | 76 |
93 |
94 |
95 |
96 |
97 | );
98 | }
99 | ```
100 |
101 | ### Navigate with Replace Option
102 |
103 | ```tsx
104 | "use client";
105 |
106 | import { useNavigate, useSearchParams } from "@react-just/router";
107 |
108 | function Search() {
109 | const navigate = useNavigate();
110 | const searchParams = useSearchParams();
111 | const query = searchParams.get("q");
112 |
113 | const handleSearch = (e: React.FormEvent) => {
114 | e.preventDefault();
115 | const q = (e.target as HTMLFormElement).query.value.trim();
116 | const search = new URLSearchParams({ q });
117 | if (q) navigate("?" + search.toString(), { replace: true });
118 | };
119 |
120 | return (
121 |
126 | );
127 | }
128 | ```
129 |
--------------------------------------------------------------------------------
/packages/react-just/src/vite/use-server/environments.ts:
--------------------------------------------------------------------------------
1 | import { builders } from "estree-toolkit";
2 | import crypto from "node:crypto";
3 | import { ENVIRONMENTS } from "../environments";
4 | import { TransformOptions } from "./transform";
5 | import Generator from "./transform/generator";
6 |
7 | export function getTransformOptions(options: {
8 | environment: string;
9 | hash: boolean;
10 | relativePath: string;
11 | }): TransformOptions {
12 | const { environment, hash, relativePath } = options;
13 |
14 | switch (environment) {
15 | case ENVIRONMENTS.CLIENT:
16 | return {
17 | generator: new ClientLikeGenerator({
18 | hash,
19 | relativePath,
20 | registerServerReferenceSource: "react-just/client",
21 | }),
22 | treeshakeImplementation: true,
23 | };
24 | case ENVIRONMENTS.FIZZ_NODE:
25 | return {
26 | generator: new ClientLikeGenerator({
27 | hash,
28 | relativePath,
29 | registerServerReferenceSource: "react-just/fizz.node",
30 | }),
31 | treeshakeImplementation: true,
32 | };
33 | case ENVIRONMENTS.FLIGHT_NODE:
34 | return {
35 | generator: new FlightGenerator({
36 | hash,
37 | relativePath,
38 | registerServerReferenceSource: "react-just/flight.node",
39 | }),
40 | treeshakeImplementation: false,
41 | };
42 | case ENVIRONMENTS.SCAN_USE_SERVER_MODULES:
43 | return {
44 | generator: new ClientLikeGenerator({
45 | hash,
46 | relativePath,
47 | registerServerReferenceSource: "react-just/client",
48 | }),
49 | treeshakeImplementation: true,
50 | };
51 | default:
52 | throw new Error(`Unexpected environment: ${environment}`);
53 | }
54 | }
55 |
56 | class ClientLikeGenerator extends Generator {
57 | constructor(options: {
58 | hash: boolean;
59 | registerServerReferenceSource: string;
60 | relativePath: string;
61 | }) {
62 | super({
63 | getRegisterArguments: ({ exportName }) => {
64 | const id = getId(options.relativePath, exportName);
65 | const registerId = options.hash ? hash(id) : id;
66 | return [builders.literal(registerId)];
67 | },
68 | registerServerReferenceSource: options.registerServerReferenceSource,
69 | });
70 | }
71 | }
72 |
73 | class FlightGenerator extends Generator {
74 | constructor(options: {
75 | hash: boolean;
76 | registerServerReferenceSource: string;
77 | relativePath: string;
78 | }) {
79 | super({
80 | getRegisterArguments: ({ implementationIdentifier, exportName }) => {
81 | const id = getId(options.relativePath, exportName);
82 | const registerId = options.hash ? hash(id) : id;
83 | return [
84 | builders.identifier(implementationIdentifier),
85 | builders.literal(registerId),
86 | ];
87 | },
88 | registerServerReferenceSource: options.registerServerReferenceSource,
89 | });
90 | }
91 | }
92 |
93 | function getId(relativePath: string, exportName: string) {
94 | return `${relativePath}#${exportName}`;
95 | }
96 |
97 | function hash(id: string) {
98 | // Using deterministic ID to avoid server functions breaking between
99 | // deployments.
100 | return crypto
101 | .createHash("sha256")
102 | .update(id)
103 | .digest()
104 | .subarray(0, HASH_BYTES)
105 | .toString("base64url");
106 | }
107 |
108 | const HASH_BYTES = 8;
109 |
--------------------------------------------------------------------------------
/docs/reference/router/router.md:
--------------------------------------------------------------------------------
1 | ---
2 | outline: [2, 3]
3 | ---
4 |
5 | # Router
6 |
7 | `Router` is a component that handles route matching and renders the appropriate route component for a given URL.
8 |
9 | ```tsx
10 | import { Router, Route } from "@react-just/router";
11 | import Home from "./components/Home";
12 | import About from "./components/About";
13 |
14 | function Routes({ url }: { url: URL }) {
15 | return (
16 |