1 | import { inject, injectable } from "inversify";
|
2 | import * as React from "react";
|
3 | import { ReactElement } from "react";
|
4 | import { render } from "react-dom";
|
5 | import { renderToStaticMarkup } from "react-dom/server";
|
6 | import {
|
7 | IRenderer,
|
8 | IRenderOptions,
|
9 | IRequire,
|
10 | } from "../interfaces";
|
11 | import TYPES from "../types";
|
12 |
|
13 | @injectable()
|
14 | export default class Renderer implements IRenderer {
|
15 | private loader: IRequire;
|
16 | private _render;
|
17 | private _renderToString;
|
18 |
|
19 | constructor(
|
20 | @inject(TYPES.IRequire) loader: IRequire,
|
21 | @inject(TYPES.render) render,
|
22 | @inject(TYPES.renderToString) renderToString,
|
23 | ) {
|
24 | this.loader = loader;
|
25 | this._render = render;
|
26 | this._renderToString = renderToString;
|
27 | }
|
28 |
|
29 | public render({ component, props = {}, el }: IRenderOptions) {
|
30 | const Component = this.loadComponent(component);
|
31 |
|
32 | const instance = <Component {...props} />;
|
33 | const html = this._renderToString(instance);
|
34 |
|
35 | if (!el) {
|
36 | return renderToStaticMarkup(
|
37 | <div
|
38 | data-lpui-component={component}
|
39 | data-lpui-component-props={JSON.stringify(props)}
|
40 | dangerouslySetInnerHTML={{ __html: html }}
|
41 | />,
|
42 | );
|
43 | }
|
44 |
|
45 | return this._render(instance, el);
|
46 | }
|
47 |
|
48 | private loadComponent(name: string): any {
|
49 | return this.loader(name);
|
50 | }
|
51 | }
|