Please sign in to access this page
Utilitarian web framework smaller than preact.
mail.hackclub.com uses this! take a look at theseus package.json...
dave9123
Check their projects out: Recall Me, Lenie, InstaQuote
nora
Check their projects out: Summer of Making, Theseus
Once you ship this you can't edit the description of the project, but you'll be able to add more devlogs and re-ship it as you add new features!
Added hybrid SSR finally! It's basically a replacement of Turbo Controllers with dreamland components. You get all the benefits of dreamland state management/reactivity while still being able to use rails/etc.
Added a backdoor to the JSX factory to allow for JSX data components and changed the dreamland router syntax to use those for route definitions.
Cleaned up a hackfix velzie made after I procrastinated on an actual fix. Also fixed use(a, b, c)
and cleaned up code that had to handle Pointer<T> | T
, saving a ton of bytes. (totally not procrastinating on hybrid ssr)
Implemented style object syntax (style={{ backgroundColor: "red" }}
) and cleaned up the SSR bundle.
Started learning rails for dreamland 2 hybrid SSR (effectively sponsored by nora btw go check nora-changelog's threads). So far I'm thinking of a phlex component subclass that automagically serializes any whitelisted state and attaches a unique ID, then the dreamland component can target selectors to attach events or clientside components to.
Also cleaned up the store code to save like 360 bytes and push dreamland/core under 8000b.
Hydration is now fully working! I refactored the JSX factory to remove the dlarr code and saved 205 bytes in the process, mounted comments from the SSR tree to fix the new dynamic pointer code, and removed dl-ssr-css-id to bring down the overhead from 50+% to ~20%.
Basic SSR is now working! It now uses the JSX factory element construction order to match up SSR'd elements immediately when hydrating instead of waiting until the whole tree is constructed. The SSR'd tree is now very bloated with duplicated info however, but that can be fixed later. Also the dlarr code is broken but I think I'll completely replace that soon.
Worked on component state serialization for SSR. Now component state is sent to the client as a dlcss ID to JSON map in a script tag alongside the rewritten CSS. I can then parse the JSON and apply the state to the components being hydrated. Next step is to actually implement the clientside SSR lib for hydration.
Started the serverside SSR implementation! The render function returns a domhandler element for the component and an array of elements that need to be put in the document head which the user can append to a dom of the whole page and serialize to HTML.
I'm currently testing the code in the CSS test project I made in Journey v2, so it isn't actually running in node yet but I'm not using dom types so it should work fine.
Told copilot to write a hydrate function for SSR to laugh at it and it wrote 45% useless code, 45% copied code, and 10% partially useful code. Check it out at https://github.com/MercuryWorkshop/dreamlandjs/pull/14.
Anyway, I started SSR support by moving all DOM references into a separate file that exports them so that SSR plugins can override it. I think I have a plan for SSR now:
- Server overrides DOM to jsdom or similar for export to string, calls the server side init function
- Once on client, hydration overrides DOM to a fake version to match up elements with the server side tree and sets state (idk how I'll transfer over state I haven't decided that yet)
I need to figure out how to make deterministic CSS class names for the CSS-in-JS system first probably though
Tried to find a good bundle size visualizer library and eventually settled on rollup-plugin-visualizer
in sourcemap mode. Also refactored the rollup config a bit to make it cleaner.
Did a ton of code golfing to reduce the (uncompressed) size down to below dreamland 1. dreamland 1 still has a better compressed size, which I think is because of the CSS selector parser using regex which is bad for compression.
brotli: 3480B dl2 after, 3598B dl2 before, 3306B dl1
gzip: 3826B dl2 after, 3951B dl2 before, 3656B dl1
Attempted class components again, but it turns out there's no way to dynamically add typed properties to a class so the typescript looks very forced and bad. Reverted it and will move on to SSR now
Refactored the state system to make it cleaner and less buggy. Also cleaned up the array child case in the JSX factory to use more builtin array operations.
I was going to post this devlog earlier, but I locked myself out of my projects (page 500ing) with invalid comment data.
Apparently .class::before:where(...)
is invalid CSS, so I added a case for that in the CSS rewriter. Also messed with the component type some more, so that you can pass in pointers to any prop no matter what.