Setup react-server-dom-parcel package

.eslintrc.js

@@ -327,6 +327,7 @@ module.exports = {
         'packages/react-server-dom-esm/**/*.js',
         'packages/react-server-dom-webpack/**/*.js',
         'packages/react-server-dom-turbopack/**/*.js',
+        'packages/react-server-dom-parcel/**/*.js',
         'packages/react-server-dom-fb/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',

ReactVersions.js

@@ -36,6 +36,7 @@ const stablePackages = {
   'react-dom': ReactVersion,
   'react-server-dom-webpack': ReactVersion,
   'react-server-dom-turbopack': ReactVersion,
+  'react-server-dom-parcel': ReactVersion,
   'react-is': ReactVersion,
   'react-reconciler': '0.30.0',
   'react-refresh': '0.15.0',

packages/react-client/src/forks/ReactFlightClientConfig.dom-browser-parcel.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactFlightClientConsoleConfigBrowser';
+export * from 'react-server-dom-parcel/src/ReactFlightClientConfigBundlerParcel';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = false;

packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-parcel.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientStreamConfigWeb';
+export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-server-dom-parcel/src/ReactFlightClientConfigBundlerParcel';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-client/src/forks/ReactFlightClientConfig.dom-node-parcel.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientStreamConfigNode';
+export * from 'react-client/src/ReactFlightClientConsoleConfigServer';
+export * from 'react-server-dom-parcel/src/ReactFlightClientConfigBundlerParcel';
+export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM';
+export const usedWithSSR = true;

packages/react-server-dom-parcel/README.md

@@ -0,0 +1,5 @@
+# react-server-dom-parcel
+
+Experimental React Flight bindings for DOM using Parcel.
+
+**Use it at your own risk.**

packages/react-server-dom-parcel/client.browser.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMClientBrowser';

packages/react-server-dom-parcel/client.edge.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMClientEdge';

packages/react-server-dom-parcel/client.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './client.browser';

packages/react-server-dom-parcel/client.node.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMClientNode';

packages/react-server-dom-parcel/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error('Use react-server-dom-parcel/client instead.');

packages/react-server-dom-parcel/npm/client.browser.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.browser.development.js');
+}

packages/react-server-dom-parcel/npm/client.edge.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.edge.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.edge.development.js');
+}

packages/react-server-dom-parcel/npm/client.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./client.browser');

packages/react-server-dom-parcel/npm/client.node.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-client.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-client.node.development.js');
+}

packages/react-server-dom-parcel/npm/index.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+throw new Error('Use react-server-dom-parcel/client instead.');

packages/react-server-dom-parcel/npm/server.browser.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-server.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-server.browser.development.js');
+}

packages/react-server-dom-parcel/npm/server.edge.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-server.edge.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-server.edge.development.js');
+}

packages/react-server-dom-parcel/npm/server.js

@@ -0,0 +1,6 @@
+'use strict';
+
+throw new Error(
+  'The React Server Writer cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);

packages/react-server-dom-parcel/npm/server.node.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-parcel-server.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-parcel-server.node.development.js');
+}

packages/react-server-dom-parcel/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "react-server-dom-parcel",
+  "description": "React Server Components bindings for DOM using Parcel. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "18.2.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "client.js",
+    "client.browser.js",
+    "client.edge.js",
+    "client.node.js",
+    "server.js",
+    "server.browser.js",
+    "server.edge.js",
+    "server.node.js",
+    "cjs/"
+  ],
+  "exports": {
+    ".": "./index.js",
+    "./client": {
+      "workerd": "./client.edge.js",
+      "deno": "./client.edge.js",
+      "worker": "./client.edge.js",
+      "node": "./client.node.js",
+      "edge-light": "./client.edge.js",
+      "browser": "./client.browser.js",
+      "default": "./client.browser.js"
+    },
+    "./client.browser": "./client.browser.js",
+    "./client.edge": "./client.edge.js",
+    "./client.node": "./client.node.js",
+    "./server": {
+      "react-server": {
+        "workerd": "./server.edge.js",
+        "deno": "./server.browser.js",
+        "node": "./server.node.js",
+        "edge-light": "./server.edge.js",
+        "browser": "./server.browser.js"
+      },
+      "default": "./server.js"
+    },
+    "./server.browser": "./server.browser.js",
+    "./server.edge": "./server.edge.js",
+    "./server.node": "./server.node.js",
+    "./src/*": "./src/*.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-parcel"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/react-server-dom-parcel/server.browser.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMServerBrowser';

packages/react-server-dom-parcel/server.edge.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMServerEdge';

packages/react-server-dom-parcel/server.js

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'The React Server cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);

packages/react-server-dom-parcel/server.node.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightDOMServerNode';

packages/react-server-dom-parcel/src/ReactFlightClientConfigBundlerParcel.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Thenable} from 'shared/ReactTypes';
+
+import type {ImportMetadata} from './shared/ReactFlightImportMetadata';
+
+import {ID, NAME, BUNDLES} from './shared/ReactFlightImportMetadata';
+// $FlowIgnore
+import {requireModuleById, loadESMBundle} from '@parcel/intrinsics';
+
+export type ServerManifest = {
+  [string]: Array<string>,
+};
+export type SSRModuleMap = null;
+export type ModuleLoading = null;
+export type ServerReferenceId = string;
+
+export opaque type ClientReferenceMetadata = ImportMetadata;
+
+// eslint-disable-next-line no-unused-vars
+export opaque type ClientReference<T> = {
+  id: string,
+  name: string,
+  bundles: Array<string>,
+};
+
+export function prepareDestinationForModule(
+  moduleLoading: ModuleLoading,
+  nonce: ?string,
+  metadata: ClientReferenceMetadata,
+) {
+  return;
+}
+
+export function resolveClientReference<T>(
+  bundlerConfig: null,
+  metadata: ClientReferenceMetadata,
+): ClientReference<T> {
+  // Reference is already resolved during the build.
+  return {
+    id: metadata[ID],
+    name: metadata[NAME],
+    bundles: metadata[BUNDLES],
+  };
+}
+
+export function resolveServerReference<T>(
+  bundlerConfig: ServerManifest,
+  ref: ServerReferenceId,
+): ClientReference<T> {
+  const idx = ref.lastIndexOf('#');
+  const id = ref.slice(0, idx);
+  const name = ref.slice(idx + 1);
+  const bundles = bundlerConfig[id];
+  if (!bundles) {
+    throw new Error('Invalid server action: ' + ref);
+  }
+  return {
+    id,
+    name,
+    bundles,
+  };
+}
+
+export function preloadModule<T>(
+  metadata: ClientReference<T>,
+): null | Thenable<any> {
+  return Promise.all(metadata.bundles.map(b => loadESMBundle(b)));
+}
+
+// Actually require the module or suspend if it's not yet ready.
+// Increase priority if necessary.
+export function requireModule<T>(metadata: ClientReference<T>): T {
+  const moduleExports = requireModuleById(metadata.id);
+  return moduleExports[metadata.name];
+}