dreamland.js

Did some size optimizations on the router and fixed some bugs in the JSX factory again. I'll continue with the SSR stuff in the next journey respin.

Very small update: fixed a bug in the JSX factory causing it to set the children attribute on regular HTML elements.

Next (hopefully big) update is coming after finals (thursday pst)

Switched dreamland to using the new JSX transform internally, with a shim for the old one. This should hopefully allow me to pass internal props via symbols to change behavior slightly for eventual SSR.

Also, I am thinking of creating a dreamland/hybrid target where you can send the UI with some other server (like rails) and tell dreamland to mount a component onto it, allowing you to use all the fancy dreamland state and syntax while still doing ssr (if you couldn't tell already this is basically for mail.hackclub.com). You could still use the dreamland JSX to add in more HTML after mounting, but the mounted component wouldn't return HTML because the HTML would come from the server prepopulated with the props and dreamland/hybrid would parse those and send them to the JSX factory for hydration. It should probably have a better name than dreamland/hybrid too.

Fixed a whole bunch of bugs in the state system, css parsing, and jsx factory as I ran into them while working on https://shipwrecked.r58playz.dev ! The more I use the new state system the more I think it's awesome, especially with the helper funcs like andThen and mapEach.

Rewrote the old router which was in a different repo and not updated for the dreamland rewrite.

The syntax is very similar to react router, just without JSX based routes for now. It's in a different bundle than the core dreamland code since a router isn't really needed to use dreamland but still in the dreamland repo/npm package because I already have everything set up and this is a fairly small project anyway.

Size is pretty good as well, but I haven't optimized it yet either. The current bundle outputs are: core for all the core stuff, router for the router, js-runtime for the tagged template HTML factory, and jsx-runtime for the shim to the new JSX transform.

I rewrote the CSS system (again) because I was running into issues with @velzie's rewrite, which aimed to fix bugs in the original CSS system but caused some more. The main issue with the original implementation was that dynamic elements (ie use(...).map(x =>

We realized that scope isn't actually different from cascade so we just removed it to make it simpler and avoid confusion. I also rewrote the store system so that people can make async store backings to put settings in IndexedDB or whatever. Also fixed a bunch of bugs with things like value/checked props, createElementNS, and the JSX factory's types.

Fixed a bug in :global (it was using class names that started with a number for the transformation, causing the css parsing to bug out) and did some more code golfing, reducing the bundle size by 250b to 8439b minified (preact is 11.7kb minified).

Built a proper CSS selector parser to fix :global! I based it off of https://github.com/LeaVerou/parsel as it was already very tiny and allowed me to only tokenize the selector, saving even more space. I minified it even more by replacing all the token types with Symbols because I was already using them everywhere else and allowing terser to minify the fields which weren't regex groups. There's more potential for size improvements but this is pretty good for now and works well.

Fixed the cascade CSS parsing (it's still not fully correct, I might have to actually start parsing it properly but idk how much of a size increase that would be), and implemented :global for cascade so that stuff that relied on the bad CSS parsing can work properly (like the shipwrecked site rewrite lol).

Also added :component due to a limitation of the :global implementation: .background :global(*) doesn't work because the implementation only supports :global at the outside of a selector, so instead you would do :global(.background:component *).