add and make prettier formatting

Author: wclr

package.json

@@ -18,6 +18,11 @@
   "main": "lib/cjs/index.js",
   "typings": "lib/cjs/index.d.ts",
   "types": "lib/cjs/index.d.ts",
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "bracketSpacing": false
+  },
   "peerDependencies": {
     "@cycle/run": "5.x.x",
     "react": "16.x.x",
@@ -30,6 +35,7 @@
     "@types/node": "^10.5.2",
     "@types/react": "16.9.49",
     "mocha": "^6.2.0",
+    "prettier": "^2.1.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-test-renderer": "16.13.1",
@@ -42,10 +48,11 @@
     "access": "public"
   },
   "scripts": {
-    "prepublishOnly": "npm run compile",
+    "format": "prettier --write ./{src,test}/**/*.{ts,tsx,js}",
     "compile": "npm run compile-cjs && npm run compile-es6",
     "compile-cjs": "tsc --module commonjs --outDir ./lib/cjs",
     "compile-es6": "echo 'TODO' : tsc --module es6 --outDir ./lib/es6",
-    "test": "$(npm bin)/mocha test/*.ts --require ts-node/register --recursive"
+    "prepublishOnly": "npm run compile",
+    "test": "mocha test/*.ts --require ts-node/register --recursive"
   }
 }

src/ReactSource.ts

