Vite plugin for React Server Components

.eslintrc.js

@@ -144,6 +144,7 @@ module.exports = {
         'packages/react-fs/**/*.js',
         'packages/react-refresh/**/*.js',
         'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-server-dom-vite/**/*.js',
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',

ReactVersions.js

@@ -48,6 +48,7 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
+  'react-server-dom-vite',
 ];
 
 module.exports = {

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser-vite.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightClientViteBundlerConfig';

packages/react-client/src/forks/ReactFlightClientHostConfig.dom-vite.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-vite/src/ReactFlightClientViteBundlerConfig';

packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-browser-vite.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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-dom/src/client/ReactDOMHostConfig';

packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-vite.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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-dom/src/client/ReactDOMHostConfig';

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

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

packages/react-server-dom-vite/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

packages/react-server-dom-vite/esm/react-server-dom-vite-client-proxy.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ClientProxy.js';

packages/react-server-dom-vite/esm/react-server-dom-vite-plugin.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ReactFlightVitePlugin.js';

packages/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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-vite/esm/react-server-dom-vite-writer.node.server.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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.js';

packages/react-server-dom-vite/esm/react-server-dom-vite.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ReactFlightDOMClient';

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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/ReactFlightDOMClient';

packages/react-server-dom-vite/npm/esm/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

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

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

packages/react-server-dom-vite/npm/plugin.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-server-dom-vite-plugin.js');

packages/react-server-dom-vite/npm/writer.browser.server.js

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

packages/react-server-dom-vite/npm/writer.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./writer.node.server.js');

packages/react-server-dom-vite/npm/writer.node.server.js

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

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

@@ -0,0 +1,67 @@
+{
+  "name": "react-server-dom-vite",
+  "description": "React Server Components bindings for DOM using Vite. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "version": "0.1.0",
+  "keywords": [
+    "react"
+  ],
+  "homepage": "https://reactjs.org/",
+  "bugs": "https://github.com/facebook/react/issues",
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "plugin.js",
+    "writer.browser.server.js",
+    "writer.node.server.js",
+    "cjs/",
+    "umd/",
+    "esm/"
+  ],
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./esm/react-server-dom-vite.js"
+    },
+    "./plugin": {
+      "require": "./plugin.js",
+      "import": "./esm/react-server-dom-vite-plugin.js"
+    },
+    "./writer": {
+      "require": "./writer.node.server.js",
+      "node": "./esm/react-server-dom-vite-writer.node.server.js",
+      "default": "./esm/react-server-dom-vite-writer.browser.server.js"
+    },
+    "./writer.node.server": {
+      "require": "./writer.node.server.js",
+      "import": "./esm/react-server-dom-vite-writer.node.server.js"
+    },
+    "./writer.browser.server":  {
+      "require": "./writer.browser.server.js",
+      "import": "./esm/react-server-dom-vite-writer.browser.server.js"
+    },
+    "./client-proxy": "./esm/react-server-dom-vite-client-proxy.js",
+    "./package.json": "./package.json"
+  },
+  "main": "index.js",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-server-dom-vite"
+  },
+  "engines": {
+    "node": ">=0.10.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "vite": "^2.7.1"
+  },
+  "dependencies": {
+    "es-module-lexer": "^0.9.3"
+  },
+  "devDependencies": {
+    "vite": "^2.7.1"
+  }
+}

packages/react-server-dom-vite/plugin.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 {default} from './src/ReactFlightVitePlugin';

packages/react-server-dom-vite/src/ClientProxy.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 {createElement} from 'react';
+
+declare var globalThis: any;
+// eslint-disable-next-line no-unused-vars
+/*global globalThis*/
+
+// This is a store of components discovered during RSC
+// to load them later when consuming the response in SSR.
+globalThis.__COMPONENT_INDEX = {};
+
+type ClientProxy = {
+  id: string,
+  name: string,
+  named: boolean,
+  component: mixed,
+};
+
+function isReactComponent(component: any, name: string) {
+  if (!component) return false;
+
+  return (
+    (typeof component === 'function' && /^[A-Z]/.test(name)) ||
+    typeof component.render === 'function' ||
+    component.$$typeof === Symbol.for('react.element')
+  );
+}
+
+// A ClientProxy behaves as a module reference for the Flight
+// runtime (RSC) and as a real component for the Fizz runtime (SSR).
+// Note that this is not used in browser environments.
+export function wrapInClientProxy({id, name, named, component}: ClientProxy) {
+  if (!isReactComponent(component, name)) {
+    // This is not a React component, do not wrap it.
+    return component;
+  }
+
+  const render = (props: any) => createElement(component, props);
+  Object.defineProperty(render, 'name', {value: name});
+
+  if (__DEV__) {
+    render.displayName = name;
+  }
+
+  // Fizz runtime accesses the `render` method directly when encountering a forward_ref
+  const componentRef = Object.create(null);
+  componentRef.$$typeof = Symbol.for('react.forward_ref');
+  componentRef.render = render;
+
+  // Flight runtime will check this custom typeof to decide wether this is a module ref
+  const moduleRef = Object.create(null);
+  moduleRef.$$typeof_rsc = Symbol.for('react.module.reference');
+  moduleRef.filepath = id;
+  moduleRef.name = named ? name : 'default';
+
+  // Store component in a global index during RSC to use them later in SSR
+  globalThis.__COMPONENT_INDEX[id] = Object.defineProperty(
+    globalThis.__COMPONENT_INDEX[id] || Object.create(null),
+    moduleRef.name,
+    {value: component, writable: true},
+  );
+
+  return new Proxy(componentRef, {
+    get: (target, prop) =>
+      // 1. Let React access the element/ref and type in SSR
+      (target: any)[prop] ||
+      // 2. Check module properties for RSC requests
+      (moduleRef: any)[prop] ||
+      // 3. Fallback to custom component properties such as `ImageComponent.Fragment`
+      (component: any)[prop],
+  });
+}