sobx

s object/pojo observables for surplus

App.tsx

import * as Surplus from 'surplus'; Surplus;
import { $$, observable } from 'sobx'

export interface Greeting {
    msg: string
}
export const GreetingV = ({pojo}: {pojo: Greeting}) =>
<div>
  <b>{$$(pojo.msg)}</b>
</div>

export class App {
    p = {
        disabled: false,
        msg: 'hey',
        msgs: ['hi'],
        greeting: {
            msg: 'hello' 
        } as Greeting,
        greetings: [
            observable({ msg: 'ciao' })
        ] as Greeting[]
    }
    
    constructor() {
        observable(this.p, {})
    }
    
    append(suffix: string) {
        let p = this.p
        p.msg += suffix
        p.greeting.msg += suffix
        p.msgs.push(suffix)
        p.greetings.push(observable({ msg: suffix }))
        p.disabled = !p.disabled
    }
}
export const AppV = (self: App) => {
    let p = self.p; p = p['$'];
    return (
<div>
  <button type="button" onClick={() => self.append('!')}>!</button>
  <div>{$$(p.msg)}</div>
  <GreetingV pojo={p.greeting} />
  {p.msgs.map(msg =>
    <button type="button" disabled={$$(p.disabled)}>
      {msg}
    </button>
  )}
  {p.greetings.map(greeting => <GreetingV pojo={greeting} />)}
</div>
)}

main.ts

import S from 's-js'
import { App, AppV } from './App'

const view = S.root(() => AppV(new App()))
document.body.appendChild(view)