Counter example

packages/cycle-scripts/scripts/init/setup.js

@@ -16,7 +16,9 @@ module.exports = function setup (appPath, appName, options) {
 
   // STEP #1 - Create boilerplate files
   const flavorPath = path.join(appPath, 'node_modules', 'cycle-scripts')
-  const templateStrings = require(path.join(flavorPath, 'template/config', language + '.js'))
+  const commonStrings = require(path.join(flavorPath, 'template/config', 'common.js'))[streamLib]
+  const languageStrings = require(path.join(flavorPath, 'template/config', language + '.js'))[streamLib]
+  const templateStrings = Object.assign({}, commonStrings, languageStrings)
   const templatePath = path.join(flavorPath, 'template/src', language)
   // Create ./public directory
   fs.ensureDirSync(path.join(appPath, 'public'))
@@ -33,7 +35,7 @@ module.exports = function setup (appPath, appName, options) {
     files.forEach(file => {
       const targetPath = path.join(appPath, 'src', file)
       const template = require(path.join(templatePath, file))
-      const targetContent = template(templateStrings[streamLib])
+      const targetContent = template(templateStrings)
       fs.outputFile(targetPath, targetContent)
     })
   })

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

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

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

@@ -1,17 +1,5 @@
 module.exports = {
-  xstream: {
-    run: '@cycle/run',
-    import: 'import xs from \'xstream\'',
-    stream: 'xs'
-  },
-  rxjs: {
-    run: '@cycle/rxjs-run',
-    import: 'import Rx from \'rxjs/Rx\'',
-    stream: 'Rx.Observable'
-  },
-  most: {
-    run: '@cycle/most-run',
-    import: 'import * as most from \'most\'',
-    stream: 'most'
-  }
+  xstream: {},
+  rxjs: {},
+  most: {}
 }

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

@@ -1,23 +1,15 @@
 module.exports = {
   xstream: {
-    run: '@cycle/run',
-    import: 'import xs from \'xstream\'',
-    typeImport: 'import {Stream} from \'xstream\'',
-    stream: 'xs',
+    typeImport: 'import { Stream } from \'xstream\'',
     streamType: 'Stream'
+
   },
   rxjs: {
-    run: '@cycle/rxjs-run',
-    import: 'import Rx from \'rxjs/Rx\'',
-    typeImport: 'import {Observable} from \'rxjs\'',
-    stream: 'Rx.Observable',
+    typeImport: 'import { Observable } from \'rxjs\'',
     streamType: 'Observable'
   },
   most: {
-    run: '@cycle/most-run',
-    import: 'import * as most from \'most\'',
-    typeImport: 'import {Stream} from \'most\'',
-    stream: 'most',
+    typeImport: 'import { Stream } from \'most\'',
     streamType: 'Stream'
   }
 }

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

@@ -1,12 +1,43 @@
 module.exports = replacements => `${replacements.import}
 
+const initalState = { count: 0 }
+
 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
 }
+
+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>
+    )
+}
 `

packages/cycle-scripts/template/src/typescript/app.tsx

@@ -1,13 +1,50 @@
 module.exports = replacements => `${replacements.import}
-import {Sources, Sinks} from './interfaces'
+${replacements.typeImport}
+import { DOMSource, VNode } from '@cycle/dom'
+import { Sources, Sinks } from './interfaces'
 
-export function App(sources : Sources) : Sinks {
-  const vtree$ = ${replacements.stream}.of(
-    <div>My Awesome Cycle.js app</div>
-  )
+export type AppState = {
+  count : number
+}
+export type AppReducer = (prevState : AppState) => AppState
+
+const initalState : AppState = { count: 0 }
+
+export function App({ DOM } : Sources) : Sinks {
+  const action$ : ${replacements.streamType}<AppReducer> = intent(DOM)
+  const model$ : ${replacements.streamType}<AppState> = model(action$)
+  const vdom$ : ${replacements.streamType}<VNode> = view(model$)
 
   return {
-    DOM: vtree$
+    DOM: vdom$
   }
 }
+
+function intent(DOM : DOMSource) : ${replacements.streamType}<AppReducer> {
+  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$ : ${replacements.streamType}<AppReducer>) : ${replacements.streamType}<AppState> {
+  return action$
+    .${replacements.fold}((state, reducer) => reducer(state), initalState)
+}
+
+function view(state$ : ${replacements.streamType}<AppState>) : ${replacements.streamType}<VNode> {
+  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>
+    )
+}
 `

packages/cycle-scripts/template/src/typescript/index.ts

@@ -1,8 +1,8 @@
-module.exports = replacements => `import {run} from '${replacements.run}'
-import {makeDOMDriver} from '@cycle/dom'
-import {Component} from './interfaces'
+module.exports = replacements => `import { run } from '${replacements.run}'
+import { makeDOMDriver } from '@cycle/dom'
+import { Component } from './interfaces'
 
-import {App} from './app'
+import { App } from './app'
 
 const main : Component = App
 

packages/cycle-scripts/template/src/typescript/interfaces.ts

@@ -1,13 +1,13 @@
 module.exports = replacements => `${replacements.import}
-import {DOMSource, VNode} from '@cycle/dom'
+import { DOMSource, VNode } from '@cycle/dom'
 
 export type Sources = {
-  DOM : DOMSource;
+  DOM : DOMSource
 }
 
 export type Sinks = {
-  DOM : ${replacements.streamType}<VNode>;
+  DOM? : ${replacements.streamType}<VNode>
 }
 
-export type Component = (s : Sources) => Sinks;
+export type Component = (s : Sources) => Sinks
 `