Add example

Author: devongovett

packages/examples/react-static/.parcelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@parcel/config-react-ssg"
+}

packages/examples/react-static/components/Counter.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useState } from "react";
+
+export function Counter() {
+  let [count, setCount] = useState(0);
+  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
+}

packages/examples/react-static/components/Nav.tsx

@@ -0,0 +1,17 @@
+import type { PageProps } from "../types";
+
+export function Nav({pages, currentPage}: PageProps) {
+  return (
+    <nav>
+      <ul>
+        {pages.map(page => (
+          <li key={page.url}>
+            <a href={page.url} aria-current={page.url === currentPage.url ? 'page' : undefined}>
+              {page.name.replace('.html', '')}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

packages/examples/react-static/components/client.tsx

@@ -0,0 +1,67 @@
+"use client-entry";
+
+import {useState, use, startTransition, useInsertionEffect, ReactElement} from 'react';
+import ReactDOM from 'react-dom/client';
+import {createFromReadableStream, createFromFetch} from 'react-server-dom-parcel/client';
+import {rscStream} from 'rsc-html-stream/client';
+
+// Stream in initial RSC payload embedded in the HTML.
+let initialRSCPayload = createFromReadableStream<ReactElement>(rscStream);
+let updateRoot: ((root: ReactElement, cb?: (() => void) | null) => void) | null = null;
+
+function Content() {
+  // Store the current root element in state, along with a callback
+  // to call once rendering is complete.
+  let [[root, cb], setRoot] = useState<[ReactElement, (() => void) | null]>([use(initialRSCPayload), null]);
+  updateRoot = (root, cb) => setRoot([root, cb ?? null]);
+  useInsertionEffect(() => cb?.());
+  return root;
+}
+
+// Hydrate initial page content.
+startTransition(() => {
+  ReactDOM.hydrateRoot(document, <Content />);
+});
+
+// A very simple router. When we navigate, we'll fetch a new RSC payload from the server,
+// and in a React transition, stream in the new page. Once complete, we'll pushState to 
+// update the URL in the browser.
+async function navigate(pathname: string, push = false) {
+  let res = fetch(pathname.replace(/\.html$/, '.rsc'));
+  let root = await createFromFetch<ReactElement>(res);
+  startTransition(() => {
+    updateRoot!(root, () => {
+      if (push) {
+        history.pushState(null, '', pathname);
+        push = false;
+      }
+    });
+  });
+}
+
+// Intercept link clicks to perform RSC navigation.
+document.addEventListener('click', e => {
+  let link = (e.target as Element).closest('a');
+  if (
+    link &&
+    link instanceof HTMLAnchorElement &&
+    link.href &&
+    (!link.target || link.target === '_self') &&
+    link.origin === location.origin &&
+    !link.hasAttribute('download') &&
+    e.button === 0 && // left clicks only
+    !e.metaKey && // open in new tab (mac)
+    !e.ctrlKey && // open in new tab (windows)
+    !e.altKey && // download
+    !e.shiftKey &&
+    !e.defaultPrevented
+  ) {
+    e.preventDefault();
+    navigate(link.pathname, true);
+  }
+});
+
+// When the user clicks the back button, navigate with RSC.
+window.addEventListener('popstate', e => {
+  navigate(location.pathname);
+});

packages/examples/react-static/components/style.css

@@ -0,0 +1,8 @@
+h1 {
+  font-family: system-ui;
+}
+
+nav a[aria-current] {
+  background: black;
+  color: white
+}

packages/examples/react-static/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "parcel-rsc-static-example",
+  "version": "0.0.0",
+  "private": true,
+  "source": "pages/*.tsx",
+  "targets": {
+    "default": {
+      "context": "react-server",
+      "scopeHoist": false
+    }
+  },
+  "scripts": {
+    "start": "parcel --config .parcelrc",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "react": "^19",
+    "react-dom": "^19",
+    "react-server-dom-parcel": "^0.0.1",
+    "rsc-html-stream": "^0.0.4"
+  }
+}

packages/examples/react-static/pages/Index.tsx

@@ -0,0 +1,22 @@
+import type { PageProps } from "../types";
+import { Resources } from "@parcel/runtime-rsc";
+import { Counter } from "../components/Counter";
+import { Nav } from '../components/Nav';
+import '../components/style.css';
+import '../components/client';
+
+export default function Index({pages, currentPage}: PageProps) {
+  return (
+    <html>
+      <head>
+        <title>Static RSC</title>
+        <Resources />
+      </head>
+      <body>
+        <h1>This is an RSC!</h1>
+        <Nav pages={pages} currentPage={currentPage} />
+        <Counter />
+      </body>
+    </html>
+  );
+}

packages/examples/react-static/pages/Other.tsx

@@ -0,0 +1,20 @@
+import type { PageProps } from "../types";
+import { Resources } from "@parcel/runtime-rsc";
+import {Nav} from '../components/Nav';
+import '../components/style.css';
+import '../components/client';
+
+export default function Index({pages, currentPage}: PageProps) {
+  return (
+    <html>
+      <head>
+        <title>Static RSC</title>
+        <Resources />
+      </head>
+      <body>
+        <h1>This is another RSC!</h1>
+        <Nav pages={pages} currentPage={currentPage} />
+      </body>
+    </html>
+  );
+}

packages/examples/react-static/yarn.lock

@@ -125,6 +125,7 @@ export default (new Packager({
 
     return [
       {
+        type: 'html',
         contents: Readable.from(response),
       },
       {

packages/packagers/react-ssg/src/ReactSSGPackager.js

@@ -111,7 +111,9 @@ export async function _report(
 
       if (
         options.serveOptions &&
-        event.bundleGraph.getEntryBundles().some(b => b.env.isBrowser())
+        event.bundleGraph
+          .getEntryBundles()
+          .some(b => b.env.isBrowser() || b.type === 'html')
       ) {
         persistMessage(
           chalk.blue.bold(