Repository navigation
perf: run the islands on preact instead of react - #54
Merged
Merged
Conversation
- in pages mode, space on a focused button, link or toggle presses it instead of turning the page; arrows still turn pages - the info menu scrolls when a short screen can't fit it - a zoom click made while the viewer is still loading opens once it is ready, and opens the image itself if the viewer fails to load - the background video pauses on comic pages, which cover it, and for visitors who ask for less motion - phones no longer preload the comic art below their first screen - homepage images take their real sizes from the files at build time
the header, comic reader, comics list and gallery only use plain hooks and context, which preact runs as is. react-dom was about 66 KB gzipped of the 79 KB every page loaded; with preact the homepage loads 19 KB and a comic page 23 KB. - hooks import from preact/hooks, types from preact - the sliders listen to input rather than change, which preact fires only on release - useEffectEvent, which preact keeps in its compat layer, is a small helper here - eslint keeps the rules of hooks; the react compiler rules don't apply and don't know preact's hooks
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Deploy preview for y-fu ready!
Deployed with vercel-action |
This branch was successfully deployed
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
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.
The interactive parts (header and player, comic reader, comics list, gallery) use only plain hooks and context. Preact runs those as is, with React's runtime replaced by one about a tenth the size.
JavaScript each page loads (gzipped, all chunks it imports)
PhotoSwipe still loads only when a viewer opens.
Why Preact and not Solid or Svelte: those would also cut the runtime to a few KB. But they'd mean rewriting about 900 lines of reader and player logic into a different reactivity model (scroll tracking, resume, focus return, drag), and re-debugging all of it. Preact gets the same savings with these small changes:
preact/hooksand types frompreact;input, since Preact'sonChangeis the native event that fires only on release;useEffectEvent, which Preact keeps in its compat layer, is a 10-line helper here (src/utils/useEffectEvent.ts);rules-of-hooksandexhaustive-deps. The hooks plugin's other rules check code for the React Compiler and don't recognise Preact's refs.@eslint-reactnow knows the import source is Preact.Tested in the browser:
Lint,
astro checkand the build pass.