Merge pull request #9 from andrejewski/bare-init

React init aligns with runtime init

README.md

@@ -22,9 +22,10 @@ npm install raj
 
 #### Integrations
 - `raj/react`: React bindings
-  - `program(Component, {init, update, view})`: create a React program
+  - `program(Component, props => ({init, update, view}))`: create a React program
     - `Component`: a React Component class
-    - `init(props)`: return the initial state and optional effect
+    - `props`: the React component `props`
+    - `init`: the initial state and optional effect
     - `update(message, state)`: return the new state and optional effect
     - `view(state, dispatch)`: return the React view
 
@@ -37,7 +38,7 @@ The view and any side-effects communicate by dispatching messages.
 
 Building any app follows the same steps:
 
-1. Define your data model with `init(flags)`
+1. Define your data model with `init`
 1. Define your messages with something like [`tagmeme`](https://github.com/andrejewski/tagmeme)
 1. Define your behaviors with `update(message, state)`
 1. Define your effects as functions which accept a dispatch function

examples/make-n-model.js

@@ -1,18 +1,16 @@
 import React from 'react'
 import react from 'raj/react'
-import message from 'tagmeme'
+import tag from 'tagmeme'
 
-export function init () {
-  return {
-    makeId: null,
-    isLoading: false,
-    models: []
-  }
-}
+export const init = [{
+  makeId: null,
+  isLoading: false,
+  models: []
+}]
 
-export const SetMake = message()
-export const ReceiveModels = message()
-export const Msg = message.union([
+export const SetMake = tag()
+export const ReceiveModels = tag()
+export const Msg = tag.union([
   SetMake,
   ReceiveModels
 ])
@@ -33,12 +31,12 @@ export function update (msg, state) {
   ])
 }
 
-export function loadModelsForMake (id, message) {
+export function loadModelsForMake (id, tag) {
   return function (dispatch) {
     window.fetch(`/models?id=${id}`)
       .then(res => res.json())
       .then(res => {
-        dispatch(message(res.models))
+        dispatch(tag(res.models))
       })
   }
 }
@@ -59,9 +57,9 @@ export function view (state, dispatch) {
 }
 
 export default function main () {
-  return react.program(React.Component, {
+  return react.program(React.Component, () => ({
     init,
     update,
     view
-  })
+  }))
 }

examples/search.js

@@ -1,20 +1,18 @@
 import React from 'react'
 import react from 'raj/react'
-import message from 'tagmeme'
+import tag from 'tagmeme'
 
-export function init () {
-  return [{
-    searchQuery: '',
-    searchResults: [],
-    isLoading: false,
-    error: null
-  }]
-}
+export const init = [{
+  searchQuery: '',
+  searchResults: [],
+  isLoading: false,
+  error: null
+}]
 
-export const ChangeQuery = message()
-export const ReceiveResults = message()
-export const ReceiveError = message()
-export const Search = message.union([
+export const ChangeQuery = tag()
+export const ReceiveResults = tag()
+export const ReceiveError = tag()
+export const Search = tag.union([
   ChangeQuery,
   ReceiveError,
   ReceiveResults
@@ -80,9 +78,9 @@ export function fetchResults (query) {
 }
 
 export function main () {
-  return react.program(React.Component, {
+  return react.program(React.Component, () => ({
     init,
     update,
     view
-  })
+  }))
 }

package.json

@@ -2,7 +2,7 @@
   "name": "raj",
   "description": "The best JavaScript framework",
   "version": "0.0.6",
-  "author": "Chris Andrejewski <christopher.andrejewski@gmail>",
+  "author": "Chris Andrejewski <christopher.andrejewski@gmail.com>",
   "bugs": {
     "url": "https://github.com/andrejewski/raj/issues"
   },
@@ -20,8 +20,8 @@
   "keywords": [
     "best",
     "framework",
-    "runtime",
-    "react"
+    "react",
+    "runtime"
   ],
   "license": "MIT",
   "main": "index.js",

react.js

@@ -1,12 +1,14 @@
 const {program} = require('./runtime')
 
-function reactProgram (Component, {init, update, view}) {
+function reactProgram (Component, createApp) {
   return class ReactProgram extends Component {
     constructor (props) {
       super(props)
       let initial = true
+      const {init, update, view} = createApp(props)
+      this._view = view
       program({
-        init: init(props),
+        init,
         update,
         view: (state, dispatch) => {
           this._dispatch = dispatch
@@ -21,7 +23,7 @@ function reactProgram (Component, {init, update, view}) {
     }
 
     render () {
-      return view(this.state.state, this._dispatch)
+      return this._view(this.state.state, this._dispatch)
     }
   }
 }

test/react.js

@@ -4,11 +4,11 @@ import {program} from '../react'
 import {shallow} from 'enzyme'
 
 test('program() should return a React component', t => {
-  const Program = program(React.Component, {
-    init: () => ['hello'],
+  const Program = program(React.Component, () => ({
+    init: ['hello'],
     update: (msg, state) => [state],
     view: state => React.createElement('p', null, state)
-  })
+  }))
 
   const wrapper = shallow(React.createElement(Program, null))
   const paragraph = wrapper.find('p')
@@ -17,14 +17,14 @@ test('program() should return a React component', t => {
 
 test('program() should update the React component', t => {
   let d
-  const Program = program(React.Component, {
-    init: () => ['hello'],
+  const Program = program(React.Component, () => ({
+    init: ['hello'],
     update: (msg, state) => [msg],
     view: (state, dispatch) => {
       d = dispatch
       return React.createElement('p', null, state)
     }
-  })
+  }))
 
   const wrapper = shallow(React.createElement(Program, null))
   {
@@ -42,13 +42,13 @@ test('program() should update the React component', t => {
 
 test('program() should init with component props', t => {
   const props = {foo: 'bar'}
-  const Program = program(React.Component, {
-    init: p => {
-      t.deepEqual(p, props)
-      return ['hello']
-    },
-    update: (msg, state) => [state],
-    view: state => React.createElement('p', null, state)
+  const Program = program(React.Component, p => {
+    t.deepEqual(p, props)
+    return {
+      init: ['hello'],
+      update: (msg, state) => [state],
+      view: state => React.createElement('p', null, state)
+    }
   })
 
   shallow(React.createElement(Program, props))