From 0e905aad89f9538eb69c356f912332baaf3a06f2 Mon Sep 17 00:00:00 2001 From: Nikhil Tilwalli Date: Wed, 23 Sep 2020 15:00:04 -0400 Subject: [PATCH] refactor: update to setIncorporator/useModules approach --- example/index.js | 5 +- src/Modulizer.ts | 132 --------------------------------------------- src/h.ts | 19 +++++-- src/incorporate.ts | 10 ++-- src/index.ts | 3 +- 5 files changed, 24 insertions(+), 145 deletions(-) diff --git a/example/index.js b/example/index.js index 9f40465..00a2ffb 100644 --- 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 index 3dfe9c1..e57997f 100644 --- a/src/Modulizer.ts +++ b/src/Modulizer.ts @@ -80,135 +80,3 @@ export class Modulizer extends Component { return createElement(Incorporator, output); } } - -// export function Modulizer(Comp: any): ComponentType { -// class ModulizerComponent extends Component { -// 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((props, ref) => { -// return createElement(ModulizerComponent, {modularizerProps: props, targetRef: ref} ) -// }); -// } - -// export default class Modulizer extends PureComponent { -// 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

(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 index 5102b56..661895c 100644 --- 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 & PropsExtensions & Attributes; type Children = string | Array; @@ -33,7 +44,7 @@ function hyperscriptProps

( type: ReactType

| keyof ReactHTML, props: PropsLike

, ): ReactElement

{ - if (!props.sel && !hasModuleProps(props)) { + if (!shouldIncorporate(props)) { return createElement(type, props); } else { return createElement(incorporate(type), props); @@ -52,7 +63,7 @@ function hyperscriptPropsChildren

( props: PropsLike

, children: Children, ): ReactElement

{ - 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 index 47b3b80..f968ab4 100644 --- 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> = new Map(); -const identity = x => x export function incorporate(type: any) { if (!wrapperComponents.has(type)) { wrapperComponents.set( type, forwardRef((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 index 26827b2..4749d99 100644 --- 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';