Skip to content

Commit 0e905aa

Browse files
ntilwallintilwalli
committed
refactor: update to setIncorporator/useModules approach
1 parent 22b03eb commit 0e905aa

File tree

5 files changed

+24
-145
lines changed

5 files changed

+24
-145
lines changed

‎example/index.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import xs from 'xstream';
22
import {createElement} from 'react';
33
import {render} from 'react-dom';
4-
import {setModules} from '../src/Modulizer'
5-
import {h, makeComponent} from '../src/index';
4+
import {h, makeComponent, useModules} from '../src/index';
65

76
function main(sources) {
87
const init$ = xs.of(() => 0);
@@ -42,7 +41,7 @@ function main(sources) {
4241

4342
const App = makeComponent(main);
4443

45-
setModules({
44+
useModules({
4645
domProps: {
4746
componentDidUpdate: (element, props) => {
4847
Object.entries(props).forEach(([key, val]) => {

‎src/Modulizer.ts

-132
Original file line numberDiff line numberDiff line change
@@ -80,135 +80,3 @@ export class Modulizer extends Component<any, any> {
8080
return createElement(Incorporator, output);
8181
}
8282
}
83-
84-
// export function Modulizer(Comp: any): ComponentType<any> {
85-
// class ModulizerComponent extends Component<any, any> {
86-
// private ref: any;
87-
// private element: any;
88-
// private setRef: any;
89-
// constructor(props) {
90-
// super(props);
91-
// this.element = null
92-
93-
// const {targetProps, targetRef} = props.modularizerProps
94-
// const useRef = hasModuleProps(targetProps)
95-
// if (targetRef) {
96-
// if (typeof targetRef === 'function' && useRef) {
97-
// this.setRef = element => {
98-
// this.element = element;
99-
// targetRef(element);
100-
// };
101-
102-
// this.ref = this.setRef;
103-
// } else {
104-
// this.ref = targetRef;
105-
// }
106-
// } else {
107-
// this.ref = useRef ? createRef() : null;
108-
// }
109-
// }
110-
111-
// public componentDidMount() {
112-
// moduleProcessor(onMounts, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
113-
// }
114-
115-
// public componentDidUpdate() {
116-
// moduleProcessor(onUpdates, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
117-
// }
118-
119-
// public componentWillUnmount() {
120-
// moduleProcessor(onUnmounts, this.element || (this.ref && this.ref.current), this.props.modularizerProps.targetProps)
121-
// }
122-
123-
// render() {
124-
// const targetProps = {...this.props.modularizerProps.targetProps}
125-
// moduleEntries.forEach(pair => delete targetProps[pair[0]])
126-
// const output: any = {...this.props.modularizerProps, targetRef: this.ref, targetProps};
127-
128-
// return createElement(Comp, output);
129-
// }
130-
// }
131-
132-
// return forwardRef<any, any>((props, ref) => {
133-
// return createElement(ModulizerComponent, {modularizerProps: props, targetRef: ref} )
134-
// });
135-
// }
136-
137-
// export default class Modulizer extends PureComponent<Props, State> {
138-
// private ref: any;
139-
// private element: any;
140-
// private setRef: any;
141-
142-
// constructor(props: Props) {
143-
// super(props);
144-
// this.element = null
145-
146-
// const useRef = hasModuleProps(props.targetProps)
147-
// if (props.targetRef) {
148-
// if (typeof props.targetRef === 'function' && useRef) {
149-
// this.setRef = element => {
150-
// this.element = element;
151-
// props.targetRef(element);
152-
// };
153-
154-
// this.ref = this.setRef;
155-
// } else {
156-
// this.ref = props.targetRef;
157-
// }
158-
// } else {
159-
// this.ref = useRef ? createRef() : null;
160-
// }
161-
// }
162-
163-
// public componentDidMount() {
164-
// this.unsubscribe = this.props.scope.subscribe(this.selector, () => {
165-
// this.setState((prev: any) => ({flip: !prev.flip}));
166-
// });
167-
168-
// moduleProcessor(onMounts, this.element || (this.ref && this.ref.current), this.props.targetProps)
169-
// }
170-
171-
// public componentDidUpdate() {
172-
// moduleProcessor(onUpdates, this.element || (this.ref && this.ref.current), this.props.targetProps)
173-
// }
174-
175-
// public componentWillUnmount() {
176-
// moduleProcessor(onUnmounts, this.element || (this.ref && this.ref.current), this.props.targetProps)
177-
178-
// this.unsubscribe();
179-
// }
180-
181-
// private incorporateHandlers<P>(props: P, scope: Scope): P {
182-
// const handlers = scope.getSelectorHandlers(this.selector);
183-
// for (const evType of Object.keys(handlers)) {
184-
// const onFoo = `on${evType[0].toUpperCase()}${evType.slice(1)}`;
185-
// props[onFoo] = (ev: any) => handlers[evType]._n(ev);
186-
// }
187-
// return props;
188-
// }
189-
190-
// private materializeTargetProps() {
191-
// const {targetProps, scope} = this.props;
192-
// let output = {...targetProps};
193-
// output = this.incorporateHandlers(output, scope);
194-
// if (this.ref) {
195-
// output.ref = this.ref;
196-
// }
197-
// delete output.sel;
198-
// moduleEntries.forEach(pair => delete output[pair[0]])
199-
// return output;
200-
// }
201-
202-
// public render() {
203-
// const {target} = this.props;
204-
// const targetProps = this.materializeTargetProps();
205-
206-
// if (targetProps.children) {
207-
// return createElement(target, targetProps, targetProps.children);
208-
// } else {
209-
// return createElement(target, targetProps);
210-
// }
211-
// }
212-
213-
214-
// }

‎src/h.ts

+15-4
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,24 @@ import {
66
ReactHTML,
77
Attributes,
88
} from 'react';
9-
import {incorporate} from './incorporate';
10-
import {hasModuleProps} from './Modulizer';
9+
import {incorporate, setIncorporator} from './incorporate';
10+
import {setModules, hasModuleProps, Modulizer} from './Modulizer';
11+
import Incorporator from './Incorporator';
1112

1213
export type PropsExtensions = {
1314
sel?: string | symbol;
1415
};
1516

17+
let shouldIncorporate = props => props.sel
18+
19+
export function useModules(modules: any) {
20+
if (!modules || typeof modules !== 'object') return
21+
22+
setModules(modules);
23+
shouldIncorporate = props => props.sel || hasModuleProps(props)
24+
setIncorporator(Modulizer)
25+
}
26+
1627
type PropsLike<P> = P & PropsExtensions & Attributes;
1728

1829
type Children = string | Array<ReactNode>;
@@ -33,7 +44,7 @@ function hyperscriptProps<P = any>(
3344
type: ReactType<P> | keyof ReactHTML,
3445
props: PropsLike<P>,
3546
): ReactElement<P> {
36-
if (!props.sel && !hasModuleProps(props)) {
47+
if (!shouldIncorporate(props)) {
3748
return createElement(type, props);
3849
} else {
3950
return createElement(incorporate(type), props);
@@ -52,7 +63,7 @@ function hyperscriptPropsChildren<P = any>(
5263
props: PropsLike<P>,
5364
children: Children,
5465
): ReactElement<P> {
55-
if (!props.sel && !hasModuleProps(props)) {
66+
if (!shouldIncorporate(props)) {
5667
return createElementSpreading(type, props, children);
5768
} else {
5869
return createElementSpreading(incorporate(type), props, children);

‎src/incorporate.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
import {createElement, forwardRef} from 'react';
22
import {Scope} from './scope';
33
import {ScopeContext} from './context';
4-
import {Modulizer} from './Modulizer'
5-
4+
import {default as defaultIncorporator} from './Incorporator'
65

6+
let Incorporator = defaultIncorporator
7+
export function setIncorporator(f: any) {
8+
Incorporator = f
9+
}
710

811
const wrapperComponents: Map<any, React.ComponentType<any>> = new Map();
9-
const identity = x => x
1012
export function incorporate(type: any) {
1113
if (!wrapperComponents.has(type)) {
1214
wrapperComponents.set(
1315
type,
1416
forwardRef<any, any>((props, ref) =>
1517
createElement(ScopeContext.Consumer, null, (scope: Scope) =>
16-
createElement(Modulizer, {
18+
createElement(Incorporator, {
1719
targetProps: props,
1820
targetRef: ref,
1921
target: type,

‎src/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ export {makeComponent, makeCycleReactComponent} from './convert';
22
export {ScopeContext} from './context';
33
export {Scope} from './scope';
44
export {ReactSource} from './ReactSource';
5-
export {h} from './h';
5+
export {h, useModules} from './h';
66
export {incorporate} from './incorporate';
7-
export {setModules} from './Modulizer'
87
export {StreamRenderer} from './StreamRenderer';

0 commit comments

Comments
 (0)