Merge pull request #102 from cyclejs-community/typescript

Typescript

packages/cycle-scripts/configs/dependencies.js

@@ -0,0 +1,23 @@
+module.exports = {
+  basics: [
+    '@cycle/[email protected]'
+  ],
+  language: {
+    javascript: [],
+    typescript: []
+  },
+  streamLib: {
+    xstream: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ],
+    rxjs: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ],
+    most: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ]
+  }
+}

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

@@ -5,7 +5,7 @@ const path = require('path')
 const chalk = require('chalk')
 const spawn = require('cross-spawn')
 
-const flavorConfig = require('../../configs/flavor')
+const dependencies = require('../../configs/dependencies')
 const success = require('./success')
 
 module.exports = function setup (appPath, appName, options) {
@@ -16,7 +16,7 @@ module.exports = function setup (appPath, appName, options) {
 
   // STEP #1 - Create boilerplate files
   const flavorPath = path.join(appPath, 'node_modules', 'cycle-scripts')
-  const templateStrings = flavorConfig.replacements
+  const templateStrings = require(path.join(flavorPath, 'template/config', language + '.js'))
   const templatePath = path.join(flavorPath, 'template/src', language)
   // Create ./public directory
   fs.ensureDirSync(path.join(appPath, 'public'))
@@ -69,12 +69,12 @@ module.exports = function setup (appPath, appName, options) {
   // Gather together all the dependencies needed for the flavor
   // Taking into consideration user choices for language and stream library
   // All the dependency locks and configurations can be found in /configs/flavor.js
-  const basicDependencies = flavorConfig.dependencies.basics
-  const languageDependencies = flavorConfig.dependencies.language[language]
-  const streamLibDependencies = flavorConfig.dependencies.streamLib[streamLib]
+  const basicDependencies = dependencies.basics
+  const streamLibDependencies = dependencies.streamLib[streamLib]
+  const languageDependencies = dependencies.language[language]
   const dependenciesToInstall = basicDependencies
-    .concat(languageDependencies)
     .concat(streamLibDependencies)
+    .concat(languageDependencies)
   const dependecyList = dependenciesToInstall
     .slice(0, (dependenciesToInstall.length - 1))
     .join(', ')

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

@@ -0,0 +1,17 @@
+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'
+  }
+}

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

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

packages/cycle-scripts/template/src/typescript/app.test.ts

@@ -0,0 +1,8 @@
+module.exports = replacements => `// import assert from 'assert'
+
+// describe('App', function () {
+//   it('should test something', function () {
+//     // TODO: Add your tests here
+//   })
+// })
+`

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

@@ -0,0 +1,13 @@
+module.exports = replacements => `${replacements.import}
+import {Sources, Sinks} from './interfaces'
+
+export function App(sources : Sources) : Sinks {
+  const vtree$ = ${replacements.stream}.of(
+    <div>My Awesome Cycle.js app</div>
+  )
+
+  return {
+    DOM: vtree$
+  }
+}
+`

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

@@ -0,0 +1,14 @@
+module.exports = replacements => `import {run} from '${replacements.run}'
+import {makeDOMDriver} from '@cycle/dom'
+import {Component} from './interfaces'
+
+import {App} from './app'
+
+const main : Component = App
+
+const drivers = {
+  DOM: makeDOMDriver('#root')
+}
+
+run(main, drivers)
+`

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

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