From 9fdca9ee48d6d7f0a3a8673822bb3cb844103921 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Wed, 8 Jan 2025 22:19:19 -0500
Subject: [PATCH 1/3] Add a CLI to create new Parcel apps

---
 .eslintignore                                 |   1 +
 gulpfile.js                                   |   1 +
 .../react-static/src/ReactStaticPackager.js   |   1 -
 packages/utils/create-parcel/package.json     |  23 +++
 .../utils/create-parcel/src/create-parcel.js  | 190 ++++++++++++++++++
 .../templates/react-client/.gitignore         |   3 +
 .../templates/react-client/package.json       |  19 ++
 .../templates/react-client/src/App.css        |   8 +
 .../templates/react-client/src/App.tsx        |  10 +
 .../templates/react-client/src/index.html     |  12 ++
 .../templates/react-client/src/index.tsx      |  11 +
 .../templates/react-client/tsconfig.json      |  29 +++
 .../templates/react-server/.gitignore         |   3 +
 .../templates/react-server/package.json       |  31 +++
 .../templates/react-server/src/Counter.tsx    |  11 +
 .../templates/react-server/src/Page.tsx       |  28 +++
 .../templates/react-server/src/actions.ts     |   7 +
 .../templates/react-server/src/client.tsx     |  95 +++++++++
 .../templates/react-server/src/page.css       |  15 ++
 .../templates/react-server/src/server.tsx     | 106 ++++++++++
 .../templates/react-server/tsconfig.json      |  29 +++
 .../templates/react-server/types.d.ts         |  23 +++
 .../templates/react-server/yarn.lock          |   0
 .../templates/react-static/.gitignore         |   3 +
 .../templates/react-static/.parcelrc          |   3 +
 .../templates/react-static/package.json       |  28 +++
 .../templates/react-static/src/client.tsx     |  73 +++++++
 .../react-static/src/components/Counter.tsx   |  11 +
 .../react-static/src/components/MDXLayout.tsx |  23 +++
 .../react-static/src/components/Nav.css       |   8 +
 .../react-static/src/components/Nav.tsx       |  20 ++
 .../templates/react-static/src/page.css       |  13 ++
 .../react-static/src/pages/index.tsx          |  21 ++
 .../templates/react-static/src/pages/mdx.mdx  |  10 +
 .../templates/react-static/src/types.d.ts     |  19 ++
 .../templates/react-static/tsconfig.json      |  29 +++
 .../templates/vanilla/.gitignore              |   3 +
 .../templates/vanilla/package.json            |  14 ++
 .../templates/vanilla/src/index.html          |  13 ++
 .../templates/vanilla/src/style.css           |   8 +
 yarn.lock                                     |  22 +-
 41 files changed, 959 insertions(+), 18 deletions(-)
 create mode 100644 packages/utils/create-parcel/package.json
 create mode 100755 packages/utils/create-parcel/src/create-parcel.js
 create mode 100644 packages/utils/create-parcel/templates/react-client/.gitignore
 create mode 100644 packages/utils/create-parcel/templates/react-client/package.json
 create mode 100644 packages/utils/create-parcel/templates/react-client/src/App.css
 create mode 100644 packages/utils/create-parcel/templates/react-client/src/App.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-client/src/index.html
 create mode 100644 packages/utils/create-parcel/templates/react-client/src/index.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-client/tsconfig.json
 create mode 100644 packages/utils/create-parcel/templates/react-server/.gitignore
 create mode 100644 packages/utils/create-parcel/templates/react-server/package.json
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/Counter.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/Page.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/actions.ts
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/client.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/page.css
 create mode 100644 packages/utils/create-parcel/templates/react-server/src/server.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-server/tsconfig.json
 create mode 100644 packages/utils/create-parcel/templates/react-server/types.d.ts
 create mode 100644 packages/utils/create-parcel/templates/react-server/yarn.lock
 create mode 100644 packages/utils/create-parcel/templates/react-static/.gitignore
 create mode 100644 packages/utils/create-parcel/templates/react-static/.parcelrc
 create mode 100644 packages/utils/create-parcel/templates/react-static/package.json
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/client.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/components/Counter.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/components/MDXLayout.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/components/Nav.css
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/components/Nav.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/page.css
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/pages/index.tsx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/pages/mdx.mdx
 create mode 100644 packages/utils/create-parcel/templates/react-static/src/types.d.ts
 create mode 100644 packages/utils/create-parcel/templates/react-static/tsconfig.json
 create mode 100644 packages/utils/create-parcel/templates/vanilla/.gitignore
 create mode 100644 packages/utils/create-parcel/templates/vanilla/package.json
 create mode 100644 packages/utils/create-parcel/templates/vanilla/src/index.html
 create mode 100644 packages/utils/create-parcel/templates/vanilla/src/style.css

