Hi HN, I got to work yesterday and today and came up with a very simple way to create and manage state in TinyJS.<p>I end up creating a simple App to illustrate how to use the new createState function and custom components in a React like manner. Here's the code for it - <a href="https://github.com/victorqribeiro/tinyapp">https://github.com/victorqribeiro/tinyapp</a><p>Here's the PR for the createState function - <a href="https://github.com/victorqribeiro/TinyJS/pull/9">https://github.com/victorqribeiro/TinyJS/pull/9</a>
A comment on code organisation.<p><a href="https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0aed935b7dd6f70e36c0a852a5e462/js/Input.js">https://github.com/victorqribeiro/TinyApp/blob/db92225cfd0ae...</a>:<p><pre><code> export default function Input(state) {
const inp = input({ // ①
type: 'number', value: state.count, onchange
})
function update() { // ②
inp.value = state.count
}
function onchange() { // ③
state.count = parseInt(this.value)
}
state.addUpdate('count', update) // ④
return inp
}
</code></pre>
(Labelling comments mine.)<p>This ordering isn’t great: ① refers to ③, and ④ refers to ②. It’d be better to reorder them, <i>at least</i> to swap ② and ③, and remove the blank line separating ② and ④:<p><pre><code> export default function Input(state) {
const inp = input({ // ①
type: 'number', value: state.count, onchange
})
function onchange() { // ③
state.count = parseInt(this.value)
}
function update() { // ②
inp.value = state.count
}
state.addUpdate('count', update) // ④
return inp
}
</code></pre>
But you really can do <i>much</i> better:<p><pre><code> export default function Input(state) {
const inp = input({
type: 'number',
value: state.count,
onchange() {
state.count = parseInt(this.value)
}
})
state.addUpdate('count', function() {
inp.value = state.count
})
return inp
}
</code></pre>
At least at this scale, that’s <i>much</i> easier to follow.<p>Inlining can improve other places too (though at larger scales it becomes more debatable):<p><pre><code> export default function Button(state) {
return button({
onclick() {
state.count += 1
},
style: {
color: 'black',
border: 'solid 1px black'
},
}, '+ 1')
}</code></pre>
I created a typescript version of your framework<p><a href="https://github.com/guilhermebolfe11/TinyTS">https://github.com/guilhermebolfe11/TinyTS</a>
So, if you are building this off 'window', you are basically just adding syntax sugar to one big global variable. That is absolutely a simple solution to storing state. In one place. But that is not comparable to the functionality of React, so I'm not sure I agree that it is a "react-like framework".