icestark - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

lib/AppLink.js

@@ -32,3 +32,3 @@ "use strict";
             e.preventDefault();
-            if (message && confirm(message) === false) {
+            if (message && window.confirm(message) === false) {
                 return false;
@@ -35,0 +35,0 @@ }

lib/AppRoute.d.ts

@@ -13,5 +13,5 @@ import * as React from 'react';
     sensitive?: boolean;
-    ErrorComponent?: React.ReactType;
-    LoadingComponent?: React.ReactType;
-    NotFoundComponent?: React.ReactType;
+    ErrorComponent?: any;
+    LoadingComponent?: any;
+    NotFoundComponent?: any;
     forceRender?: boolean;
@@ -18,0 +18,0 @@ }

lib/AppRoute.js

@@ -57,3 +57,5 @@ "use strict";
             if (path === constant_1.ICESTSRK_404 && url === constant_1.ICESTSRK_404) {
-                ReactDOM.render(React.createElement(NotFoundComponent, null), root);
+                React.isValidElement(NotFoundComponent)
+                    ? ReactDOM.render(NotFoundComponent, root)
+                    : ReactDOM.render(React.createElement(NotFoundComponent, null), root);
                 return;
@@ -68,8 +70,12 @@ }
             if (LoadingComponent) {
-                ReactDOM.render(React.createElement(LoadingComponent, null), root);
+                React.isValidElement(LoadingComponent)
+                    ? ReactDOM.render(LoadingComponent, root)
+                    : ReactDOM.render(React.createElement(LoadingComponent, null), root);
             }
