Support mixing static and dynamic RSCs (#10093)

Author: devongovett

packages/bundlers/default/src/DefaultBundler.js

@@ -1856,7 +1856,9 @@ function getEntryByTarget(
           context.value.isEntry &&
           context.value.target != null,
       );
-      targets.get(context.value.target.distDir).set(node.value, context.value);
+      targets
+        .get(context.value.target.loc?.filePath ?? context.value.target.distDir)
+        .set(node.value, context.value);
       actions.skipChildren();
       return node;
     },

packages/configs/default/index.json

@@ -8,6 +8,7 @@
       "@parcel/transformer-worklet",
       "..."
     ],
+    "react-static:*": ["@parcel/transformer-react-static", "..."],
     "*.mdx": [
       // For backward compatibility, include the old transformer
       // so it is used if already installed in the project.
@@ -69,6 +70,7 @@
     "*.{jpg,jpeg,png}": ["@parcel/optimizer-image"]
   },
   "packagers": {
+    "react-static:*.html": "@parcel/packager-react-static",
     "*.{html,xhtml}": "@parcel/packager-html",
     "*.css": "@parcel/packager-css",
     "*.{js,mjs,cjs}": "@parcel/packager-js",

packages/configs/default/package.json

@@ -54,6 +54,7 @@
   "parcelDependencies": {
     "@parcel/optimizer-data-url": "2.13.3",
     "@parcel/packager-raw-url": "2.13.3",
+    "@parcel/packager-react-static": "2.13.3",
     "@parcel/packager-ts": "2.13.3",
     "@parcel/packager-xml": "2.13.3",
     "@parcel/transformer-coffeescript": "2.13.3",
@@ -64,6 +65,7 @@
     "@parcel/transformer-jsonld": "2.13.3",
     "@parcel/transformer-less": "2.13.3",
     "@parcel/transformer-pug": "2.13.3",
+    "@parcel/transformer-react-static": "2.13.3",
     "@parcel/transformer-sass": "2.13.3",
     "@parcel/transformer-stylus": "2.13.3",
     "@parcel/transformer-sugarss": "2.13.3",

packages/configs/react-static/index.json

@@ -203,7 +203,7 @@ export default class PackagerRunner {
     bundleConfigs: Map<string, Config>,
   ): Promise<void> {
     let name = nullthrows(bundle.name);
-    let plugin = await this.config.getPackager(name);
+    let plugin = await this.config.getPackager(name, bundle.pipeline);
     await this.loadPluginConfig(
       bundleGraph,
       bundle,
@@ -405,7 +405,10 @@ export default class PackagerRunner {
       bundle,
     });
 
-    let packager = await this.config.getPackager(bundle.name);
+    let packager = await this.config.getPackager(
+      bundle.name,
+      internalBundle.pipeline,
+    );
     let {name, resolveFrom, plugin} = packager;
     let measurement;
     try {
@@ -691,8 +694,8 @@ export default class PackagerRunner {
 
   async getDevDepHashes(bundle: InternalBundle): Promise<string> {
     let name = nullthrows(bundle.name);
-    let packager = await this.config.getPackager(name);
-    let optimizers = await this.config.getOptimizers(name);
+    let packager = await this.config.getPackager(name, bundle.pipeline);
+    let optimizers = await this.config.getOptimizers(name, bundle.pipeline);
 
     let key = `${packager.name}:${fromProjectPathRelative(
       packager.resolveFrom,

packages/configs/react-static/package.json

@@ -259,10 +259,21 @@ export default class ParcelConfig {
 
   async getPackager(
     filePath: FilePath,
+    pipeline: ?string,
   ): Promise<LoadedPlugin<Packager<mixed, mixed>>> {
+    // If a pipeline is specified, but it doesn't exist in the optimizers config, ignore it.
+    // Pipelines for bundles come from their entry assets, so the pipeline likely exists in transformers.
+    if (pipeline) {
+      let prefix = pipeline + ':';
+      if (!Object.keys(this.packagers).some(glob => glob.startsWith(prefix))) {
+        pipeline = null;
+      }
+    }
+
     let packager = this.matchGlobMap(
       toProjectPathUnsafe(filePath),
       this.packagers,
+      pipeline,
     );
     if (!packager) {
       throw await this.missingPluginError(
@@ -363,9 +374,13 @@ export default class ParcelConfig {
     );
   }
 
-  matchGlobMap<T>(filePath: ProjectPath, globMap: {|[Glob]: T|}): ?T {
+  matchGlobMap<T>(
+    filePath: ProjectPath,
+    globMap: {|[Glob]: T|},
+    pipeline?: ?string,
+  ): ?T {
     for (let pattern in globMap) {
-      if (this.isGlobMatch(filePath, pattern)) {
+      if (this.isGlobMatch(filePath, pattern, pipeline)) {
         return globMap[pattern];
       }
     }

packages/core/core/src/PackagerRunner.js

@@ -329,7 +329,11 @@ export class TargetResolver {
       }
 
       let serve = this.options.serveOptions;
-      if (serve && targets.length > 0) {
+      if (
+        serve &&
+        targets.length > 0 &&
+        targets.every(t => BROWSER_ENVS.has(t.env.context))
+      ) {
         // In serve mode, we only support a single browser target. If the user
         // provided more than one, or the matching target is not a browser, throw.
         if (targets.length > 1) {
@@ -357,7 +361,10 @@ export class TargetResolver {
 
       // Explicit targets were not provided. Either use a modern target for server
       // mode, or simply use the package.json targets.
-      if (this.options.serveOptions) {
+      if (
+        this.options.serveOptions &&
+        targets.every(t => BROWSER_ENVS.has(t.env.context))
+      ) {
         // In serve mode, we only support a single browser target. Since the user
         // hasn't specified a target, use one targeting modern browsers for development
         let distDir = toProjectPath(

packages/core/core/src/ParcelConfig.js

@@ -1241,7 +1241,9 @@ describe('TargetResolver', () => {
     });
 
     assert.deepEqual(
-      await targetResolver.resolve(COMMON_TARGETS_FIXTURE_PATH),
+      await targetResolver.resolve(
+        path.join(__dirname, 'fixtures/default-serve'),
+      ),
       [
         {
           name: 'default',

packages/core/core/src/requests/TargetRequest.js

@@ -0,0 +1,23 @@
+{
+  "foo": "dist/foo/index.js",
+  "bar": "dist/browser/index.js",
+  "engines": {
+    "node": ">= 8.0.0"
+  },
+  "targets": {
+    "foo": {
+      "engines": {
+        "browsers": ["last 1 version"]
+      },
+      "sourceMap": {
+        "inlineSources": true
+      }
+    },
+    "bar": {
+      "engines": {
+        "browsers": ["last 1 version"]
+      },
+      "publicUrl": "/assets"
+    }
+  }
+}

packages/core/core/test/TargetRequest.test.js

@@ -33,7 +33,7 @@ describe('content hashing', function () {
       'utf8',
     );
     let filename = html.match(
-      /<link rel="stylesheet" href="[/\\]{1}(index\.[a-f0-9]+\.css)">/,
+      /<link rel="stylesheet" href="[/\\]{1}(input\.[a-f0-9]+\.css)">/,
     )[1];
     assert(await outputFS.exists(path.join(distDir, filename)));
 
@@ -45,7 +45,7 @@ describe('content hashing', function () {
 
     html = await outputFS.readFile(path.join(distDir, 'index.html'), 'utf8');
     let newFilename = html.match(
-      /<link rel="stylesheet" href="[/\\]{1}(index\.[a-f0-9]+\.css)">/,
+      /<link rel="stylesheet" href="[/\\]{1}(input\.[a-f0-9]+\.css)">/,
     )[1];
     assert(await outputFS.exists(path.join(distDir, newFilename)));
 
@@ -89,11 +89,11 @@ describe('content hashing', function () {
 
   it('should generate the same hash for the same distDir inside separate projects', async () => {
     let a = await _bundle(
-      path.join(__dirname, 'integration/hash-distDir/a/index.html'),
+      path.join(__dirname, 'integration/hash-distDir/a/entry.html'),
       {sourceMaps: true},
     );
     let b = await _bundle(
-      path.join(__dirname, 'integration/hash-distDir/b/index.html'),
+      path.join(__dirname, 'integration/hash-distDir/b/entry.html'),
       {sourceMaps: true},
     );
 
@@ -105,7 +105,7 @@ describe('content hashing', function () {
 
     let aJS = aBundles.find(bundle => bundle.type === 'js');
     let bJS = bBundles.find(bundle => bundle.type === 'js');
-    assert(/index\.[a-f0-9]*\.js/.test(path.basename(aJS.filePath)));
+    assert(/entry\.[a-f0-9]*\.js/.test(path.basename(aJS.filePath)));
     assert.equal(aJS.name, bJS.name);
   });
 });

packages/core/core/test/fixtures/default-serve/package.json

@@ -373,7 +373,9 @@ describe('html', function () {
       'utf8',
     );
     assert(
-      /<link rel="stylesheet" href="[/\\]{1}index\.[a-f0-9]+\.css">/.test(html),
+      /<link rel="stylesheet" href="[/\\]{1}html-css\.[a-f0-9]+\.css">/.test(
+        html,
+      ),
     );
   });
 
@@ -402,7 +404,7 @@ describe('html', function () {
       'utf8',
     );
     assert(
-      /<html>\s*<link rel="stylesheet" href="[/\\]{1}index\.[a-f0-9]+\.css">\s*<body>/.test(
+      /<html>\s*<link rel="stylesheet" href="[/\\]{1}html-css-head\.[a-f0-9]+\.css">\s*<body>/.test(
         html,
       ),
     );
@@ -502,7 +504,7 @@ describe('html', function () {
     );
 
     assert(
-      /^<link rel="stylesheet" href="[/\\]index\.[a-f0-9]+\.css">\s*<script type="module" src="[/\\]index\.[a-f0-9]+\.js"><\/script>\s*<h1>Hello/m.test(
+      /^<link rel="stylesheet" href="[/\\]html-css-optional-elements\.[a-f0-9]+\.css">\s*<script type="module" src="[/\\]html-css-optional-elements\.[a-f0-9]+\.js"><\/script>\s*<h1>Hello/m.test(
         html,
       ),
     );
@@ -539,14 +541,15 @@ describe('html', function () {
 
     assert.equal(
       html.match(
-        /<link rel="stylesheet" href="[/\\]{1}index\.[a-f0-9]+?\.css">/g,
+        /<link rel="stylesheet" href="[/\\]{1}html-css-multi\.[a-f0-9]+?\.css">/g,
       ).length,
       1,
     );
 
     assert.equal(
-      html.match(/<script type="module" src="[/\\]{1}index\.[a-f0-9]+?\.js">/g)
-        .length,
+      html.match(
+        /<script type="module" src="[/\\]{1}html-css-multi\.[a-f0-9]+?\.js">/g,
+      ).length,
       2,
     );
   });
@@ -2141,10 +2144,6 @@ describe('html', function () {
         type: 'js',
         assets: ['esmodule-helpers.js', 'shared.js'],
       },
-      {
-        type: 'js',
-        assets: ['esmodule-helpers.js', 'shared.js'],
-      },
       {
         name: 'index.html',
         type: 'html',

packages/core/integration-tests/test/contentHashing.js

@@ -1007,7 +1007,7 @@ describe('output formats', function () {
         'utf8',
       );
 
-      assert(html.includes('<script type="module" src="/index'));
+      assert(html.includes('<script type="module" src="/esm-browser'));
 
       let entry = await outputFS.readFile(
         b
@@ -1049,7 +1049,7 @@ describe('output formats', function () {
         'utf8',
       );
 
-      assert(html.includes('<script type="module" src="/index'));
+      assert(html.includes('<script type="module" src="/esm-browser'));
 
       let entry = await outputFS.readFile(
         b
@@ -1081,8 +1081,8 @@ describe('output formats', function () {
         'utf8',
       );
 
-      assert(html.includes('<script type="module" src="/index'));
-      assert(html.includes('<link rel="stylesheet" href="/index'));
+      assert(html.includes('<script type="module" src="/esm-browser-css'));
+      assert(html.includes('<link rel="stylesheet" href="/esm-browser-css'));
 
       let entry = await outputFS.readFile(
         b
@@ -1137,7 +1137,9 @@ describe('output formats', function () {
         'utf8',
       );
 
-      assert(html.includes('<script type="module" src="/index'));
+      assert(
+        html.includes('<script type="module" src="/esm-browser-split-bundle'),
+      );
       assert(html.includes('<script type="importmap"'));
 
       let bundles = b.getBundles();