Respect react event handler

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",
@@ -46,6 +52,6 @@
  "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"
+ "test": "mocha test/*.ts --require ts-node/register --recursive"
  }
 }

src/Incorporator.ts

@@ -32,7 +32,15 @@ export default class Incorporator extends PureComponent<Props, State> {
  const handlers = scope.getSelectorHandlers(this.selector);
  for (const evType of Object.keys(handlers)) {
  const onFoo = `on${evType[0].toUpperCase()}${evType.slice(1)}`;
- props[onFoo] = (ev: any) => handlers[evType]._n(ev);
+ const oldHandler =
+ typeof props[onFoo] === 'function' ? props[onFoo] : undefined;
+ props[onFoo] = (ev: any) => {
+ const res = handlers[evType]._n(ev);
+ if (oldHandler) {
+ return oldHandler(ev);
+ }
+ return res;
+ };
  }
  return props;
  }

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,56 @@ describe('Conversion', function() {
  setTimeout(check, 150);
  });
 
- it('output React component routes props to sources.react.props()', done => {
+ it('calls on handler set on react component', (done) => {
+ let onPressCalled = 0;
+ 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,
+ onPress: () => {
+ onPressCalled++;
+ },
+ },
+ [h('div', [h('h1', {}, '' + i)])]
+ )
+ );
+ return {react: vdom$};
+ }
+
+ let turn = 0;
+ const RootComponent = makeCycleReactComponent(() => {
+ const source = new ReactSource();
+ const sink = main({react: source}).react;
+ return {source, sink};
+ });
+ const r = renderer.create(createElement(RootComponent));
+ const root = r.root;
+ const check = () => {
+ const to = root.findByType(Touchable);
+ const view = to.props.children;
+ const text = view.props.children;
+ assert.strictEqual(text.props.children, `${turn}`);
+ to.instance.press();
+ turn++;
+ if (turn === 3) {
+ assert.strictEqual(onPressCalled, 3)
+ done();
+ }
+ };
+ setTimeout(check, 50);
+ setTimeout(check, 100);
+ setTimeout(check, 150);
+ });
+
+ 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 +145,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 +158,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 +176,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 +203,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 +213,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 +224,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 +244,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$};
  }