diff --git a/.eslintignore b/.eslintignore
index 01d5ff711c7..4f9cf13a89f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,6 +11,7 @@ packages/*/*/test/mochareporters.json
 packages/core/integration-tests/test/input/**
 packages/core/utils/test/input/**
 packages/utils/create-react-app/templates
+packages/utils/create-parcel-app/templates
 packages/examples
 
 # Generated by the build
diff --git a/gulpfile.js b/gulpfile.js
index dd6ba06c6ef..9261be380b3 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -32,6 +32,7 @@ const paths = {
   packageJson: [
     'packages/core/parcel/package.json',
     'packages/utils/create-react-app/package.json',
+    'packages/utils/create-parcel/package.json',
     'packages/dev/query/package.json',
     'packages/dev/bundle-stats-cli/package.json',
   ],
diff --git a/packages/packagers/react-static/src/ReactStaticPackager.js b/packages/packagers/react-static/src/ReactStaticPackager.js
index 2af29e1dae9..94ae32ded94 100644
--- a/packages/packagers/react-static/src/ReactStaticPackager.js
+++ b/packages/packagers/react-static/src/ReactStaticPackager.js
@@ -264,7 +264,6 @@ async function loadBundleUncached(
           ];
         });
       } else if (entryBundle) {
-        // console.log('here', entryBundle)
         queue.add(async () => {
           let {assets: subAssets} = await loadBundle(
             entryBundle,
diff --git a/packages/utils/create-parcel/package.json b/packages/utils/create-parcel/package.json
new file mode 100644
index 00000000000..7f898c28740
--- /dev/null
+++ b/packages/utils/create-parcel/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "create-parcel",
+  "version": "2.13.3",
+  "bin": {
+    "create-parcel": "lib/create-parcel.js"
+  },
+  "main": "src/create-parcel.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/parcel-bundler/parcel.git",
+    "directory": "packages/utils/create-parcel"
+  },
+  "source": "src/create-parcel.js",
+  "files": [
+    "templates",
+    "lib"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {}
+}
diff --git a/packages/utils/create-parcel/src/create-parcel.js b/packages/utils/create-parcel/src/create-parcel.js
new file mode 100755
index 00000000000..03e159797c1
--- /dev/null
+++ b/packages/utils/create-parcel/src/create-parcel.js
@@ -0,0 +1,190 @@
+#!/usr/bin/env node
+
+// @flow
+/* eslint-disable no-console */
+
+// $FlowFixMe
+import fs from 'fs/promises';
+import {readdirSync} from 'fs';
+import path from 'path';
+import {spawn as _spawn} from 'child_process';
+// $FlowFixMe
+import {parseArgs, styleText} from 'util';
+
+const supportsEmoji = isUnicodeSupported();
+
+// Fallback symbols for Windows from https://en.wikipedia.org/wiki/Code_page_437
+const success: string = supportsEmoji ? '✨' : '√';
+const error: string = supportsEmoji ? '🚨' : '×';
+
+const {positionals} = parseArgs({
+  allowPositionals: true,
+  options: {},
+});
+
+let template = positionals[0];
+if (!template) {
+  let packageManager = getCurrentPackageManager()?.name;
+  console.error(
+    `Usage: ${packageManager ?? 'npm'} create <template> [directory]\n`,
+  );
+  printAvailableTemplates();
+  console.log('');
+  process.exit(1);
+}
+
+let name = positionals[1];
+if (!name) {
+  name = '.';
+}
+
+install(template, name).then(
+  () => {
+    process.exit(0);
+  },
+  err => {
+    console.error(err);
+    process.exit(1);
+  },
+);
+
+async function install(template: string, name: string) {
+  let templateDir = path.join(__dirname, '..', 'templates', template);
+  try {
+    await fs.stat(templateDir);
+  } catch {
+    console.error(
+      style(['red', 'bold'], `${error} Unknown template ${template}.\n`),
+    );
+    printAvailableTemplates();
+    console.log('');
+    process.exit(1);
+    return;
+  }
+
+  if (name === '.') {
+    if ((await fs.readdir(name)).length !== 0) {
+      console.error(style(['red', 'bold'], `${error} Directory is not empty.`));
+      process.exit(1);
+      return;
+    }
+  } else {
+    try {
+      await fs.stat(name);
+      console.error(style(['red', 'bold'], `${error} ${name} already exists.`));
+      process.exit(1);
+      return;
+    } catch {
+      // ignore
+    }
+    await fs.mkdir(name, {recursive: true});
+  }
+
+  await spawn('git', ['init'], {
+    stdio: 'inherit',
+    cwd: name,
+  });
+
+  await fs.cp(templateDir, name, {
+    recursive: true,
+  });
+
+  let packageManager = getCurrentPackageManager()?.name;
+  switch (packageManager) {
+    case 'yarn':
+      await spawn('yarn', [], {cwd: name, stdio: 'inherit'});
+      break;
+    case 'pnpm':
+      await spawn('pnpm', ['install'], {cwd: name, stdio: 'inherit'});
+      break;
+    case 'npm':
+    default:
+      await spawn(
+        'npm',
+        ['install', '--legacy-peer-deps', '--no-audit', '--no-fund'],
+        {cwd: name, stdio: 'inherit'},
+      );
+      break;
+  }
+
+  await spawn('git', ['add', '-A'], {cwd: name});
+  await spawn(
+    'git',
+    ['commit', '--quiet', '-a', '-m', 'Initial commit from create-parcel'],
+    {
+      stdio: 'inherit',
+      cwd: name,
+    },
+  );
+
+  console.log('');
+  console.log(style(['green', 'bold'], `${success} Your new app is ready!\n`));
+  console.log('To get started, run the following commands:');
+  console.log('');
+  if (name !== '.') {
+    console.log(`  cd ${name}`);
+  }
+  console.log(`  ${packageManager ?? 'npm'} start`);
+  console.log('');
+}
+
+function spawn(cmd, args, opts) {
+  return new Promise((resolve, reject) => {
+    let p = _spawn(cmd, args, opts);
+    p.on('close', (code, signal) => {
+      if (code || signal) {
+        reject(new Error(`${cmd} failed with exit code ${code}`));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+function getCurrentPackageManager(
+  userAgent: ?string = process.env.npm_config_user_agent,
+): ?{|name: string, version: string|} {
+  if (!userAgent) {
+    return undefined;
+  }
+
+  const pmSpec = userAgent.split(' ')[0];
+  const separatorPos = pmSpec.lastIndexOf('/');
+  const name = pmSpec.substring(0, separatorPos);
+  return {
+    name: name,
+    version: pmSpec.substring(separatorPos + 1),
+  };
+}
+
+function printAvailableTemplates() {
+  console.error('Available templates:\n');
+  for (let dir of readdirSync(path.join(__dirname, '..', 'templates'))) {
+    console.error(`  • ${dir}`);
+  }
+}
+
+// From https://github.com/sindresorhus/is-unicode-supported/blob/8f123916d5c25a87c4f966dcc248b7ca5df2b4ca/index.js
+// This package is ESM-only so it has to be vendored
+function isUnicodeSupported() {
+  if (process.platform !== 'win32') {
+    return process.env.TERM !== 'linux'; // Linux console (kernel)
+  }
+
+  return (
+    Boolean(process.env.CI) ||
+    Boolean(process.env.WT_SESSION) || // Windows Terminal
+    process.env.ConEmuTask === '{cmd::Cmder}' || // ConEmu and cmder
+    process.env.TERM_PROGRAM === 'vscode' ||
+    process.env.TERM === 'xterm-256color' ||
+    process.env.TERM === 'alacritty'
+  );
+}
+
+function style(format, text) {
+  if (styleText) {
+    return styleText(format, text);
+  } else {
+    return text;
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-client/.gitignore b/packages/utils/create-parcel/templates/react-client/.gitignore
new file mode 100644
index 00000000000..4abc8edf55c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/.gitignore
@@ -0,0 +1,3 @@
+.parcel-cache/
+dist/
+node_modules/
diff --git a/packages/utils/create-parcel/templates/react-client/package.json b/packages/utils/create-parcel/templates/react-client/package.json
new file mode 100644
index 00000000000..597726320c1
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "parcel-react-client-starter",
+  "private": true,
+  "version": "0.0.0",
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "parcel": "^2.13.3"
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-client/src/App.css b/packages/utils/create-parcel/templates/react-client/src/App.css
new file mode 100644
index 00000000000..b9e66b65537
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/src/App.css
@@ -0,0 +1,8 @@
+html {
+  color-scheme: light dark;
+  font-family: system-ui;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
diff --git a/packages/utils/create-parcel/templates/react-client/src/App.tsx b/packages/utils/create-parcel/templates/react-client/src/App.tsx
new file mode 100644
index 00000000000..aaeb5243aa8
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/src/App.tsx
@@ -0,0 +1,10 @@
+import './App.css';
+
+export function App() {
+  return (
+    <>
+      <h1>Parcel React App</h1>
+      <p>Edit <code>src/App.tsx</code> to get started!</p>
+    </>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-client/src/index.html b/packages/utils/create-parcel/templates/react-client/src/index.html
new file mode 100644
index 00000000000..7ef4367f42e
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/src/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parcel React App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="index.tsx"></script>
+  </body>
+</html>
diff --git a/packages/utils/create-parcel/templates/react-client/src/index.tsx b/packages/utils/create-parcel/templates/react-client/src/index.tsx
new file mode 100644
index 00000000000..e2d3e7b3ebe
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/src/index.tsx
@@ -0,0 +1,11 @@
+import { createRoot } from 'react-dom/client';
+import { StrictMode } from 'react';
+import { App } from './App';
+
+let container = document.getElementById("app")!;
+let root = createRoot(container)
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/packages/utils/create-parcel/templates/react-client/tsconfig.json b/packages/utils/create-parcel/templates/react-client/tsconfig.json
new file mode 100644
index 00000000000..ddc251191d9
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-client/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true,
+
+    /* Modules */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    /* Emit */
+    "noEmit": true,
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-server/.gitignore b/packages/utils/create-parcel/templates/react-server/.gitignore
new file mode 100644
index 00000000000..4abc8edf55c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/.gitignore
@@ -0,0 +1,3 @@
+.parcel-cache/
+dist/
+node_modules/
diff --git a/packages/utils/create-parcel/templates/react-server/package.json b/packages/utils/create-parcel/templates/react-server/package.json
new file mode 100644
index 00000000000..394af388950
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "parcel-react-server-starter",
+  "private": true,
+  "version": "0.0.0",
+  "server": "dist/server.js",
+  "source": "src/server.tsx",
+  "targets": {
+    "server": {
+      "context": "react-server",
+      "includeNodeModules": {
+        "express": false
+      }
+    }
+  },
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "express": "^4.21.2",
+    "react": "canary",
+    "react-dom": "canary",
+    "react-server-dom-parcel": "canary",
+    "rsc-html-stream": "^0.0.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "parcel": "^2.13.3"
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-server/src/Counter.tsx b/packages/utils/create-parcel/templates/react-server/src/Counter.tsx
new file mode 100644
index 00000000000..4bba7201a1c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/Counter.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useState } from "react";
+
+export function Counter() {
+  let [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-server/src/Page.tsx b/packages/utils/create-parcel/templates/react-server/src/Page.tsx
new file mode 100644
index 00000000000..228e511312d
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/Page.tsx
@@ -0,0 +1,28 @@
+"use server-entry";
+
+import './page.css';
+import './client';
+import { Counter } from './Counter';
+import { action, name } from './actions';
+
+export async function Page() {
+  return (
+    <html lang="en">
+      <head>
+        <title>Parcel React Server App</title>
+      </head>
+      <body>
+        <h1>Parcel React Server App</h1>
+        <p>This page is a React Server Component! Edit <code>src/Page.tsx</code> to get started.</p>
+        <p>Here is a client component: <Counter /></p>
+        <hr />
+        <p>This form submits a server action.</p>
+        <form action={action}>
+          <label>Enter your name: <input name="name" defaultValue={name} /></label>
+          <button>Submit</button>
+        </form>
+        {name && <p>Welcome {name}!</p>}
+      </body>
+    </html>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-server/src/actions.ts b/packages/utils/create-parcel/templates/react-server/src/actions.ts
new file mode 100644
index 00000000000..61ec6287b83
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/actions.ts
@@ -0,0 +1,7 @@
+'use server';
+
+export let name = '';
+
+export function action(formData: FormData) {
+  name = (formData.get('name') as string) || '';
+}
diff --git a/packages/utils/create-parcel/templates/react-server/src/client.tsx b/packages/utils/create-parcel/templates/react-server/src/client.tsx
new file mode 100644
index 00000000000..35c09d65ca9
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/client.tsx
@@ -0,0 +1,95 @@
+"use client-entry";
+
+import {useState, startTransition, useInsertionEffect, ReactElement, use} from 'react';
+import {hydrateRoot} from 'react-dom/client';
+import {createFromReadableStream, createFromFetch, encodeReply, setServerCallback} 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(() => {
+  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, {
+    headers: {
+      Accept: 'text/x-component'
+    }
+  });
+  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);
+});
+
+// Intercept HMR window reloads, and do it with RSC instead.
+window.addEventListener('parcelhmrreload', e => {
+  e.preventDefault();
+  setTimeout(() => {
+    navigate(location.pathname);
+  }, 500);
+});
+
+// Setup a callback to perform server actions.
+// This sends a POST request to the server, and updates the page with the response.
+setServerCallback(async function(id: string, args: any[]) {
+  const response = fetch(location.pathname, {
+    method: 'POST',
+    headers: {
+      Accept: 'text/x-component',
+      'rsc-action-id': id,
+    },
+    body: await encodeReply(args),
+  });
+  const {result, root} = await createFromFetch<{root: ReactElement, result: any}>(response);
+  startTransition(() => updateRoot!(root));
+  return result;
+});
diff --git a/packages/utils/create-parcel/templates/react-server/src/page.css b/packages/utils/create-parcel/templates/react-server/src/page.css
new file mode 100644
index 00000000000..7c7401b71da
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/page.css
@@ -0,0 +1,15 @@
+html {
+  color-scheme: light dark;
+  font-family: system-ui;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
diff --git a/packages/utils/create-parcel/templates/react-server/src/server.tsx b/packages/utils/create-parcel/templates/react-server/src/server.tsx
new file mode 100644
index 00000000000..c9f141a0b6f
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/src/server.tsx
@@ -0,0 +1,106 @@
+// Server dependencies.
+import express, {type Request as ExpressRequest, type Response as ExpressResponse} from 'express';
+import {Readable} from 'stream';
+import type { ReadableStream as NodeReadableStream } from 'stream/web';
+import {renderToReadableStream, loadServerAction, decodeReply, decodeAction} from 'react-server-dom-parcel/server.edge';
+import {injectRSCPayload} from 'rsc-html-stream/server';
+
+// Client dependencies, used for SSR.
+// These must run in the same environment as client components (e.g. same instance of React).
+import {createFromReadableStream} from 'react-server-dom-parcel/client' with {env: 'react-client'};
+import {renderToReadableStream as renderHTMLToReadableStream} from 'react-dom/server' with {env: 'react-client'};
+import ReactClient, {ReactElement} from 'react' with {env: 'react-client'};
+
+// Page components. These must have "use server-entry" so they are treated as code splitting entry points.
+import {Page} from './Page';
+
+const app = express();
+
+app.use(express.static('dist'));
+
+app.get('/', async (req, res) => {
+  await render(req, res, <Page />);
+});
+
+app.post('/', async (req, res) => {
+  await handleAction(req, res, <Page />);
+});
+
+async function render(req: ExpressRequest, res: ExpressResponse, component: ReactElement, actionResult?: any) {
+  // Render RSC payload.
+  let root: any = component;
+  if (arguments.length > 3) {
+    root = {result: actionResult, root};
+  }
+  let stream = renderToReadableStream(root);
+  if (req.accepts('text/html')) {
+    res.setHeader('Content-Type', 'text/html');
+
+    // Use client react to render the RSC payload to HTML.
+    let [s1, s2] = stream.tee();
+    let data
+    function Content() {
+      data ??= createFromReadableStream<ReactElement>(s1);
+      return ReactClient.use(data);
+    }
+
+    let htmlStream = await renderHTMLToReadableStream(<Content />, {
+      bootstrapScriptContent: (component.type as any).bootstrapScript
+    });
+
+    let response = htmlStream.pipeThrough(injectRSCPayload(s2));
+    Readable.fromWeb(response as NodeReadableStream).pipe(res);
+  } else {
+    res.set('Content-Type', 'text/x-component');
+    Readable.fromWeb(stream as NodeReadableStream).pipe(res);
+  }
+}
+
+// Handle server actions.
+async function handleAction(req: ExpressRequest, res: ExpressResponse, component: ReactElement) {
+  let id = req.get('rsc-action-id');
+  let request = new Request('http://localhost' + req.url, {
+    method: 'POST',
+    headers: req.headers as any,
+    body: Readable.toWeb(req) as ReadableStream,
+    // @ts-ignore
+    duplex: 'half'
+  });
+
+  if (id) {
+    let action = await loadServerAction(id);
+    let body = req.is('multipart/form-data') ? await request.formData() : await request.text();
+    let args = await decodeReply<any[]>(body);
+    let result = action.apply(null, args);
+    try {
+      // Wait for any mutations
+      await result;
+    } catch (x) {
+      // We handle the error on the client
+    }
+
+    await render(req, res, component, result);
+  } else {
+    // Form submitted by browser (progressive enhancement).
+    let formData = await request.formData();
+    let action = await decodeAction(formData);
+    try {
+      // Wait for any mutations
+      await action();
+    } catch (err) {
+      // TODO render error page?
+    }
+    await render(req, res, component);
+  }
+}
+
+let server = app.listen(3001);
+console.log('Server listening on port 3001');
+
+// if (module.hot) {
+//   module.hot.dispose(() => {
+//     server.close();
+//   });
+
+//   module.hot.accept();
+// }
diff --git a/packages/utils/create-parcel/templates/react-server/tsconfig.json b/packages/utils/create-parcel/templates/react-server/tsconfig.json
new file mode 100644
index 00000000000..ddc251191d9
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true,
+
+    /* Modules */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    /* Emit */
+    "noEmit": true,
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-server/types.d.ts b/packages/utils/create-parcel/templates/react-server/types.d.ts
new file mode 100644
index 00000000000..302d1f3d679
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-server/types.d.ts
@@ -0,0 +1,23 @@
+declare module 'react-server-dom-parcel/client' {
+  export function createFromFetch<T>(res: Promise<Response>): Promise<T>;
+  export function createFromReadableStream<T>(
+    stream: ReadableStream,
+  ): Promise<T>;
+  export function encodeReply(
+    value: any,
+  ): Promise<string | URLSearchParams | FormData>;
+
+  type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+  export function setServerCallback(cb: CallServerCallback): void;
+}
+
+declare module 'react-server-dom-parcel/server.edge' {
+  export function renderToReadableStream(value: any): ReadableStream;
+  export function loadServerAction(
+    id: string,
+  ): Promise<(...args: any[]) => any>;
+  export function decodeReply<T>(body: string | FormData): Promise<T>;
+  export function decodeAction(
+    body: FormData,
+  ): Promise<(...args: any[]) => any>;
+}
diff --git a/packages/utils/create-parcel/templates/react-server/yarn.lock b/packages/utils/create-parcel/templates/react-server/yarn.lock
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/utils/create-parcel/templates/react-static/.gitignore b/packages/utils/create-parcel/templates/react-static/.gitignore
new file mode 100644
index 00000000000..4abc8edf55c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/.gitignore
@@ -0,0 +1,3 @@
+.parcel-cache/
+dist/
+node_modules/
diff --git a/packages/utils/create-parcel/templates/react-static/.parcelrc b/packages/utils/create-parcel/templates/react-static/.parcelrc
new file mode 100644
index 00000000000..65b0a28ce99
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/.parcelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "@parcel/config-react-static"
+}
diff --git a/packages/utils/create-parcel/templates/react-static/package.json b/packages/utils/create-parcel/templates/react-static/package.json
new file mode 100644
index 00000000000..fb5fdf8e38c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "parcel-react-static-starter",
+  "private": true,
+  "version": "0.0.0",
+  "source": "src/pages/*",
+  "targets": {
+    "default": {
+      "context": "react-server",
+      "scopeHoist": false
+    }
+  },
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {
+    "react": "canary",
+    "react-dom": "canary",
+    "react-server-dom-parcel": "canary",
+    "rsc-html-stream": "^0.0.4"
+  },
+  "devDependencies": {
+    "@parcel/config-react-static": "nightly",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "parcel": "nightly"
+  }
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/client.tsx b/packages/utils/create-parcel/templates/react-static/src/client.tsx
new file mode 100644
index 00000000000..16c5288c3e1
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/client.tsx
@@ -0,0 +1,73 @@
+"use client-entry";
+
+import {useState, use, startTransition, useInsertionEffect, ReactElement} from 'react';
+import {hydrateRoot} 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) => 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(() => {
+  hydrateRoot(document, <Content />);
+});
+
+// A very simple router. When we navigate, we'll fetch a new RSC payload,
+// 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);
+});
+
+// Intercept HMR window reloads, and do it with RSC instead.
+window.addEventListener('parcelhmrreload', e => {
+  e.preventDefault();
+  navigate(location.pathname);
+});
diff --git a/packages/utils/create-parcel/templates/react-static/src/components/Counter.tsx b/packages/utils/create-parcel/templates/react-static/src/components/Counter.tsx
new file mode 100644
index 00000000000..4bba7201a1c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/components/Counter.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useState } from "react";
+
+export function Counter() {
+  let [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/components/MDXLayout.tsx b/packages/utils/create-parcel/templates/react-static/src/components/MDXLayout.tsx
new file mode 100644
index 00000000000..fa7a0dd7f5b
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/components/MDXLayout.tsx
@@ -0,0 +1,23 @@
+import type { PageProps } from '../types';
+import type { ReactNode } from 'react';
+import { Nav } from '../components/Nav';
+import '../page.css';
+import '../client';
+
+interface LayoutProps extends PageProps {
+  children: ReactNode
+}
+
+export default function Layout({children, pages, currentPage}: LayoutProps) {
+  return (
+    <html lang="en">
+      <head>
+        <title>{currentPage.meta.tableOfContents?.[0].title}</title>
+      </head>
+      <body>
+        {children}
+        <Nav pages={pages} currentPage={currentPage} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/components/Nav.css b/packages/utils/create-parcel/templates/react-static/src/components/Nav.css
new file mode 100644
index 00000000000..f4d24292d0c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/components/Nav.css
@@ -0,0 +1,8 @@
+nav a {
+  color: ButtonText;
+}
+
+nav a[aria-current] {
+  background: ButtonText;
+  color: Canvas;
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/components/Nav.tsx b/packages/utils/create-parcel/templates/react-static/src/components/Nav.tsx
new file mode 100644
index 00000000000..492971517f4
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/components/Nav.tsx
@@ -0,0 +1,20 @@
+import type { PageProps } from "../types";
+import './Nav.css';
+
+export function Nav({pages, currentPage}: PageProps) {
+  return (
+    <nav>
+      <h3>Navigation</h3>
+      <p><code>components/Nav.tsx</code> shows how to render a list of pages.</p>
+      <ul>
+        {pages.map(page => (
+          <li key={page.url}>
+            <a href={page.url} aria-current={page.url === currentPage.url ? 'page' : undefined}>
+              {page.name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/page.css b/packages/utils/create-parcel/templates/react-static/src/page.css
new file mode 100644
index 00000000000..4c33ae56793
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/page.css
@@ -0,0 +1,13 @@
+html {
+  color-scheme: light dark;
+  font-family: system-ui;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+
+body {
+  width: 850px;
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/pages/index.tsx b/packages/utils/create-parcel/templates/react-static/src/pages/index.tsx
new file mode 100644
index 00000000000..35654a11452
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/pages/index.tsx
@@ -0,0 +1,21 @@
+import type { PageProps } from '../types';
+import { Nav } from '../components/Nav';
+import { Counter } from '../components/Counter';
+import '../page.css';
+import '../client';
+
+export default function Index({pages, currentPage}: PageProps) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Parcel Static React App</title>
+      </head>
+      <body>
+        <h1>Parcel Static React App</h1>
+        <p>This page is a React Server Component that is statically rendered at build time. Edit <code>pages/index.tsx</code> to get started.</p>
+        <p>Here is a client component: <Counter /></p>
+        <Nav pages={pages} currentPage={currentPage} />
+      </body>
+    </html>
+  );
+}
diff --git a/packages/utils/create-parcel/templates/react-static/src/pages/mdx.mdx b/packages/utils/create-parcel/templates/react-static/src/pages/mdx.mdx
new file mode 100644
index 00000000000..587a45f1281
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/pages/mdx.mdx
@@ -0,0 +1,10 @@
+import Layout from '../components/MDXLayout';
+export default Layout;
+
+import {Counter} from '../components/Counter';
+
+# MDX page
+
+This page is generated from an MDX file.
+
+Here is a client component: <Counter />
diff --git a/packages/utils/create-parcel/templates/react-static/src/types.d.ts b/packages/utils/create-parcel/templates/react-static/src/types.d.ts
new file mode 100644
index 00000000000..ba7bc6531d0
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/src/types.d.ts
@@ -0,0 +1,19 @@
+export interface Page {
+  url: string;
+  name: string;
+  meta: {
+    tableOfContents?: TocNode[];
+    exports: Record<string, any>;
+  };
+}
+
+export interface TocNode {
+  title: string;
+  level: number;
+  children: TocNode[];
+}
+
+export interface PageProps {
+  pages: Page[];
+  currentPage: Page;
+}
diff --git a/packages/utils/create-parcel/templates/react-static/tsconfig.json b/packages/utils/create-parcel/templates/react-static/tsconfig.json
new file mode 100644
index 00000000000..ddc251191d9
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "useDefineForClassFields": true,
+
+    /* Modules */
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    /* Emit */
+    "noEmit": true,
+
+    /* Interop Constraints */
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "allowImportingTsExtensions": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+
+    /* Completeness */
+    "skipLibCheck": true
+  }
+}
diff --git a/packages/utils/create-parcel/templates/vanilla/.gitignore b/packages/utils/create-parcel/templates/vanilla/.gitignore
new file mode 100644
index 00000000000..4abc8edf55c
--- /dev/null
+++ b/packages/utils/create-parcel/templates/vanilla/.gitignore
@@ -0,0 +1,3 @@
+.parcel-cache/
+dist/
+node_modules/
diff --git a/packages/utils/create-parcel/templates/vanilla/package.json b/packages/utils/create-parcel/templates/vanilla/package.json
new file mode 100644
index 00000000000..5cae49394f8
--- /dev/null
+++ b/packages/utils/create-parcel/templates/vanilla/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "parcel-vanilla-starter",
+  "private": true,
+  "version": "0.0.0",
+  "source": "src/index.html",
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "parcel": "^2.13.3"
+  }
+}
diff --git a/packages/utils/create-parcel/templates/vanilla/src/index.html b/packages/utils/create-parcel/templates/vanilla/src/index.html
new file mode 100644
index 00000000000..d0c01a8f757
--- /dev/null
+++ b/packages/utils/create-parcel/templates/vanilla/src/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Parcel Vanilla App</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>Parcel Vanilla App</h1>
+    <p>Edit <code>src/index.html</code> to get started!</p>
+  </body>
+</html>
diff --git a/packages/utils/create-parcel/templates/vanilla/src/style.css b/packages/utils/create-parcel/templates/vanilla/src/style.css
new file mode 100644
index 00000000000..b9e66b65537
--- /dev/null
+++ b/packages/utils/create-parcel/templates/vanilla/src/style.css
@@ -0,0 +1,8 @@
+html {
+  color-scheme: light dark;
+  font-family: system-ui;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
diff --git a/yarn.lock b/yarn.lock
index fefb2b1c2d1..a8b4711e743 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2666,25 +2666,13 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/prop-types@*":
-  version "15.7.13"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
-  integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==
-
-"@types/react@^17":
-  version "17.0.83"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.83.tgz#b477c56387b74279281149dcf5ba2a1e2216d131"
-  integrity sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "^0.16"
+"@types/react@^19":
+  version "19.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.3.tgz#7867240defc1a3686f151644ac886a7e8e0868f4"
+  integrity sha512-UavfHguIjnnuq9O67uXfgy/h3SRJbidAYvNjLceB+2RIKVRBzVsh0QO+Pw6BCSQqFS9xwzKfwstXx0m6AbAREA==
+  dependencies:
     csstype "^3.0.2"
 
-"@types/scheduler@^0.16":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
 "@types/semver@^7.3.12":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"

From 3f841ce675131d9fcaa325ba26a483ba7c2b3978 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 11 Jan 2025 16:32:34 -0500
Subject: [PATCH 2/3] template fixes

---
 packages/core/integration-tests/package.json  |  3 +-
 packages/transformers/js/src/JSTransformer.js | 10 +++---
 .../templates/react-server/package.json       |  4 ++-
 .../templates/react-server/yarn.lock          |  0
 .../templates/react-static/package.json       |  4 +--
 .../templates/react-static/src/client.tsx     |  2 +-
 .../templates/react-static/types.d.ts         | 12 +++++++
 yarn.lock                                     | 36 +++++++++++++++++--
 8 files changed, 57 insertions(+), 14 deletions(-)
 delete mode 100644 packages/utils/create-parcel/templates/react-server/yarn.lock
 create mode 100644 packages/utils/create-parcel/templates/react-static/types.d.ts

diff --git a/packages/core/integration-tests/package.json b/packages/core/integration-tests/package.json
index 6e1b53e0c1c..072187ec2fb 100644
--- a/packages/core/integration-tests/package.json
+++ b/packages/core/integration-tests/package.json
@@ -20,7 +20,8 @@
     "@babel/preset-env": "^7.22.14",
     "@babel/preset-typescript": "^7.22.11",
     "@mdx-js/react": "^1.5.3",
-    "@types/react": "^17",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "autoprefixer": "^10.4.0",
     "chalk": "^4.1.2",
     "command-exists": "^1.2.6",
diff --git a/packages/transformers/js/src/JSTransformer.js b/packages/transformers/js/src/JSTransformer.js
index c449493385f..7a0aba01790 100644
--- a/packages/transformers/js/src/JSTransformer.js
+++ b/packages/transformers/js/src/JSTransformer.js
@@ -404,12 +404,10 @@ export default (new Transformer({
     let supportsModuleWorkers =
       asset.env.shouldScopeHoist && asset.env.supports('worker-module', true);
     let isJSX = Boolean(config?.isJSX);
-    if (asset.isSource) {
-      if (asset.type === 'ts') {
-        isJSX = false;
-      } else if (!isJSX) {
-        isJSX = Boolean(JSX_EXTENSIONS[asset.type]);
-      }
+    if (asset.type === 'ts') {
+      isJSX = false;
+    } else if (!isJSX) {
+      isJSX = Boolean(JSX_EXTENSIONS[asset.type]);
     }
 
     let type = 'js';
diff --git a/packages/utils/create-parcel/templates/react-server/package.json b/packages/utils/create-parcel/templates/react-server/package.json
index 394af388950..bec38432a2c 100644
--- a/packages/utils/create-parcel/templates/react-server/package.json
+++ b/packages/utils/create-parcel/templates/react-server/package.json
@@ -24,8 +24,10 @@
     "rsc-html-stream": "^0.0.4"
   },
   "devDependencies": {
+    "@types/express": "^4",
+    "@types/node": "^22.10.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "parcel": "^2.13.3"
+    "parcel": "canary"
   }
 }
diff --git a/packages/utils/create-parcel/templates/react-server/yarn.lock b/packages/utils/create-parcel/templates/react-server/yarn.lock
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/utils/create-parcel/templates/react-static/package.json b/packages/utils/create-parcel/templates/react-static/package.json
index fb5fdf8e38c..4f4755f6536 100644
--- a/packages/utils/create-parcel/templates/react-static/package.json
+++ b/packages/utils/create-parcel/templates/react-static/package.json
@@ -20,9 +20,9 @@
     "rsc-html-stream": "^0.0.4"
   },
   "devDependencies": {
-    "@parcel/config-react-static": "nightly",
+    "@parcel/config-react-static": "canary",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "parcel": "nightly"
+    "parcel": "canary"
   }
 }
diff --git a/packages/utils/create-parcel/templates/react-static/src/client.tsx b/packages/utils/create-parcel/templates/react-static/src/client.tsx
index 16c5288c3e1..bacdcb3e55d 100644
--- a/packages/utils/create-parcel/templates/react-static/src/client.tsx
+++ b/packages/utils/create-parcel/templates/react-static/src/client.tsx
@@ -13,7 +13,7 @@ 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]);
+  updateRoot = (root, cb) => setRoot([root, cb ?? null]);
   useInsertionEffect(() => cb?.());
   return root;
 }
diff --git a/packages/utils/create-parcel/templates/react-static/types.d.ts b/packages/utils/create-parcel/templates/react-static/types.d.ts
new file mode 100644
index 00000000000..9adcdb6974a
--- /dev/null
+++ b/packages/utils/create-parcel/templates/react-static/types.d.ts
@@ -0,0 +1,12 @@
+declare module 'react-server-dom-parcel/client' {
+  export function createFromFetch<T>(res: Promise<Response>): Promise<T>;
+  export function createFromReadableStream<T>(
+    stream: ReadableStream,
+  ): Promise<T>;
+  export function encodeReply(
+    value: any,
+  ): Promise<string | URLSearchParams | FormData>;
+
+  type CallServerCallback = <T>(id: string, args: any[]) => Promise<T>;
+  export function setServerCallback(cb: CallServerCallback): void;
+}
diff --git a/yarn.lock b/yarn.lock
index a8b4711e743..794a1b1daff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2666,6 +2666,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/react-dom@^19":
+  version "19.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.2.tgz#ad21f9a1ee881817995fd3f7fd33659c87e7b1b7"
+  integrity sha512-c1s+7TKFaDRRxr1TxccIX2u7sfCnc3RxkVyBIUA2lCpyqCF+QoAwQ/CBg7bsMdVwP120HEH143VQezKtef5nCg==
+
 "@types/react@^19":
   version "19.0.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-19.0.3.tgz#7867240defc1a3686f151644ac886a7e8e0868f4"
@@ -13265,7 +13270,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -13291,6 +13296,15 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -13391,7 +13405,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13412,6 +13426,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14805,7 +14826,7 @@ workerpool@6.1.0:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.1.0.tgz#a8e038b4c94569596852de7a8ea4228eefdeb37b"
   integrity sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14831,6 +14852,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From eea8bb833720ba499e0fdf97477c99dc1ef61cc5 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Sat, 11 Jan 2025 17:30:14 -0500
Subject: [PATCH 3/3] fix hmr

---
 .../reporters/dev-server/src/NodeRunner.js    | 30 ++++++++++++++-----
 .../dev-server/src/ServerReporter.js          |  8 +++--
 .../runtimes/hmr/src/loaders/hmr-runtime.js   |  3 ++
 .../templates/react-server/package.json       |  1 +
 .../templates/react-server/src/client.tsx     |  4 +--
 .../templates/react-server/src/server.tsx     | 10 +------
 6 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/packages/reporters/dev-server/src/NodeRunner.js b/packages/reporters/dev-server/src/NodeRunner.js
index 4f8c961a5b2..11d3180474f 100644
--- a/packages/reporters/dev-server/src/NodeRunner.js
+++ b/packages/reporters/dev-server/src/NodeRunner.js
@@ -5,6 +5,7 @@ import {md, errorToDiagnostic} from '@parcel/diagnostic';
 import nullthrows from 'nullthrows';
 import {Worker} from 'worker_threads';
 import path from 'path';
+import {type Deferred, makeDeferredWithPromise} from '@parcel/utils';
 import type {HMRMessage} from './HMRServer';
 
 export type NodeRunnerOptions = {|
@@ -15,7 +16,8 @@ export type NodeRunnerOptions = {|
 export class NodeRunner {
   worker: Worker | null = null;
   bundleGraph: BundleGraph<PackagedBundle> | null = null;
-  pending: boolean = true;
+  pending: Promise<void> | null = null;
+  deferred: Deferred<void> | null = null;
   logger: PluginLogger;
   hmr: boolean;
 
@@ -25,17 +27,25 @@ export class NodeRunner {
   }
 
   buildStart() {
-    this.pending = true;
+    let {deferred, promise} = makeDeferredWithPromise();
+    this.pending = promise;
+    this.deferred = deferred;
   }
 
-  buildSuccess(bundleGraph: BundleGraph<PackagedBundle>) {
+  async buildSuccess(bundleGraph: BundleGraph<PackagedBundle>) {
     this.bundleGraph = bundleGraph;
-    this.pending = false;
+
+    let deferred = this.deferred;
+    this.pending = null;
+    this.deferred = null;
+
     if (this.worker == null) {
-      this.startWorker();
+      await this.startWorker();
     } else if (!this.hmr) {
-      this.restartWorker();
+      await this.restartWorker();
     }
+
+    deferred?.resolve();
   }
 
   startWorker(): Promise<void> {
@@ -88,7 +98,11 @@ export class NodeRunner {
       this.worker = worker;
 
       return new Promise(resolve => {
-        worker.once('online', () => resolve());
+        if (this.hmr) {
+          worker.once('message', () => resolve());
+        } else {
+          worker.once('online', () => resolve());
+        }
       });
     } else {
       return Promise.resolve();
@@ -107,6 +121,8 @@ export class NodeRunner {
     // If the build is still pending, wait until it completes to restart.
     if (!this.pending) {
       await this.startWorker();
+    } else {
+      await this.pending;
     }
   }
 
diff --git a/packages/reporters/dev-server/src/ServerReporter.js b/packages/reporters/dev-server/src/ServerReporter.js
index 6166acb288e..8ea5be0d150 100644
--- a/packages/reporters/dev-server/src/ServerReporter.js
+++ b/packages/reporters/dev-server/src/ServerReporter.js
@@ -121,9 +121,13 @@ export default (new Reporter({
             // If running in node, wait for the server to update before emitting the update
             // on the client. This ensures that when the client reloads the server is ready.
             if (nodeRunner) {
-              await nodeRunner.emitUpdate(update);
+              // Don't await here because that blocks the build from continuing
+              // and we may need to wait for the buildSuccess event.
+              let hmr = hmrServer;
+              nodeRunner.emitUpdate(update).then(() => hmr.broadcast(update));
+            } else {
+              hmrServer.broadcast(update);
             }
-            hmrServer.broadcast(update);
           }
         }
         break;
diff --git a/packages/runtimes/hmr/src/loaders/hmr-runtime.js b/packages/runtimes/hmr/src/loaders/hmr-runtime.js
index 35d57521303..89a42998775 100644
--- a/packages/runtimes/hmr/src/loaders/hmr-runtime.js
+++ b/packages/runtimes/hmr/src/loaders/hmr-runtime.js
@@ -153,6 +153,9 @@ if (!parent || !parent.isParcelRequire) {
             parentPort.postMessage('restart');
           }
         });
+
+        // After the bundle has finished running, notify the dev server that the HMR update is complete.
+        queueMicrotask(() => parentPort.postMessage('ready'));
       }
     } catch {
       if (typeof WebSocket !== 'undefined') {
diff --git a/packages/utils/create-parcel/templates/react-server/package.json b/packages/utils/create-parcel/templates/react-server/package.json
index bec38432a2c..565ca9d46ea 100644
--- a/packages/utils/create-parcel/templates/react-server/package.json
+++ b/packages/utils/create-parcel/templates/react-server/package.json
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "@types/express": "^4",
+    "@types/parcel-env": "^0.0.6",
     "@types/node": "^22.10.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
diff --git a/packages/utils/create-parcel/templates/react-server/src/client.tsx b/packages/utils/create-parcel/templates/react-server/src/client.tsx
index 35c09d65ca9..2cc883d7123 100644
--- a/packages/utils/create-parcel/templates/react-server/src/client.tsx
+++ b/packages/utils/create-parcel/templates/react-server/src/client.tsx
@@ -73,9 +73,7 @@ window.addEventListener('popstate', e => {
 // Intercept HMR window reloads, and do it with RSC instead.
 window.addEventListener('parcelhmrreload', e => {
   e.preventDefault();
-  setTimeout(() => {
-    navigate(location.pathname);
-  }, 500);
+  navigate(location.pathname);
 });
 
 // Setup a callback to perform server actions.
diff --git a/packages/utils/create-parcel/templates/react-server/src/server.tsx b/packages/utils/create-parcel/templates/react-server/src/server.tsx
index c9f141a0b6f..ad2f8736306 100644
--- a/packages/utils/create-parcel/templates/react-server/src/server.tsx
+++ b/packages/utils/create-parcel/templates/react-server/src/server.tsx
@@ -94,13 +94,5 @@ async function handleAction(req: ExpressRequest, res: ExpressResponse, component
   }
 }
 
-let server = app.listen(3001);
+app.listen(3001);
 console.log('Server listening on port 3001');
-
-// if (module.hot) {
-//   module.hot.dispose(() => {
-//     server.close();
-//   });
-
-//   module.hot.accept();
-// }