Add a no-bundler example - #1574
Merged
Merged
Conversation
Dropping the UMD builds in 12.0.0 left script-tag users with a four-line esm.sh snippet in MIGRATION.md and no worked example. This is the self-hosting half: a static page that imports dist/svg-injector.mjs by URL from a copy sitting next to it. It is the first example that is not a Vite app, and has to be. Vite bundles every `<script type="module">` in index.html whatever its src resolves to, `public/` included: on Vite 8.2.0 a relative src fails the build outright, and an absolute one emits a chunk into <head> while leaving the original tag in place, so the module runs twice. Its `npm run build` copies the page and the library into dist/ instead, which is what a self-hosting consumer does anyway. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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
1 participant
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.
Dropping the UMD builds in 12.0.0 left script-tag users with a four-line esm.sh snippet in
MIGRATION.mdand no worked example.examples/no-bundleris the self-hosting half: a static page that importsdist/svg-injector.mjsby URL from a copy sitting next to it, injects an SVG, and shows that there is nowindow.SVGInjector.Also adds a Without a bundler subsection under README Installation covering both forms, and links the example from the
MIGRATION.mdUMD entry.Not a Vite app
It is the first example that is not a Vite app, and has to be. The plan was to keep it a Vite app and hide the library in
public/, on the assumption that Vite leaves apublic/asset alone. It does not: Vite bundles every<script type="module">inindex.htmlwhatever its src resolves to. Measured on Vite 8.2.0:./app.mjsFailed to resolve ./app.mjs from index.html/app.mjs<head>and leaves the original tag in the body, so the module runs twiceSo
npm run buildisnode build.js, which copiesindex.html,svg.svgand the library's.mjsintodist/. That is what a self-hosting consumer does anyway, and it makes the "no bundler" claim true of the example itself rather than only of the page it serves.npm startservesdist/withserve, already a root devDependency.Two details of the copy, both noted in the example README:
node_modules/@tanem/svg-injector/dist/svg-injector.mjsby path, because theexportsmap makes every path inside the package private apart from the root entry andpackage.json.svg-injector.mjs.mapis copied with it, because the.mjsends with asourceMappingURLcomment.All the harness needs from an example is an
npm run buildthat fills<example>/dist/.AGENTS.mdnow says so, and records the exception.Verification
npm testgreen. The new test asserts the negative directly: no request underassets/, and a real request forsvg-injector.mjs. Every other example ships a Vite chunk there, so its absence is what says the page really resolved the library by URL in the browser.Checked by hand in Chrome 151 as well: three requests — page, module, SVG — and no console output.
🤖 Generated with Claude Code