(element: FunctionComponent | ComponentClass): FunctionComponent<{ [k in keyof P]: P[k] | Observable }>
32 | export function createElement$(element) {
33 | return function element$(props) {
34 | // state for renderable props
35 | const [streamProps, setStreamProps] = useState(Object.create(null));
36 |
37 | // placeholder for Observable.error case -- will use it to rethrow error
38 | const [error, setError] = useState<{ error: any }>(null);
39 |
40 | const destroy$ = useDestroyObservable();
41 |
42 | // store prev props to compare
43 | const _prevStreamProps = useEmptyObject();
44 |
45 | // keep subscriptions to unsubscribe on dynamic prop update
46 | const _subs = useEmptyObject();
47 |
48 | useEffect(() => {
49 | let isDirty = false;
50 |
51 | // check for obsolete props
52 | const delProps = Object.create(null);
53 | Object.keys(_prevStreamProps).forEach(key => {
54 | if (key in props) {
55 | return;
56 | }
57 |
58 | isDirty = true;
59 | delete _prevStreamProps[key];
60 | // if previous property was Observable
61 | // kill subscription
62 | cleanSubscription(_subs, key);
63 | // remove from static props
64 | delProps[key] = void 0;
65 | });
66 |
67 | // update/track new props
68 | const nextProps = Object.create(null);
69 | const streamKeys = [];
70 | Object.keys(props).forEach(key => {
71 | // children are covered via <$>
72 | if (key == 'children') {
73 | return;
74 | }
75 |
76 | const value = props[key];
77 | const prevValue = _prevStreamProps[key];
78 | const equal = Object.is(value, prevValue);
79 |
80 | if (equal) {
81 | return;
82 | }
83 |
84 | // if property changes and previous was Observable
85 | // we need to kill subscription
86 | cleanSubscription(_subs, key);
87 |
88 | // observable input params are added to observation
89 | // all static props are directly updated
90 | if (isObservable(value)) {
91 | isDirty = true;
92 | _prevStreamProps[key] = value;
93 | nextProps[key] = void 0; // reset prev prop when new one is Observable
94 | streamKeys.push(key);
95 | } else {
96 | // forget outdated prev props
97 | delete _prevStreamProps[key];
98 | }
99 | });
100 |
101 | // subscribe to new streams
102 | // some values might be received in sync way: like `of(…)` or `startWith(…)`
103 | // to optimize this we update all syncronously received values in one
104 | // commit to the state
105 | // {{{
106 | let isSync = true;
107 | streamKeys.forEach(key => {
108 | _subs[key] = props[key]
109 | .pipe(
110 | distinctUntilChanged(),
111 | takeUntil(destroy$)
112 | )
113 | .subscribe({
114 | // on value updates -- update props
115 | next(data) {
116 | // set sync values
117 | if (isSync) {
118 | isDirty = true;
119 | nextProps[key] = data;
120 | } else {
121 | // async set values
122 | setStreamProps(p => Object.assign({}, p, { [key]: data }));
123 | }
124 | },
125 | // on error -- rethrow error
126 | error (error) {
127 | setError({ error });
128 | }
129 | // on complete we just keep using accumulated value
130 | })
131 | });
132 | isSync = false;
133 | // }}}
134 |
135 | // remove obsolete props
136 | // & update static props
137 | if (isDirty) {
138 | setStreamProps(p => Object.assign({}, p, delProps, nextProps));
139 | }
140 | }, [props]);
141 |
142 | // if error -- throw
143 | if (error) {
144 | throw error.error;
145 | }
146 |
147 | // using statically available props in render phase
148 | // so that `<$a alt="hello" href={ stream$ } >…`
149 | // renders `…` immediately
150 | const derivedProps = Object.keys(props).reduce((p, key) => {
151 | if (isObservable(props[key])) {
152 | // ensure controlled elements stay controlled
153 | // if value is present and is not nullish
154 | // we make the input controlled
155 | if (key == 'value'
156 | && (element == 'input'
157 | && props.type != 'file'
158 | && streamProps.type != 'file'
159 | || element == 'select'
160 | || element == 'textarea'
161 | )
162 | ) {
163 | p[key] = streamProps.value ?? '';
164 | } else {
165 | p[key] = streamProps[key];
166 | }
167 | } else {
168 | p[key] = props[key];
169 | }
170 |
171 | return p;
172 | }, Object.create(null));
173 |
174 | return createElement(
175 | element,
176 | derivedProps,
177 | // if children exist
178 | // they might be observable
179 | // so we pass em to <$> fragment
180 | // NOTE: children might not exist for elements like
181 | props.children
182 | ? createElement($, null, props.children)
183 | : null
184 | );
185 | };
186 | }
187 |
188 | // helpers
189 | function cleanSubscription(store, key) {
190 | if (store[key]) {
191 | store[key].unsubscribe();
192 | delete store[key];
193 | }
194 | }
195 |
196 |
--------------------------------------------------------------------------------
/src/fragment.ts:
--------------------------------------------------------------------------------
1 | import { createElement, Fragment, useEffect, useState } from "react";
2 | import { isObservable } from "rxjs";
3 | import { distinctUntilChanged, takeUntil } from "rxjs/operators";
4 | import { useDestroyObservable } from "./shared";
5 |
6 | // TODO: add better TS support
7 |
8 | /**
9 | * <$> fragment will subscribe to it's Observable children and display
10 | * it's emissions along with regular children
11 | *
12 | * e.g.
13 | *
14 | * ```jsx
15 | * function App(){
16 | * return <$>{ timer(0, 1000) } // 0, 1, 2, 3, ...
17 | * }
18 | * ```
19 | */
20 | export function $(props) {
21 | const children = props?.children;
22 |
23 | // CHORTCUT:
24 | // if fragment has many children -- we render it with a <> that has
25 | // <$> children in place of Observables
26 | if (Array.isArray(children)){
27 | return createElement(Fragment, null, ...children.map(c => isObservable(c) ? createElement($, null, c) : c));
28 | }
29 |
30 | // Single child:
31 |
32 | // state for Observable children
33 | const [streamChild, setStreamChild] = useState(null);
34 |
35 | // store error indicator
36 | const [error, setError] = useState(null);
37 |
38 | const destroy$ = useDestroyObservable();
39 |
40 | // react to child updates
41 | useEffect(() => {
42 | if (!isObservable(children)) {
43 | return;
44 | }
45 |
46 | // child is a single observable
47 | // if the stream emits async - synchronously reset child to null
48 | // else - use value from the stream to update the child
49 | let syncChildValue = null;
50 | let isSync = true;
51 | const sub = children.pipe(distinctUntilChanged(), takeUntil(destroy$)).subscribe({
52 | next(value) {
53 | // synchronous values would be set in one run
54 | if (isSync) {
55 | syncChildValue = value;
56 | } else {
57 | setStreamChild(value);
58 | }
59 | }, // update the view
60 | error(error) {
61 | // wrap error in an object to be safe in case the error is nullish
62 | setError({ error });
63 | },
64 | // on complete we just keep displaying accumulated value
65 | });
66 | isSync = false;
67 |
68 | // make the sync update
69 | setStreamChild(syncChildValue);
70 |
71 | // clear subscription if Observable child changes
72 | return () => sub.unsubscribe();
73 | }, [children]);
74 |
75 | // raise an error if Observable failed
76 | if (error) {
77 | throw error.error;
78 | }
79 |
80 | return isObservable(children)
81 | ? streamChild // read child updates from state
82 | : children; // child is a regular child, like you and me
83 | }
84 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './elements';
2 | export * from './fragment';
3 | export * from './intrinsic';
4 |
--------------------------------------------------------------------------------
/src/intrinsic.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * preset intrinsic elements
3 | *
4 | * Q: should we prefab all possible elements?
5 | * Q: should that be statically generated on build or created on demand?
6 | */
7 |
8 | import { createElement$ } from "./elements";
9 |
10 | export const $a = createElement$("a");
11 | export const $img = createElement$("img");
12 |
13 | export const $h1 = createElement$("h1");
14 | export const $h2 = createElement$("h2");
15 | export const $h3 = createElement$("h3");
16 | export const $h4 = createElement$("h4");
17 | export const $h5 = createElement$("h5");
18 | export const $h6 = createElement$("h6");
19 |
20 | export const $p = createElement$("p");
21 | export const $span = createElement$("span");
22 | export const $div = createElement$("div");
23 |
24 | export const $form = createElement$("form");
25 | export const $input = createElement$("input");
26 | export const $textarea = createElement$("textarea");
27 | export const $select = createElement$("select");
28 | export const $button = createElement$("button");
29 |
--------------------------------------------------------------------------------
/src/shared.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import { Subject } from 'rxjs';
3 |
4 |
5 | /**
6 | * reusable empty dependencies array for hooks
7 | */
8 | export const EMPTY_DEPENDENCIES = [];
9 |
10 | /**
11 | * empty Object wiht no dependencies
12 | */
13 | export function useEmptyObject() {
14 | const ref = useRef(Object.create(null));
15 | return ref.current;
16 | }
17 |
18 | /**
19 | * destroy$ stream helper
20 | * it will emit an empty value on unmount
21 | */
22 | export function useDestroyObservable() {
23 | const [destroy$] = useState(() => new Subject());
24 |
25 | useEffect(() => () => {
26 | destroy$.next(void 0);
27 | destroy$.complete();
28 | }, EMPTY_DEPENDENCIES);
29 |
30 | return destroy$.asObservable();
31 | }
32 |
--------------------------------------------------------------------------------
/tests/ErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | class ErrorBoundary extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = { hasError: false, error: void 0 };
7 | }
8 |
9 | static getDerivedStateFromError(error) {
10 | // Update state so the next render will show the fallback UI.
11 | return { hasError: true, error };
12 | }
13 |
14 | componentDidCatch(error, errorInfo) {
15 | // You can also log the error to an error reporting service
16 | console.log(error, errorInfo);
17 | }
18 |
19 | render() {
20 | if (this.state.hasError) {
21 | // You can render any custom fallback UI
22 | return <>ERROR:{this.state.error?.toString()};
23 | }
24 |
25 | return this.props.children;
26 | }
27 | }
28 |
29 | export { ErrorBoundary };
30 |
--------------------------------------------------------------------------------
/tests/elements.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { render, unmountComponentAtNode } from "react-dom";
3 | import { act } from "react-dom/test-utils";
4 | import { Observable, of, Subject } from 'rxjs';
5 | import { $input, createElement$ } from '../src/index';
6 |
7 | // TODO: cover errors on Observables
8 |
9 | const $div = createElement$('div');
10 |
11 | describe('Elements', () => {
12 | let rootElement;
13 |
14 | beforeEach(() => {
15 | rootElement = document.createElement("div");
16 | document.body.appendChild(rootElement);
17 | });
18 |
19 | afterEach(() => {
20 | unmountComponentAtNode(rootElement);
21 | rootElement.remove();
22 | rootElement = null;
23 | });
24 |
25 | test('dynamic children', () => {
26 | const content$ = new Subject();
27 | const App = () => <$div>Hello, {content$};
28 | act(() => { render(, rootElement); });
29 | expect(rootElement.innerHTML).toBe('Hello,
');
30 | act(() => { content$.next('world'); });
31 | expect(rootElement.innerHTML).toBe('Hello, world
');
32 | });
33 |
34 | describe('Params', () => {
35 |
36 | test('static input', () => {
37 | const App = () => <$div title="Hello">world;
38 | render(, rootElement);
39 | expect(rootElement.innerHTML).toBe('world
');
40 | });
41 |
42 | test('static output', () => {
43 | const content$ = new Subject();
44 |
45 | const App = () => <$div onClick={() => content$.next('hello')}>{content$};
46 | act(() => { render(, rootElement); });
47 | expect(rootElement.innerHTML).toBe('');
48 |
49 | const div = rootElement.querySelector('div');
50 | act(() => {
51 | div.dispatchEvent(new MouseEvent('click', { bubbles: true }));
52 | });
53 |
54 | expect(rootElement.innerHTML).toBe('hello
');
55 | });
56 |
57 | // Currently we subscribe in useEffect phase
58 | // therefore attribute wont be immediately available
59 | // this is a subject for further improvements
60 | test('immediate stream attr', () => {
61 | const App = () => <$div title={of('Hello')}>world;
62 | render(, rootElement);
63 | expect(rootElement.innerHTML).toBe('world
');
64 | });
65 |
66 | test('delayed stream attr', () => {
67 | const content$ = new Subject();
68 | const App = () => <$div title={content$}>world;
69 | act(() => { render(, rootElement); });
70 | expect(rootElement.innerHTML).toBe('world
');
71 | act(() => { content$.next('Hello'); });
72 | expect(rootElement.innerHTML).toBe('world
');
73 | });
74 |
75 | });
76 |
77 | describe('Updates', () => {
78 | it('should unsubscribe from previous observable', () => {
79 | let setState, setState2;
80 | let i = 0;
81 | const unsub = jest.fn();
82 | const createSource = () =>
83 | new Observable((observer) => {
84 | observer.next(i);
85 | i++;
86 | return () => unsub();
87 | });
88 |
89 | const updateSource = () => {
90 | setState(createSource())
91 | }
92 |
93 | const App = () => {
94 | const s1 = useState(null);
95 | const s2 = useState(0);
96 | [, setState] = s1;
97 | [, setState2] = s2;
98 | const [source$] = s1;
99 | return <$div title={source$}>;
100 | };
101 |
102 | act(() => { render(, rootElement); });
103 | expect(rootElement.innerHTML).toBe('');
104 | // change static null to stream
105 | act(updateSource);
106 | expect(rootElement.innerHTML).toBe('');
107 | expect(unsub.mock.calls.length).toBe(0);
108 | // update unrelated state
109 | act(() => setState2((x) => x + 1));
110 | expect(rootElement.innerHTML).toBe('');
111 | expect(unsub.mock.calls.length).toBe(0);
112 | // change stream to static
113 | act(() => setState('Hello'));
114 | expect(rootElement.innerHTML).toBe('');
115 | expect(unsub.mock.calls.length).toBe(1);
116 | // change static to stream
117 | act(updateSource);
118 | expect(rootElement.innerHTML).toBe('');
119 | expect(unsub.mock.calls.length).toBe(1);
120 | // change stream to stream
121 | act(updateSource);
122 | expect(rootElement.innerHTML).toBe('');
123 | expect(unsub.mock.calls.length).toBe(2);
124 | // change stream to static
125 | act(() => setState('World'));
126 | expect(rootElement.innerHTML).toBe('');
127 | expect(unsub.mock.calls.length).toBe(3);
128 | })
129 |
130 | it('should not make useless updates if props are equal', () => {
131 | let setState;
132 | const updateState = () => setState(x => x + 1);
133 | const spy = jest.fn(() => null);
134 | const Child = createElement$(spy);
135 | const App = () => {
136 | [, setState] = useState(null);
137 | return ;
138 | };
139 |
140 | act(() => { render(, rootElement); });
141 | expect(spy.mock.calls.length).toBe(1);
142 | act(updateState);
143 | expect(spy.mock.calls.length).toBe(2);
144 | act(updateState);
145 | expect(spy.mock.calls.length).toBe(3);
146 | })
147 |
148 | it('should remove value from obsolete stream', () => {
149 | let setState;
150 | let subject$ = new Subject();
151 | const App = () => {
152 | const [state$, _setState] = useState(null);
153 | setState = _setState;
154 | return <$div title={state$}>;
155 | };
156 |
157 | act(() => { render(, rootElement); });
158 | expect(rootElement.innerHTML).toBe('');
159 | act(() => setState(subject$));
160 | expect(rootElement.innerHTML).toBe('');
161 | act(() => { subject$.next(0); });
162 | expect(rootElement.innerHTML).toBe('');
163 | act(() => {
164 | subject$ = new Subject();
165 | setState(subject$);
166 | });
167 | expect(rootElement.innerHTML).toBe('');
168 | act(() => { subject$.next(1); });
169 | expect(rootElement.innerHTML).toBe('');
170 | })
171 | })
172 |
173 | describe('Input value', () => {
174 | it('should not set input value if absent', () => {
175 | const App = () => <$input />;
176 | act(() => { render(, rootElement); });
177 | expect(rootElement.innerHTML).toBe('');
178 | })
179 |
180 | // NOTE: this doesn't test controlled -> uncontrolled switch
181 | it('should set input value immediately', () => {
182 | const content$ = new Subject();
183 | const App = () => <$input readOnly value={content$} />;
184 | act(() => {
185 | render(, rootElement);
186 | // NOTE: checking presense of value synchronously, inside act
187 | expect(rootElement.innerHTML).toBe('');
188 | });
189 | act(() => { content$.next('world'); });
190 | expect(rootElement.innerHTML).toBe('');
191 | expect(rootElement.children[0].value).toBe('world');
192 | })
193 | })
194 | })
195 |
--------------------------------------------------------------------------------
/tests/fragment.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { render, unmountComponentAtNode } from "react-dom";
3 | import { act } from "react-dom/test-utils";
4 | import { Observable, of, Subject } from 'rxjs';
5 | import { $ } from '../src/index';
6 | import { ErrorBoundary } from './ErrorBoundary';
7 |
8 |
9 | describe('Fragment', () => {
10 | let rootElement;
11 |
12 | beforeEach(() => {
13 | rootElement = document.createElement("div");
14 | document.body.appendChild(rootElement);
15 | });
16 |
17 | afterEach(() => {
18 | unmountComponentAtNode(rootElement);
19 | rootElement.remove();
20 | rootElement = null;
21 | });
22 |
23 | describe('Static', () => {
24 | it('should render only static child instantly', () =>{
25 | const App = () => <$>Hello world;
26 | render(, rootElement);
27 | expect(rootElement.innerHTML).toBe('Hello world');
28 | });
29 |
30 | it('should render mixed static child instantly', () =>{
31 | const App = () => <$>Hello world { of(1) };
32 | render(, rootElement);
33 | expect(rootElement.innerHTML).toBe('Hello world ');
34 | });
35 | })
36 |
37 | describe('Single root', () => {
38 | let content$: Subject;
39 |
40 | beforeEach(() => {
41 | content$ = new Subject();
42 | const App = () => <$>{content$};
43 |
44 | act(() => { render(, rootElement); });
45 | });
46 |
47 | afterEach(() => {
48 | content$.complete();
49 | content$ = null;
50 | });
51 |
52 |
53 | test('empty', () => {
54 | expect(rootElement.innerHTML).toBe('');
55 | });
56 |
57 | test('consequent renders', () => {
58 | act(() => { content$.next('ONE'); });
59 |
60 | expect(rootElement.innerHTML).toBe('ONE');
61 |
62 | act(() => { content$.next('TWO'); });
63 |
64 | expect(rootElement.innerHTML).toBe('TWO');
65 |
66 | act(() => { content$.complete(); });
67 |
68 | expect(rootElement.innerHTML).toBe('TWO');
69 | });
70 | });
71 |
72 | describe('Multiple roots', () => {
73 | it('should render two streams', () =>{
74 | const a$ = new Subject();
75 | const b$ = new Subject();
76 | const App = () => <$>{a$} and {b$};
77 | act(() => { render(, rootElement); })
78 | act(() => { a$.next('a'); })
79 | expect(rootElement.innerHTML).toBe('a and ');
80 | act(() => { b$.next('b'); });
81 | expect(rootElement.innerHTML).toBe('a and b');
82 | });
83 | });
84 |
85 | describe('Error', () => {
86 | let content$: Subject;
87 |
88 | beforeEach(() => {
89 | content$ = new Subject();
90 | const App = () => <$>{content$};
91 | act(() => { render(, rootElement); });
92 | });
93 |
94 | afterEach(() => {
95 | content$.complete();
96 | content$ = null;
97 | });
98 |
99 | test('errors', () => {
100 | // NOTE: this error propagates to the console
101 | // it doesn't affect passing test, but creates visual mess
102 | // TODO: suppress the error
103 | act(() => { content$.error('ONE'); });
104 | expect(rootElement.innerHTML).toBe('ERROR:ONE');
105 | });
106 | });
107 |
108 | describe('Stream to Static updates', () => {
109 | it('should unsubscribe from previous observable', () => {
110 | let setState;
111 | let i = 0;
112 | const unsub = jest.fn();
113 | const createSource = () =>
114 | new Observable(observer => {
115 | observer.next(i);
116 | i++;
117 | return () => unsub();
118 | });
119 |
120 | const updateSource = () => {
121 | setState(createSource())
122 | }
123 |
124 | const App = () => {
125 | const [source$, _setState] = useState(null);
126 | setState = _setState;
127 | return <$>{source$};
128 | };
129 |
130 | act(() => { render(, rootElement); });
131 |
132 | expect(rootElement.innerHTML).toBe('');
133 | act(updateSource);
134 | expect(rootElement.innerHTML).toBe('0');
135 | expect(unsub.mock.calls.length).toBe(0);
136 | act(updateSource);
137 | expect(rootElement.innerHTML).toBe('1');
138 | expect(unsub.mock.calls.length).toBe(1);
139 | })
140 | })
141 | })
142 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "outDir": "./dist/",
5 | "noImplicitAny": false,
6 | "noUnusedLocals": false,
7 | "moduleResolution": "node",
8 | "module": "commonjs",
9 | "target": "es2015",
10 | "sourceMap": true,
11 | "jsx": "react",
12 | "types" : ["jest"],
13 | "esModuleInterop": true
14 | }
15 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const config = require('./configs/webpack.base');
2 |
3 | module.exports = config;
4 |
--------------------------------------------------------------------------------
10 | 
11 | 
12 |