From a04cb3c7e553233a0e4c65a8612adf69455fd5d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= Date: Sat, 15 Apr 2017 16:15:55 +0200 Subject: [PATCH 1/3] Add Javascript template code --- .../template/config/javascript.js | 15 +++++-- .../template/src/javascript/app.jsx | 39 +++++++++++++++++-- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/packages/cycle-scripts/template/config/javascript.js b/packages/cycle-scripts/template/config/javascript.js index 59aa083..66de7e8 100644 --- a/packages/cycle-scripts/template/config/javascript.js +++ b/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' } } diff --git a/packages/cycle-scripts/template/src/javascript/app.jsx b/packages/cycle-scripts/template/src/javascript/app.jsx index 6e6746c..e754c87 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} 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 } + +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 => +
+

My Awesome Cycle.js app

+ { 'Counter: ' + count } + + +
+ ) +} ` From a561a0cd84b44d5d3c2d7c87fbdf940a58609201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= Date: Sat, 15 Apr 2017 16:40:10 +0200 Subject: [PATCH 2/3] Add Typescript template code --- packages/cycle-scripts/scripts/init/setup.js | 6 ++- .../cycle-scripts/template/config/common.js | 26 ++++++++++ .../template/config/javascript.js | 27 ++-------- .../template/config/typescript.js | 16 ++---- .../template/src/typescript/app.tsx | 49 ++++++++++++++++--- .../template/src/typescript/index.ts | 8 +-- .../template/src/typescript/interfaces.ts | 8 +-- 7 files changed, 88 insertions(+), 52 deletions(-) create mode 100644 packages/cycle-scripts/template/config/common.js 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 66de7e8..e4647bb 100644 --- a/packages/cycle-scripts/template/config/javascript.js +++ b/packages/cycle-scripts/template/config/javascript.js @@ -1,26 +1,5 @@ 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' - } + 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/typescript/app.tsx b/packages/cycle-scripts/template/src/typescript/app.tsx index 32ab431..fb7c76f 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, Reducer } 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 + +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$ } } + +const initalState : AppState = { count: 0 } + +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 ` From 3488825d5615d6ff0bd6d3d04812339d2712de50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20van=20Br=C3=BCgge?= Date: Sat, 15 Apr 2017 16:46:20 +0200 Subject: [PATCH 3/3] Fix Reducer type import --- packages/cycle-scripts/template/src/javascript/app.jsx | 4 ++-- packages/cycle-scripts/template/src/typescript/app.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/cycle-scripts/template/src/javascript/app.jsx b/packages/cycle-scripts/template/src/javascript/app.jsx index e754c87..bb29b22 100644 --- a/packages/cycle-scripts/template/src/javascript/app.jsx +++ b/packages/cycle-scripts/template/src/javascript/app.jsx @@ -1,5 +1,7 @@ module.exports = replacements => `${replacements.import} +const initalState = { count: 0 } + export function App (sources) { const action$ = intent(sources.DOM) const model$ = model(action$) @@ -11,8 +13,6 @@ export function App (sources) { return sinks } -const initalState = { count: 0 } - function intent(DOM) { const add$ = DOM.select('.add').events('click') .${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count + 1 })) diff --git a/packages/cycle-scripts/template/src/typescript/app.tsx b/packages/cycle-scripts/template/src/typescript/app.tsx index fb7c76f..4f1313e 100644 --- a/packages/cycle-scripts/template/src/typescript/app.tsx +++ b/packages/cycle-scripts/template/src/typescript/app.tsx @@ -1,13 +1,15 @@ module.exports = replacements => `${replacements.import} ${replacements.typeImport} import { DOMSource, VNode } from '@cycle/dom' -import { Sources, Sinks, Reducer } from './interfaces' +import { Sources, Sinks } from './interfaces' export type AppState = { - count : number; + 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$) @@ -18,8 +20,6 @@ export function App({ DOM } : Sources) : Sinks { } } -const initalState : AppState = { count: 0 } - function intent(DOM : DOMSource) : ${replacements.streamType} { const add$ = DOM.select('.add').events('click') .${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count + 1 }))