feat: add support for adding dom element properties similar to @cycle/dom

Author: ntilwalli

example/index.js

@@ -13,6 +13,9 @@ function main(sources) {
   const reset$ = sources.react
     .select(btnSel)
     .events('click')
+    .debug((ev) => {
+      return ev.target.printer()
+    })
     .mapTo(() => 0);
 
   const count$ = xs
@@ -22,7 +25,7 @@ function main(sources) {
   const vdom$ = count$.map(i =>
     h('div', [
       h('h1', `Hello ${i} times`),
-      h('button', {sel: btnSel}, 'Reset'),
+      h('button', {sel: btnSel, domProps: {printer: () => console.log('domProps being used')}}, 'Reset'),
     ]),
   );
 

src/Incorporator.ts

@@ -28,6 +28,17 @@ export default class Incorporator extends PureComponent<Props, State> {
     });
   }
 
+  public componentDidUpdate(prevProps, prevState) {
+    const x = this
+    const {domProps} = this.props.targetProps
+    if (domProps && this.props.targetRef) {
+      Object.entries(domProps)
+        .forEach(([key, val]) => { 
+          this.props.targetRef.current[key] = val 
+        })
+    }
+  }
+
   private incorporateHandlers<P>(props: P, scope: Scope): P {
     const handlers = scope.getSelectorHandlers(this.selector);
     for (const evType of Object.keys(handlers)) {
@@ -45,6 +56,7 @@ export default class Incorporator extends PureComponent<Props, State> {
       output.ref = targetRef;
     }
     delete output.sel;
+    delete output.domProps
     return output;
   }
 

src/incorporate.ts

@@ -1,4 +1,4 @@
-import {createElement, forwardRef} from 'react';
+import {createElement, forwardRef, createRef} from 'react';
 import {Scope} from './scope';
 import {ScopeContext} from './context';
 import Incorporator from './Incorporator';
@@ -10,13 +10,18 @@ export function incorporate(type: any) {
     wrapperComponents.set(
       type,
       forwardRef<any, any>((props, ref) =>
-        createElement(ScopeContext.Consumer, null, (scope: Scope) =>
-          createElement(Incorporator, {
-            targetProps: props,
-            targetRef: ref,
-            target: type,
-            scope: scope,
-          }),
+        createElement(ScopeContext.Consumer, null, (scope: Scope) => {
+            let targetRef = ref
+            if (!ref && props.domProps) {
+              targetRef = createRef()
+            }
+            return createElement(Incorporator, {
+              targetProps: props,
+              targetRef,
+              target: type,
+              scope: scope,
+            })
+          }
         ),
       ),
     );

test/conversion.ts

@@ -229,4 +229,47 @@ describe('Conversion', function() {
     setTimeout(check, 150);
     setTimeout(check, 200);
   });
+
+  it('applies domProps to element when given', done => {
+    function main(sources: {react: ReactSource}) {
+      const inc$ = xs.create({
+        start(listener: any) {
+          setTimeout(() => {
+            sources.react
+              .select('button')
+              .events('press')
+              .addListener(listener);
+          }, 30);
+        },
+        stop() {},
+      });
+      const count$ = inc$.fold((acc: number, x: any) => acc + x.target.blah, 0);
+      const vdom$ = count$.map((i: number) =>
+        h(Touchable, {sel: 'button', domProps: {blah: 3}}, [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 * 3}`);
+      to.instance.press();
+      turn++;
+      if (turn === 1) {
+        done();
+      }
+    };
+    setTimeout(check, 100);
+  });
+
 });