mvvm demo

const { CreateView, CreateComponent } = Buz

const data = {
  account: {
    userId: 000001,
    username: 'Bob',
    email: 'Bob@',
    avatar: 'https://avatars.com/a-handsome-man',
    isLogin: true,
    services: ['calendar', 'mailbox', 'game-center']
  },
  settings: {
    theme: 'sky',
  },
  workState: {
    activatedTab: 'explore',
    keynoteId: 00007,
    keynote: compute(() => this.keynotes.find(keynote => keynote.id === this.workState.keynoteId)),
    slides: pull(() => fetchSlides(this.workState.keynoteId)),
    keynoteAuthorized: pullFail(this.workState.slides),
    isLoading: 
  },
  keynotes: [{
    id: 00005,
    category: 'finance',
    isLiving: true,
    creator: 00001,
    rate: 3,
    
  }, {
    id: 00003,
    category: 'education',
    isLiving: false,
    creator: 00001,
    rate: 6
  }]
}

const layoutFlow = (data) => ({})

const menuFlow = (data) => ({
  items: data.account.services,
  count: data.account.services.length,
  theme: data.settings.theme
})

const menuItemFlow = (data, index) => ({
  $key: data.items[index],
  name: data.items[index],
})

const accountFlow = (data) => data.account

const tabFlow = (data) => ({
  activatedTab: data.workState.activatedTab,
  explore: data.keynotes.filter(keynote => keynote.rate > 5),
  my: data.keynotes.filter(keynote => keynote.creator === data.userId),
  live: data.keynotes.filter(keynotes => keynote.isLiving === true),
})

const tabItemFlow = (data, key) => ({
  $key: key,
  isActivated: data.activatedTab === key,
  title: key,
  keynotes: data[key],
})

const exploreCardFlow = (data, index) => ({
  $key: data[index].id
  no: index,
  keynote: data[index],
  isHot: true,
})

const myCardFlow = (data, index) => ({
  $key: data[index].id
  no: index,
  keynote: data[index],
})

const liveCardFlow = (data, index) => ({
  $key: data[index].id,
  $sort: (prev, curr) => prev.rate - curr.rate,
  keynote: data[index],
  rate: data[index].rate
})

const boxFlow = () => ({})

const AppFlows = pipe([
  layoutFlow,
  accountFlow,
  [ menuFlow, menuItemFlow ],
  [
    tabFlow,
    tabItemFlow,
    [ exploreCardFlow, myCardFlow, liveCardFlow ],
  ],
])

// or

const viewData = flat(AppFlows(data))

// equals
const [
  layoutViewData,
  accountViewData,
  [ menuViewData, menuItemViewData ],
  [
    tabViewData,
    tabItemViewData,
    [ exploreCardViewData, myCardViewData, liveCardViewData ],
  ],
] = AppFlows(data)

const viewData = [ layoutViewData, accountViewData, menuViewData, menuItemViewData, tabViewData, tabItemViewData, exploreCardViewData, myCardViewData, liveCardViewData, boxViewData ]

const view = CreateView([ Layout, Account, Menu, MenuItem, Tab, TabItem, ExploreCard, MyCard, LiveCard, Box ])(
  Layout(
    Menu(Account, [MenuItem]),
    Tab(
      TabItem([ExploreCard]),
      TabItem([MyCard]),
      TabItem([LiveCard]),
    ),
    Box
  )
)

const App = view(viewData)

'''ts
declare const spawn: Spawn

declare const view: View 

const App = watch(view(spawn(data))).merge(effect)

// or

const AwesomeApp = compose(watch.merge(effect), view, spawn)(data)
'''