refactor: update to setIncorporator/useModules approach

cyclejs · Sep 23, 2020 · 0e905aa · 0e905aa
1 parent 22b03eb
commit 0e905aa
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 145 deletions.
diff --git a/example/index.js b/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]) => {

diff --git a/src/Modulizer.ts b/src/Modulizer.ts
@@ -80,135 +80,3 @@ export class Modulizer extends Component<any, any> {
     return createElement(Incorporator, output);
   }
 }
-
-// export function Modulizer(Comp: any): ComponentType<any> {
-//   class ModulizerComponent extends Component<any, any> {
-//     private ref: any;
-//     private element: any;
-//     private setRef: any;
-//     constructor(props) {
-//       super(props);
-//       this.element = null
-
-//       const {targetProps, targetRef} = props.modularizerProps
-//       const useRef = hasModuleProps(targetProps)
-//       if (targetRef) {
-//         if (typeof targetRef === 'function' && useRef) {
-//           this.setRef = element => {
-//             this.element = element;
-//             targetRef(element);
-//           };
-
-//           this.ref = this.setRef;
-//         } else {
-//           this.ref = targetRef;
-//         }
-//       } else {
-//         this.ref = useRef ? createRef() : null;
-//       }
-//     }
-
-//     public componentDidMount() {
-//       moduleProcessor(onMounts, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
-//     }
-
-//     public componentDidUpdate() {
-//       moduleProcessor(onUpdates, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
-//     }
-
-//     public componentWillUnmount() { 
-//       moduleProcessor(onUnmounts, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
-//     }
-
-//     render() {
-//       const targetProps = {...this.props.modularizerProps.targetProps}
-//       moduleEntries.forEach(pair => delete targetProps[pair[0]])
-//       const output: any = {...this.props.modularizerProps, targetRef: this.ref, targetProps};
-
-//       return createElement(Comp, output);
-//     }
-//   }
-
-//   return forwardRef<any, any>((props, ref) => {
-//     return createElement(ModulizerComponent, {modularizerProps: props, targetRef: ref} )
-//   });
-// }
-
-// export default class Modulizer extends PureComponent<Props, State> {
-//   private ref: any;
-//   private element: any;
-//   private setRef: any;
-
-//   constructor(props: Props) {
-//     super(props);
-//     this.element = null
-
-//     const useRef = hasModuleProps(props.targetProps)
-//     if (props.targetRef) {
-//       if (typeof props.targetRef === 'function' && useRef) {
-//         this.setRef = element => {
-//           this.element = element;
-//           props.targetRef(element);
-//         };
-
-//         this.ref = this.setRef;
-//       } else {
-//         this.ref = props.targetRef;
-//       }
-//     } else {
-//       this.ref = useRef ? 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)
-//   }
-
-//   public componentWillUnmount() { 
-//     moduleProcessor(onUnmounts, this.element || (this.ref && this.ref.current), this.props.targetProps)
-
-//     this.unsubscribe();
-//   }
-
-//   private incorporateHandlers<P>(props: P, scope: Scope): P {
-//     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);
-//     }
-//     return props;
-//   }
-
-//   private materializeTargetProps() {
-//     const {targetProps, scope} = this.props;
-//     let output = {...targetProps};
-//     output = this.incorporateHandlers(output, scope);
-//     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);
-//     }
-//   }
-
-
-// }
diff --git a/src/h.ts b/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);

diff --git a/src/incorporate.ts b/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,

diff --git a/src/index.ts b/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';