feat: add <Script> component for build-time bundled client scripts#97
Draft
khromov wants to merge 32 commits into
Draft
feat: add <Script> component for build-time bundled client scripts#97khromov wants to merge 32 commits into
khromov wants to merge 32 commits into
Conversation
Adds <ViewTransitions type="fade|slide" duration={ms} /> (mochi-framework/components), a zero-JS helper that opts an MPA into the browser's cross-document View Transitions API via a shared layout. Includes unit tests, a demo, docs, and site-wide usage in PageShell with the banner/sidebar/hero keyed (view-transition-name) so only the page body transitions.
Add a <Script src="./foo.ts" /> component that loads client scripts via dynamic import(), where the referenced paths are bundled at build time through Mochi's existing Bun.build() client pass (TS transpile, code-split, content-hash) rather than fetched or transpiled at runtime. Reuses the island discovery machinery: the preprocessor detects <Script> imported from mochi-framework/components, resolves its static literal path(s) relative to the .svelte file, and registers them as client-bundle entrypoints; renderComponent swaps a placeholder for the hashed output URL. Build fails loudly when a path can't be resolved or isn't a static literal.
Contributor
Mochi review reportTry this PRExpand instructionsgh run download -R khromov/mochi 27485750533 -n mochi-framework-pr -D /tmp/mochi-pr && bun i /tmp/mochi-pr/mochi-framework-pr.tgzDependency reportExpand reportLines of codepackages/mochi
Unchanged: packages/docs
packages/site
Unchanged: packages/demos
Unchanged: packages/minimal
Unchanged: packages/cli
Unchanged: |
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.
What
Adds a
<Script>Svelte component that loads client-side scripts via dynamicimport(), where the referenced paths are bundled at build time through Mochi's existingBun.build()client pass — not fetched or transpiled at runtime.How it works
Reuses the hydratable-island machinery (discover → bundle → swap URL placeholder):
svelteAstPreprocess.tsrecognizesScriptimported frommochi-framework/components, reads the static literal path(s), resolves them relative to the.sveltefile, verifies each exists, and rewrites the tag to carry injected placeholder tokens.ComponentRegistry.buildClientBundle()adds each unique source path as an entrypoint to the same browserBun.build()as the islands (TS transpile, code-split, content-hash); the metafile maps outputs back toscriptEntryUrls.renderComponent()swaps__MOCHI_SCRIPT_URL__<key>__for the hashed URL; the component emits<script type="module">import("/_mochi/client/…js")</script>.Threaded through HMR (
rebuildHydratables,recompileChanged/All) and the prebuilt manifest (toManifest/fromManifest).Behavior
src(single) orscripts(array) — paths resolved relative to the component file (absolute paths work too).import()immediately); no timing option, by design.Verification
recompileBundle.test.tsstubs for the newscriptEntriesfield.bun run checkspasses (lint, format, typecheck, all workspace tests).packages/docs/151-script.md.Notes
.tshelper (buildScriptTag.ts) because a literal<script>/</script>inside a Svelte<script>block breaks the parser.svelte-eslint-parsertreats capitalized<Script>as the HTML<script>element, so it false-flags the import as unused (no-unused-vars). The component compiles fine; suppressed in fixtures and documented (alias oreslint-disable). Open question: rename to e.g.<ClientScript>to avoid the collision entirely?