solid meiosis

solid-meiosis-start.js

import { createState } from 'solid-js'
import meiosis from 'meiosis-setup/mergerino'
import simpleStream from 'meiosis-setup/simple-stream'
import { createRouteSegments, Routing, Actions } from 'meiosis-routing/state'
import merge from 'mergerino'
import createRouteMatcher from 'feather-route-matcher'
import { createFeatherRouter } from 'meiosis-routing/router-helper'
import qs from 'qs'

import { render } from 'solid-js/dom'
import h from 'solid-js/h'

const Route = createRouteSegments([
  'Home',
  'Login'
])

const routeConfig = {
  Home: '/',
  Login: '/login'
}

const router = createFeatherRouter({
  createRouteMatcher,
  queryString: qs,
  routeConfig,
  defaultRoute: [Route.Home()]
})

const meiosisSolid = ({ h, createState, Root }) => {
  return ({ states, update, actions }) => {
    const [state, setState] = createState(states())
    console.log(states())
    states.map(val => {
      setState(val)
    })

    return () => h(Root, { state, update, actions })
  }
}

const Home = ({ state, actions }) => {
  return [
    h('div', () => state.count),
    h('button', {
      onclick: actions.increment
    }, 'Click'),
    h('a', {
      href: router.toPath(Route.Login())
    }, 'login')
  ]
}

const Login = () => {
  return [
    h('div', 'Login hi ')
    // h('a', {
    //   href: router.toPath(Route.Home())
    // }, 'home')
  ]
}

const componentMap = { Home, Login }

const Root = ({ state, update, actions }) => {
  const ComponentFn = () => {
    const routing = Routing(state.route)
    return componentMap[routing.localSegment.id]
  }

  return () => h(ComponentFn(), { state, actions })
}

const App = meiosisSolid({ h, createState, Root })

export const createApp = initialRoute => {
  return {
    initial: {
      route: initialRoute,
      count: 0
    },
    Actions: update => {
      return {
        ...Actions(update),
        increment: () => {
          update({
            count: x => x + 1
          })
        }
      }
    }
  }
}

const app = createApp(router.initialRoute)

const { update, states, actions } =
  meiosis({ stream: simpleStream, merge, app })

router.start({ navigateTo: actions.navigateTo })

states.map(state => {
  router.locationBarSync(state.route)
})

const element = document.getElementById('app')
// If you only use update or actions, you can omit the other
render(App({
  states,
  update,
  actions
}), element)