Minify embedded frame bundle for readable srcdoc - #50
Merged
Conversation
Replace abandoned `compile-code-loader` with `val-loader`, running a production-mode webpack child compile of `lib/frame.ts` through an in-memory filesystem. Terser collapses the bundle to one line and ~4 KiB, so the iframe `srcdoc` attribute is now navigable in DevTools. Also flatten the `BaseOptions.frameContent` template and drop the `\n` injection points in `_prepareFrameContent` so the final srcdoc renders on a single line. Test assertion `TYPE_SET_INTERFACE` switched to the inlined runtime value `set-interface` (terser inlines the `const`). Closes #45
Collaborator
Author
|
Before: After: |
Veniamin Krol (vkrol)
approved these changes
May 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
compile-code-loaderwithval-loader+ an in-memory webpack child compile inmode: 'production'. The embedded frame bundle drops from ~17 KiB unminified to ~4.4 KiB on a single line.BaseOptions.frameContentand remove\nfrom_prepareFrameContentinjection points so the final iframesrcdocattribute renders as one line in DevTools.TYPE_SET_INTERFACEto its inlined valueset-interface.Closes #45.
Why val-loader
compile-code-loaderis unmaintained (~8 years), relies on webpack-v4 internals (SingleEntryPlugin), and only emitted a development-mode bundle.val-loaderis the canonical webpack-5 way to "execute a module at build time and embed its output", so the frame bundle is now produced by a real production-mode webpack compile (terser minification + IIFE).Files
lib/frame-bundle.js— new val-loader entry; runs webpack onframe.tswithmemfs, returns the minified bundle string.lib/websandbox.ts— import path swapped toval-loader!./frame-bundle.js;BaseOptions.frameContentand injection helpers single-lined.eslint.config.mjs— file-scoped override (node globals, CommonJS, allowrequire) forlib/frame-bundle.js.test/sandbox.test.js— assertion updated to runtime value, no semantic change.package.json/package-lock.json— dropcompile-code-loader, addval-loader+memfs.Test plan
npm test— 46/46 karma tests green.npm run lint— clean.npm run build— producesdist/websandbox.js; embedded bundle is 4424 bytes, 0 newlines.npm run build-examples+ browser smoke:simple.htmlsandbox initialises, host ↔ sandbox round-trip works, DevTools showssrcdocon one line.