@gongt/ts-stl-client
Version:
120 lines • 4.76 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const check_environment_1 = require("@gongt/ts-stl-library/check-environment");
const create_logger_1 = require("@gongt/ts-stl-library/debug/create-logger");
const levels_1 = require("@gongt/ts-stl-library/debug/levels");
const global_page_data_1 = require("@gongt/ts-stl-library/pattern/global-page-data");
const React = require("react");
const react_dom_1 = require("react-dom");
const util_1 = require("util");
const global_context_1 = require("./global-context");
exports.REACT_ROOT_ELEMENT_ID_VARNAME = 'REACT_ROOT_ELEMENT_ID';
class ReactRenderBase {
constructor() {
this.wrapStack = [];
}
setMainApp(component) {
this._getComponent = component;
}
getComponent(global) {
if (!this._getComponent) {
throw new TypeError(this.constructor.name + ': no main app.');
}
let component = this._getComponent(global);
this.wrapStack.forEach((props) => {
if (props) {
component = React.createElement(global_context_1.ReactEmptyWrapper, Object.assign({}, props), component);
}
else {
const Component = props.Component;
component = React.createElement(Component, { key: props.componentName }, component);
}
});
return component;
}
wrapComponent(componentName, Component, props) {
this.wrapStack.push({ componentName, Component, props });
}
}
exports.ReactRenderBase = ReactRenderBase;
class ReactRender extends ReactRenderBase {
constructor() {
super();
}
render(global = new global_page_data_1.GlobalVariable()) {
if (!global.has(exports.REACT_ROOT_ELEMENT_ID_VARNAME)) {
global.set(exports.REACT_ROOT_ELEMENT_ID_VARNAME, 'react-root-random-' + (Math.random() * 10000).toFixed(0));
}
const react_root_id = global.get(exports.REACT_ROOT_ELEMENT_ID_VARNAME);
let root = document.getElementById(react_root_id);
if (!root) {
root = document.createElement('DIV');
root.id = react_root_id;
document.body.appendChild(root);
}
const component = this.getComponent(global);
if (exports.debugComponentEnabled) {
debugComponent(component);
}
react_dom_1.render(React.createElement(global_context_1.GlobalContextProvider, { children: component, global: global }), root);
}
}
exports.ReactRender = ReactRender;
const debug = create_logger_1.createLogger(levels_1.LOG_LEVEL.SILLY, 'react-render');
const warn = create_logger_1.createLogger(levels_1.LOG_LEVEL.WARN, 'react-render');
function debugComponent(comp) {
let itr = comp;
debug('ReactRender:');
while (itr && itr['type']) {
let Component = itr['type'];
if (Component === global_context_1.ReactEmptyWrapper) {
Component = itr['props'].Component;
if (!Component) {
warn('ReactEmptyWrapper without children: ', itr);
itr = itr['props'].children;
continue;
}
}
const name = Component['displayName'] || Component['name'] || Component;
const obj = Object.assign({}, itr.props);
const dbg = [];
wellknownProps.forEach((item) => {
if (obj[item]) {
delete obj[item];
dbg.push(pgreen);
}
else {
dbg.push(pred);
}
dbg.push(item);
dbg.push(preset);
});
let ins;
if (check_environment_1.IS_SERVER) {
ins = util_1.inspect(obj, false, 1, true).replace(/\s+/g, ' ');
if (process.stdout['columns']) {
ins = ins.substr(0, process.stdout['columns']);
}
}
else {
ins = obj;
}
debug(messageStr, name, ...dbg, ins);
if (!itr['props']) {
break;
}
itr = itr['props'].children;
}
}
exports.debugComponent = debugComponent;
const pred = check_environment_1.IS_SERVER ? '\x1B[38;5;9m' : 'color:red';
const pgreen = check_environment_1.IS_SERVER ? '\x1B[38;5;10m' : 'color:lime';
const preset = check_environment_1.IS_SERVER ? '\x1B[0m' : 'color:black';
const wellknownProps = ['global', 'store', 'children', 'Component'];
const pcolor = check_environment_1.IS_SERVER ? '%s' : '%c';
const messagePart = wellknownProps.map(e => pcolor + '%s' + pcolor).join(', ');
const messageStr = check_environment_1.IS_SERVER
? '> %s (' + messagePart + ')\n%s'
: '> %s (' + messagePart + ', %O)';
exports.debugComponentEnabled = debug.enabled;
//# sourceMappingURL=render.js.map