This was built as a more modifiable approach for people who like to work with codebases they can modify when things break down and it tries to keep down the dependencies to the bare minimum where possible.
Also a lot more about why was something I built is something you can about on the following blog post
reaper - Updates and Decisions January - 2023
You can read about what and how to build your own using the following guide →
Type: Verbose
Contains 2 simple webpack configurations that build the server and client and you can manually decide what component hydrates on what DOM element.
Can work with older browsers since you select where and how the components hydrate
Type: Automatic
This one adds a tiny bit of magic by generating the island manifest for you and also creating wrapper web-components that handle lazy loading and mounting the islands for you.
This does provide better DX but if you are trying to understand how islands work, do go through the webpack and esbuild variants instead.
Type: Verbose
Warning: esbuild doesn't support splitting with cjs right now which might be problematic with a few browsers so choose this if you strictly wish to work with modern browsers.
Note: To know more about the status of splitting, evanw/esbuild#16
The variant uses a build.mjs script to handle something similar to what the
webpack setup does but is simpler in terms of setup and overall dependencies.
Can be further trimmed down by maintaining a programmatic manifest instead of the one generated by the plugin
Type: Verbose
The variant uses the same build.mjs as above but with a few changes where it
uses a helper plugin for esbuild to generate the island wrappers for you both on
client and by in-place modification for the server rendered island
This trims down the overall amount of tooling required as compared to webpack but also there's a dependency on babel to generate escodegen compatible island code on the server.
- A real app approach with this starter real-app-islands-diy
- You can help improve the speed of the plugins in each of the
*-auto-injectbranches - Create you own apps and let us know about your experience and other pain points / frictions that you've experienced using this
- Build your own amazing starter template and tell us about it
- A full guide of each folder and it's significance
- Variants
- Webpack
- ESBuild
- Vite
