@platform/react.ssr/src.sample/ui/lib/components/Main.js

A lightweight SSR (server-side-rendering) system for react apps bundled with ParcelJS and hosted on S3.

import * as React from 'react';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { css, is } from '../common';
export class Main extends React.PureComponent {
    /**
     * [Lifecycle]
     */
    constructor(props) {
        super(props);
        this.state = {};
        this.state$ = new Subject();
        this.unmounted$ = new Subject();
        /**
         * [Handlers]
         */
        this.handleClick = async () => {
            this.state$.next({ count: this.count + 1 });
            const foo = import('./Foo');
            const Foo = await foo;
            const el = React.createElement(Foo.Foo, null);
            this.state$.next({ foo: el });
        };
        const state$ = this.state$.pipe(takeUntil(this.unmounted$));
        state$.subscribe(e => this.setState(e));
    }
    componentWillUnmount() {
        this.unmounted$.next();
        this.unmounted$.complete();
    }
    /**
     * [Properties]
     */
    get count() {
        return this.state.count || 0;
    }
    get version() {
        const el = is.browser ? document.getElementById('root') : undefined;
        return (el && el.getAttribute('data-version')) || 'loading...';
    }
    /**
     * [Render]
     */
    render() {
        const styles = {
            base: css({
                position: 'relative',
                PaddingX: 50,
                PaddingY: 20,
                userSelect: 'none',
            }),
            title: css({
                fontSize: 34,
                marginBottom: 10,
            }),
            image: css({ borderRadius: 8 }),
            version: css({
                Absolute: [5, 10, null, null],
            }),
        };
        return (React.createElement("div", Object.assign({}, css(styles.base, this.props.style), { onClick: this.handleClick }),
            React.createElement("div", Object.assign({}, styles.title),
                "Kitty: ",
                this.count || 0),
            React.createElement("div", Object.assign({}, styles.version), this.version),
            React.createElement("img", Object.assign({ src: '/images/cat.jpg' }, styles.image)),
            this.state.foo));
    }
}