@@ -15,7 +15,7 @@ export class ReactSource<P = any> {
   constructor(
     scope: Scope = new Scope(),
     selector: string | symbol | null = null,
-    props$: MemoryStream<P> = xs.createWithMemory<P>(),
+    props$: MemoryStream<P> = xs.createWithMemory<P>()
   ) {
     this._scope = scope;
     this._selector = selector;
@@ -48,8 +48,8 @@ export class ReactSource<P = any> {
 
   public isolateSink(sink: Sink, scopeId: string): Sink {
     const isolation = this.getChildScope(scopeId);
-    return sink.map(elem =>
-      createElement(ScopeContext.Provider, {value: isolation}, elem),
+    return sink.map((elem) =>
+      createElement(ScopeContext.Provider, {value: isolation}, elem)
     );
   }
 

src/convert.ts

@@ -20,7 +20,7 @@ type State = {
 };
 
 export function makeCycleReactComponent<P = any>(
-  run: RunOnDidMount,
+  run: RunOnDidMount
 ): ComponentType<P> {
   return class CycleReactComponent extends PureComponent<P, State> {
     constructor(props: P) {
@@ -49,10 +49,10 @@ export function makeCycleReactComponent<P = any>(
         const handlerName = `on${name[0].toUpperCase()}${name.slice(1)}`;
         this._subs.push(
           events[name].subscribe({
-            next: x => {
+            next: (x) => {
               if (this.props[handlerName]) this.props[handlerName](x);
             },
-          }),
+          })
         );
       }
     }
@@ -63,7 +63,7 @@ export function makeCycleReactComponent<P = any>(
       return createElement(
         ScopeContext.Provider,
         {value: source._scope},
-        createElement(StreamRenderer, {stream: sink}),
+        createElement(StreamRenderer, {stream: sink})
       );
     }
 
@@ -89,7 +89,7 @@ export function makeComponent<
 >(
   main: MatchingMain<D, M>,
   drivers: MatchingDrivers<D, M> = null as any,
-  channel: string = 'react',
+  channel: string = 'react'
 ): ComponentType<P> {
   if (drivers) {
     return makeCycleReactComponent<P>(() => {

src/h.ts

@@ -19,7 +19,7 @@ type Children = string | Array<ReactNode>;
 function createElementSpreading<P = any>(
   type: ElementType<P> | keyof ReactHTML,
   props: PropsLike<P> | null,
-  children: Children,
+  children: Children
 ): ReactElement<P> {
   if (typeof children === 'string') {
     return createElement(type, props, children);
@@ -30,7 +30,7 @@ function createElementSpreading<P = any>(
 
 function hyperscriptProps<P = any>(
   type: ElementType<P> | keyof ReactHTML,
-  props: PropsLike<P>,
+  props: PropsLike<P>
 ): ReactElement<P> {
   if (!props.sel) {
     return createElement(type, props);
@@ -41,15 +41,15 @@ function hyperscriptProps<P = any>(
 
 function hyperscriptChildren<P = any>(
   type: ElementType<P> | keyof ReactHTML,
-  children: Children,
+  children: Children
 ): ReactElement<P> {
   return createElementSpreading(type, null, children);
 }
 
 function hyperscriptPropsChildren<P = any>(
   type: ElementType<P> | keyof ReactHTML,
   props: PropsLike<P>,
-  children: Children,
+  children: Children
 ): ReactElement<P> {
   if (!props.sel) {
     return createElementSpreading(type, props, children);
@@ -61,7 +61,7 @@ function hyperscriptPropsChildren<P = any>(
 export function h<P = any>(
   type: ElementType<P> | keyof ReactHTML,
   a?: PropsLike<P> | Children,
-  b?: Children,
+  b?: Children
 ): ReactElement<P> {
   if (a === undefined && b === undefined) {
     return createElement(type, null);

src/incorporate.ts

@@ -16,9 +16,9 @@ export function incorporate(type: any) {
             targetRef: ref,
             target: type,
             scope: scope,
-          }),
-        ),
-      ),
+          })
+        )
+      )
     );
   }
   return wrapperComponents.get(type) as React.ComponentType<any>;

test/api.ts

@@ -16,8 +16,8 @@ class Findable extends PureComponent<any, any> {
   }
 }
 
-describe('API', function() {
-  it('makeCycleReactComponent', function(done) {
+describe('API', function () {
+  it('makeCycleReactComponent', function (done) {
     function main(sources: {react: ReactSource}) {
       return {
         react: xs
@@ -26,7 +26,7 @@ describe('API', function() {
           .map(() =>
             h(Findable, {sel: 'ya'}, [
               h('div', {}, [h('h1', {}, 'Hello world')]),
-            ]),
+            ])
           ),
       };
     }
@@ -47,7 +47,7 @@ describe('API', function() {
     }, 50);
   });
 
-  it('makeComponent from main, drivers, and channel', function(done) {
+  it('makeComponent from main, drivers, and channel', function (done) {
     function main(sources: {foobar: ReactSource}) {
       return {
         foobar: xs
@@ -56,7 +56,7 @@ describe('API', function() {
           .map(() =>
             h(Findable, {sel: 'ya'}, [
               h('div', {}, [h('h1', {}, 'Hello world')]),
-            ]),
+            ])
           ),
       };
     }
@@ -73,7 +73,7 @@ describe('API', function() {
     }, 50);
   });
 
-  it('makeComponent from main (no drivers, no channel)', function(done) {
+  it('makeComponent from main (no drivers, no channel)', function (done) {
     function main(sources: {react: ReactSource}) {
       return {
         react: xs
@@ -82,7 +82,7 @@ describe('API', function() {
           .map(() =>
             h(Findable, {sel: 'ya'}, [
               h('div', {}, [h('h1', {}, 'Hello world')]),
-            ]),
+            ])
           ),
       };
     }

test/conversion.ts

@@ -17,13 +17,13 @@ class Touchable extends PureComponent<any, any> {
   }
 }
 
-describe('Conversion', function() {
-  it('converts an MVI Cycle app into a React component', done => {
+describe('Conversion', function () {
+  it('converts an MVI Cycle app into a React component', (done) => {
     function main(sources: {react: ReactSource}) {
       const inc$ = sources.react.select('button').events('press');
       const count$ = inc$.fold((acc: number, x: any) => acc + 1, 0);
       const vdom$ = count$.map((i: number) =>
-        h(Touchable, {sel: 'button'}, [h('div', [h('h1', {}, '' + i)])]),
+        h(Touchable, {sel: 'button'}, [h('div', [h('h1', {}, '' + i)])])
       );
       return {react: vdom$};
     }
@@ -52,13 +52,13 @@ describe('Conversion', function() {
     setTimeout(check, 150);
   });
 
-  it('allows Symbol selectors', done => {
+  it('allows Symbol selectors', (done) => {
     function main(sources: {react: ReactSource}) {
       const inc = Symbol();
       const inc$ = sources.react.select(inc).events('press');
       const count$ = inc$.fold((acc: number, x: any) => acc + 1, 0);
       const vdom$ = count$.map((i: number) =>
-        h(Touchable, {sel: inc}, [h('div', [h('h1', {}, '' + i)])]),
+        h(Touchable, {sel: inc}, [h('div', [h('h1', {}, '' + i)])])
       );
       return {react: vdom$};
     }
@@ -87,10 +87,10 @@ describe('Conversion', function() {
     setTimeout(check, 150);
   });
 
-  it('output React component routes props to sources.react.props()', done => {
+  it('output React component routes props to sources.react.props()', (done) => {
     function main(sources: {react: ReactSource}) {
       sources.react.props().addListener({
-        next: props => {
+        next: (props) => {
           assert.strictEqual(props.name, 'Alice');
           assert.strictEqual(props.age, 30);
           done();
@@ -99,7 +99,7 @@ describe('Conversion', function() {
 
       return {
         react: xs.of(
-          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])]),
+          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])])
         ),
       };
     }
@@ -112,16 +112,13 @@ describe('Conversion', function() {
     renderer.create(createElement(RootComponent, {name: 'Alice', age: 30}));
   });
 
-  it('output React component routes other sinks to handlers in props', done => {
+  it('output React component routes other sinks to handlers in props', (done) => {
     function main(sources: {react: ReactSource}) {
       return {
         react: xs.of(
-          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])]),
+          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])])
         ),
-        something: xs
-          .periodic(200)
-          .mapTo('yellow')
-          .take(1),
+        something: xs.periodic(200).mapTo('yellow').take(1),
       };
     }
 
@@ -133,22 +130,22 @@ describe('Conversion', function() {
     });
     renderer.create(
       createElement(RootComponent, {
-        onSomething: x => {
+        onSomething: (x) => {
           assert.strictEqual(x, 'yellow');
           done();
         },
-      }),
+      })
     );
   });
 
-  it('sources.react.props() evolves over time as new props come in', done => {
+  it('sources.react.props() evolves over time as new props come in', (done) => {
     function main(sources: {react: ReactSource}) {
       let first = false;
       sources.react
         .props()
         .take(1)
         .addListener({
-          next: props => {
+          next: (props) => {
             assert.strictEqual(props.name, 'Alice');
             assert.strictEqual(props.age, 30);
             first = true;
@@ -160,7 +157,7 @@ describe('Conversion', function() {
         .drop(1)
         .take(1)
         .addListener({
-          next: props => {
+          next: (props) => {
             assert.strictEqual(first, true);
             assert.strictEqual(props.name, 'alice');
             assert.strictEqual(props.age, 31);
@@ -170,7 +167,7 @@ describe('Conversion', function() {
 
       return {
         react: xs.of(
-          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])]),
+          h('section', [h('div', {}, [h('h1', {}, 'Hello world')])])
         ),
       };
     }
@@ -181,12 +178,12 @@ describe('Conversion', function() {
       return {source, sink};
     });
     const r = renderer.create(
-      createElement(RootComponent, {name: 'Alice', age: 30}),
+      createElement(RootComponent, {name: 'Alice', age: 30})
     );
     r.update(createElement(RootComponent, {name: 'alice', age: 31}));
   });
 
-  it('no synchronous race conditions with handler registration', done => {
+  it('no synchronous race conditions with handler registration', (done) => {
     function main(sources: {react: ReactSource}) {
       const inc$ = xs.create({
         start(listener: any) {
@@ -201,7 +198,7 @@ describe('Conversion', function() {
       });
       const count$ = inc$.fold((acc: number, x: any) => acc + 1, 0);
       const vdom$ = count$.map((i: number) =>
-        h(Touchable, {sel: 'button'}, [h('div', [h('h1', {}, '' + i)])]),
+        h(Touchable, {sel: 'button'}, [h('div', [h('h1', {}, '' + i)])])
       );
       return {react: vdom$};
     }