Please sign in to access this page

dreamland.js

dreamland.js

16 devlogs
29h 36m
Created by Toshit

Utilitarian web framework smaller than preact.

mail.hackclub.com uses this! take a look at theseus package.json...

Timeline

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.

Neon Neon 12 days ago
toshit dropped bday update

Ported svelte/motion Springs to dreamland so that I can use it for m3-dreamland.

Toshit Toshit 17 days ago
hybrid ssr coming soon™ :clueless:

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.

Update attachment

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)

Update attachment

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.

Update attachment

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%.

Update attachment

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.

Update attachment

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.

Update attachment

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.

Update attachment

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

Update attachment

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.

Update attachment

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

Update attachment
Toshit Toshit about 1 month ago
btw, preact is all the way at 11195B. imagine using react

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

Update attachment

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.

Update attachment

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.

Update attachment