= htmlStream
- if (!options?.debugNojs) {
- // initial RSC stream is injected in HTML stream as
- // using utility made by devongovett https://github.com/devongovett/rsc-html-stream
- responseStream = responseStream.pipeThrough(
- injectRSCPayload(rscStream2, {
- nonce: options?.nonce,
- }),
- )
- }
-
- return { stream: responseStream, status }
-}
diff --git a/src/framework/error-boundary.tsx b/src/framework/error-boundary.tsx
deleted file mode 100644
index 39d9165..0000000
--- a/src/framework/error-boundary.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import React from 'react'
-
-// Minimal ErrorBoundary example to handle errors globally on browser
-export function GlobalErrorBoundary(props: { children?: React.ReactNode }) {
- return (
-
- {props.children}
-
- )
-}
-
-// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
-// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
-class ErrorBoundary extends React.Component<{
- children?: React.ReactNode
- errorComponent: React.FC<{
- error: Error
- reset: () => void
- }>
-}> {
- state: { error?: Error } = {}
-
- static getDerivedStateFromError(error: Error) {
- return { error }
- }
-
- reset = () => {
- this.setState({ error: null })
- }
-
- render() {
- const error = this.state.error
- if (error) {
- return
- }
- return this.props.children
- }
-}
-
-// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/build/webpack/loaders/next-app-loader.ts#L73
-// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/client/components/error-boundary.tsx#L145
-function DefaultGlobalErrorPage(props: { error: Error; reset: () => void }) {
- return (
-
-
- Unexpected Error
-
-
- Caught an unexpected error
-
- Error:{' '}
- {import.meta.env.DEV && 'message' in props.error
- ? props.error.message
- : '(Unknown)'}
-
-
-
-
- )
-}
diff --git a/src/framework/request.tsx b/src/framework/request.tsx
deleted file mode 100644
index 4c7c666..0000000
--- a/src/framework/request.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-// Framework conventions (arbitrary choices for this demo):
-// - Use `_.rsc` URL suffix to differentiate RSC requests from SSR requests
-// - Use `x-rsc-action` header to pass server action ID
-const URL_POSTFIX = '_.rsc'
-const HEADER_ACTION_ID = 'x-rsc-action'
-
-// Parsed request information used to route between RSC/SSR rendering and action handling.
-// Created by parseRenderRequest() from incoming HTTP requests.
-type RenderRequest = {
- isRsc: boolean // true if request should return RSC payload (via _.rsc suffix)
- isAction: boolean // true if this is a server action call (POST request)
- actionId?: string // server action ID from x-rsc-action header
- request: Request // normalized Request with _.rsc suffix removed from URL
- url: URL // normalized URL with _.rsc suffix removed
-}
-
-export function createRscRenderRequest(
- urlString: string,
- action?: { id: string; body: BodyInit },
-): Request {
- const url = new URL(urlString)
- url.pathname += URL_POSTFIX
- const headers = new Headers()
- if (action) {
- headers.set(HEADER_ACTION_ID, action.id)
- }
- return new Request(url.toString(), {
- method: action ? 'POST' : 'GET',
- headers,
- body: action?.body,
- })
-}
-
-export function parseRenderRequest(request: Request): RenderRequest {
- const url = new URL(request.url)
- const isAction = request.method === 'POST'
- if (url.pathname.endsWith(URL_POSTFIX)) {
- url.pathname = url.pathname.slice(0, -URL_POSTFIX.length)
- const actionId = request.headers.get(HEADER_ACTION_ID) || undefined
- if (request.method === 'POST' && !actionId) {
- throw new Error('Missing action id header for RSC action request')
- }
- return {
- isRsc: true,
- isAction,
- actionId,
- request: new Request(url, request),
- url,
- }
- } else {
- return {
- isRsc: false,
- isAction,
- request,
- url,
- }
- }
-}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index f4d2128..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,112 +0,0 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
-body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
-}
-
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
-}
-
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 1rem;
-}
-
-.read-the-docs {
- color: #888;
- text-align: left;
-}
diff --git a/src/pages/a/index.tsx b/src/pages/a/index.tsx
index 5ad0c17..699c4e6 100644
--- a/src/pages/a/index.tsx
+++ b/src/pages/a/index.tsx
@@ -1,9 +1,12 @@
-'use server';
+import { useEffect } from "react";
-export default async function List() {
+export default function List() {
+ useEffect(() => {
+ console.log('useEffect in List');
+ }, []);
return (
-
List A
+ List 2
);
}
\ No newline at end of file
diff --git a/src/pages/b/index.tsx b/src/pages/b/index.tsx
deleted file mode 100644
index c565e13..0000000
--- a/src/pages/b/index.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-'use server';
-
-export default async function List() {
- return (
-
- );
-}
\ No newline at end of file
diff --git a/src/pages/v/a/index.tsx b/src/pages/v/a/index.tsx
new file mode 100644
index 0000000..fa45e53
--- /dev/null
+++ b/src/pages/v/a/index.tsx
@@ -0,0 +1,18 @@
+'use server';
+import { useEffect } from "react";
+
+const getVersion = async () => {
+ await new Promise(resolve => setTimeout(resolve, 1000));
+ return '1.0.0';
+}
+export default async function List() {
+ const v = await getVersion();
+ return (
+
+
List - Version {v}
+
Primary Button
+
-
-
Vite + RSC
- {/* Dynamic page content */}
- {props.page ||
}
-
- -
- Edit
src/client.tsx to test client HMR.
-
- -
- Edit
src/root.tsx to test server HMR.
-
- -
- Visit{' '}
-
-
_.rsc
- {' '}
- to view RSC stream payload.
-
- -
- Visit{' '}
-
-
?__nojs
- {' '}
- to test server action without js enabled.
-
-
-
-
-
-
-
-
- Request URL: Home
-
-
-
-
- )
-}
diff --git a/src/ssr.tsx b/src/ssr.tsx
new file mode 100644
index 0000000..0ae1d1e
--- /dev/null
+++ b/src/ssr.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { renderToReadableStream } from 'react-dom/server';
+import VA from './pages/v/a';
+import { createRoot, hydrateRoot } from 'react-dom/client'
+export async function renderToString(comp: React.ReactElement): Promise {
+ const response = await renderToReadableStream(
+ <>{comp},
+ {
+ bootstrapScripts: []
+ }
+ );
+ const reader = response.getReader();
+ const decoder = new TextDecoder();
+ let html = '';
+ while (true) {
+ const { done, value } = await reader.read();
+ if (done) break;
+ html += decoder.decode(value);
+ }
+ return html;
+}
+
+console.log(await renderToString());
+
+// const root = createRoot(document.getElementById('root')!);
+// root.render();
+// hydrateRoot(document.getElementById('root')!, );
+//
+// console.log(await renderToString());
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index b212cd7..81c8177 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
"compilerOptions": {
"erasableSyntaxOnly": true,
"allowImportingTsExtensions": true,
- "noUnusedLocals": true,
+ "noUnusedLocals": false,
"noUnusedParameters": true,
"skipLibCheck": true,
"verbatimModuleSyntax": true,
@@ -10,8 +10,13 @@
"moduleResolution": "Bundler",
"module": "ESNext",
"target": "ESNext",
- "lib": ["ESNext", "DOM"],
- "types": ["vite/client", "@vitejs/plugin-rsc/types"],
+ "lib": [
+ "ESNext",
+ "DOM"
+ ],
+ "types": [
+ "node",
+ ],
"jsx": "react-jsx"
}
-}
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
deleted file mode 100644
index 9b9c9e0..0000000
--- a/vite.config.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import react from '@vitejs/plugin-react'
-import rsc from '@vitejs/plugin-rsc'
-import { defineConfig } from 'vite'
-
-export default defineConfig({
- plugins: [
- rsc({
- // `entries` option is only a shorthand for specifying each `rollupOptions.input` below
- // > entries: { rsc, ssr, client },
- //
- // by default, the plugin setup request handler based on `default export` of `rsc` environment `rollupOptions.input.index`.
- // This can be disabled when setting up own server handler e.g. `@cloudflare/vite-plugin`.
- // > serverHandler: false
- }),
-
- // use any of react plugins https://github.com/vitejs/vite-plugin-react
- // to enable client component HMR
- react(),
-
- // use https://github.com/antfu-collective/vite-plugin-inspect
- // to understand internal transforms required for RSC.
- // import("vite-plugin-inspect").then(m => m.default()),
- ],
-
- // specify entry point for each environment.
- // (currently the plugin assumes `rollupOptions.input.index` for some features.)
- environments: {
- // `rsc` environment loads modules with `react-server` condition.
- // this environment is responsible for:
- // - RSC stream serialization (React VDOM -> RSC stream)
- // - server functions handling
- rsc: {
- build: {
- rollupOptions: {
- input: {
- index: './src/framework/entry.rsc.tsx',
- },
- },
- },
- },
-
- // `ssr` environment loads modules without `react-server` condition.
- // this environment is responsible for:
- // - RSC stream deserialization (RSC stream -> React VDOM)
- // - traditional SSR (React VDOM -> HTML string/stream)
- ssr: {
- build: {
- rollupOptions: {
- input: {
- index: './src/framework/entry.ssr.tsx',
- },
- },
- },
- },
-
- // client environment is used for hydration and client-side rendering
- // this environment is responsible for:
- // - RSC stream deserialization (RSC stream -> React VDOM)
- // - traditional CSR (React VDOM -> Browser DOM tree mount/hydration)
- // - refetch and re-render RSC
- // - calling server functions
- client: {
- build: {
- rollupOptions: {
- input: {
- index: './src/framework/entry.browser.tsx',
- },
- },
- },
- },
- },
-})