Add support for worklets and fix pipeline bugs #6495

devongovett · 2021-06-21T06:40:36Z

Fixes #1093, Fixes #2083, Fixes #4174, Closes #5837, Closes #6510

This adds support for worklets including the CSS.paintWorklet.addModule syntax, as well as for audio worklets via the worklet: pipeline. The pipeline is needed in that case because the API is not statically analyzable. Worklets are a new environment context. While they are similar to web workers, they have some unique constraints: only ESM is supported (not scripts), but dynamic import() is not supported (as with other networking APIs like fetch). Parcel will give you a build time error for this.

This also fixes several other issues that are somewhat related.

Using the url: pipeline with a JavaScript file was broken because the url: pipeline did not run other transformers before the raw transformer, meaning the JS wasn't transformed.
Using new URL with a JS file was also broken because the generated JS would never run its entry asset. This was because it was not marked as isolated, and so thought the parent bundle would parcelRequire it like with normal async imports. Also, it assumed it had access to the modules in parent bundles, but this wasn't necessarily true. We now mark URL dependencies in JS files as isolated. This required exposing bundleBehavior to dependencies like we do for assets.
Referencing JS files with bundle-text: or other pipelines that trigger inline bundles was broken when HMR was enabled. This was because we took the first entry asset rather than the main entry when checking asset.meta.inlineType.
Isolated bundles now affect the parallel request limit properly. Previously all isolated bundles were connected to the root in the graph rather than where they came from. This made some reachability checks easier, but meant that it wasn't possible to have an isolated bundle at a parallel priority, only at a lazy priority.
Fixes usage of dynamic import with named pipelines. Previously, we ignored these as they appeared like URLs. But importing URLs was also broken and we'll need to find a different solution for that anyway.
Adds support for dynamically importing a dependency that turns out to be inline (e.g. import('bundle-text:./foo'). Previously this was just broken, but now it returns a Promise.resolve(contents).

height · 2021-06-21T06:40:38Z

Link Height tasks by mentioning a task ID in the pull request title or description, commit messages, or comments.

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

devongovett · 2021-06-21T06:41:08Z

packages/bundlers/default/src/DefaultBundler.js

 asset.bundleBehavior === 'inline'
 ? false
 : dependency.isEntry || dependency.needsStableName,
- isInline: asset.bundleBehavior === 'inline',
+ bundleBehavior: dependency.bundleBehavior ?? asset.bundleBehavior,


Which one should win? 😉

I would say keep it bundleBehavior, it's easier to search since it's all the same feature

I think @devongovett is asking if the dependency's behavior or asset's behavior should be preferred

... I must be going crazy, I swore I commented on the comment asking #6495 (comment)

Maybe the 👁️ doctor messed up this morning hah.

In this case, what's more regular case to test against an asset being inline or isolate or a dependency being inline or isolated? And what's the expectation if the dep and asset's bundle behavior were separate.

yeah I think the dep should win because the importing code might have an expectation about what the asset exposes.

devongovett · 2021-06-21T06:43:57Z

packages/core/types/index.js

+ * - isolated: The resolved asset will be isolated from its parents in a separate bundle.
+ * Shared assets will be duplicated.
+ */
+ +bundleBehavior?: BundleBehavior,


API wise I'm not too sure about this. I considered combining bundleBehavior and priority, but I think it's possible to have an isolated bundle that is either parallel or lazy (but probably not sync), and it's possible to have an inline sync or async (though parallel vs lazy doesn't really matter). 🤔

devongovett · 2021-06-21T06:44:31Z

packages/core/types/index.js

@@ -1106,8 +1130,7 @@ export interface Bundle {
 +env: Environment;
 /** Whether this is an entry (e.g. should not be hashed). */
 +isEntry: ?boolean;
- /** Whether this bundle should be inlined into the parent bundle(s), */
- +isInline: ?boolean;
+ +bundleBehavior: ?BundleBehavior;


Is bundle.bundleBehavior too redundant? bundle.behavior??

devongovett · 2021-06-21T06:45:38Z

packages/transformers/js/src/JSTransformer.js

 loc: convertLoc(dep.loc),
 });
 } else if (dep.kind === 'File') {
 asset.invalidateOnFileChange(dep.specifier);
 } else {
- if (dep.kind === 'DynamicImport' && isURL(dep.specifier)) {


This was broken already because we already replaced the import() with a require() in rust. The isUrl check was interfering with usage of pipelines in dynamic import.

parcel-benchmark · 2021-06-21T07:16:15Z

Benchmark Results

Kitchen Sink 🚨

Timings

Description	Time	Difference
Cold	FAILED	-0.00ms
Cached	FAILED	-0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

React HackerNews ✅

Timings

Description	Time	Difference
Cold	9.94s	+38.00ms
Cached	459.00ms	+20.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

AtlasKit Editor 🚨

Timings

Description	Time	Difference
Cold	FAILED	-0.00ms
Cached	FAILED	-0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Three.js ✅

Timings

Description	Time	Difference
Cold	7.11s	+103.00ms
Cached	398.00ms	-1.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

…endencies # Conflicts: # packages/bundlers/default/src/DefaultBundler.js # packages/core/core/src/dumpGraphToGraphViz.js # packages/core/core/src/public/MutableBundleGraph.js # packages/core/core/src/types.js # packages/core/core/test/PublicBundle.test.js # packages/core/types/index.js

devongovett added 8 commits June 20, 2021 14:41

Fix URL pipeline importing JS files

7975ab4

Allow setting bundleBehavior on dependencies

110c658

Fix bundle-text: referencing other JS bundles when HMR is enabled

29f7a02

Fix async inline dependencies

22e7532

Add support for CSS paint worklets

b3d7626

Add worklet: pipeline to support audio worklets

8d1478d

Fix reachability checks for isolated bundles

19b01ed

Add missing dep

cda2cb5

devongovett commented Jun 21, 2021

View reviewed changes

Fix test on windows

164cb4e

This was referenced Jun 23, 2021

Parcel 2: @parcel/transformer-raw problems #4174

Closed

url: pipeline with HTML/WASM/CSS/Javascript #4498

Closed

Add url:*.{filename} patterns to transformers. #6510

Closed

wbinnssmith approved these changes Jun 23, 2021

View reviewed changes

devongovett added 2 commits June 23, 2021 22:21

fixups

cba78ad

devongovett merged commit dee58e9 into v2 Jun 24, 2021

devongovett deleted the js-url-dependencies branch June 24, 2021 06:25

Himavanth mentioned this pull request Aug 3, 2021

@parcel/core: Unknown pipeline: ./C. adobe/aio-cli-plugin-app#449

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for worklets and fix pipeline bugs #6495

Add support for worklets and fix pipeline bugs #6495

devongovett commented Jun 21, 2021 •

edited

Loading

height bot commented Jun 21, 2021

devongovett Jun 21, 2021

joeyslater Jun 23, 2021

wbinnssmith Jun 23, 2021

joeyslater Jun 23, 2021

devongovett Jun 24, 2021

devongovett Jun 21, 2021

devongovett Jun 21, 2021

devongovett Jun 21, 2021

parcel-benchmark commented Jun 21, 2021 •

edited

Loading

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Add support for worklets and fix pipeline bugs #6495

Add support for worklets and fix pipeline bugs #6495

Conversation

devongovett commented Jun 21, 2021 • edited Loading

height bot commented Jun 21, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parcel-benchmark commented Jun 21, 2021 • edited Loading

Benchmark Results

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

devongovett commented Jun 21, 2021 •

edited

Loading

parcel-benchmark commented Jun 21, 2021 •

edited

Loading