svelte-state-renderer.js

import { tick } from 'svelte'

import UiView from './UiView.svelte'

UiView.from = (target, asr) => {
  if (target instanceof HTMLElement) {
    // it's a target element
    return new UiView({ target, props: { asr }  })
  } else {
    // it's alreay a UiView
    target.setAsr(asr)
    return target
  }
}

const ASR = Symbol('asr')

export default (defaultOptions = {}) => stateRouter => {
  const { props: defaultProps } = defaultOptions

  const asr = {
    makePath: stateRouter.makePath,
    stateIsActive: stateRouter.stateIsActive,
  }

  const render = async context => {
    const { element: target, template, content } = context
    const props = { ...content, ...defaultProps }

    const view = UiView.from(target, asr)

    const construct = async (getComponent, props) => {
      const { default: Component } = await getComponent()
      const component = await view.setComponent(Component, props)
      return component
    }

    let cmp

    if (typeof template === `function`) {
      cmp = await construct(template, props)
    } else {
      cmp = await construct(template.component, { ...props, ...template.props })
    }

    function onRouteChange() {
      // FIXME what's this? force refresh? why?
      // cmp.$set({ asr })
    }

    stateRouter.on(`stateChangeEnd`, onRouteChange)

    const onDestroy = () =>
      stateRouter.removeListener(`stateChangeEnd`, onRouteChange)

    cmp[ASR] = { view, onDestroy }

    return cmp
  }

  return {
    render,
    reset(context, cb) {
      // TODO untested
      const cmp = context.domApi
      const { view, onDestroy } = cmp[ASR]

      onDestroy()

      const renderContext = Object.assign({ element: view }, context)

      render(renderContext, cb)
    },
    async destroy(cmp) {
      const { view, onDestroy } = cmp[ASR]
      onDestroy()
      view.$destroy()
      await tick()
    },
    async getChildElement(cmp) {
      const { [ASR]: {view} } = cmp
      return view.getChild()
    },
  }
}