Enjoy the process of building your framework. I had similar goals when I started my no tooling / no dependencies Reactive framework https://reken.dev, 2 years ago. And I loved every bit of it. My most complicated problems were reactive DOM elements based on nested loops and recursive components. Even though Reken does pretty much what I need and grew to 7kb compressed, I am not 100% happy with the scope of the application state, and it is simple but sometimes confusing. Perhaps your proxy approach can help me here.... I'll have to think about it more.
> My most complicated problems were reactive DOM elements based on nested loops and recursive components
Agreed, I've tried solving it by setting an attribute `sb-mark` which allows syncing just the branch of DOM elements that maps to that particular key in the reactive object.
This removes the need for VDOM diffing, but unless I use a `MutationObserver` external updates to marked branches will probably mess it up.
Haven't yet tested it for recursive components, it should work for nested loops.
> and it is simple but sometimes confusing
I understand what you mean, my approach has the aforementioned `sb-mark` attribute/directive which syncs primitives, lists, and objects.
I've started feeling that the convenience of having just one attribute to remember is supplanted by the confusion of its implications not being immediately apparent from context.
> This removes the need for VDOM diffing, but unless I use a `MutationObserver` external updates to marked branches will probably mess it up.
Similar in Reken. It controls all the DOM; DOM updates outside Reken will get stuff out of sync. After a model change, all managed DOM gets directly updated by a generated controller. It does check the DOM first if a textContent or attribute change is necessary. Most DOM state checks are cheap. Another optimization is that all hidden DOM trees get skipped; Great in SPA apps with multiple pages.
Your arrays and buttons example appears broken - after the first item is added to the todo list, typing new items in the input field leaves the add button looking disabled (although it works when you click it).
I think it only gets enabled when focus leaves the input field.
I made a similar library [1] using data-* attributes. It also supports nesting, looping and conditions. For event handling, I use function in object (a.k.a. method) while you support writing them inline.
Your way to support inline logic in the text and style is interesting.
Very cool, it seems we almost came up with the same approach of components/templates. In your framework, it is referenced with a data-template attribute. In Reken, I use a data-component attribute.
One of the design goals for Reken was to not have to context-switch while coding, to not lose my train of thought (Guess my short-term memory is limited). Hence try to add everything inline in the HTML file. Also I'm working on a tailwind-like css inlining framework (compatible with Reken). Together these give me dynamic DOM and styling inline.
I developed and run Wordrow+ a word puzzle game in HTML5. A mix between Wordle and Tetris. So far costed me money on app developer licenses and buying an Android phone to test the Android version (in progress)
Hello HN, My wife and I developed this game as we like word games such as Wordle. The game is designed to run about 5 minutes. The goal is to guess 5-letter words within a decreasing time constraint.
The words can be entered with a keyboard or by tapping the letters in the correct order. If the word is not guessed in time, it will drop in one of the 7 slots below. After guessing the next word you get another chance to guess the word that got dropped and recover.
At the end of the game you see a summary of the play with a view of color coded bubbles. This summary can be shared by copying it to the clipboard and then pasting it in a post.
Since we found new players sometimes struggling getting the game, we added two low stress practice modes: Chill (no word time limit, just an overall 5 min limit) and Easy (a 30s timelimit, opposed to the 15 with Fast).
We also added the game as an App to the App store, it has the same experience as the Web App version.
We hope you enjoy the game and look forward to your feedback, specifically the game play.
