Skip to content

Commit a561a0c

Browse files
jvanbrueggejvanbruegge
committed
Add Typescript template code
1 parent a04cb3c commit a561a0c

File tree

7 files changed

+88
-52
lines changed

7 files changed

+88
-52
lines changed

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ module.exports = function setup (appPath, appName, options) {
1616

1717
// STEP #1 - Create boilerplate files
1818
const flavorPath = path.join(appPath, 'node_modules', 'cycle-scripts')
19-
const templateStrings = require(path.join(flavorPath, 'template/config', language + '.js'))
19+
const commonStrings = require(path.join(flavorPath, 'template/config', 'common.js'))[streamLib]
20+
const languageStrings = require(path.join(flavorPath, 'template/config', language + '.js'))[streamLib]
21+
const templateStrings = Object.assign({}, commonStrings, languageStrings)
2022
const templatePath = path.join(flavorPath, 'template/src', language)
2123
// Create ./public directory
2224
fs.ensureDirSync(path.join(appPath, 'public'))
@@ -33,7 +35,7 @@ module.exports = function setup (appPath, appName, options) {
3335
files.forEach(file => {
3436
const targetPath = path.join(appPath, 'src', file)
3537
const template = require(path.join(templatePath, file))
36-
const targetContent = template(templateStrings[streamLib])
38+
const targetContent = template(templateStrings)
3739
fs.outputFile(targetPath, targetContent)
3840
})
3941
})

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
module.exports = {
2+
xstream: {
3+
run: '@cycle/run',
4+
import: 'import xs from \'xstream\'',
5+
stream: 'xs',
6+
fold: 'fold',
7+
merge: 'xs.merge',
8+
mapTo: 'mapTo'
9+
},
10+
rxjs: {
11+
run: '@cycle/rxjs-run',
12+
import: 'import Rx from \'rxjs/Rx\'',
13+
stream: 'Rx.Observable',
14+
fold: 'scan',
15+
merge: 'Rx.Observable.merge',
16+
mapTo: 'mapTo'
17+
},
18+
most: {
19+
run: '@cycle/most-run',
20+
import: 'import * as most from \'most\'',
21+
stream: 'most',
22+
fold: 'scan',
23+
merge: 'most.merge',
24+
mapTo: 'constant'
25+
}
26+
}

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

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,5 @@
11
module.exports = {
2-
xstream: {
3-
run: '@cycle/run',
4-
import: 'import xs from \'xstream\'',
5-
stream: 'xs',
6-
fold: 'fold',
7-
merge: 'xs.merge',
8-
mapTo: 'mapTo'
9-
},
10-
rxjs: {
11-
run: '@cycle/rxjs-run',
12-
import: 'import Rx from \'rxjs/Rx\'',
13-
stream: 'Rx.Observable',
14-
fold: 'scan',
15-
merge: 'Rx.Observable.merge',
16-
mapTo: 'mapTo'
17-
},
18-
most: {
19-
run: '@cycle/most-run',
20-
import: 'import * as most from \'most\'',
21-
stream: 'most',
22-
fold: 'scan',
23-
merge: 'most.merge',
24-
mapTo: 'constant'
25-
}
2+
xstream: {},
3+
rxjs: {},
4+
most: {}
265
}

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

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,15 @@
11
module.exports = {
22
xstream: {
3-
run: '@cycle/run',
4-
import: 'import xs from \'xstream\'',
5-
typeImport: 'import {Stream} from \'xstream\'',
6-
stream: 'xs',
3+
typeImport: 'import { Stream } from \'xstream\'',
74
streamType: 'Stream'
5+
86
},
97
rxjs: {
10-
run: '@cycle/rxjs-run',
11-
import: 'import Rx from \'rxjs/Rx\'',
12-
typeImport: 'import {Observable} from \'rxjs\'',
13-
stream: 'Rx.Observable',
8+
typeImport: 'import { Observable } from \'rxjs\'',
149
streamType: 'Observable'
1510
},
1611
most: {
17-
run: '@cycle/most-run',
18-
import: 'import * as most from \'most\'',
19-
typeImport: 'import {Stream} from \'most\'',
20-
stream: 'most',
12+
typeImport: 'import { Stream } from \'most\'',
2113
streamType: 'Stream'
2214
}
2315
}

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

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,50 @@
11
module.exports = replacements => `${replacements.import}
2-
import {Sources, Sinks} from './interfaces'
2+
${replacements.typeImport}
3+
import { DOMSource, VNode } from '@cycle/dom'
4+
import { Sources, Sinks, Reducer } from './interfaces'
35
4-
export function App(sources : Sources) : Sinks {
5-
const vtree$ = ${replacements.stream}.of(
6-
<div>My Awesome Cycle.js app</div>
7-
)
6+
export type AppState = {
7+
count : number;
8+
}
9+
export type AppReducer = (prevState : AppState) => AppState
10+
11+
export function App({ DOM } : Sources) : Sinks {
12+
const action$ : ${replacements.streamType}<AppReducer> = intent(DOM)
13+
const model$ : ${replacements.streamType}<AppState> = model(action$)
14+
const vdom$ : ${replacements.streamType}<VNode> = view(model$)
815
916
return {
10-
DOM: vtree$
17+
DOM: vdom$
1118
}
1219
}
20+
21+
const initalState : AppState = { count: 0 }
22+
23+
function intent(DOM : DOMSource) : ${replacements.streamType}<AppReducer> {
24+
const add$ = DOM.select('.add').events('click')
25+
.${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count + 1 }))
26+
27+
const subtract$ = DOM.select('.subtract').events('click')
28+
.${replacements.mapTo}(prevState => ({ ...prevState, count: prevState.count - 1 }))
29+
30+
return ${replacements.merge}(add$, subtract$)
31+
}
32+
33+
function model(action$ : ${replacements.streamType}<AppReducer>) : ${replacements.streamType}<AppState> {
34+
return action$
35+
.${replacements.fold}((state, reducer) => reducer(state), initalState)
36+
}
37+
38+
function view(state$ : ${replacements.streamType}<AppState>) : ${replacements.streamType}<VNode> {
39+
return state$
40+
.map(s => s.count)
41+
.map(count =>
42+
<div>
43+
<h2>My Awesome Cycle.js app</h2>
44+
<span>{ 'Counter: ' + count }</span>
45+
<button type='button' className='add'>Increase</button>
46+
<button type='button' className='subtract'>Decrease</button>
47+
</div>
48+
)
49+
}
1350
`

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
module.exports = replacements => `import {run} from '${replacements.run}'
2-
import {makeDOMDriver} from '@cycle/dom'
3-
import {Component} from './interfaces'
1+
module.exports = replacements => `import { run } from '${replacements.run}'
2+
import { makeDOMDriver } from '@cycle/dom'
3+
import { Component } from './interfaces'
44
5-
import {App} from './app'
5+
import { App } from './app'
66
77
const main : Component = App
88

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
module.exports = replacements => `${replacements.import}
2-
import {DOMSource, VNode} from '@cycle/dom'
2+
import { DOMSource, VNode } from '@cycle/dom'
33
44
export type Sources = {
5-
DOM : DOMSource;
5+
DOM : DOMSource
66
}
77
88
export type Sinks = {
9-
DOM : ${replacements.streamType}<VNode>;
9+
DOM? : ${replacements.streamType}<VNode>
1010
}
1111
12-
export type Component = (s : Sources) => Sinks;
12+
export type Component = (s : Sources) => Sinks
1313
`

0 commit comments

Comments
 (0)