matthewp / fritz

Take your UI off the main thread

Home Page:https://fritz.work

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Functional API ideas

matthewp opened this issue · comments

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>
  );
);

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);
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 />
  )
});
fritz.define('code-snippet', function() {
  this.props = ['code', 'lang'];

  return () => (
   <Fragment>
     <h1>Testing</h1>
     <button onClick={() => state.value = 'foo'}>Click me</button>
   </Fragment>
  );
});
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>
  );
});
let Counter = {
  [H1]: 'Counter:'
  [Button]: {
    onClick: self => self.count++,
    text: 'Increment"
  }
};

Interesting ideas, but not going to implement any of them now.