Rdi input

by zerkalica

HTML

<body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/urc@1/dist/urc.umd.js"></script>
<script crossorigin src="https://unpkg.com/lom_atom@4/dist/lom_atom.umd.js"></script>
<script crossorigin src="https://unpkg.com/reactive-di@7/dist/reactive-di.umd.js"></script>

<div id="mount">
    </div>
</body>

Babel + JSX

// @flow
const {mem, action, ReactAtom} = lom_atom
const {createReactWrapper, createCreateElement, Injector} = window['reactive-di']
const {render} = ReactDOM
const {createElement, Component} = React

/** @jsx lom_h */

// setup
function ErrorableView({error}: {error: Error}) {
    return <div>
        {!(error instanceof Error)
            ? <div>Loading...</div>
            : <div>
                <h3>Fatal error !</h3>
                <div>{error.message}</div>
                <pre>
                    {error.stack.toString()}
                </pre>
            </div>
        }
    </div>
}

  const lomCreateElement = createCreateElement(
      createReactWrapper(
          Component,
          ErrorableView,
          ReactAtom
      ),
      createElement
  )
  window['lom_h'] = lomCreateElement

let messageData = 'message'
function fetchMessage(data, isEmulateError) {
    if (data !== undefined) messageData = data
    return new Promise((resolve, reject) => {
        setTimeout(() => {
          if (!isEmulateError) {
            resolve(messageData)
          } else {
            reject(new Error('Fetch error'))
          }
        }, 300)
    })
}

class Store {
    @mem set message(next: string | Error) {
        throw fetchMessage(next, this.isEmulateError)
    }

    @mem get message() {
        throw fetchMessage(undefined, this.isEmulateError)
    }

    @mem get formMessage() {
      return this.message
    }
    set formMessage(next: string) {}

    @action setFormMessage({target}: Event) {
      this.formMessage = target.value
    }

    @action save() {
      this.message = this.formMessage
    }
    
    @action reset() {
      mem.cache(this.message)
    }
    
    isEmulateError = false
}

function HelloView(_, store) {
   return <div>
        <div>Server message: {store.message}</div>
        <div>Form message: {store.formMessage}</div>
        <input
            value={store.formMessage}
            onChange={store.setFormMessage}
       ...