refactor: update to setIncorporator/useModules approach

Author: ntilwalli

example/index.js

@@ -1,8 +1,7 @@
 import xs from 'xstream';
 import {createElement} from 'react';
 import {render} from 'react-dom';
-import {setModules} from '../src/Modulizer'
-import {h, makeComponent} from '../src/index';
+import {h, makeComponent, useModules} from '../src/index';
 
 function main(sources) {
   const init$ = xs.of(() => 0);
@@ -42,7 +41,7 @@ function main(sources) {
 
 const App = makeComponent(main);
 
-setModules({
+useModules({
   domProps: {
     componentDidUpdate: (element, props) => {
       Object.entries(props).forEach(([key, val]) => {

src/h.ts

@@ -6,13 +6,24 @@ import {
   ReactHTML,
   Attributes,
 } from 'react';
-import {incorporate} from './incorporate';
-import {hasModuleProps} from './Modulizer';
+import {incorporate, setIncorporator} from './incorporate';
+import {setModules, hasModuleProps, Modulizer} from './Modulizer';
+import Incorporator from './Incorporator';
 
 export type PropsExtensions = {
   sel?: string | symbol;
 };
 
+let shouldIncorporate = props => props.sel
+
+export function useModules(modules: any) {
+  if (!modules || typeof modules !== 'object') return 
+
+  setModules(modules);
+  shouldIncorporate = props => props.sel || hasModuleProps(props)
+  setIncorporator(Modulizer)
+}
+
 type PropsLike<P> = P & PropsExtensions & Attributes;
 
 type Children = string | Array<ReactNode>;
@@ -33,7 +44,7 @@ function hyperscriptProps<P = any>(
   type: ReactType<P> | keyof ReactHTML,
   props: PropsLike<P>,
 ): ReactElement<P> {
-  if (!props.sel && !hasModuleProps(props)) {
+  if (!shouldIncorporate(props)) {
     return createElement(type, props);
   } else {
     return createElement(incorporate(type), props);
@@ -52,7 +63,7 @@ function hyperscriptPropsChildren<P = any>(
   props: PropsLike<P>,
   children: Children,
 ): ReactElement<P> {
-  if (!props.sel && !hasModuleProps(props)) {
+  if (!shouldIncorporate(props)) {
     return createElementSpreading(type, props, children);
   } else {
     return createElementSpreading(incorporate(type), props, children);

src/incorporate.ts

@@ -1,19 +1,21 @@
 import {createElement, forwardRef} from 'react';
 import {Scope} from './scope';
 import {ScopeContext} from './context';
-import {Modulizer} from './Modulizer'
-
+import {default as defaultIncorporator} from './Incorporator'
 
+let Incorporator = defaultIncorporator
+export function setIncorporator(f: any) {
+  Incorporator = f
+}
 
 const wrapperComponents: Map<any, React.ComponentType<any>> = new Map();
-const identity = x => x
 export function incorporate(type: any) {
   if (!wrapperComponents.has(type)) {
     wrapperComponents.set(
       type,
       forwardRef<any, any>((props, ref) =>
         createElement(ScopeContext.Consumer, null, (scope: Scope) =>
-          createElement(Modulizer, {
+          createElement(Incorporator, {
             targetProps: props,
             targetRef: ref,
             target: type,

src/index.ts

@@ -2,7 +2,6 @@ export {makeComponent, makeCycleReactComponent} from './convert';
 export {ScopeContext} from './context';
 export {Scope} from './scope';
 export {ReactSource} from './ReactSource';
-export {h} from './h';
+export {h, useModules} from './h';
 export {incorporate} from './incorporate';
-export {setModules} from './Modulizer'
 export {StreamRenderer} from './StreamRenderer';