feat: add ViewTransitions component#66
Open
khromov wants to merge 31 commits into
Open
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.
Contributor
Mochi review reportTry this PRExpand instructionsgh run download -R khromov/mochi 27484884292 -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.
Summary
Adds
<ViewTransitions />— a zero-JS helper that opts a Mochi app into the browser's cross-document View Transitions API. Since Mochi is an MPA (every navigation is a full page load), dropping this into a shared layout animates navigations with pure CSS; unsupported browsers just navigate normally.fadeandslide; optionaldurationprop (default 250ms); respectsprefers-reduced-motion.regionsconfines the animation to named elements;keeptakes CSS selectors for persistent chrome and emits the freeze CSS for them.locals).mochi-framework/componentssubpath.Changes
packages/mochi/src/components/ViewTransitions.svelte+ barrel export +./componentspackage export.ViewTransitions.test.ts): presets, duration, reduced motion,regions,keep(incl. slug-collision disambiguation), and the duplicate-instance guard./demos/view-transitions(two linked pages, fade/slide toggle, persistent<video>that keeps playing across navigations).148-view-transitions.md.PageShell.sveltevia<ViewTransitions keep={['.banner', '.sidebar', '.hero', '.gh-corner']} />, which freezes the persistent chrome so only the page body transitions. The view-transitions demo pages render their own instance instead (PageShell skips its own for those routes).packages/video-animations): muxes in a soundtrack with a 3s fade-out and adds an ambient falling-leaves background; the renderedmochi.mp4is committed underpackages/site/public/.Test plan
bun test packages/mochi/src/components/ViewTransitions.test.ts✅ (15 tests)bun --cwd=packages/mochi run typecheck✅@view-transition, keyed chrome rules present, demo pages emit exactly one instance).