mirror of
https://github.com/facebook/react.git
synced 2026-02-23 20:23:02 +00:00
ca587425fe
This adds a new `react-server-dom-parcel-package`, which is an RSC integration for the Parcel bundler. It is mostly copied from the existing webpack/turbopack integrations, with some changes to utilize Parcel runtime APIs for loading and executing bundles/modules. See https://github.com/parcel-bundler/parcel/pull/10043 for the Parcel side of this, which includes the plugin needed to generate client and server references. https://github.com/parcel-bundler/rsc-examples also includes examples of various ways to use RSCs with Parcel. Differences from other integrations: * Client and server modules are all part of the same graph, and we use Parcel's [environments](https://parceljs.org/plugin-system/transformer/#the-environment) to distinguish them. The server is the Parcel build entry point, and it imports and renders server components in route handlers. When a `"use client"` directive is seen, the environment changes and Parcel creates a new client bundle for the page, combining all client modules together. CSS from both client and server components are also combined automatically. * There is no separate manifest file that needs to be passed around by the user. A [Runtime](https://parceljs.org/plugin-system/runtime/) plugin injects client and server references as needed into the relevant bundles, and registers server action ids using `react-server-dom-parcel` automatically. * A special `<Resources>` component is also generated by Parcel to render the `<script>` and `<link rel="stylesheet">` elements needed for a page, using the relevant info from the bundle graph. Note: I've already published a 0.0.x version of this package to npm for testing purposes but happy to add whoever needs access to it as well. ### Questions * How to test this in the React repo. I'll have integration tests in Parcel, but setting up all the different mocks and environments to simulate that here seems challenging. I could try to copy how Webpack/Turbopack do it but it's a bit different. * Where to put TypeScript types. Right now I have some ambient types in my [example repo](https://github.com/parcel-bundler/rsc-examples/blob/main/types.d.ts) but it would be nice for users not to copy and paste these. Can I include them in the package or do they need to maintained separately in definitelytyped? I would really prefer not to have to maintain code in three different repos ideally. --------- Co-authored-by: Sebastian Markbage <sebastian@calyptus.eu>
96 lines
2.1 KiB
JavaScript
96 lines
2.1 KiB
JavaScript
'use strict';
|
|
|
|
module.exports = {
|
|
env: {
|
|
commonjs: true,
|
|
browser: true,
|
|
},
|
|
globals: {
|
|
// ES 6
|
|
BigInt: 'readonly',
|
|
Map: 'readonly',
|
|
Set: 'readonly',
|
|
Proxy: 'readonly',
|
|
Symbol: 'readonly',
|
|
WeakMap: 'readonly',
|
|
WeakSet: 'readonly',
|
|
|
|
Int8Array: 'readonly',
|
|
Uint8Array: 'readonly',
|
|
Uint8ClampedArray: 'readonly',
|
|
Int16Array: 'readonly',
|
|
Uint16Array: 'readonly',
|
|
Int32Array: 'readonly',
|
|
Uint32Array: 'readonly',
|
|
Float32Array: 'readonly',
|
|
Float64Array: 'readonly',
|
|
BigInt64Array: 'readonly',
|
|
BigUint64Array: 'readonly',
|
|
DataView: 'readonly',
|
|
ArrayBuffer: 'readonly',
|
|
|
|
Reflect: 'readonly',
|
|
globalThis: 'readonly',
|
|
|
|
FinalizationRegistry: 'readonly',
|
|
|
|
// Vendor specific
|
|
MSApp: 'readonly',
|
|
__REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
|
|
// CommonJS / Node
|
|
process: 'readonly',
|
|
setImmediate: 'readonly',
|
|
Buffer: 'readonly',
|
|
// Trusted Types
|
|
trustedTypes: 'readonly',
|
|
|
|
// Scheduler profiling
|
|
TaskController: 'readonly',
|
|
reportError: 'readonly',
|
|
AggregateError: 'readonly',
|
|
|
|
// Flight
|
|
Promise: 'readonly',
|
|
|
|
// Temp
|
|
AsyncLocalStorage: 'readonly',
|
|
async_hooks: 'readonly',
|
|
|
|
// Flight Webpack
|
|
__webpack_chunk_load__: 'readonly',
|
|
__webpack_require__: 'readonly',
|
|
|
|
// Flight Turbopack
|
|
__turbopack_load__: 'readonly',
|
|
__turbopack_require__: 'readonly',
|
|
|
|
// Flight Parcel
|
|
parcelRequire: 'readonly',
|
|
|
|
// jest
|
|
expect: 'readonly',
|
|
jest: 'readonly',
|
|
|
|
// act
|
|
IS_REACT_ACT_ENVIRONMENT: 'readonly',
|
|
|
|
// Native Scheduler
|
|
nativeRuntimeScheduler: 'readonly',
|
|
|
|
Bun: 'readonly',
|
|
},
|
|
parserOptions: {
|
|
ecmaVersion: 2020,
|
|
sourceType: 'script',
|
|
},
|
|
rules: {
|
|
'no-undef': 'error',
|
|
'no-shadow-restricted-names': 'error',
|
|
},
|
|
|
|
// These plugins aren't used, but eslint complains if an eslint-ignore comment
|
|
// references unused plugins. An alternate approach could be to strip
|
|
// eslint-ignore comments as part of the build.
|
|
plugins: ['ft-flow', 'jest', 'no-for-of-loops', 'react', 'react-internal'],
|
|
};
|