Skip to content

Commit

Permalink
refactor: update to setIncorporator/useModules approach
Browse files Browse the repository at this point in the history
  • Loading branch information
ntilwalli committed Sep 23, 2020
1 parent 22b03eb commit 0e905aa
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 145 deletions.
5 changes: 2 additions & 3 deletions example/index.js
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -42,7 +41,7 @@ function main(sources) {

const App = makeComponent(main);

setModules({
useModules({
domProps: {
componentDidUpdate: (element, props) => {
Object.entries(props).forEach(([key, val]) => {
Expand Down
132 changes: 0 additions & 132 deletions src/Modulizer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
// }
// }


// }
19 changes: 15 additions & 4 deletions src/h.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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);
Expand All @@ -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);
Expand Down
10 changes: 6 additions & 4 deletions src/incorporate.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
3 changes: 1 addition & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit 0e905aa

Please sign in to comment.