Parcel: `url:` pipeline with HTML/WASM/CSS/Javascript

Created on 19 Apr 2020 · 2Comments · Source: parcel-bundler/parcel

🐛 bug report

Importing assets with the url pipeline can cause issues because the JSRuntime doesn't check that when inserting the loader.

Importing a wasm asset:
Seems to work (because isAsync is false for an import inside Javascript). Not sure if this is currently a coincidence (https://github.com/parcel-bundler/parcel/issues/4202)
Importing a Javascript(-like) asset:
- The url: pipeline should probably be moved to the top of the config and have "..." added so that url:./foo.js works somewhat as expected.
- However, there is still the problem that import("./foo.js") is translated to jsLoader("<bundle url>").then(() => parcelRequire("<id>")in the global output format - currently the bundle is not even executed when import()ing.
- Further questions: would this use the manifest or burn in the bundle url?
  
  (https://github.com/parcel-bundler/parcel/issues/4474)
html:
- not yet tested
css:
- not yet tested

@Banou26 In which situations do you want to use a url: imported js script? navigator.serviceWorker.register('./script.js') could probably be done quite easily but dynamic imports are a different story.

Bug RFC ✨ Parcel 2

Source

mischnic

👍3

Most helpful comment

My current situation is that my app needs to open sandboxed iframes running my code, which will then potentially import/run third party code.
So i'd just like to be able to refer to the html/js entry point in that iframe source/script tags.

Currently the way i do it is that i simply pass the iframe entry point as second entry point for my parcel serve:

parcel src/index.html src/iframe/index.html

and the /.parcel-cache/dist folder ends up like this

.parcel-cache/dist/
├── iframe/
│   └── index.html
├── iframe.hash.js
├── index.html
└── index.hash.js

Luckily entry points don't have a hash in their filename, so i can just end up doing:

const iframe = document.createElement('iframe')
iframe.sandbox = 'allow-scripts'
iframe.src = './iframe/index.html'
document.body.appendChild(iframe)

but with the url: import, this could simply be replaced by

import iframeUrl from 'url:../iframe/index.html'

const iframe = document.createElement('iframe')
iframe.sandbox = 'allow-scripts'
iframe.src = iframeUrl 
document.body.appendChild(iframe)

And i could basically do the same with JS files by passing srcdoc to the iframe instead

import scriptUrl from 'url:../iframe/iframe.js'

const iframe = document.createElement('iframe')
iframe.sandbox = 'allow-scripts'
iframe.srcdoc = `
<!DOCTYPE html>
<script defer src="${scriptUrl}">
`
document.body.appendChild(iframe)

Banou26 on 19 Apr 2020

👍2

All 2 comments