Merge pull request #11 from ice-lab/feat-support-hash

feat: support hash
ice-lab · Aug 29, 2019 · 55543ab · 55543ab
2 parents 8b236df + 45b9acf
commit 55543ab
Show file tree

Hide file tree

Showing 13 changed files with 204 additions and 186 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,17 +2,17 @@ const { eslintTS, deepmerge } = require('@ice/spec');
 
 module.exports = deepmerge(eslintTS, {
   env: {
-    jest: true
+    jest: true,
   },
   rules: {
-    "@typescript-eslint/explicit-member-accessibility": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/interface-name-prefix": 1,
+    '@typescript-eslint/explicit-member-accessibility': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/interface-name-prefix': 1,
   },
   settings: {
-    "react": {
-      "pragma": "React",
-      "version": "detect"
-    }
+    react: {
+      pragma: 'React',
+      version: 'detect',
+    },
   },
 });
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ice/stark",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Icestark is a JavaScript library for multiple react projects, Ice workbench solution.",
   "scripts": {
     "build": "rm -rf lib && tsc",
@@ -54,10 +54,10 @@
     "@types/url-parse": "^1.4.3",
     "codecov": "^3.4.0",
     "eslint": "^5.16.0",
+    "stylelint": "^10.1.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",

diff --git a/src/AppRoute.tsx b/src/AppRoute.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { loadAssets, emptyAssets } from './handleAssets';
 import { ICESTSRK_NOT_FOUND } from './constant';
-import loadAssets from './util/loadAssets';
-import emptyAssets from './util/emptyAssets';
-import { setIcestark } from './util/index';
+import { setCache } from './cache';
 
 const statusElementId = 'icestarkStatusContainer';
 
@@ -34,6 +33,10 @@ export interface AppRouteProps {
   forceRenderCount?: number;
 }
 
+interface StatusComponentProps {
+  err?: any;
+}
+
 export default class AppRoute extends React.Component<AppRouteProps, AppRouteState> {
   static defaultProps = {
     exact: false,
@@ -50,8 +53,10 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
 
   private unmounted: boolean = false;
 
+  private triggerNotFound: boolean = false;
+
   componentDidMount() {
-    setIcestark('root', null);
+    setCache('root', null);
     this.renderChild();
   }
 
@@ -74,13 +79,13 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
     const { useShadow } = this.props;
     emptyAssets(useShadow);
     this.unmounted = true;
-    setIcestark('root', null);
+    setCache('root', null);
   }
 
   /**
    * Load assets and render child app
    */
-  renderChild = () => {
+  renderChild = (): void => {
     const {
       path,
       url,
@@ -92,7 +97,6 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
       useShadow,
     } = this.props;
 
-
     const myBase: HTMLElement = this.myRefBase;
     if (!myBase) return;
 
@@ -108,17 +112,21 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
         : (rootElement as any).createShadowRoot();
     }
 
-    setIcestark('root', rootElement);
+    setCache('root', rootElement);
 
     // Empty useless assets before loading
     emptyAssets(useShadow);
 
     // Handle NotFound
     if (path === ICESTSRK_NOT_FOUND && url === ICESTSRK_NOT_FOUND) {
+      // loadAssets callback maybe slower than render NotFoundComponent
+      this.triggerNotFound = true;
       this.renderStatusElement(NotFoundComponent);
       return;
     }
 
+    this.triggerNotFound = false;
+
     if (title) document.title = title;
 
     // Generate bundleList
@@ -134,11 +142,15 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
       (err: any): boolean => {
         if (err) {
           // Handle error
-          this.renderStatusElement(ErrorComponent);
+          this.renderStatusElement(ErrorComponent, { err });
           return true;
         }
 
-        this.removeElementFromBase(statusElementId);
+        if (!this.triggerNotFound) {
+          // loadAssets callback maybe slower than render NotFoundComponent
+          this.removeElementFromBase(statusElementId);
+        }
+
         return this.unmounted;
       },
       (): void => {
@@ -150,7 +162,7 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
   /**
    * Render statusElement
    */
-  renderStatusElement = (Component) => {
+  renderStatusElement = (Component: any, props: StatusComponentProps = {}): void => {
     const myBase = this.myRefBase;
     if (!myBase || !Component) return;
 
@@ -162,36 +174,38 @@ export default class AppRoute extends React.Component<AppRouteProps, AppRouteSta
     ReactDOM.unmountComponentAtNode(statusElement);
     React.isValidElement(Component)
       ? ReactDOM.render(Component, statusElement)
-      : ReactDOM.render(<Component />, statusElement);
-  }
+      : ReactDOM.render(<Component {...props} />, statusElement);
+  };
 
-  appendElementToBase = (elementId) => {
+  appendElementToBase = (elementId: string): HTMLElement => {
     const myBase = this.myRefBase;
     if (!myBase) return;
 
     const element = document.createElement('div');
     element.id = elementId;
     myBase.appendChild(element);
     return element;
-  }
+  };
 
-  removeElementFromBase = (elementId) => {
+  removeElementFromBase = (elementId: string): void => {
     const myBase = this.myRefBase;
     if (!myBase) return;
 
     const element = myBase.querySelector(`#${elementId}`);
     if (element) {
       myBase.removeChild(element);
     }
-  }
+  };
 
   render() {
     const { path, title } = this.props;
 
     return (
       <div
         key={`${converArray2String(path)}-${title}`}
-        ref={(element) => {this.myRefBase = element}}
+        ref={element => {
+          this.myRefBase = element;
+        }}
         className={this.state.cssLoading ? 'ice-stark-loading' : 'ice-stark-loaded'}
       />
     );