feat: enable module support

Author: ntilwalli

cypress.json

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

cypress/integration/test.spec.js

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+
+const { watchFile } = require("fs")
+
+context('Page load', () => {
+  beforeEach(() => {
+    cy.visit('/')
+    cy.wait(1000)
+  })
+  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) => {
+          const el = $el[0]
+          cy.wrap(el.foo).should('eq', 3)
+        })
+    })
+    it('Should allow toggling className items based on domClass prop', () => {
+      cy.get('.clicker')
+        .then(($el) => {
+          cy.wrap($el[0].className).should('eq', 'clicker hello')
+        })
+    })
+    it('Should return element when ref function is sent', () => {
+      cy.get('h1')
+        .then(($el) => {
+          const el = $el[0]
+          cy.wrap(el.foo).should('eq', 'bar')
+        })
+    })
+  })
+})

example/index.js

@@ -1,6 +1,7 @@
 import xs from 'xstream';
 import {createElement} from 'react';
 import {render} from 'react-dom';
+import {setModules} from '../src/Incorporator'
 import {h, makeComponent} from '../src/index';
 
 function main(sources) {
@@ -19,10 +20,18 @@ function main(sources) {
     .merge(init$, increment$, reset$)
     .fold((state, fn) => fn(state));
 
+  const getRef = el => {
+    el.foo='bar';
+  }
   const vdom$ = count$.map(i =>
     h('div', [
-      h('h1', `Hello ${i} times`),
-      h('button', {sel: btnSel}, 'Reset'),
+      h('h1', {ref: getRef}, `Hello ${i} times`),
+      h('button', {
+        sel: btnSel, 
+        className: 'clicker', 
+        domProps: {foo: 3}, 
+        domClass: {hello: true, goodbye: false}
+      }, 'Reset'),
     ]),
   );
 
@@ -33,4 +42,21 @@ function main(sources) {
 
 const App = makeComponent(main);
 
+setModules({
+  domProps: {
+    componentDidUpdate: (element, props) => {
+      Object.entries(props).forEach(([key, val]) => {
+        element[key] = val;
+      });
+    }
+  },
+  domClass: {
+    componentDidUpdate: (element, props) => {
+      Object.entries(props).forEach(([key, val]) => {
+        val ? element.classList.add(key) : element.classList.remove(key);
+      });
+    }
+  }
+})
+
 render(createElement(App), document.getElementById('app'));

package.json

@@ -29,10 +29,13 @@
     "@types/mocha": "^5.2.7",
     "@types/node": "^10.5.2",
     "@types/react": "16.9.3",
+    "cypress": "^5.2.0",
     "mocha": "^6.2.0",
+    "parcel": "^1.12.3",
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-test-renderer": "16.9.0",
+    "start-server-and-test": "^1.11.3",
     "symbol-observable": "^1.2.0",
     "ts-node": "^7.0.0",
     "typescript": "3.6.3",
@@ -46,6 +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"
+    "full-test": "npm test; npm run cypress:run",
+    "test": "$(npm bin)/mocha test/*.ts --require ts-node/register --recursive",
+    "serve-test": "start-server-and-test start http://localhost:1234 full-test",
+    "start": "parcel example/index.html",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   }
 }

src/Incorporator.ts

@@ -1,4 +1,4 @@
-import {PureComponent, createElement} from 'react';
+import {PureComponent, createElement, createRef} from 'react';
 import {Scope} from './scope';
 
 type Props = {
@@ -12,20 +12,75 @@ type State = {
   flip: boolean;
 };
 
+let moduleEntries: any = []
+
+let onMounts: any[] = []
+let onUpdates: any[] = []
+let onUnmounts: any[] = []
+
+export function setModules(mods: any) {
+  if (mods === null || typeof mods !== 'object') return;
+  moduleEntries = Object.entries(mods)
+  onMounts = moduleEntries.map(mod => [mod[0], mod[1].componentDidMount]).filter(mod => mod[1])
+  onUpdates = moduleEntries.map(mod => [mod[0], mod[1].componentDidUpdate]).filter(mod => mod[1])
+  onUnmounts = moduleEntries.map(mod => [mod[0], mod[1].componentWillUnmount]).filter(mod => mod[1])
+}
+
+export function hasModuleProps (props) {
+  return props 
+    ? (props.targetRef || moduleEntries.some(([mkey]) => props.hasOwnProperty(mkey)))
+    : false
+}
+
+function moduleProcessor (base, current, props) {
+  if (current && base.length) {
+    base.forEach(([key, f]) => {
+      const prop = props[key]
+      if (prop) f(current, prop)
+    });
+  }
+}
+
 export default class Incorporator extends PureComponent<Props, State> {
+  private ref: any;
+  private selector: string | symbol;
+  private unsubscribe: any;
+  private element: any;
+  private setRef: any;
+
   constructor(props: Props) {
     super(props);
+    this.element = null
+
     this.state = {flip: false};
     this.selector = props.targetProps.sel;
-  }
 
-  private selector: string | symbol;
-  private unsubscribe: any;
+    if (props.targetRef) {
+      if (typeof props.targetRef === 'function') {
+        this.setRef = element => {
+          this.element = element;
+          props.targetRef(element);
+        };
+
+        this.ref = this.setRef;
+      } else {
+        this.ref = props.targetRef;
+      }
+    } else {
+      this.ref = hasModuleProps(props.targetProps) ? createRef() : null;
+    }
+  }
 
   public componentDidMount() {
     this.unsubscribe = this.props.scope.subscribe(this.selector, () => {
       this.setState((prev: any) => ({flip: !prev.flip}));
     });
+
+    moduleProcessor(onMounts, this.element || (this.ref && this.ref.current), this.props.targetProps)
+  }
+
+  public componentDidUpdate() {
+    moduleProcessor(onUpdates, this.element || (this.ref && this.ref.current), this.props.targetProps)
   }
 
   private incorporateHandlers<P>(props: P, scope: Scope): P {
@@ -38,27 +93,31 @@ export default class Incorporator extends PureComponent<Props, State> {
   }
 
   private materializeTargetProps() {
-    const {targetProps, targetRef, scope} = this.props;
+    const {targetProps, scope} = this.props;
     let output = {...targetProps};
     output = this.incorporateHandlers(output, scope);
-    if (targetRef) {
-      output.ref = targetRef;
+    if (this.ref) {
+      output.ref = this.ref;
     }
     delete output.sel;
+    moduleEntries.forEach(pair => delete output[pair[0]])
     return output;
   }
 
   public render() {
     const {target} = this.props;
     const targetProps = this.materializeTargetProps();
+
     if (targetProps.children) {
       return createElement(target, targetProps, targetProps.children);
     } else {
       return createElement(target, targetProps);
     }
   }
 
-  public componentWillUnmount() {
+  public componentWillUnmount() { 
+    moduleProcessor(onUnmounts, this.element || (this.ref && this.ref.current), this.props.targetProps)
+
     this.unsubscribe();
   }
 }

src/h.ts

@@ -7,6 +7,7 @@ import {
   Attributes,
 } from 'react';
 import {incorporate} from './incorporate';
+import { hasModuleProps } from './Incorporator';
 
 export type PropsExtensions = {
   sel?: string | symbol;
@@ -32,7 +33,7 @@ function hyperscriptProps<P = any>(
   type: ReactType<P> | keyof ReactHTML,
   props: PropsLike<P>,
 ): ReactElement<P> {
-  if (!props.sel) {
+  if (!props.sel && !hasModuleProps(props)) {
     return createElement(type, props);
   } else {
     return createElement(incorporate(type), props);
@@ -51,7 +52,7 @@ function hyperscriptPropsChildren<P = any>(
   props: PropsLike<P>,
   children: Children,
 ): ReactElement<P> {
-  if (!props.sel) {
+  if (!props.sel && !hasModuleProps(props)) {
     return createElementSpreading(type, props, children);
   } else {
     return createElementSpreading(incorporate(type), props, children);

src/index.ts

@@ -4,4 +4,5 @@ export {Scope} from './scope';
 export {ReactSource} from './ReactSource';
 export {h} from './h';
 export {incorporate} from './incorporate';
+export {setModules} from './Incorporator'
 export {StreamRenderer} from './StreamRenderer';