Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix immediately added dynamic import maps #123

Merged
merged 4 commits into from
May 14, 2021
Merged

Fix immediately added dynamic import maps #123

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6504a33
Add failing test
vovacodes May 14, 2021
6f594e6
Fix the race
vovacodes May 14, 2021
ea49518
add no cache to test, use feature detection promise
guybedford May 14, 2021
e082019
Add delayed insert-import to the dynamic-import-map-shim test
vovacodes May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@ Just write your HTML modules like you would in the latest Chrome:

and ES Module Shims will make it work in [all browsers with any ES Module Support](#browser-support).

NOTE: `script[type="importmap"]` and `script[type="importmap-shim"]` should be placed before
any `script[type="module"]` or `script[type="module-shim"]` in the html.

Note that you will typically see a console error in browsers without import maps support like:

```
Expand Down
3 changes: 3 additions & 0 deletions src/es-module-shims.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,9 @@ async function topLevelLoad (url, source, polyfill) {
}

async function importShim (id, parentUrl = pageBaseUrl) {
await featureDetectionPromise;
// Make sure all the "in-flight" import maps are loaded and applied.
await importMapPromise;
guybedford marked this conversation as resolved.
Show resolved Hide resolved
return topLevelLoad(resolve(id, parentUrl).r || throwUnresolved(id, parentUrl));
}

Expand Down
16 changes: 16 additions & 0 deletions test/dynamic-import-map-shim.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!doctype html>

<script type="importmap-shim">
{
"imports": {
"react": "https://ga.jspm.io/npm:react@17.0.2/dev.index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"object-assign": "https://ga.jspm.io/npm:object-assign@4.1.1/index.js"
}
}
}
</script>
<script type="module" src="../src/es-module-shims.js"></script>
<script src="dynamic-import-map-shim.js" type="module"></script>
28 changes: 28 additions & 0 deletions test/dynamic-import-map-shim.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
main();
async function main() {
// Append a dynamic import map containing resolution for "react-dom".
document.body.appendChild(Object.assign(document.createElement('script'), {
type: 'importmap-shim',
innerHTML: JSON.stringify({
"imports": {
"react-dom": "https://ga.jspm.io/npm:react-dom@17.0.2/dev.index.js"
},
"scopes": {
"https://ga.jspm.io/": {
"scheduler": "https://ga.jspm.io/npm:scheduler@0.20.2/dev.index.js",
"scheduler/tracing": "https://ga.jspm.io/npm:scheduler@0.20.2/dev.tracing.js"
}
}
})
}));

const reactStart = performance.now();
const [React, ReactDOM] = await Promise.all([
importShim('react'),
importShim('react-dom'),
]);
const reactEnd = performance.now();

console.log(`React and ReactDOM loaded in ${(reactEnd - reactStart).toFixed(2)}ms`);
console.log({ React, ReactDOM });
}
4 changes: 2 additions & 2 deletions test/server.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ http.createServer(async function (req, res) {
mime = mimes[path.extname(filePath)] || 'text/plain';

const headers = filePath.endsWith('content-type-none.json') ?
{} : { 'content-type': mime }
{} : { 'content-type': mime, 'Cache-Control': 'no-cache' }

res.writeHead(200, headers);
fileStream.pipe(res);
Expand All @@ -104,4 +104,4 @@ http.createServer(async function (req, res) {

console.log(`Test server listening on http://localhost:${port}\n`);
const openOptions = process.env.CI ? { app: ['firefox'] } : {};
open(`http://localhost:${port}/test/${testName}.html`, openOptions);
open(`http://localhost:${port}/test/${testName}.html`, openOptions);