@bytedance/mona-client-web
Version:
web for mona
135 lines • 6.87 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Redirect, useHistory } from 'react-router-dom';
import NavBar from './components/NavBar';
import TabBar from './components/TabBar';
import formatPath from '@bytedance/mona-shared/dist/formatPath';
import { GLOBAL_LIFECYCLE_STORE } from '@bytedance/mona-shared/dist/constants';
import { parseSearch } from '@bytedance/mona-shared/dist/search';
import { setNavigationBarTitle } from './apis/api';
export var WrapperComponent = function (_a) {
var children = _a.children, title = _a.title;
document.title = title || '应用';
useEffect(function () {
setNavigationBarTitle({ title: document.title });
}, [document.title]);
return React.createElement(React.Fragment, null, children);
};
var maskStyle = {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
backgroundColor: 'rgba(255, 255, 255)',
};
var NoMatchImgWrapperStyle = {
color: '#0000008C',
fontSize: '14px',
textAlign: 'center',
lineHeight: '20px',
whiteSpace: 'nowrap',
position: 'absolute',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
};
var imgStyle = { width: 320, marginBottom: 8 };
export var NoMatch = function (_a) {
var defaultPath = _a.defaultPath;
var history = useHistory();
useEffect(function () {
var _a, _b;
// app生命周期pageNotFound
//@ts-ignore
(_b = (_a = window[GLOBAL_LIFECYCLE_STORE]) === null || _a === void 0 ? void 0 : _a.handlePageNotFound) === null || _b === void 0 ? void 0 : _b.call(_a, { path: defaultPath });
}, [defaultPath]);
return (React.createElement("div", { style: maskStyle },
React.createElement("div", { style: NoMatchImgWrapperStyle },
React.createElement("img", { style: imgStyle, src: 'https://lf3-fe.ecombdstatic.com/obj/ecom-open-butler/mona/error.png' }),
React.createElement("div", null,
React.createElement("span", null,
"\u4E0D\u5B58\u5728\u8DEF\u7531 ",
location.pathname,
" ",
React.createElement("a", { onClick: function () { return history.push(formatPath(defaultPath)); } }, "\u8FD4\u56DE\u9996\u9875"))))));
};
export var HistorySetWrapper = function (_a) {
var children = _a.children;
var history = useHistory();
// set global history to implement navigateTo and redirectTo api
window.__mona_history = history;
return React.createElement(React.Fragment, null, children);
};
var defaultLightConfig = { mode: 'sidebar-semi-960' };
var cbInit = false;
function prepareLightApp(config) {
// @ts-ignore
if (!cbInit && typeof window.__MONA_LIGHT_APP_INIT_CB === 'function') {
// @ts-ignore
window.__MONA_LIGHT_APP_INIT_CB(__assign(__assign({}, defaultLightConfig), (config || {})));
cbInit = true;
// @ts-ignore
// window.__MONA_LIGHT_APP_INIT_CB = undefined;
}
}
export function createWebApp(Component, routes, options, libraryConfig) {
var Provider = (libraryConfig === null || libraryConfig === void 0 ? void 0 : libraryConfig.ConfigProvider)
? libraryConfig.ConfigProvider
: function (_a) {
var children = _a.children;
return React.createElement(React.Fragment, null, children);
};
var render = function (_a) {
var dom = _a.dom;
prepareLightApp(options === null || options === void 0 ? void 0 : options.light);
ReactDOM.render(React.createElement(Provider, { prefixCls: (libraryConfig === null || libraryConfig === void 0 ? void 0 : libraryConfig.prefixCls) || 'auxo', locale: libraryConfig === null || libraryConfig === void 0 ? void 0 : libraryConfig.zh_CN },
React.createElement(BrowserRouter, null,
React.createElement(HistorySetWrapper, null,
React.createElement(Component, null,
(options === null || options === void 0 ? void 0 : options.navBar) && React.createElement(NavBar, __assign({}, options === null || options === void 0 ? void 0 : options.navBar)),
React.createElement(Switch, null, routes === null || routes === void 0 ? void 0 :
routes.map(function (route) { return (React.createElement(Route, { key: route.path, path: formatPath(route.path), children: function (_a) {
var location = _a.location;
return (React.createElement(WrapperComponent, { title: route.title },
React.createElement(route.component, { search: location.search, searchParams: parseSearch(location.search) })));
} })); }),
(routes === null || routes === void 0 ? void 0 : routes.length) && (React.createElement(Route, { exact: true, path: "/" },
React.createElement(Redirect, { to: formatPath(routes[0].path || (options === null || options === void 0 ? void 0 : options.defaultPath) || '/') }))),
React.createElement(Route, { path: "*" },
React.createElement(Redirect, { to: formatPath(routes[0].path || (options === null || options === void 0 ? void 0 : options.defaultPath) || '/') }))),
(options === null || options === void 0 ? void 0 : options.tabBar) && React.createElement(TabBar, { tab: options === null || options === void 0 ? void 0 : options.tabBar }))))), dom.querySelector('#root'));
};
// 在首次加载和执行时会触发该函数
var provider = function () { return ({
render: render, // 应用在渲染时会触发该 hook
destroy: function (_a) {
var dom = _a.dom;
// 应用在销毁时会触发该 hook
var root = (dom && dom.querySelector('#root')) || dom; // 若为 JS 入口直接将传入节点作为挂载点和销毁节点
if (root) {
// 做对应的销毁逻辑，保证子应用在销毁时对应的副作用也被移除
ReactDOM.unmountComponentAtNode(root);
}
},
}); };
if (!window.__MARFISH__) {
render({ dom: document });
}
return {
provider: provider,
};
}
//# sourceMappingURL=createWebApp.js.map