Add Javascript template code

Author: jvanbruegge

packages/cycle-scripts/template/config/javascript.js

@@ -2,16 +2,25 @@ module.exports = {
   xstream: {
     run: '@cycle/run',
     import: 'import xs from \'xstream\'',
-    stream: 'xs'
+    stream: 'xs',
+    fold: 'fold',
+    merge: 'xs.merge',
+    mapTo: 'mapTo'
   },
   rxjs: {
     run: '@cycle/rxjs-run',
     import: 'import Rx from \'rxjs/Rx\'',
-    stream: 'Rx.Observable'
+    stream: 'Rx.Observable',
+    fold: 'scan',
+    merge: 'Rx.Observable.merge',
+    mapTo: 'mapTo'
   },
   most: {
     run: '@cycle/most-run',
     import: 'import * as most from \'most\'',
-    stream: 'most'
+    stream: 'most',
+    fold: 'scan',
+    merge: 'most.merge',
+    mapTo: 'constant'
   }
 }

packages/cycle-scripts/template/src/javascript/app.jsx

@@ -1,12 +1,43 @@
 module.exports = replacements => `${replacements.import}
 
 export function App (sources) {
-  const vtree$ = ${replacements.stream}.of(
-    <div>My Awesome Cycle.js app</div>
-  )
+  const action$ = intent(sources.DOM)
+  const model$ = model(action$)
+  const vdom$ = view(model$)
+
   const sinks = {
-    DOM: vtree$
+    DOM: vdom$
   }
   return sinks
 }
+
+const initalState = { count: 0 }
+
+function intent(DOM) {
+  const add$ = DOM.select('.add').events('click')
+    .${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count + 1 }))
+
+  const subtract$ = DOM.select('.subtract').events('click')
+    .${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count - 1 }))
+
+  return ${replacements.merge}(add$, subtract$)
+}
+
+function model(action$) {
+  return action$
+    .${replacements.fold}((state, reducer) => reducer(state), initalState)
+}
+
+function view(state$) {
+  return state$
+    .map(s => s.count)
+    .map(count =>
+      <div>
+        <h2>My Awesome Cycle.js app</h2>
+        <span>{ 'Counter: ' + count }</span>
+        <button type='button' className='add'>Increase</button>
+        <button type='button' className='subtract'>Decrease</button>
+      </div>
+    )
+}
 `