diff --git a/packages/cycle-scripts/scripts/init/setup.js b/packages/cycle-scripts/scripts/init/setup.js index b0d7fb8..d6fc83d 100644 --- a/packages/cycle-scripts/scripts/init/setup.js +++ b/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) }) }) diff --git a/packages/cycle-scripts/template/config/common.js b/packages/cycle-scripts/template/config/common.js new file mode 100644 index 0000000..66de7e8 --- /dev/null +++ b/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' + } +} diff --git a/packages/cycle-scripts/template/config/javascript.js b/packages/cycle-scripts/template/config/javascript.js index 59aa083..e4647bb 100644 --- a/packages/cycle-scripts/template/config/javascript.js +++ b/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: {} } diff --git a/packages/cycle-scripts/template/config/typescript.js b/packages/cycle-scripts/template/config/typescript.js index cf5a995..39a6a31 100644 --- a/packages/cycle-scripts/template/config/typescript.js +++ b/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' } } diff --git a/packages/cycle-scripts/template/src/javascript/app.jsx b/packages/cycle-scripts/template/src/javascript/app.jsx index 6e6746c..bb29b22 100644 --- a/packages/cycle-scripts/template/src/javascript/app.jsx +++ b/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( -
My Awesome Cycle.js app
- ) + 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 => +
+

My Awesome Cycle.js app

+ { 'Counter: ' + count } + + +
+ ) +} ` diff --git a/packages/cycle-scripts/template/src/typescript/app.tsx b/packages/cycle-scripts/template/src/typescript/app.tsx index 32ab431..4f1313e 100644 --- a/packages/cycle-scripts/template/src/typescript/app.tsx +++ b/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( -
My Awesome Cycle.js app
- ) +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} = intent(DOM) + const model$ : ${replacements.streamType} = model(action$) + const vdom$ : ${replacements.streamType} = view(model$) return { - DOM: vtree$ + DOM: vdom$ } } + +function intent(DOM : DOMSource) : ${replacements.streamType} { + 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}) : ${replacements.streamType} { + return action$ + .${replacements.fold}((state, reducer) => reducer(state), initalState) +} + +function view(state$ : ${replacements.streamType}) : ${replacements.streamType} { + return state$ + .map(s => s.count) + .map(count => +
+

My Awesome Cycle.js app

+ { 'Counter: ' + count } + + +
+ ) +} ` diff --git a/packages/cycle-scripts/template/src/typescript/index.ts b/packages/cycle-scripts/template/src/typescript/index.ts index 5765d29..0cd051b 100644 --- a/packages/cycle-scripts/template/src/typescript/index.ts +++ b/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 diff --git a/packages/cycle-scripts/template/src/typescript/interfaces.ts b/packages/cycle-scripts/template/src/typescript/interfaces.ts index bb30391..e9ab101 100644 --- a/packages/cycle-scripts/template/src/typescript/interfaces.ts +++ b/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}; + DOM? : ${replacements.streamType} } -export type Component = (s : Sources) => Sinks; +export type Component = (s : Sources) => Sinks `