{
- return state$.map(({ text }) => (
-
-
My Awesome Cycle.js app - Page 2
-
-
-
-
- ));
+function speech(speech$: Stream, state$: Stream): Stream {
+ return speech$
+ .compose(sampleCombine(state$))
+ .map(([_, s]: [any, State]) => s.text);
}
diff --git a/template/src/drivers.ts b/template/src/drivers.ts
index b21cfe4..5a4beff 100644
--- a/template/src/drivers.ts
+++ b/template/src/drivers.ts
@@ -1,49 +1,20 @@
-import xs, { Stream } from 'xstream';
-import { restartable } from 'cycle-restart';
import { makeDOMDriver } from '@cycle/dom';
-import { makeHTTPDriver } from '@cycle/http';
import { makeHistoryDriver } from '@cycle/history';
-import { timeDriver } from '@cycle/time';
-import { routerify, RouteMatcher } from 'cyclic-router';
+import { routerify } from 'cyclic-router';
import onionify from 'cycle-onionify';
-import storageify from 'cycle-storageify';
import switchPath from 'switch-path';
-import storageDriver from '@cycle/storage';
import { Component } from './interfaces';
import speechDriver from './drivers/speech';
-export type DriverThunk = Readonly<[string, () => any]> & [string, () => any]; // work around readonly
-export type DriverThunkMapper = (t: DriverThunk) => DriverThunk;
+export const drivers = {
+ DOM: makeDOMDriver('#app'),
+ history: makeHistoryDriver(),
+ speech: speechDriver
+};
-// Set of Drivers used in this App
-const driverThunks: DriverThunk[] = [
- ['DOM', () => makeDOMDriver('#app')],
- ['HTTP', () => makeHTTPDriver()],
- ['time', () => timeDriver],
- ['history', () => makeHistoryDriver()],
- ['storage', () => storageDriver],
- ['speech', () => speechDriver]
-];
+export const driverNames = Object.keys(drivers).concat(['onion', 'router']);
-export const buildDrivers = (fn: DriverThunkMapper) =>
- driverThunks
- .map(fn)
- .map(([n, t]: DriverThunk) => ({ [n]: t }))
- .reduce((a, c) => Object.assign(a, c), {});
-
-export const driverNames = driverThunks
- .map(([n, t]) => n)
- .concat(['onion', 'router']);
-
-export function wrapMain(main: Component): Component {
- return routerify(
- onionify(
- storageify(main as any, {
- key: 'cycle-spa-state',
- debounce: 100 // wait for 100ms without state change before writing to localStorage
- })
- ),
- switchPath
- ) as any;
+export function wrapMain(main: Component): Component {
+ return routerify(onionify(main as any), switchPath) as any;
}
diff --git a/template/src/index.ts b/template/src/index.ts
index 9b3c23d..9edeeed 100644
--- a/template/src/index.ts
+++ b/template/src/index.ts
@@ -1,37 +1,8 @@
-import { setup, run } from '@cycle/run';
-import isolate from '@cycle/isolate';
-/// #if DEVELOPMENT
-import { restartable, rerunner } from 'cycle-restart';
-/// #endif
-
-import { buildDrivers, wrapMain } from './drivers';
+import { run } from '@cycle/run';
+import { drivers, wrapMain } from './drivers';
import { Component } from './interfaces';
import { App } from './components/app';
-const main: Component = wrapMain(App);
-
-/// #if PRODUCTION
-run(main as any, buildDrivers(([k, t]) => [k, t()]));
-
-/// #else
-const mkDrivers = () =>
- buildDrivers(([k, t]) => {
- if (k === 'DOM') {
- return [k, restartable(t(), { pauseSinksWhileReplaying: false })];
- }
- if (k === 'time' || k === 'router') {
- return [k, t()];
- }
- return [k, restartable(t())];
- });
-const rerun = rerunner(setup, mkDrivers, isolate);
-rerun(main as any);
-
-if (module.hot) {
- module.hot.accept('./components/app', () => {
- const newApp = (require('./components/app') as any).App;
+const main: Component = wrapMain(App);
- rerun(wrapMain(newApp));
- });
-}
-/// #endif
+run(main as any, drivers);
diff --git a/template/src/interfaces.ts b/template/src/interfaces.ts
index 82549e8..169926c 100644
--- a/template/src/interfaces.ts
+++ b/template/src/interfaces.ts
@@ -1,24 +1,21 @@
import { Stream } from 'xstream';
import { DOMSource, VNode } from '@cycle/dom';
-import { StorageSource, StorageRequest } from '@cycle/storage';
-import { HTTPSource, RequestOptions } from '@cycle/http';
-import { TimeSource } from '@cycle/time';
import { RouterSource, HistoryAction } from 'cyclic-router';
+import { StateSource, Reducer } from 'cycle-onionify';
-export type Component = (s: BaseSources) => BaseSinks;
+export { Reducer } from 'cycle-onionify';
-export interface BaseSources {
+export type Component = (s: Sources) => Sinks;
+
+export interface Sources {
DOM: DOMSource;
- HTTP: HTTPSource;
- time: TimeSource;
router: RouterSource;
- storage: StorageSource;
+ onion: StateSource;
}
-export interface BaseSinks {
+export interface Sinks {
DOM?: Stream;
- HTTP?: Stream;
router?: Stream;
- storage?: Stream;
speech?: Stream;
+ onion?: Stream>;
}
diff --git a/template/src/routes.ts b/template/src/routes.ts
deleted file mode 100644
index bc7c11b..0000000
--- a/template/src/routes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component } from './interfaces';
-import { Counter } from './components/counter';
-import { Speaker } from './components/speaker';
-
-export interface RouteValue {
- component: Component;
- scope: string;
-}
-export interface Routes {
- readonly [index: string]: RouteValue;
-}
-
-export const routes: Routes = {
- '/': { component: Counter, scope: 'counter' },
- '/p2': { component: Speaker, scope: 'speaker' }
-};
-
-export const initialRoute = '/';
diff --git a/template/tslint.json b/template/tslint.json
index 493b87c..fd319a4 100644
--- a/template/tslint.json
+++ b/template/tslint.json
@@ -13,7 +13,6 @@
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
- "no-null-keyword": true,
"no-shadowed-variable": true,
"no-var-keyword": true,
"switch-default": true,