add virtual module

This commit is contained in:
Andrey Vlasov 2020-03-28 23:03:10 +03:00
parent a907153d8b
commit 6975f2b973
8 changed files with 113 additions and 99 deletions

26
dist/index.js vendored
View File

@ -225,6 +225,18 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
/***/ }),
/***/ "./src/apps.ts":
/*!*********************!*\
!*** ./src/apps.ts ***!
\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\nclass Apps extends Map {\n constructor(apps) {\n super();\n this.findApp = (path) => {\n const currentPath = [...this.keys()].reduce((memo, appRoute) => {\n const correctedAppRoute = appRoute.replace(/^\\/?/, '/');\n const correctedMemo = memo ? memo.replace(/^\\/?/, '/') : memo;\n return this.startWithPath(path, correctedAppRoute) && this.startWithPath(correctedAppRoute, correctedMemo)\n ? appRoute\n : memo;\n }, void 0);\n return (this.get(currentPath) || this.get('/') || {\n version: ''\n });\n };\n this.merge(apps);\n }\n merge(apps) {\n (Object.entries(apps).forEach(([path, options]) => this.set(path, options)));\n }\n startWithPath(path, subPath) {\n if (!subPath) {\n return true;\n }\n const pathItem = String(path).split('/');\n const subPathItems = String(subPath).split('/');\n return subPathItems.reduce((memo, appItem, index) => memo && pathItem[index] === appItem, true);\n }\n}\nexports.Apps = Apps;\n\n\n//# sourceURL=webpack://bootstrap/./src/apps.ts?");
/***/ }),
/***/ "./src/main.ts":
/*!*********************!*\
!*** ./src/main.ts ***!
@ -233,7 +245,19 @@ eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn th
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! systemjs/dist/s */ \"./node_modules/systemjs/dist/s.js\");\n__webpack_require__(/*! systemjs/dist/extras/amd */ \"./node_modules/systemjs/dist/extras/amd.js\");\n__webpack_require__(/*! systemjs/dist/extras/named-register */ \"./node_modules/systemjs/dist/extras/named-register.js\");\n__webpack_require__(/*! systemjs/dist/extras/named-exports */ \"./node_modules/systemjs/dist/extras/named-exports.js\");\n__webpack_require__(/*! systemjs/dist/extras/transform */ \"./node_modules/systemjs/dist/extras/transform.js\");\nconst history_1 = __webpack_require__(/*! history */ \"./node_modules/history/esm/history.js\");\nconst systemJSImport = (requestUrl) => __awaiter(void 0, void 0, void 0, function* () {\n const { default: component, mount, unmount } = yield System.import(requestUrl);\n return { component, mount, unmount };\n});\nclass Apps extends Map {\n constructor(apps) {\n super();\n this.findApp = (path) => {\n const currentPath = [...this.keys()].reduce((memo, appRoute) => {\n const correctedAppRoute = appRoute.replace(/^\\/?/, '/');\n const correctedMemo = memo ? memo.replace(/^\\/?/, '/') : memo;\n return this.startWithPath(path, correctedAppRoute) && this.startWithPath(correctedAppRoute, correctedMemo)\n ? appRoute\n : memo;\n }, void 0);\n return (this.get(currentPath) || this.get('/') || {\n version: ''\n });\n };\n this.merge(apps);\n }\n merge(apps) {\n (Object.entries(apps).forEach(([path, options]) => this.set(path, options)));\n }\n startWithPath(path, subPath) {\n if (!subPath) {\n return true;\n }\n const pathItem = String(path).split('/');\n const subPathItems = String(subPath).split('/');\n return subPathItems.reduce((memo, appItem, index) => memo && pathItem[index] === appItem, true);\n }\n}\nconst defaultNavigations = {\n login: '/login',\n main: '/main',\n news: '/news',\n org: '/org',\n sections: '/sections',\n 'news.details': '/news/{{id}}',\n 'org.details': '/org/{{name}}',\n 'sections.details': '/sections/{{name}}'\n};\nconst defaultApps = {\n login: { version: '1.0.0' },\n main: { version: '1.0.1', name: 'main' },\n news: { version: '1.0.0' },\n org: { version: '1.0.0' },\n sections: { version: '1.0.0' }\n};\nexports.default = ({ apps: rowApps, navigations, config }) => __awaiter(void 0, void 0, void 0, function* () {\n const apps = new Apps(rowApps);\n const history = history_1.createBrowserHistory();\n let prevPathname = window.location.pathname;\n const app = apps.findApp(history.location.pathname);\n const publicPath = `/${app.name}/${app.version}`;\n __webpack_require__.p = `${config.baseUrl}${publicPath}${__webpack_require__.p}`;\n const appPath = `${config.baseUrl}${publicPath}/index.js`;\n const { component, mount, unmount } = yield systemJSImport(appPath);\n mount(component.default);\n history.listen((location) => {\n if (location.pathname !== prevPathname) {\n prevPathname = location.pathname;\n unmount();\n }\n });\n});\n\n\n//# sourceURL=webpack://bootstrap/./src/main.ts?");
eval("\nvar __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! systemjs/dist/s */ \"./node_modules/systemjs/dist/s.js\");\n__webpack_require__(/*! systemjs/dist/extras/amd */ \"./node_modules/systemjs/dist/extras/amd.js\");\n__webpack_require__(/*! systemjs/dist/extras/named-register */ \"./node_modules/systemjs/dist/extras/named-register.js\");\n__webpack_require__(/*! systemjs/dist/extras/named-exports */ \"./node_modules/systemjs/dist/extras/named-exports.js\");\n__webpack_require__(/*! systemjs/dist/extras/transform */ \"./node_modules/systemjs/dist/extras/transform.js\");\nconst history_1 = __webpack_require__(/*! history */ \"./node_modules/history/esm/history.js\");\nconst apps_1 = __webpack_require__(/*! ./apps */ \"./src/apps.ts\");\nconst virtual_module_1 = __webpack_require__(/*! ./virtual-module */ \"./src/virtual-module.ts\");\nconst systemJSImport = (requestUrl) => __awaiter(void 0, void 0, void 0, function* () {\n const { default: component, mount, unmount } = yield System.import(requestUrl);\n return { component, mount, unmount };\n});\n// const defaultNavigations = {\n// login: '/login',\n// main: '/main',\n// news: '/news',\n// org: '/org',\n// sections: '/sections',\n// 'news.details': '/news/{{id}}',\n// 'org.details': '/org/{{name}}',\n// 'sections.details': '/sections/{{name}}'\n// }\n// const defaultApps = {\n// login: { version: '1.0.0', name: 'login' },\n// main: { version: '1.0.1', name: 'main' },\n// news: { version: '1.0.0', name: 'news' },\n// org: { version: '1.0.0', name: 'org' },\n// sections: { version: '1.0.0', name: 'sections' }\n// }\nexports.default = ({ apps: rawApps, navigations, config }) => __awaiter(void 0, void 0, void 0, function* () {\n virtual_module_1.defineVirtualModule({ navigations, config });\n const apps = new apps_1.Apps(rawApps);\n const history = history_1.createBrowserHistory();\n let prevPathname = window.location.pathname;\n const app = apps.findApp(history.location.pathname);\n const publicPath = `/${app.name}/${app.version}`;\n __webpack_require__.p = `${config.baseUrl}${publicPath}${__webpack_require__.p}`;\n const appPath = `${config.baseUrl}${publicPath}/index.js`;\n const { component, mount, unmount } = yield systemJSImport(appPath);\n mount(component.default);\n history.listen((location) => {\n if (location.pathname !== prevPathname) {\n prevPathname = location.pathname;\n unmount();\n }\n });\n});\n\n\n//# sourceURL=webpack://bootstrap/./src/main.ts?");
/***/ }),
/***/ "./src/virtual-module.ts":
/*!*******************************!*\
!*** ./src/virtual-module.ts ***!
\*******************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/* WEBPACK VAR INJECTION */(function(global) {\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.defineVirtualModule = (params) => {\n const virtualModule = createVirtualModule(params);\n // @ts-ignore\n global.define('root.scope.env', [], virtualModule);\n};\nconst createVirtualModule = ({ config, navigations }) => ({\n getConfig: () => config,\n getConfigValue: (key) => config[key],\n getNavigations: () => navigations,\n getNavigationsValue: (key) => navigations[key],\n});\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack://bootstrap/./src/virtual-module.ts?");
/***/ })

View File

@ -1,3 +0,0 @@
{
"watch": ["stubs/"]
}

View File

@ -1,5 +1,5 @@
{
"name": "inno-bootstrap",
"name": "fire.app",
"version": "1.0.0",
"description": "",
"main": "index.js",
@ -12,34 +12,20 @@
"license": "MIT",
"devDependencies": {
"@types/node": "13.7.0",
"@types/react": "16.9.19",
"@types/react-dom": "16.9.5",
"@types/react-redux": "7.1.7",
"@types/systemjs": "6.1.0",
"awesome-typescript-loader": "5.2.1",
"clean-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "5.1.1",
"es6-promise": "4.2.8",
"exports-loader": "0.7.0",
"express": "4.17.1",
"fbjs": "1.0.0",
"file-loader": "5.0.2",
"history": "4.10.1",
"imports-loader": "0.8.0",
"redux-devtools-extension": "2.13.8",
"rimraf": "3.0.1",
"systemjs": "6.2.2",
"typescript": "3.7.5",
"uds-news-original": "0.1.1",
"uds-sections-origin": "1.0.1",
"webpack": "4.41.5",
"webpack-cli": "3.3.10",
"webpack-dev-middleware": "3.7.2",
"webpack-hot-client": "4.1.2",
"whatwg-fetch": "3.0.0"
},
"dependencies": {
"react": "16.12.0",
"react-dom": "16.12.0"
}
}

48
src/apps.ts Normal file
View File

@ -0,0 +1,48 @@
export class Apps extends Map {
constructor(apps) {
super()
this.merge(apps)
}
merge(apps) {
(Object.entries(
apps
).forEach(([path, options]) =>
this.set(path, options)
))
}
startWithPath(path, subPath) {
if (!subPath) {
return true;
}
const pathItem = String(path).split('/');
const subPathItems = String(subPath).split('/')
return subPathItems.reduce(
(memo, appItem, index) => memo && pathItem[index] === appItem,
true
)
}
findApp = (path) => {
const currentPath = [...this.keys()].reduce(
(memo, appRoute) => {
const correctedAppRoute = appRoute.replace(/^\/?/, '/')
const correctedMemo = memo ? memo.replace(/^\/?/, '/') : memo
return this.startWithPath(path, correctedAppRoute) && this.startWithPath(correctedAppRoute, correctedMemo)
? appRoute
: memo
}, void 0
)
return (
this.get(currentPath) || this.get('/') || {
version: ''
}
)
}
}

View File

@ -4,12 +4,8 @@ import "systemjs/dist/extras/named-register";
import "systemjs/dist/extras/named-exports";
import "systemjs/dist/extras/transform";
import { createBrowserHistory } from 'history'
declare var System: {
import(string): Promise<any>
}
declare var __webpack_public_path__: string;
import { Apps } from './apps'
import { defineVirtualModule } from './virtual-module'
const systemJSImport = async (requestUrl: string) => {
const { default: component, mount, unmount } = await System.import(
@ -18,85 +14,37 @@ const systemJSImport = async (requestUrl: string) => {
return { component, mount, unmount }
}
class Apps extends Map {
// const defaultNavigations = {
// login: '/login',
// main: '/main',
// news: '/news',
// org: '/org',
// sections: '/sections',
// 'news.details': '/news/{{id}}',
// 'org.details': '/org/{{name}}',
// 'sections.details': '/sections/{{name}}'
// }
constructor(apps) {
super()
this.merge(apps)
}
// const defaultApps = {
// login: { version: '1.0.0', name: 'login' },
// main: { version: '1.0.1', name: 'main' },
// news: { version: '1.0.0', name: 'news' },
// org: { version: '1.0.0', name: 'org' },
// sections: { version: '1.0.0', name: 'sections' }
// }
merge(apps) {
(Object.entries(
apps
).forEach(([path, options]) =>
this.set(path, options)
))
}
export default async ({ apps: rawApps, navigations, config }) => {
defineVirtualModule({navigations, config})
startWithPath(path, subPath) {
if (!subPath) {
return true;
}
const apps = new Apps(rawApps)
const pathItem = String(path).split('/');
const subPathItems = String(subPath).split('/')
return subPathItems.reduce(
(memo, appItem, index) => memo && pathItem[index] === appItem,
true
)
}
findApp = (path) => {
const currentPath = [...this.keys()].reduce(
(memo, appRoute) => {
const correctedAppRoute = appRoute.replace(/^\/?/, '/')
const correctedMemo = memo ? memo.replace(/^\/?/, '/') : memo
return this.startWithPath(path, correctedAppRoute) && this.startWithPath(correctedAppRoute, correctedMemo)
? appRoute
: memo
}, void 0
)
return (
this.get(currentPath) || this.get('/') || {
version: ''
}
)
}
}
const defaultNavigations = {
login: '/login',
main: '/main',
news: '/news',
org: '/org',
sections: '/sections',
'news.details': '/news/{{id}}',
'org.details': '/org/{{name}}',
'sections.details': '/sections/{{name}}'
}
const defaultApps = {
login: { version: '1.0.0', name: 'login' },
main: { version: '1.0.1', name: 'main' },
news: { version: '1.0.0', name: 'news' },
org: { version: '1.0.0', name: 'org' },
sections: { version: '1.0.0', name: 'sections' }
}
export default async ({ apps: rowApps, navigations, config }) => {
const apps = new Apps(rowApps)
const history = createBrowserHistory()
let prevPathname = window.location.pathname
const app = apps.findApp(history.location.pathname)
const publicPath = `/${app.name}/${app.version}`
const publicPath = `/${app.name}/${app.version}`
__webpack_public_path__ = `${config.baseUrl}${publicPath}${__webpack_public_path__}`
@ -106,7 +54,6 @@ export default async ({ apps: rowApps, navigations, config }) => {
mount(component.default);
history.listen((location) => {
if (location.pathname !== prevPathname) {
prevPathname = location.pathname

View File

@ -16,4 +16,6 @@ declare module '*.png' {
declare module '*.mp4' {
const value: any;
export = value;
}
}
declare var __webpack_public_path__: string;

12
src/virtual-module.ts Normal file
View File

@ -0,0 +1,12 @@
export const defineVirtualModule = (params) => {
const virtualModule = createVirtualModule(params)
// @ts-ignore
global.define('root.scope.env', [], virtualModule)
}
const createVirtualModule = ({config, navigations}) => ({
getConfig: () => config,
getConfigValue: (key) => config[key],
getNavigations: () => navigations,
getNavigationsValue: (key) => navigations[key],
})

View File

@ -1,5 +1,3 @@
const webpackCopy = require('copy-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@ -22,7 +20,7 @@ module.exports = {
plugins: [new CleanWebpackPlugin()],
resolve: {
extensions: [".jsx", ".js"]
extensions: [".ts", ".js"]
},
module: {