add: opt-in BlurHash placeholder

[lxsmnsyc]

Summary

Adds a BlurHash preview as an alternative to the inline image preview. It is
off by default, and blurhash is an optional peer dependency that apps install
only when they turn it on.

Changes

• Set placeholder: { type: "blurhash" } in the plugin to use a BlurHash
  instead of the 20px inline image. The inline image stays the default.
• There is nothing else to configure. The number of components is picked per
  image from its aspect ratio, about 12 in total. The long side gets more, so
  portraits and landscapes keep even detail. A 4:3 image gets the usual 4 by 3.
• blurhash is listed as an optional peer dependency. The plugin loads it with a
  dynamic import.
• The plugin checks for blurhash when the build starts. If it is missing, the
  dev server or build stops with install steps instead of failing on the first
  image.
• The plugin encodes an upright copy of the image that fits inside 32px, and
  ships the hash with the average color.
• The generated module imports decode from blurhash only when the option is
  on. The component never imports the package, so apps without it are
  unaffected.
• The server paints the average color, since decoding needs a canvas. The
  browser decodes the hash into a 32px wide canvas at the image's aspect ratio
  and paints it over that color.
• The preview is removed once the image loads, the same as the inline image
  preview.
• Remote images can return { hash, color } from transformURL. The plugin
  adds the decoder for them.

How it was tested

• pnpm test runs 152 tests across both projects and they pass.
• Component picking is checked for landscape, 16:9, square, portrait, panorama,
  banner and strip shapes, and counts stay within 1 to 9.
• Plugin tests confirm the module ships a valid hash, imports the decoder, and
  reports the average color. A portrait gets 3 by 5 components and a 10:1
  banner gets 9 by 1.
• Plugin tests confirm the default preview and remote images without a hash
  never import blurhash.
• A plugin test mocks a missing blurhash and checks that the build fails at
  startup with the install message.
• Encoder tests confirm the base color stored in the hash equals the reported
  average color, the image is reduced to fit inside 32px, and a rotated photo is
  hashed upright.
• A server rendering test confirms only the average color is painted and the
  decoder is never called.
• A browser test confirms the hash is decoded at 32 by 18 for a 16:9 image,
  painted before the image loads, and removed once it loads.
• pnpm build succeeds. dist/vite.js keeps import("blurhash") external, and
  dist/index.jsx does not reference the package.
• tsc --noEmit reports one pre-existing error in src/vite/fs.ts, unrelated to
  this change.

Notes for review

main was merged in after #7 landed. The BlurHash sample calls .autoOrient(),
like the variants and the inline preview.

🤖 Generated with Claude Code

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	blurhash@​2.0.5

View full report

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@solidjs/image@8

commit: 9ee0223