-            loadAssets_1.default(bundleList, useShadow, function (err) {
+            loadAssets_1.loadAssets(bundleList, useShadow, function (err) {
                 if (err) {
                     // Handle error
-                    ReactDOM.render(React.createElement(ErrorComponent, null), root);
+                    React.isValidElement(ErrorComponent)
+                        ? ReactDOM.render(ErrorComponent, root)
+                        : ReactDOM.render(React.createElement(ErrorComponent, null), root);
                     return true;
@@ -103,3 +109,3 @@ }
         var _a = this.props, path = _a.path, title = _a.title;
-        return (React.createElement("div", { key: title + "-" + getValidStr(path), id: nodeId, className: this.state.cssLoading ? 'ice-stark-loading' : 'ice-stark-loaded' }));
+        return (React.createElement("div", { key: getValidStr(path) + "-" + title, id: nodeId, className: this.state.cssLoading ? 'ice-stark-loading' : 'ice-stark-loaded' }));
     };
@@ -106,0 +112,0 @@ AppRoute.defaultProps = {

lib/AppRouter.d.ts

@@ -5,5 +5,5 @@ import * as React from 'react';
     onRouteChange?: (pathname: string, query: object, type: RouteType | 'init') => void;
-    NotFoundComponent?: React.ReactType;
-    ErrorComponent?: React.ReactType;
-    LoadingComponent?: React.ReactType;
+    ErrorComponent?: any;
+    LoadingComponent?: any;
+    NotFoundComponent?: any;
     useShadow?: boolean;
@@ -18,2 +18,3 @@ }
         ErrorComponent: JSX.Element;
+        NotFoundComponent: JSX.Element;
         useShadow: boolean;
@@ -20,0 +21,0 @@ };

lib/AppRouter.js

@@ -138,2 +138,3 @@ "use strict";
         ErrorComponent: React.createElement("div", null, "js bundle loaded error"),
+        NotFoundComponent: React.createElement("div", null, "NotFound"),
         useShadow: false,
@@ -140,0 +141,0 @@ };

lib/constant.d.ts

@@ -1,4 +0,4 @@
-export declare const PREFIX: string;
+export declare const PREFIX = "icestark";
 export declare const ICESTSRK_404: string;
 export declare const setIcestark: (key: string, value: any) => void;
 export declare const getIcestark: (key: string) => any;

lib/constant.js

@@ -6,11 +6,11 @@ "use strict";
 exports.setIcestark = function (key, value) {
-    if (!window.__ICESTARK__) {
-        window.__ICESTARK__ = {};
+    if (!window.ICESTARK) {
+        window.ICESTARK = {};
     }
-    window.__ICESTARK__[key] = value;
+    window.ICESTARK[key] = value;
 };
 exports.getIcestark = function (key) {
-    var icestark = window.__ICESTARK__;
+    var icestark = window.ICESTARK;
     return icestark && icestark[key] ? icestark[key] : null;
 };
 //# sourceMappingURL=constant.js.map

lib/getMountNode.js

@@ -8,3 +8,3 @@ "use strict";
     }
-    else if (element) {
+    if (element) {
         // string treated as 'id'
@@ -20,9 +20,7 @@ if (typeof element === 'string') {
     }
-    else {
-        var ICE_CONTAINER = document.querySelector('#ice-container');
-        if (!ICE_CONTAINER) {
-            throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
-        }
-        return ICE_CONTAINER;
+    var ICE_CONTAINER = document.querySelector('#ice-container');
+    if (!ICE_CONTAINER) {
+        throw new Error('当前页面不存在 <div id="ice-container"></div> 节点.');
     }
+    return ICE_CONTAINER;
 }
@@ -29,0 +27,0 @@ exports.default = getMountNode;

lib/loadAssets.d.ts

@@ -1,2 +0,2 @@
-export default function loadAssets(bundleList: string[], useShadow: boolean, jsCallback: (err: any) => boolean, cssCallBack: () => void): void;
+export declare function loadAssets(bundleList: string[], useShadow: boolean, jsCallback: (err: any) => boolean, cssCallBack: () => void): void;
 /**
@@ -3,0 +3,0 @@ * empty useless assets

lib/loadAssets.js

@@ -6,2 +6,33 @@ "use strict";
 var tagData = 'asset';
+/**
+ * load assets
+ */
+function loadAsset(url, index, isCss, root, callback) {
+    if (isCss && !getMountNode_1.getIcestarkRoot())
+        return;
+    var id = constant_1.PREFIX + "-js-" + index;
+    var type = 'script';
+    if (isCss) {
+        id = constant_1.PREFIX + "-css-" + index;
+        type = 'link';
+    }
+    var element;
+    element = document.createElement(type);
+    element.id = id;
+    element.setAttribute(constant_1.PREFIX, tagData);
+    if (isCss) {
+        element.setAttribute('rel', 'stylesheet');
+        element.setAttribute('href', url);
+    }
+    else {
+        element.setAttribute('type', 'text/javascript');
+        element.setAttribute('async', '');
+        element.setAttribute('src', url);
+    }
+    element.addEventListener('error', function () {
+        callback(isCss ? undefined : new Error("JS asset loaded error: " + url));
+    }, false);
+    element.addEventListener('load', function () { return callback(); }, false);
+    root.appendChild(element);
+}
 function loadAssets(bundleList, useShadow, jsCallback, cssCallBack) {
@@ -23,10 +54,2 @@ var jsRoot = document.getElementsByTagName('head')[0];
     });
-    if (useShadow) {
-        // make sure css loads after all js have been loaded under shadowRoot
-        loadJs();
-    }
-    else {
-        loadCss();
-        loadJs();
-    }
     function loadCss() {
@@ -61,4 +84,12 @@ var cssTotal = 0;
     }
+    if (useShadow) {
+        // make sure css loads after all js have been loaded under shadowRoot
+        loadJs();
+    }
+    else {
+        loadCss();
+        loadJs();
+    }
 }
-exports.default = loadAssets;
+exports.loadAssets = loadAssets;
 /**
@@ -82,33 +113,2 @@ * empty useless assets
 exports.emptyAssets = emptyAssets;
-/**
- * load assets
- */
-function loadAsset(url, index, isCss, root, callback) {
-    if (isCss && !getMountNode_1.getIcestarkRoot())
-        return;
-    var id = constant_1.PREFIX + "-js-" + index;
-    var type = 'script';
-    if (isCss) {
-        id = constant_1.PREFIX + "-css-" + index;
-        type = 'link';
-    }
-    var element;
-    element = document.createElement(type);
-    element.id = id;
-    element.setAttribute(constant_1.PREFIX, tagData);
-    if (isCss) {
-        element.setAttribute('rel', 'stylesheet');
-        element.setAttribute('href', url);
-    }
-    else {
-        element.setAttribute('type', 'text/javascript');
-        element.setAttribute('async', '');
-        element.setAttribute('src', url);
-    }
-    element.addEventListener('error', function () {
-        callback(isCss ? undefined : new Error("JS asset loaded error: " + url));
-    }, false);
-    element.addEventListener('load', function () { return callback(); }, false);
-    root.appendChild(element);
-}
 //# sourceMappingURL=loadAssets.js.map

package.json

 {
   "name": "icestark",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Icestark is a JavaScript library for multiple react projects, Ice workbench solution.",
@@ -8,2 +8,3 @@ "scripts": {
     "watch": "tsc -w",
+    "prepublishOnly": "npm run lint && npm run test && npm run build",
     "lint": "npm run lint:nofix -- --fix",
@@ -50,18 +51,23 @@ "lint:nofix": "eslint --cache --ext .ts,.tsx ./",
     "@commitlint/config-conventional": "^7.5.0",
+    "@types/history": "^4.7.0",
     "@types/jest": "^24.0.12",
     "@types/node": "^12.0.0",
-    "@typescript-eslint/eslint-plugin": "^1.7.0",
-    "@typescript-eslint/parser": "^1.7.0",
-    "@types/react": "~16.8.1",
+    "@types/path-to-regexp": "^1.7.0",
+    "@types/react": "^16.8.19",
     "@types/react-dom": "^16.0.11",
-    "@types/history": "^4.7.0",
     "@types/url-parse": "^1.4.3",
-    "@types/path-to-regexp": "^1.7.0",
+    "@typescript-eslint/eslint-plugin": "^1.9.0",
+    "@typescript-eslint/parser": "^1.9.0",
     "codecov": "^3.4.0",
-    "eslint": "^5.3.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-import": "^2.17.2",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.3.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.13.0",
     "husky": "^2.2.0",
     "jest": "^24.7.1",
+    "jest-dom": "^3.4.0",
+    "prettier": "^1.17.1",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
     "react-testing-library": "^7.0.0",
@@ -68,0 +74,0 @@ "ts-jest": "^24.0.2",

README.md

@@ -18,49 +18,35 @@ # icestark
 
-## Run Demo
-
-Run child：
-```bash
-cd demo/child
-npm install
-npm start
-```
-
-Run child2
-```bash
-cd demo/child2
-npm install
-npm start
-```
-
-Run layout：
-```bash
-cd demo/layout
-npm install
-npm start
-```
-
-Open up http://localhost:3333 in a web browser
-
 ## Example
 
 ```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { AppRouter, AppRoute } from 'icestark';
+
 class Layout extends React.Component {
+  onRouteChange = (pathname, query) => {
+    console.log(pathname, query);
+  }
+
   render() {
     return (
       <div>
-        <Header />
-        <AppLoader
-          env="local"
-          apps={apps}
-          getBundleUrl={({ repo, version, localPort, localIp, env, type }) => {
-            if (env === 'local') {
-              return `//${localIp}:${localPort}/${type}/index.${type}`;
-            }
-            const cdnHost = env === 'production' ? 'production.com' : 'daily.com';
-            return `//${cdnHost}/${repo}/${version}/${type}/index.${type}`;
-          }}
-          NotFoundComponent={NotFound}
+        <div>this is common header</div>
+        <AppRouter
           onRouteChange={this.onRouteChange}
