2 ms·
I went through a couple of rounds of a similar project, started just snapshotting a document's innerHTML to disk to capture edits, then created a customElements
by jazzyjackson 5y ago
I went through a couple of rounds of a similar project, started just snapshotting a document's innerHTML to disk to capture edits, then created a customElements framework (really a thin wrapper around the official api) to swap out one custom element for another while maintaining all the state on the DOM.
I called it MIXINT for remixable interface. It's abandoneware now but IMO a pretty good vanilla-JS approach to window panes with class-sensitive menus. see github for code and manic dreams in the readme [0] and video of the interface swapping out one class of window for another [1]
But what I really wanted was to expose the guts of the code in a way that made it easier to edit, and as a protest to JSX I threw together a unified JSON syntax for templates that get rendered into HTML/CSS so that I could write javascript code that returns objects and just build up DOMs that way - but when I started implementing variable substitution and array mapping in my JSON templates, I realized I could do away with the javascript altogether and write entire web pages as declarative JSON, just using a few prefixes that trigger macro expansions, replacing one branch of the tree with another until no more prefixes are left (the eureka moment came when reading about macro expansion in the TRAC language - I was just going to stick to feature parity with Handlebars before realizing I had a bone fide programming language on my hands)
This is all off and on the last 4 years. I'm about to overhaul the years-old homepage with better examples but you can see the concept here [2]. Maybe some of the code would be useful, I'm certainly on board with the mission, I just wish I was better at avoiding those pesky rabbit holes :)
[0] https://github.com/jazzyjackson/MIXINTvNegative1 https://github.com/jazzyjackson/MIXINTvNegative1
[1] https://youtu.be/URMHbhK0zrs https://youtu.be/URMHbhK0zrs
[2] https://lookalive.software https://lookalive.software