maishu-chitu-react - npm Package Compare versions

Comparing version 1.36.0 to 1.40.0

demo/main.ts

@@ -23,6 +23,6 @@
 
-requirejs(["maishu-chitu-react"], function (mod) {
-    let app = new mod.Application();
+requirejs(["application"], function (mod) {
+    let app = mod.app;
     app.run();
 })
 

demo/nws-config.js

@@ -1,2 +0,1 @@
-
 const path = require("path");
@@ -8,3 +7,10 @@
         "maishu-chitu-react.js": path.join(__dirname, "../dist/index.js")
+    },
+    urlRewrite: (rawUrl) => {
+        let ext = path.extname(rawUrl);
+        if (!ext)
+            return "/index.html";
+
+        return rawUrl;
     }
 }

dist/index.js

 /*!
  * 
- *  maishu-chitu-react v1.35.0
+ *  maishu-chitu-react v1.36.0
  *  https://github.com/ansiboy/services-sdk
- *  
+ *
  *  Copyright (c) 2016-2018, shu mai <[e-mail]>
  *  Licensed under the MIT License.
- * 
+ *
  */
@@ -20,89 +20,5 @@ (function webpackUniversalModuleDefinition(root, factory) {
 })(typeof window === 'undefined' ? global : window, function(__WEBPACK_EXTERNAL_MODULE_maishu_chitu__, __WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {
-return /******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = "./out/index.js");
-/******/ })
-/************************************************************************/
-/******/ ({
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
 
@@ -113,6 +29,6 @@ /***/ "./out/application.js":
   \****************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
@@ -126,89 +42,163 @@ return new (P || (P = Promise))(function (resolve, reject) {
 };
-!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(/*! react */ "react"), __webpack_require__(/*! react-dom */ "react-dom"), __webpack_require__(/*! maishu-chitu */ "maishu-chitu"), __webpack_require__(/*! ./errors */ "./out/errors.js"), __webpack_require__(/*! ./data-loader */ "./out/data-loader.js")], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports, React, ReactDOM, chitu, errors_1, data_loader_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Application = exports.Page = void 0;
-    class Page extends chitu.Page {
-        constructor() {
-            super(...arguments);
-            this.component = null;
-            // app: Application
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Application = exports.Page = void 0;
+const React = __webpack_require__(/*! react */ "react");
+const ReactDOM = __webpack_require__(/*! react-dom */ "react-dom");
+const chitu = __webpack_require__(/*! maishu-chitu */ "maishu-chitu");
+const errors_1 = __webpack_require__(/*! ./errors */ "./out/errors.js");
+const data_loader_1 = __webpack_require__(/*! ./data-loader */ "./out/data-loader.js");
+class Page extends chitu.Page {
+    constructor() {
+        super(...arguments);
+        this.component = null;
+    }
+}
+exports.Page = Page;
+class DefaultPageNodeParser {
+    constructor(modulesPath) {
+        this.nodes = {};
+        this.modulesPath = modulesPath.endsWith("/") ? modulesPath.substr(0, modulesPath.length - 1) : modulesPath;
+    }
+    parse(pageName) {
+        let node = this.nodes[pageName];
+        if (node == null) {
+            let path = `${pageName}`.split('_').join('/');
+            if (this.modulesPath) {
+                path = `${this.modulesPath}/${path}`;
+            }
+            node = { action: this.createDefaultAction(path, (path) => this.loadjs(path)), name: pageName };
+            this.nodes[pageName] = node;
         }
+        return node;
     }
-    exports.Page = Page;
-    // export let PageContext = React.createContext<{ page: Page | null }>({ page: null })
-    class DefaultPageNodeParser {
-        constructor(modulesPath) {
-            this.nodes = {};
-            this.modulesPath = modulesPath.endsWith("/") ? modulesPath.substr(0, modulesPath.length - 1) : modulesPath;
-        }
-        parse(pageName) {
-            let node = this.nodes[pageName];
-            if (node == null) {
-                let path = `${pageName}`.split('_').join('/');
-                if (this.modulesPath) {
-                    path = `${this.modulesPath}/${path}`;
+    createDefaultAction(url, loadjs) {
+        return (page, app) => __awaiter(this, void 0, void 0, function* () {
+            let actionExports = yield loadjs(url);
+            if (!actionExports)
+                throw errors_1.Errors.exportsCanntNull(url);
+            let action = actionExports.default;
+            if (action == null) {
+                throw errors_1.Errors.canntFindAction(page.name);
+            }
+            let props = {
+                app: app,
+                data: page.data,
+                events: {
+                    shown: page.shown,
+                    showing: page.showing,
+                    hidden: page.hidden,
+                    hiding: page.hiding,
+                },
+                source: page,
+                createService(type) {
+                    return page.createService(type);
                 }
-                node = { action: this.createDefaultAction(path, (path) => this.loadjs(path)), name: pageName };
-                this.nodes[pageName] = node;
+            };
+            let loadProps = actionExports.loadProps;
+            if (typeof loadProps == "function") {
+                let partialProps = yield loadProps(page.data);
+                props = Object.assign(props, partialProps || {});
             }
-            return node;
+            let loadData = actionExports.loadData || action[data_loader_1.LOAD_DATA];
+            if (typeof loadData == "function") {
+                let partialData = yield loadData(props);
+                Object.assign(props.data, partialData);
+            }
+            let element = React.createElement(action, props);
+            let component = ReactDOM.render(element, page.element);
+            // let component = ReactDOM.hydrate(element, page.element) as React.Component;
+            page.component = component;
+        });
+    }
+}
+const TargetUrlVariableName = "targetUrl";
+const DefaultPage = "index";
+class Application extends chitu.Application {
+    constructor(args) {
+        args = args || {};
+        if (args.modulesPath === undefined) {
+            args.modulesPath = "modules";
         }
-        createDefaultAction(url, loadjs) {
-            return (page, app) => __awaiter(this, void 0, void 0, function* () {
-                let actionExports = yield loadjs(url);
-                if (!actionExports)
-                    throw errors_1.Errors.exportsCanntNull(url);
-                let action = actionExports['default'];
-                if (action == null) {
-                    throw errors_1.Errors.canntFindAction(page.name);
+        if (!args.parser)
+            args.parser = Application.createPageNodeParser(args.modulesPath);
+        super(args);
+        args.parser.app = this;
+        args.parser.loadjs = (path) => this.loadjs(path);
+        this.defaultPage = args.defaultPage || DefaultPage;
+        this.pageType = Page;
+        let mode = args.mode || "hash";
+        if (mode == "history") {
+            this.run = () => {
+                let routeString = this.getRouteString();
+                this.showPage(routeString);
+            };
+            this.parseUrl = (url) => {
+                let searchIndex = url.indexOf("?");
+                let search;
+                let pathName;
+                if (searchIndex > 0) {
+                    search = url.substr(searchIndex);
+                    pathName = url.substr(0, searchIndex);
                 }
-                let props = {
-                    app: app,
-                    data: page.data,
-                    events: {
-                        shown: page.shown,
-                        showing: page.showing,
-                        hidden: page.hidden,
-                        hiding: page.hiding,
-                    },
-                    source: page,
-                    createService(type) {
-                        return page.createService(type);
+                else {
+                    pathName = url;
+                }
+                let routers = args === null || args === void 0 ? void 0 : args.routers;
+                let values = {};
+                if (routers != null) {
+                    for (let i = 0; i < routers.length; i++) {
+                        let m = routers[i].match(pathName);
+                        if (m) {
+                            let { controller, action } = m;
+                            if (!controller)
+                                throw new Error(`Can not get controller from route data.`);
+                            if (!action)
+                                throw new Error(`Can not get action from route data.`);
+                            Object.assign(values, m);
+                            break;
+                        }
                     }
-                };
-                if (typeof action[data_loader_1.LOAD_DATA] == "function") {
-                    let partialData = yield action[data_loader_1.LOAD_DATA](props);
-                    Object.assign(props.data, partialData);
                 }
-                let element = React.createElement(action, props);
-                let component = ReactDOM.render(element, page.element);
-                page.component = component;
-            });
+                if (search) {
+                    let q = search.substr(1);
+                    let r = q ? this.pareeUrlQuery(q) : {};
+                    Object.assign(values, r);
+                }
+                let arr = pathName.split("/").filter(o => o);
+                let pageName = arr.length == 0 ? "index" : arr.join("_");
+                return { pageName, values };
+            };
         }
     }
-    class Application extends chitu.Application {
-        constructor(args) {
-            args = args || {};
-            if (args.modulesPath === undefined) {
-                args.modulesPath = "modules";
+    createPageElement(pageName, containerName) {
+        let container = this.containers[containerName];
+        if (container == null)
+            throw errors_1.Errors.containerNotExist(containerName);
+        let e = container.querySelector(`[name="${pageName}"]`);
+        if (e == null) {
+            e = super.createPageElement(pageName, containerName);
+            e.setAttribute("name", pageName);
+        }
+        return e;
+    }
+    getRouteString() {
+        let routeString = window[TargetUrlVariableName];
+        if (!routeString) {
+            routeString = location.pathname || this.defaultPage;
+            if (location.search) {
+                routeString = routeString + location.search;
             }
-            if (!args.parser)
-                args.parser = Application.createPageNodeParser(args.modulesPath);
-            super(args);
-            args.parser.app = this;
-            args.parser.loadjs = (path) => this.loadjs(path);
-            // this.pageCreated.add((sender, page) => {
-            //     page.element.className = "page"
-            // })
-            this.pageType = Page;
         }
-        static createPageNodeParser(modulesPath) {
-            let p = new DefaultPageNodeParser(modulesPath);
-            return p;
+        routeString = routeString.trim();
+        if (routeString[0] == '/') {
+            routeString = routeString.substr(1);
         }
+        return routeString;
     }
-    exports.Application = Application;
-}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+    static createPageNodeParser(modulesPath) {
+        let p = new DefaultPageNodeParser(modulesPath);
+        return p;
+    }
+}
+exports.Application = Application;
 
@@ -222,21 +212,18 @@
   \****************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports) => {
 
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.dataLoader = exports.LOAD_DATA = void 0;
-    exports.LOAD_DATA = "loadData";
-    function dataLoader(loadData) {
-        return function (constructor) {
-            constructor[exports.LOAD_DATA] = loadData;
-            return constructor;
-        };
-    }
-    exports.dataLoader = dataLoader;
-}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
 
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.LOAD_PROPS = exports.dataLoader = exports.LOAD_DATA = void 0;
+exports.LOAD_DATA = "loadData";
+function dataLoader(loadData) {
+    return function (constructor) {
+        constructor[exports.LOAD_DATA] = loadData;
+        return constructor;
+    };
+}
+exports.dataLoader = dataLoader;
+exports.LOAD_PROPS = "loadProps";
 
+
 /***/ }),
@@ -248,22 +235,22 @@
   \***********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ ((__unused_webpack_module, exports) => {
 
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Errors = void 0;
-    class Errors {
-        static canntFindAction(pageName) {
-            let msg = `Cannt find action in page '${pageName}', is the exports has default field?`;
-            return new Error(msg);
-        }
-        static exportsCanntNull(pageName) {
-            let msg = `Exports of page '${pageName}' is null.`;
-            return new Error(msg);
-        }
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.Errors = void 0;
+class Errors {
+    static canntFindAction(pageName) {
+        let msg = `Cannt find action in page '${pageName}', is the exports has default field?`;
+        return new Error(msg);
     }
-    exports.Errors = Errors;
-}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+    static exportsCanntNull(pageName) {
+        let msg = `Exports of page '${pageName}' is null.`;
+        return new Error(msg);
+    }
+    static containerNotExist(containerName) {
+        let msg = `Container ${containerName} is not exists.`;
+        return new Error(msg);
+    }
+}
+exports.Errors = Errors;
 
@@ -273,22 +260,2 @@
 
-/***/ "./out/index.js":
-/*!**********************!*\
-  !*** ./out/index.js ***!
-  \**********************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(/*! ./application */ "./out/application.js"), __webpack_require__(/*! ./data-loader */ "./out/data-loader.js")], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports, application_1, data_loader_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.dataLoader = exports.Page = exports.Application = void 0;
-    Object.defineProperty(exports, "Application", { enumerable: true, get: function () { return application_1.Application; } });
-    Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return application_1.Page; } });
-    Object.defineProperty(exports, "dataLoader", { enumerable: true, get: function () { return data_loader_1.dataLoader; } });
-}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-
-
-/***/ }),
-
 /***/ "maishu-chitu":
@@ -298,4 +265,3 @@ /*!*******************************!*\
   \*******************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
+/***/ ((module) => {
 
@@ -310,4 +276,3 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_maishu_chitu__;
   \************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
+/***/ ((module) => {
 
@@ -322,4 +287,3 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
   \****************************/
-/*! no static exports found */
-/***/ (function(module, exports) {
+/***/ ((module) => {
 
@@ -330,4 +294,51 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
 
-/******/ });
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+var exports = __webpack_exports__;
+/*!**********************!*\
+  !*** ./out/index.js ***!
+  \**********************/
+
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.dataLoader = exports.Page = exports.Application = void 0;
+var application_1 = __webpack_require__(/*! ./application */ "./out/application.js");
+Object.defineProperty(exports, "Application", ({ enumerable: true, get: function () { return application_1.Application; } }));
+Object.defineProperty(exports, "Page", ({ enumerable: true, get: function () { return application_1.Page; } }));
+var data_loader_1 = __webpack_require__(/*! ./data-loader */ "./out/data-loader.js");
+Object.defineProperty(exports, "dataLoader", ({ enumerable: true, get: function () { return data_loader_1.dataLoader; } }));
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
 });
 //# sourceMappingURL=index.js.map

out/application.d.ts

 import React = require("react");
 import * as chitu from 'maishu-chitu';
 import { PageNodeParser } from "maishu-chitu";
+import { Router } from "maishu-router";
+export interface ComponentModule {
+    default: React.ComponentClass<any>;
+    loadData?: (props: any) => Promise<any>;
+    loadProps?: (data: any, context: Pick<Application, "createService">) => Promise<any>;
+}
 export interface PageProps {
@@ -31,2 +37,3 @@ app: Application;
 export declare class Application extends chitu.Application {
+    private defaultPage;
     constructor(args?: {
@@ -38,7 +45,12 @@ parser?: chitu.PageNodeParser;
         };
-        /** 模块路径 */
+        /** 页面路径, 默认为 modules */
         modulesPath?: string;
+        mode?: "history" | "hash";
+        routers?: Router[];
+        defaultPage?: string;
     });
+    createPageElement(pageName: string, containerName: string): HTMLElement;
+    private getRouteString;
     static createPageNodeParser(modulesPath: string): DefaultPageNodeParser;
 }
 export {};

out/application.js

@@ -0,1 +1,2 @@
+"use strict";
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -10,87 +11,162 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 };
-define(["require", "exports", "react", "react-dom", "maishu-chitu", "./errors", "./data-loader"], function (require, exports, React, ReactDOM, chitu, errors_1, data_loader_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Application = exports.Page = void 0;
-    class Page extends chitu.Page {
-        constructor() {
-            super(...arguments);
-            this.component = null;
-            // app: Application
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Application = exports.Page = void 0;
+const React = require("react");
+const ReactDOM = require("react-dom");
+const chitu = require("maishu-chitu");
+const errors_1 = require("./errors");
+const data_loader_1 = require("./data-loader");
+class Page extends chitu.Page {
+    constructor() {
+        super(...arguments);
+        this.component = null;
+    }
+}
+exports.Page = Page;
+class DefaultPageNodeParser {
+    constructor(modulesPath) {
+        this.nodes = {};
+        this.modulesPath = modulesPath.endsWith("/") ? modulesPath.substr(0, modulesPath.length - 1) : modulesPath;
+    }
+    parse(pageName) {
+        let node = this.nodes[pageName];
+        if (node == null) {
+            let path = `${pageName}`.split('_').join('/');
+            if (this.modulesPath) {
+                path = `${this.modulesPath}/${path}`;
+            }
+            node = { action: this.createDefaultAction(path, (path) => this.loadjs(path)), name: pageName };
+            this.nodes[pageName] = node;
         }
+        return node;
     }
-    exports.Page = Page;
-    // export let PageContext = React.createContext<{ page: Page | null }>({ page: null })
-    class DefaultPageNodeParser {
-        constructor(modulesPath) {
-            this.nodes = {};
-            this.modulesPath = modulesPath.endsWith("/") ? modulesPath.substr(0, modulesPath.length - 1) : modulesPath;
-        }
-        parse(pageName) {
-            let node = this.nodes[pageName];
-            if (node == null) {
-                let path = `${pageName}`.split('_').join('/');
-                if (this.modulesPath) {
-                    path = `${this.modulesPath}/${path}`;
+    createDefaultAction(url, loadjs) {
+        return (page, app) => __awaiter(this, void 0, void 0, function* () {
+            let actionExports = yield loadjs(url);
+            if (!actionExports)
+                throw errors_1.Errors.exportsCanntNull(url);
+            let action = actionExports.default;
+            if (action == null) {
+                throw errors_1.Errors.canntFindAction(page.name);
+            }
+            let props = {
+                app: app,
+                data: page.data,
+                events: {
+                    shown: page.shown,
+                    showing: page.showing,
+                    hidden: page.hidden,
+                    hiding: page.hiding,
+                },
+                source: page,
+                createService(type) {
+                    return page.createService(type);
                 }
-                node = { action: this.createDefaultAction(path, (path) => this.loadjs(path)), name: pageName };
-                this.nodes[pageName] = node;
+            };
+            let loadProps = actionExports.loadProps;
+            if (typeof loadProps == "function") {
+                let partialProps = yield loadProps(page.data, app);
+                props = Object.assign(props, partialProps || {});
             }
-            return node;
+            let loadData = actionExports.loadData || action[data_loader_1.LOAD_DATA];
+            if (typeof loadData == "function") {
+                let partialData = yield loadData(props);
+                Object.assign(props.data, partialData);
+            }
+            let element = React.createElement(action, props);
+            let component = ReactDOM.render(element, page.element);
+            // let component = ReactDOM.hydrate(element, page.element) as React.Component;
+            page.component = component;
+        });
+    }
+}
+const TargetUrlVariableName = "targetUrl";
+const DefaultPage = "index";
+class Application extends chitu.Application {
+    constructor(args) {
+        args = args || {};
+        if (args.modulesPath === undefined) {
+            args.modulesPath = "modules";
         }
-        createDefaultAction(url, loadjs) {
-            return (page, app) => __awaiter(this, void 0, void 0, function* () {
-                let actionExports = yield loadjs(url);
-                if (!actionExports)
-                    throw errors_1.Errors.exportsCanntNull(url);
-                let action = actionExports['default'];
-                if (action == null) {
-                    throw errors_1.Errors.canntFindAction(page.name);
+        if (!args.parser)
+            args.parser = Application.createPageNodeParser(args.modulesPath);
+        super(args);
+        args.parser.app = this;
+        args.parser.loadjs = (path) => this.loadjs(path);
+        this.defaultPage = args.defaultPage || DefaultPage;
+        this.pageType = Page;
+        let mode = args.mode || "hash";
+        if (mode == "history") {
+            this.run = () => {
+                let routeString = this.getRouteString();
+                this.showPage(routeString);
+            };
+            this.parseUrl = (url) => {
+                let searchIndex = url.indexOf("?");
+                let search;
+                let pathName;
+                if (searchIndex > 0) {
+                    search = url.substr(searchIndex);
+                    pathName = url.substr(0, searchIndex);
                 }
-                let props = {
-                    app: app,
-                    data: page.data,
-                    events: {
-                        shown: page.shown,
-                        showing: page.showing,
-                        hidden: page.hidden,
-                        hiding: page.hiding,
-                    },
-                    source: page,
-                    createService(type) {
-                        return page.createService(type);
+                else {
+                    pathName = url;
+                }
+                let routers = args === null || args === void 0 ? void 0 : args.routers;
+                let values = {};
+                if (routers != null) {
+                    for (let i = 0; i < routers.length; i++) {
+                        let m = routers[i].match(pathName);
+                        if (m) {
+                            let { controller, action } = m;
+                            if (!controller)
+                                throw new Error(`Can not get controller from route data.`);
+                            if (!action)
+                                throw new Error(`Can not get action from route data.`);
+                            Object.assign(values, m);
+                            break;
+                        }
                     }
-                };
-                if (typeof action[data_loader_1.LOAD_DATA] == "function") {
-                    let partialData = yield action[data_loader_1.LOAD_DATA](props);
-                    Object.assign(props.data, partialData);
                 }
-                let element = React.createElement(action, props);
-                let component = ReactDOM.render(element, page.element);
-                page.component = component;
-            });
+                if (search) {
+                    let q = search.substr(1);
+                    let r = q ? this.pareeUrlQuery(q) : {};
+                    Object.assign(values, r);
+                }
+                let arr = pathName.split("/").filter(o => o);
+                let pageName = arr.length == 0 ? "index" : arr.join("_");
+                return { pageName, values };
+            };
         }
     }
-    class Application extends chitu.Application {
-        constructor(args) {
-            args = args || {};
-            if (args.modulesPath === undefined) {
-                args.modulesPath = "modules";
+    createPageElement(pageName, containerName) {
+        let container = this.containers[containerName];
+        if (container == null)
+            throw errors_1.Errors.containerNotExist(containerName);
+        let e = container.querySelector(`[name="${pageName}"]`);
+        if (e == null) {
+            e = super.createPageElement(pageName, containerName);
+            e.setAttribute("name", pageName);
+        }
+        return e;
+    }
+    getRouteString() {
+        let routeString = window[TargetUrlVariableName];
+        if (!routeString) {
+            routeString = location.pathname || this.defaultPage;
+            if (location.search) {
+                routeString = routeString + location.search;
             }
-            if (!args.parser)
-                args.parser = Application.createPageNodeParser(args.modulesPath);
-            super(args);
-            args.parser.app = this;
-            args.parser.loadjs = (path) => this.loadjs(path);
-            // this.pageCreated.add((sender, page) => {
-            //     page.element.className = "page"
-            // })
-            this.pageType = Page;
         }
-        static createPageNodeParser(modulesPath) {
-            let p = new DefaultPageNodeParser(modulesPath);
-            return p;
+        routeString = routeString.trim();
+        if (routeString[0] == '/') {
+            routeString = routeString.substr(1);
         }
+        return routeString;
     }
-    exports.Application = Application;
-});
+    static createPageNodeParser(modulesPath) {
+        let p = new DefaultPageNodeParser(modulesPath);
+        return p;
+    }
+}
+exports.Application = Application;

out/data-loader.d.ts

 export declare const LOAD_DATA = "loadData";
 export declare type LoadData<Props, T> = (props: Props) => Promise<Partial<T>>;
 export declare function dataLoader<Props, T>(loadData: LoadData<Props, T>): any;
+export declare const LOAD_PROPS = "loadProps";

out/data-loader.js

@@ -1,13 +0,12 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.dataLoader = exports.LOAD_DATA = void 0;
-    exports.LOAD_DATA = "loadData";
-    function dataLoader(loadData) {
-        return function (constructor) {
-            constructor[exports.LOAD_DATA] = loadData;
-            return constructor;
-        };
-    }
-    exports.dataLoader = dataLoader;
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LOAD_PROPS = exports.dataLoader = exports.LOAD_DATA = void 0;
+exports.LOAD_DATA = "loadData";
+function dataLoader(loadData) {
+    return function (constructor) {
+        constructor[exports.LOAD_DATA] = loadData;
+        return constructor;
+    };
+}
+exports.dataLoader = dataLoader;
+exports.LOAD_PROPS = "loadProps";

out/errors.d.ts

 export declare class Errors {
     static canntFindAction(pageName: string): Error;
     static exportsCanntNull(pageName: string): Error;
+    static containerNotExist(containerName: string): Error;
 }

out/errors.js

@@ -1,16 +0,18 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.Errors = void 0;
-    class Errors {
-        static canntFindAction(pageName) {
-            let msg = `Cannt find action in page '${pageName}', is the exports has default field?`;
-            return new Error(msg);
-        }
-        static exportsCanntNull(pageName) {
-            let msg = `Exports of page '${pageName}' is null.`;
-            return new Error(msg);
-        }
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Errors = void 0;
+class Errors {
+    static canntFindAction(pageName) {
+        let msg = `Cannt find action in page '${pageName}', is the exports has default field?`;
+        return new Error(msg);
     }
-    exports.Errors = Errors;
-});
+    static exportsCanntNull(pageName) {
+        let msg = `Exports of page '${pageName}' is null.`;
+        return new Error(msg);
+    }
+    static containerNotExist(containerName) {
+        let msg = `Container ${containerName} is not exists.`;
+        return new Error(msg);
+    }
+}
+exports.Errors = Errors;

out/index.js

@@ -1,8 +0,8 @@
-define(["require", "exports", "./application", "./data-loader"], function (require, exports, application_1, data_loader_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.dataLoader = exports.Page = exports.Application = void 0;
-    Object.defineProperty(exports, "Application", { enumerable: true, get: function () { return application_1.Application; } });
-    Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return application_1.Page; } });
-    Object.defineProperty(exports, "dataLoader", { enumerable: true, get: function () { return data_loader_1.dataLoader; } });
-});
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dataLoader = exports.Page = exports.Application = void 0;
+var application_1 = require("./application");
+Object.defineProperty(exports, "Application", { enumerable: true, get: function () { return application_1.Application; } });
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return application_1.Page; } });
+var data_loader_1 = require("./data-loader");
+Object.defineProperty(exports, "dataLoader", { enumerable: true, get: function () { return data_loader_1.dataLoader; } });

package.json

 {
     "name": "maishu-chitu-react",
-    "version": "1.36.0",
+    "version": "1.40.0",
     "description": "",
@@ -8,3 +8,3 @@ "main": "dist/index.js",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "grunt"
+        "build": "webpack"
     },
@@ -22,4 +22,5 @@ "repository": {
     "dependencies": {
-        "maishu-chitu": "^3.40.0",
+        "maishu-chitu": "^3.43.0",
         "maishu-chitu-service": "^1.1.16",
+        "maishu-router": "^1.4.10",
         "react": "^16.8.2",
@@ -29,6 +30,6 @@ "react-dom": "^16.8.2"
     "devDependencies": {
+        "@babel/core": "^7.4.4",
+        "@babel/preset-env": "^7.4.4",
         "@types/react": "^16.7.11",
         "@types/react-dom": "^16.0.11",
-        "@babel/core": "^7.4.4",
-        "@babel/preset-env": "^7.4.4",
         "grunt": "^1.0.3",
@@ -40,5 +41,5 @@ "grunt-babel": "^8.0.0",
         "load-grunt-tasks": "^4.0.0",
-        "webpack": "^4.30.0",
-        "webpack-cli": "^3.3.0"
+        "webpack": "^5.70.0",
+        "webpack-cli": "^4.9.2"
     }
-}
+}

src/errors.ts

@@ -10,2 +10,6 @@ export class Errors {
     }
+    public static containerNotExist(containerName: string): Error {
+        let msg = `Container ${containerName} is not exists.`;
+        return new Error(msg);
+    }
 }

src/tsconfig.json

@@ -5,3 +5,3 @@ {
         "target": "es6",
-        "module": "amd",
+        "module": "CommonJS",
         "declaration": true,
@@ -17,3 +17,3 @@ "baseUrl": "./",
             ],
-            "csstype":[
+            "csstype": [
                 "../node_modules/csstype/index.d.ts"
@@ -20,0 +20,0 @@ ]

No alert changes

Worsened metrics

Total package byte prevSize

457406

decreased by-10.66%

Dependency count

5

increased by25%

Number of package files

55

decreased by-22.54%

Lines of code

2480

decreased by-16.5%

Dependency changes

• + Addedmaishu-router@^1.4.10

• + Addedmaishu-router@1.4.10(transitive)

• Updatedmaishu-chitu@^3.43.0