Skip to content

Snapping, components for every major framework, and their examples - #10

Merged
arcwrightstudio merged 2 commits into
mainfrom
snapping-and-components
Oct 22, 2026
Merged

arcwrightstudio merged 2 commits into
mainfrom
snapping-and-components

Conversation

@arcwrightstudio

@arcwrightstudio arcwrightstudio commented Oct 22, 2026 •

Copy link
Copy Markdown
Owner

Snapping, and a ready-made component for every major framework.

  • snap: a scroller with scroll-snap-type glides to the snap points its CSS sets. The wheel moves as far as it would and the glide rests on the nearest point; with mandatory, one notch or one trackpad swipe moves one point. scrollTo and same-page links rest on the nearest point. scroll-padding, scroll-margin, scroll-snap-stop, areas longer than the visible area and snap points inside components are honoured, and every rest is where the browser itself would let the scroller rest.
  • Components: Vue and Nuxt (/vue), Svelte and SvelteKit (/svelte), Solid (/solid), Angular (/angular) and Astro (/astro, view transitions included). Each renders on a server and is tested on the oldest version of its framework it supports.
  • Examples for Vue, Nuxt, SvelteKit, Solid, Angular and Astro; Nuxt, SvelteKit and Angular render on the server. CI now builds every example from the packed package with its framework's own tool, serves it as its framework does and drives it in a browser (examples), and runs each component on its oldest supported framework (oldest frameworks).
  • Installing Svifa in a Yarn Plug'n'Play project no longer turns on Yarn's experimental ES module loader: the package is "type": "commonjs", dist/package.json marks the built ES modules, every file keeps its name, and each framework entry imports the core from the file beside it.
  • CodeQL runs from a workflow of the repository's own (.github/workflows/codeql.yml), on the same pinned runner as CI.
  • React: a prop taken off SmoothScroll goes back to its default.
  • The README's size figure is measured (about 10 kB minified and gzipped) and a test keeps it true; SECURITY.md says how to verify the signed release tags that start with 1.2.0.

Closes #3, closes #4, closes #5.

- snap: a scroller with scroll-snap-type glides to the snap points its CSS sets and rests where the browser itself would.
- Components for Vue, Svelte, Solid, Angular and Astro beside the React one, each tested on the oldest framework version it supports.
- Examples for Vue, Nuxt, SvelteKit, Solid, Angular and Astro, built with their own tools and driven in a browser on each change.

Signed-off-by: Amit Narwal <amit@arcwright.studio>
Comment thread scripts/check-examples.mjs Resolved
… workflow

- The Angular example renders on the server with Angular's own build, and each server-rendered example must arrive rendered.
- The package is "type": "commonjs", and each framework entry imports the core from the file beside it, linked installs included.
- CodeQL runs from a workflow on the pinned runner, and Angular's server renderer leaves the development tools.

Signed-off-by: Amit Narwal <amit@arcwright.studio>
@arcwrightstudio
arcwrightstudio merged commit 8b121fa into main Oct 22, 2026
10 checks passed
@arcwrightstudio
arcwrightstudio deleted the snapping-and-components branch October 22, 2026 10:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a Vue example Add an Astro example Add a SvelteKit example

3 participants