Use importhook on es-module-shims to pre-fetch the import graph

[NullVoxPopuli]

Demo / proof of concept:

• https://jsbin.com/mutikil/edit?html,output

Docs:

• https://github.com/guybedford/es-module-shims
• https://developer.mozilla.org/en-US/docs/Web/API/File_System_API
• https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system#manipulating_the_opfs_from_the_main_thread

Alternative Things I looked at:

• ZenFS: https://github.com/zen-fs/dom (too big -- uses a ton of polyfills for shipped features (such as abort controller)) -- https://bundlejs.com/?q=%40zenfs%2Fcore%2C%40zenfs%2Fdom&treeshake=%5B%7B+configure+%7D%5D%2C%5B%7B+WebAccess+%7D%5D (55kb gzip, 191kb)
  • a version without polyfills? zen-fs/core#279

Supersedes:

• Handle module shimming more robustly #1966
• Investigate onimport #1951

Things left to look at

• better async support in the worker https://github.com/kitten/multitars
  • 6.65kb gzip https://bundlejs.com/?q=multitars%400.2.2
  • existing tarparser is smaller, so this may not be worth pursuing
    • 829b https://bundlejs.com/?q=tarparser%400.0.5

TODO:

• virtual fs
  • Add virtual in-memory flie system to repl-sdk #2011
• micro plugin system
  • implement ember-source version switching from esm.sh
• Add version switching UI #2012
  • Add support for configuring which versions of dependencies are used #1946

Unblocks:

• [Feature Request] GDM codeblocks can import/export between each other #1892
• Add support for multi-file "projects" #946
• Add support for TypeScript in the editor (as well for compilation) #1945

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	vitest@​4.0.9
	vite@​7.2.2
	mime@​4.0.7 ⏵ 4.1.0	+1		+1
	es-module-shims@​2.6.1 ⏵ 2.6.2

View full report

[github-actions]

Project	Preview URL1	Manage
Limber	https://importshim-import-hook.limber-glimdown.pages.dev	on Cloudflare
Tutorial	https://importshim-import-hook.limber-glimmer-tutorial.pages.dev	on Cloudflare

Logs

Footnotes

1. if these branch preview links are not working, please check the logs for the commit-based preview link. There is a character limit of 28 for the branch subdomain, as well as some other heuristics, described here for the sake of implementation ease in deploy-preview.yml, that algo has been omitted. The URLs are logged in the wrangler output, but it's hard to get outputs from a matrix job. ↩