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

Author: ntilwalli

.gitignore

@@ -4,6 +4,9 @@
 /lib
 /dist
 /.cache
+fixtures
+support
+plugins
 node_modules
 package-lock.json
 pnpm-lock.yaml

cypress.json

@@ -1,4 +1,8 @@
 {
   "baseUrl": "http://localhost:1234",
-  "video": false
+  "chromeWebSecurity": false,
+  "defaultCommandTimeout": 10000,
+  "modifyObstructiveCode": false,
+  "video": false,
+  "fixturesFolder": false
 }

cypress/integration/test.spec.js

@@ -1,13 +1,25 @@
 /// <reference types="cypress" />
 
+const { watchFile } = require("fs")
+
 context('Page load', () => {
   beforeEach(() => {
     cy.visit('/')
+    cy.wait(500)
   })
   describe('React integration', () => {
+
     it('Should mount', () => {
       cy.get('#app')
         .should('exist', 'success')
     })
+    it('Should have foo property on button', () => {
+      cy.get('.clicker')
+        // .its('foo')
+        // .should('eq', 3)
+        .then(($el) => {
+          cy.wrap($el[0].foo).should('eq', 3)
+        })
+    })
   })
 })

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, className: 'clicker', domProps: {foo: 3, printer: () => console.log('domProps being used')}}, 'Reset'),
     ]),
   );
 

package.json

@@ -49,8 +49,11 @@
     "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; cypress run",
+    "test": "$(npm bin)/mocha test/*.ts --require ts-node/register --recursive",
+    "full-test": "npm test; npm run cypress:run",
     "start": "parcel example/index.html",
-    "serve-test": "start-server-and-test start http://localhost:1234 test"
+    "serve-test": "start-server-and-test start http://localhost:1234 full-test",
+    "cypress:open": "cypress open",
+    "cypress:run":  "cypress run"
   }
 }

src/Incorporator.ts

@@ -26,6 +26,14 @@ export default class Incorporator extends PureComponent<Props, State> {
     this.unsubscribe = this.props.scope.subscribe(this.selector, () => {
       this.setState((prev: any) => ({flip: !prev.flip}));
     });
+
+    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 {
@@ -45,6 +53,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,
+            })
+          }
         ),
       ),
     );