Typescript

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

@@ -5,7 +5,6 @@ const path = require('path')
 const chalk = require('chalk')
 const spawn = require('cross-spawn')
 
-const flavorConfig = require('../../configs/flavor')
 const success = require('./success')
 
 module.exports = function setup (appPath, appName, options) {
@@ -16,7 +15,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, 'flavor.js')).replacements
   const templatePath = path.join(flavorPath, 'template/src', language)
   // Create ./public directory
   fs.ensureDirSync(path.join(appPath, 'public'))
@@ -70,10 +69,8 @@ module.exports = function setup (appPath, appName, options) {
   // 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 dependenciesToInstall = basicDependencies
-    .concat(languageDependencies)
     .concat(streamLibDependencies)
   const dependecyList = dependenciesToInstall
     .slice(0, (dependenciesToInstall.length - 1))

packages/cycle-scripts/configs/flavor.js → packages/cycle-scripts/template/config/JavaScript/flavor.js

@@ -2,10 +2,6 @@ const dependencies = {
   basics: [
     '@cycle/[email protected]'
   ],
-  language: {
-    'javascript': [],
-    'typescript': []
-  },
   streamLib: {
     xstream: [
       '@cycle/[email protected]',

packages/cycle-scripts/template/config/Typescript/flavor.js

@@ -0,0 +1,48 @@
+const dependencies = {
+  basics: [
+    '@cycle/[email protected]'
+  ],
+  streamLib: {
+    xstream: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ],
+    rxjs: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ],
+    most: [
+      '@cycle/[email protected]',
+      '[email protected]'
+    ]
+  }
+}
+
+const replacements = {
+  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'
+  }
+}
+
+module.exports = {
+  dependencies,
+  replacements
+}

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;
+`