June 15, 2025
Added a fetchDb
function to just query straight from DB with the admin APIs. Used it to make a vote viewer.
Implemented TextField
s (only the filled variant, not outlined; and no trailing icons yet either).
Added toggle buttons. It's built as a wrapper around the Button component with a flag element as a child to reuse all of its styling and props.
Fixed the linear progress bar styling.
Implemented the linear progress bar. It doesn't look exactly like the spec yet though.
Created a basic testing UI with m3-dreamland. I may be slightly contributing to the 1.1m requests sent to api/v1/devlogs according to the admin analytics
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.
Implemented Chip
.
Implemented Switch
, with support for custom icons in the selected state.
Implemented Button
styles when disabled
.
Implemented most of the button spec (except xs/s target area overrides).
Cleaned up m3-dreamland v1's ripple and implemented the Card
/CardClickable
component.
Set up the styles component to generate the vars I'll use for components.
Material 3 (Expressive) UI for <a href="https://summer.hackclub.com/projects/3" target="_blank" class="text-nice-blue hover:text-dark-blue font-medium transition-colors duration-200 cursor-pointer hover:underline">dreamland.js</a>
(Hopefully) fixed the users page 500 error when you have devlogs on deleted projects
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.
Made a PR to add back markdown rendering to devlogs. Hopefully merging soon!
My contributions to Summer Of Making! I'm helping out with random stuff and finding vulns. (I personally didn't use ai so I'm not adding the tag)
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)
I started this project a while back and forgot to add it to SoM. Right now I have a ton of intel pstate, rapl, gpu, and dptf knobs added with all of them organized into separate files in src/sensors/
. I've improved the default buildroot arm64 cross compile time from ~~18m to ~~13m.
Got auth, api/v1/ endpoints, flash error handling, and some SSR scraped endpoints (getShop, probeShop, postDevlog, deleteDevlog) working. Also set up a robust multi-client and ratelimit-handling client that wasn't needed because Rowan removed the ratelimits.
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.
Fixed unrewriting JS functions via sourcemaps. This means google sign in is working again and Anubis is closer to working (blob urls are still broken for anubis).
Also worked on the WASM port of the html rewriter some more, it currently provides about a 3x speedup over htmlparser2.
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.
Utilitarian web framework smaller than preact. <a href="https://mail.hackclub.com/" target="_blank" class="text-nice-blue hover:text-dark-blue font-medium transition-colors duration-200 cursor-pointer hover:underline">mail.hackclub.com</a> uses this! take a look at <a href="https://github.com/hackclub/theseus/blob/main/package.json" target="_blank" class="text-nice-blue hover:text-dark-blue font-medium transition-colors duration-200 cursor-pointer hover:underline">theseus package.json</a>...
This was widely regarded as a great move by everyone.