Flyt

Unifying hooks, components, reactive views and reactive state to create the best view library in existence.

import {
  memoize,
  render,
  action,
  store,
  mount,
  h,
} from 'flyt'

const Counter = () => {
  // I chose to render the header here
  // here, but moving it to a separate
  // component/hook is perfectly possible.
  render(() => (
    <>
      <h1>Counter example</h1>
    </>
  ))

  // You can create a store from a props
  // function within a component context.
  // It also accept an object.
  const state = store(({ initialCount }) => ({
    count: props.initialCount ?? 0,
  }))

  const increment = action(() => {
    state.count += 1
  })

  const decrement = action(() => {
    state.count += 1
  })

  // And a demo of how to create
  // a memoized function
  // just for fun
  const countPlus1 = memoize(() => {
    return state.count + 1
  })

  // You can have multiple renders in a component.
  // This works similarly to fragments.
  render(({ initialCount }) => (
    <>
      <button type="button" $onclick={increment}>
        Increment to {countPlus1()}
      </button>
      <button type="button" $onclick={decrement}>
        Decrement
      </button>
      Count: {state.count}
    </>
  ))
}

const App = () => {
  // We can use components as hooks
  Counter()

  // Or we can use them as components
  render(() => <Counter initialCount={100} />)

  // It is up to you!

  // Note that props will be forwarded when a
  // component is used as a hook.
}

mount(<App />, document.querySelector('#root'))