dfilatov / vidom

Library to build UI based on virtual DOM
MIT License
415 stars 16 forks source link

setHtml(0) causes error upon render #313

Closed dmikis closed 7 years ago

dmikis commented 7 years ago
<!DOCTYPE html>
<html>
<head>
    <title>Floats're wonderful!</title>
    <script src="node_modules/vidom/dist/vidom.js"></script>
    <script>
        function main() {
            var a = new ArrayBuffer(4);
            var f32 = new Float32Array(a);
            var u32 = new Uint32Array(a);

            vidom.mount(document.body, vidom.node(class App extends vidom.Component {
                onInit() {
                    this.setState({ n: 0 });
                }

                onRender() {
                    f32[0] = this.state.n;

                    return vidom.node('div').setChildren([
                        vidom.node('div').setChildren([
                            vidom.node('button')
                                .setAttrs({onClick: () => this.onRngClick()})
                                .setHtml('Random!')
                        ]),
                        vidom.node('div').setChildren([
                            vidom.node('table').setChildren([
                                vidom.node('tr').setChildren([
                                    vidom.node('td').setHtml(u32[0] >> 31)
                                ])
                            ])
                        ])
                    ]);
                }

                onRngClick() {
                    this.setState({n: Math.fround(Math.random())});
                }
            }));
        }
    </script>
</head>
<body onload="main()">
</body>
</html>

After clicking 'Random!' button, onRngClick's called. It sets a new state, that causes the component to render itself and that failes.