effector-dom

Effector-DOM

Declarative stack-based DOM api

Usage

import {createStore, createEvent} from 'effector'
import {using, spec, list, h} from 'effector-dom'

using(document.body, () => {
  const addLine = createEvent()
  const code = createStore('let foo = 0;').on(
    addLine,
    code => `${code}\nfoo += ${Math.random()}`,
  )

  h('section', () => {
    spec({data: {timelineNames: true}})
    list(timelineRows, ({store}) => {
      h('div', {
        data: {timelineName: true},
        text: store,
      })
    })
  })
  h('section', () => {
    spec({data: {section: 'controls'}})
    h('button', {
      handler: {click: addLine},
      text: 'Add line',
    })
  })
})

Component is just a plain function

function VizionSectionHeader(text) {
  h('header', () => {
    spec({data: {vizionSectionHeader: true}})
    h('h4', {
      text,
    })
  })
}

Changelog

effector-react 20.0.3

• Allow as const typescript assertion for useStoreMap keys. It helps us to infer type for fn arguments

import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'

type User = {
  username: string
  email: string
  bio: string
}

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: '[e-mail]',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: '[e-mail]',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: '[e-mail]',
    bio: '- - -',
  },
])

export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
  const value = useStoreMap({
    store: $users,
    keys: [id, field] as const,
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

In typescript versions below 3.4, you can still use an explicit type assertion

import React from 'react'
import {value createStore} from 'effector'
import {value useStoreMap} from 'effector-react'

type User = {
  username: string
  email: string
  bio: string
}

const $users = createStore<User[]>([
  {
    username: 'alice',
    email: '[e-mail]',
    bio: '. . .',
  },
  {
    username: 'bob',
    email: '[e-mail]',
    bio: '~/ - /~',
  },
  {
    username: 'carol',
    email: '[e-mail]',
    bio: '- - -',
  },
])

export const UserProperty = ({id, field}: {id: number; field: keyof User}) => {
  const value = useStoreMap({
    store: $users,
    keys: [id, field] as [number, keyof User],
    fn: (users, [id, field]) => users[id][field] || null,
  })

  return <div>{value}</div>
}

as const in typescript docs