Islands.js

import {viewOf, indexOf, domOf} from './utils.js'

export function EnsconcedIsland(v){
  let input
  let index
  let dom
  
  return {
    view: v => {
      viewOf(v)({render, vnode, write})
      
      return input || ''
    },
    
    oncreate: v => {
      index = indexOf(v.dom)
      dom   = v.dom
    },
    
    onbeforeupdate: () => 
      false,
  }
  
  function render(){
    input = arguments[0]
    
    if(dom)
      m.render(dom.parentNode, 
        Object.assign(
          Array(index), 
          {
            [index] : input,
          },
        ),
      )
  }
  
  function vnode(){
    return dom.parentNode.vnodes[index]
  }
  
  function write(){
    const input = arguments[0]
    
    dom.parentNode.vnodes[index] = input
  }
}

export function FloatingIsland({attrs: {maxSize = 69}}){
  let dom
  let index
  let nodes
  let input
  let patch
  
  return {
    view: v => {
      viewOf(v)({render, vnode, write})
      
      return v.instance || Array(maxSize).fill('')
    },
    
    oncreate: v => {
      dom   = v.dom
      index = indexOf(v.dom) + 1
      nodes = domOf(v)
      
      if(!dom.parentNode.vnodes)
        dom.parentNode.vnodes = []
      
      if(input)
        render(input)
    },
    
    onupdate: v => {
      index = indexOf(v.dom) + 1
    },
  }
  
  function render(){
    input = arguments[0]
    
    if(!dom)
      return
    
    if(patch){
      dom.parentNode.vnodes = Array(index)
    }
    
    m.render(dom.parentNode, 
      Object.assign(
        Array(index), 
        {
          [index] : m.fragment({
            oncreate: balance,
            onupdate: balance,
          },
            [input],
          ),
        },
      ),
    )
  }
  
  function vnode(){
    return dom.parentNode.vnodes[index]
  }
  
  function write(patch){
    dom.parentNode.vnodes[index] = input
  }
  
  function balance({dom, domSize, state}){
    if(state.domSize === undefined)
      state.domSize = 0
    
    if(domSize == state.domSize)
      return
    
    const filler = Array.from(nodes)
    
    while(domSize && domSize-- > state.domSize)
      filler.pop().remove()
    
    if(domSize == state.domSize)
      return
    
    const edge   = domOf(dom).pop()
      
    while(domSize && domSize-- < state.domSize)
      edge.after(filler.pop())
  }
}