Functional API ideas
matthewp opened this issue · comments
Matthew Phillips commented
Not sure what this should look like, some ideas:
fritz.define('code-snippet', component => {
component.props = ['code', 'lang'];
component.render = ({ code, lang }) => (
<Fragment>
<h1>Testing</h1>
<button onClick={() => component.state.value = 'foo'}
</Fragment>
);
);
Matthew Phillips commented
Another:
function CodeSnippet({ code, lang }, state) {
return (
<Fragment>
<h1>Testing</h1>
<button onClick={() => state.value = 'foo'}
</Fragment>
);
}
CodeSnippet.props = ['code', 'lang'];
fritz.define('code-snippet', CodeSnippet);
Matthew Phillips commented
fritz.define('code-snippet', {
props: ['code', 'lang'],
render({ code }, state) {
return (
<Fragment>
<h1>Testing</h1>
<button onClick={() => state.value = 'foo'}
</Fragment>
);
}
);
fritz.define('code-snippet', () => {
function onClick() {
state.value = 'foo';
}
return () => (
<Fragment />
)
});
Matthew Phillips commented
fritz.define('code-snippet', function() {
this.props = ['code', 'lang'];
return () => (
<Fragment>
<h1>Testing</h1>
<button onClick={() => state.value = 'foo'}>Click me</button>
</Fragment>
);
});
Matthew Phillips commented
let component = fritz.define('code-snippet');
component.props = ['code', 'lang'];
component.render(state => {
return (
<Fragment>
<h1>Testing</h1>
<button onClick={() => state.value = 'foo'}>Click me</button>
</Fragment>
);
});
Matthew Phillips commented
let Counter = {
[H1]: 'Counter:'
[Button]: {
onClick: self => self.count++,
text: 'Increment"
}
};
Matthew Phillips commented
Interesting ideas, but not going to implement any of them now.