Merge remote-tracking branch 'origin/master' into css-modules

lib/test-data-plugin.js

@@ -62,7 +62,7 @@ async function readTest(pathArr, rollupContext) {
           subject,
           {
             [markdownKey]: `${importPath}/${subject}/index.md`,
-            repositoryPath: `${importPath}/subject`,
+            repositoryPath: `${importPath}/${subject}`,
           },
         ]),
     ),

package.json

@@ -1,11 +1,12 @@
 {
-  "name": "buildoff",
+  "name": "tooling.report",
   "private": true,
   "scripts": {
     "build": "rollup -c && node lib/move-output.js",
     "debug": "node --inspect-brk node_modules/.bin/rollup -c",
     "dev": "rollup -cw & npm run serve",
-    "serve": "http-server -c-1 .tmp/build/static"
+    "serve": "http-server -s -c-1 .tmp/build/static",
+    "atest": "cd \"tests/$TEST\" && npm i --ignore-scripts --no-progress --no-fund --no-audit --prefer-offline --cache-min 9999999 --no-package-lock && npm start"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^7.0.0",
@@ -18,6 +19,7 @@
     "lint-staged": "^10.0.1",
     "lodash.camelcase": "^4.3.0",
     "marked": "^0.8.0",
+    "pnpm": "^4.10.0",
     "postcss": "^7.0.26",
     "postcss-modules": "^1.5.0",
     "postcss-nested": "^4.2.1",

tests/code-splitting/subtests/between-new-worker-type/parcel/index.md

@@ -1,5 +1,6 @@
 ---
 result: fail
+issue: https://github.com/parcel-bundler/parcel/issues/4320
 ---
 
 There is a [plugin infrastructure for Parcel 2](https://github.com/parcel-bundler/parcel/tree/bb5ad3d1adaebb42514750b12d8f7470d66a7bd9) that is probably capable of solving this, but at the time of writing, the documentation doesn’t really tell me _how_.

tests/code-splitting/subtests/between-new-worker-type/rollup/index.md

@@ -2,4 +2,4 @@
 result: pass
 ---
 
-[rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread) picks up usage of `new Worker('./script.js')` and creates a chunk for `./script.js`. Rollup makes this simple via its [`emitFile` method](https://rollupjs.org/guide/en/#thisemitfileemittedfile-emittedchunk--emittedasset--string) which lets you create a new chunk dynamically and get its eventual URL. Since workers are just another entry point, this primitive is a perfect and extensible fit.
+[rollup-plugin-off-main-thread](https://github.com/surma/rollup-plugin-off-main-thread) allows you to import a JS file as a worker and returns the URL. Rollup makes this simple via its [`emitFile` method](https://rollupjs.org/guide/en/#thisemitfileemittedfile-emittedchunk--emittedasset--string) which lets you create a new chunk dynamically and get its eventual URL. Since workers are just another entry point, this primitive is a perfect and extensible fit.

tests/code-splitting/subtests/between-new-worker-type/webpack/index.md

@@ -0,0 +1,16 @@
+---
+result: fail
+---
+
+Bundling Web Workers is possible in Webpack using one of the many add-ons like [worker-loader] or [worker-plugin], however there is no documented solution for accessing the underlying behavior: compiling a new entry starting from a given module and returning its bundle URL. There have been [some](https://github.com/webpack-contrib/worker-loader/pull/159) [attempts](https://github.com/webpack-contrib/worker-loader/pull/227) to support this in worker-loader, but at present the only available solution is [worker-plugin/loader]:
+
+```js
+import workerUrl from 'worker-plugin/loader!./my-worker';
+new Worker(workerUrl);
+```
+
+This makes it possible to bundle code for use in new worker-like environments like Worklets, however code splitting between the "host" and "child" sets of bundles is still not supported.
+
+[worker-loader]: https://github.com/webpack-contrib/worker-loader
+[worker-plugin]: https://github.com/GoogleChromeLabs/worker-plugin
+[worker-plugin/loader]: https://github.com/GoogleChromeLabs/worker-plugin#loader

tests/code-splitting/subtests/between-new-worker-type/webpack/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "webpack -p"
+  },
+  "devDependencies": {
+    "webpack": "4.41.5",
+    "webpack-cli": "3.3.10",
+    "worker-plugin": "4.0.2"
+  }
+}

tests/code-splitting/subtests/between-new-worker-type/webpack/src/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import workerURL from 'omt!./worker.js';
+import { logCaps } from './utils.js';
+
+new InterestingNewWorkerType(workerURL);
+logCaps('This is index');

tests/code-splitting/subtests/between-new-worker-type/webpack/src/utils.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function logCaps(msg) {
+  console.log(msg.toUpperCase());
+}

tests/code-splitting/subtests/between-new-worker-type/webpack/src/worker.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { logCaps } from './utils.js';
+logCaps('This is worker');

tests/code-splitting/subtests/between-new-worker-type/webpack/test/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<base href="../build/">
+<h1>See console</h1>
+<script src="index.js"></script>

tests/code-splitting/subtests/between-new-worker-type/webpack/webpack.config.js

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+module.exports = {
+  resolveLoader: {
+    alias: {
+      omt: 'worker-plugin/loader?esModule',
+    },
+  },
+  optimization: {
+    // create a runtime.js script containing the module loader:
+    // (without this, entry chunks dependencies must be loaded manually)
+    runtimeChunk: 'single',
+
+    splitChunks: {
+      // extract shared dependencies from entry bundles:
+      chunks: 'all',
+      // allow any size dependency to be shared:
+      minSize: 0,
+    },
+  },
+};

tests/code-splitting/subtests/between-workers/parcel/index.md

@@ -1,5 +1,6 @@
 ---
 result: partial
+issue: https://github.com/parcel-bundler/parcel/issues/1654
 ---
 
 Parcel can handle workers, but doesn’t split out shared dependencies.

tests/code-splitting/subtests/between-workers/webpack/index.md

@@ -2,4 +2,4 @@
 result: fail
 ---
 
-Webpack will duplicate code in each worker bundle.
+Webpack will create and load duplicate copies of dependencies even if they're shared by each worker bundle.

tests/code-splitting/subtests/between-workers/webpack/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "webpack -p"
+  },
+  "devDependencies": {
+    "webpack": "4.41.5",
+    "webpack-cli": "3.3.10",
+    "worker-loader": "2.0.0",
+    "worker-plugin": "3.2.0"
+  }
+}

tests/code-splitting/subtests/between-workers/webpack/src/index.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { logCaps } from './utils.js';
+// Alternative:
+// require('worker-loader!./worker.js')();
+new Worker('./worker.js', { type: 'module' });
+logCaps('This is index');

tests/code-splitting/subtests/between-workers/webpack/src/utils.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function logCaps(msg) {
+  console.log(msg.toUpperCase());
+}

tests/code-splitting/subtests/between-workers/webpack/src/worker.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { logCaps } from './utils.js';
+logCaps('This is worker');

tests/code-splitting/subtests/between-workers/webpack/test/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<base href="../build/">
+<h1>See console</h1>
+<script src="index.js"></script>

tests/code-splitting/subtests/between-workers/webpack/webpack.config.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const WorkerPlugin = require('worker-plugin');
+
+module.exports = {
+  output: {
+    // at some point this will probably become the default value:
+    globalObject: 'self',
+  },
+  plugins: [new WorkerPlugin()],
+  optimization: {
+    // create a dedicated bootstrap + hash mapping bundle:
+    runtimeChunk: 'single',
+    // extract all shared dependencies from entry bundles:
+    splitChunks: {
+      chunks: 'all',
+      minSize: 0,
+    },
+  },
+};

tests/code-splitting/subtests/dynamic-import/webpack/index.md

@@ -2,4 +2,8 @@
 result: pass
 ---
 
-Webpack was one of the first to support this.
+Webpack was one of the first bundlers to use [Dynamic Imports] as a signal for creating code-splitting boundaries.
+
+Unlike [multiple entries](/code-splitting/multi-entry), split points created using [Dynamic Imports] consistently result in a separate bundle being created without customizing `optimization.splitChunks`.
+
+[dynamic imports]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

tests/code-splitting/subtests/dynamic-import/webpack/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "webpack -p"
+  },
+  "devDependencies": {
+    "webpack": "4.41.5",
+    "webpack-cli": "3.3.10"
+  }
+}

tests/code-splitting/subtests/dynamic-import/webpack/src/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+(async function() {
+  const { logCaps } = await import('./utils.js');
+  logCaps('This is index');
+})();

tests/code-splitting/subtests/dynamic-import/webpack/src/utils.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function logCaps(msg) {
+  console.log(msg.toUpperCase());
+}

tests/code-splitting/subtests/multi-entry/index.md

@@ -3,7 +3,7 @@ title: Multiple entry points
 importance: 1
 ---
 
-Imagine you had an 'index' page and a 'profile' page. Each has their own root script, but the two make use of a common library.
+Imagine you had an 'index' page and a 'profile' page. Each has their own root script, but the two make use of a common, big library. The library should be split out so that it can be loaded from the cache.
 
 **index.js**
 

tests/code-splitting/subtests/multi-entry/parcel/index.md

@@ -1,5 +1,8 @@
 ---
 result: fail
+issue:
+  - https://github.com/parcel-bundler/parcel/issues/4303
+  - https://github.com/parcel-bundler/parcel/issues/4304
 ---
 
-Parcel can take multiple entry points, but doesn’t split out common dependencies.
+Parcel tries to code split here, but generates invalid HTML in the process.