-        />
-        <Footer />
+          useShadow
+        >
+          <AppRoute
+            path={['/', '/home', '/about']}
+            exact
+            title="主页"
+            url={['//127.0.0.1:4444/js/index.js', '//127.0.0.1:4444/css/index.css']}
+          />
+          <AppRoute
+            path="/user"
+            title="用户页面"
+            url={['//127.0.0.1:5555/js/index.js', '//127.0.0.1:5555/css/index.css']}
+          />
+        </AppRouter>
+        <div>this is common footer</div>
       </div>
@@ -74,14 +60,24 @@ );
 
-|        Property        |                               Description                               |        Type        |   Default    |
-| :--------------------: | :---------------------------------------------------------------------: | :----------------: | :----------: |
-|          env           | bundle environment, can be set to `local` `daily` `prepub` `production` |       string       | `production` |
-|          apps          |  app configuration includes `localPort`, `basePath`, `title` and so on  |       array        |      []      |
-|      getBundleUrl      |            transform current app configuration to bundleUrl             |      function      |     noop     |
-|     onRouteChange      |                  callback executed when route changed                   |      function      |     noop     |
-|   NotFoundComponent    |                   render when the route changed error                   | function/ReactNode |              |
-|  BundleErrorComponent  |                  render when the bundle pulls an error                  | function/ReactNode |              |
-| BundleLoadingComponent |                      render when Bundle is Loading                      | function/ReactNode |              |
-|       shadowRoot       |                        whether to use shadowRoot                        |        bool        |     true     |
+### AppRouter
 
+|        Property        |              Description              |     Type     | Default |
+| :--------------------: | :-----------------------------------: | :----------: | :-----: |
+|     onRouteChange      | callback executed when route changed  |   function   |  noop   |
+|   NotFoundComponent    |  render when the route changed error  | ReactElement |         |
+|  BundleErrorComponent  | render when the bundle pulls an error | ReactElement |         |
+| BundleLoadingComponent |     render when Bundle is Loading     | ReactElement |         |
+|       shadowRoot       |       whether to use shadowRoot       |   boolean    |  false  |
 
 
+### AppRoute
+
+| Property  |                    Description                    |      Type       | Default |
+| :-------: | :-----------------------------------------------: | :-------------: | :-----: |
+|   path    | app router path, reference react-router, required | string/string[] |         |
+|    url    |             assets load url, required             | string/string[] |         |
+|   title   |                   documentTitle                   |     string      |         |
+|   exact   |              reference react-router               |     boolean     |  false  |
+|  strict   |              reference react-router               |     boolean     |  false  |
+| sensitive |              reference react-router               |     boolean     |  false  |
+
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45291

increased by2.12%

Lines of code

644

increased by0.94%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

26

increased by23.81%

Number of lines in readme file

82

decreased by-4.65%

No dependency changes