Skip to content

docs: add live vite, webpack and rspack examples - #18

Merged
dangreen merged 1 commit into
mainfrom
add-examples
Aug 19, 2026
Merged

docs: add live vite, webpack and rspack examples#18
dangreen merged 1 commit into
mainfrom
add-examples

Conversation

@dangreen

Copy link
Copy Markdown
Member

Three runnable sandboxes, one per bundler, each demonstrating the same four things with the component package of its framework:

bundler framework components
examples/vite Vite 8 Svelte 5 @srcset/svelte
examples/webpack webpack 5 Preact @srcset/preact
examples/rspack Rspack 2 React 19 @srcset/react

Every example renders a photo with widths and formats from an import query, a blur-up placeholder on a standalone Image with priority (the only place that prop is correct), a transparent png and an animated gif - and prints the generated variants under each section, so the page shows what the build produced.

Sandboxes, not workspace hacks. The packages are declared as a consumer would declare them ("@srcset/react": "*"); pnpm-workspace.yaml maps those specs to workspace:^ through overrides. Copying an example out of the repo needs no edit to its manifest.

They stay out of the pipeline. The recursive root scripts are filtered to ./packages/* and the package.json check ignores examples - the same arrangement the nanoviews repository uses. Without it CI would build all three examples on every run and fail the package.json job on the private manifests.

Verified for each: production build (23 variants: 9 for the query-rule photo, 6/4/4 for the rest), dev server compiling clean and serving the page, the built page rendered in a browser with all four sections and every image loading, and oxlint clean.

🤖 Generated with Claude Code

@coveralls

coveralls commented Aug 19, 2026

Copy link
Copy Markdown

Coverage Report for CI Build 32301183638

Coverage remained the same at 91.37%

Details

  • Coverage remained the same as the base build.
  • Patch coverage: No coverable lines changed in this PR.
  • No coverage regressions found.

Uncovered Changes

No uncovered changes found.

Coverage Regressions

No coverage regressions found.


Coverage Stats

Coverage Status
Relevant Lines: 749
Covered Lines: 700
Line Coverage: 93.46%
Relevant Branches: 572
Covered Branches: 507
Branch Coverage: 88.64%
Branches in Coverage %: Yes
Coverage Strength: 94291.23 hits per line

💛 - Coveralls

Three sandboxes, one demo each: a rule in the import query, a blur-up
placeholder with priority, transparency and animation kept intact -
built with the component packages, one per bundler.

- vite + svelte, webpack + preact, rspack + react
- The packages are declared as a consumer would declare them, `"*"`,
  and the workspace overrides resolve them to the local ones
- The recursive root scripts are filtered to `./packages/*`, so the
  examples stay out of the build, the tests and the release
@dangreen dangreen changed the title docs(examples): add live vite, webpack and rspack examples docs: add live vite, webpack and rspack examples Aug 19, 2026
@dangreen
dangreen merged commit 0b3eb9c into main Aug 19, 2026
7 checks passed
@dangreen
dangreen deleted the add-examples branch August 19, 2026 20:57
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.

2 participants