canjs/canjs

Streaming can-component

const Nils = require('../../')
const defineMap = require('can-define/map/map')
const Component = require('can-component')
const view = require('index.stache')

const app = new Nils()

const viewModel = defineMap.extend({sealed: false},{})


// Init ViewModel
// could be also a defineMap->Stream
app.stream.of({
  inputX: '',
  inputY: ''
})
// Observe DOM Elements
// return { update, assign }
.combineArray((observed)=>observed,[
  app.fromInput(document.querySelector('input.x'))
  .map((val)=>{
  return { inputX: val }
  }),
  app.fromInput(document.querySelector('input.y'))
  .map((val)=>{
    return { inputY: val }
  })
])
// Returns the ViewModelUpdating State aka can-x-connect :)
// This can also be a complet Can Component
// its only for demo
.loop(function applyVM(lastSetVal, setVal){
  let seed = lastSetVal.viewModel.updateDeep(setVal)
  return return { seed, value: seed };
},Component.extend({
  tag: 'kasse-login',
  ViewModel,
  view
}))
// Acticvate the Stream All gets executed as sideEffect
.map((comp)=>comp.render())
.drain()