feat: 添加demo

Author: Sylvenas

example-client/src/App.css

@@ -1,22 +1,61 @@
+/* 仅仅是为了，隐藏框架自带的开发环境error overlay */
+iframe {
+  display: none !important;
+}
+
 .App {
-    text-align: center;
+  /* background: rgb(241, 243, 244); */
+}
+
+.btns {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30px;
+}
+
+.btn {
+  width: 100px;
+  height: 30px;
+  border-radius: 75px;
+  background: rgb(241, 243, 244);
+  color: #217ce8;
+  font-size: 16px;
+  /* outline: none; */
+  border: none;
+}
+
+.btn:active {
+  transform: scale(1.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* .btn:hover {
+  background: gainsboro;
+
+} */
+
+h1 {
+  text-align: center;
+  margin: 0;
+  height: 45px;
+}
+
+div {
+  line-height: 45px;
+  font-size: 20px;
+  text-align: center;
 }
 
-.App-logo {
-    height: 40vmin;
+.ok-btn {
+  width: 200px;
 }
 
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+.ok-desc {
+  line-height: 20px;
+  text-align: left;
+  font-size: 16px;
 }
 
-.App-link {
-    color: #09d3ac;
+.ok-content {
+  line-height: 20px;
 }

example-client/src/App.js

@@ -1,66 +1,51 @@
-import React from "react";
+import React, { useState } from "react";
 import catchreacterror, { DefaultErrorBoundary } from "./dist";
 
+import "./App.css";
+
 function App() {
+  const [count, setCount] = useState(0);
+  const [content, setContent] = useState([]);
   return (
     <div className="App">
-      <header className="App-header">
-        <h1>这是正常展示内容</h1>
-      </header>
-      <Test></Test>
+      <SaleCount count={count} />
+      <section className="btns">
+        <button className="btn" onClick={() => setCount(count => count + 1)}>
+          +
+        </button>
+        <button className="btn" onClick={() => setCount(count => count - 1)}>
+          -
+        </button>
+      </section>
+      <hr />
+      <section>
+        <p className="ok-desc">
+          Although the Count Component was crashed, but this part was not
+          affected
+        </p>
+        <button
+          className="btn ok-btn"
+          onClick={() => {
+            setContent(content => ["clicked!", ...content]);
+          }}
+        >
+          I'm OK, click me !
+        </button>
+        {content.map(x => (
+          <p className="ok-content">{x}</p>
+        ))}
+      </section>
     </div>
   );
 }
 
-@catchreacterror()
-class Test extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      foo: 1
-    };
-    this.buttonRef = React.createRef();
-  }
-  render() {
-    const { foo } = this.state;
-    console.log(foo);
-    return (
-      <div>
-        <Button text="click me" ref={this.buttonRef} />
-        <Label list={["a", "abc", null, "abcd"]} />
-      </div>
-    );
-  }
-
-  componentDidMount() {
-    console.log(this.buttonRef.current.hello());
+function Count({ count }) {
+  if (count === 3) {
+    throw new Error("count is three");
   }
+  return <h1>{count}</h1>;
 }
-@catchreacterror(DefaultErrorBoundary)
-class Button extends React.Component {
-  hello() {
-    console.log("hello");
-  }
-  handleClick() {
-    console.log("click me !");
-  }
-
-  render() {
-    console.log(emptyObj.a.b);
-    return <button onClick={this.handleClick}>click me</button>;
-  }
-
-  componentDidMount() {
-    const emptyObj = {};
-  }
-}
-
-const Label = ({ list }) => {
-  return list.map(x => <SafeContent x={x} kye={x} />);
-};
-
-const Content = ({ x }) => <div>{x.length}</div>;
 
-const SafeContent = catchreacterror(DefaultErrorBoundary)(Content);
+const SaleCount = catchreacterror()(Count);
 
 export default App;

example-client/src/dist/catch-react-error.js

@@ -7,8 +7,8 @@ exports["default"] = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _Errorboundary = _interopRequireDefault(
-  require("./components/Errorboundary")
+var _DefaultErrorBoundary = _interopRequireDefault(
+  require("./components/DefaultErrorBoundary")
 );
 
 var _index = require("./util/index");
@@ -164,7 +164,7 @@ var catchreacterror = function catchreacterror() {
   var Boundary =
     arguments.length > 0 && arguments[0] !== undefined
       ? arguments[0]
-      : _Errorboundary["default"];
+      : _DefaultErrorBoundary["default"];
   return function(InnerComponent) {
     if (
       Boundary &&
@@ -173,14 +173,14 @@ var catchreacterror = function catchreacterror() {
       console.warn(
         "Catch-React-Error: The <ErrorBoundary /> component doesn't extend React.Component.  ErrorBoundary must extends React.Component"
       );
-      Boundary = _Errorboundary["default"];
+      Boundary = _DefaultErrorBoundary["default"];
     }
 
     if (Boundary && !Boundary.prototype.componentDidCatch) {
       console.warn(
         "Catch-React-Error: The <ErrorBoundary /> component doesn't have componentDidCatch lifecycle.  ErrorBoundary must have componentDidCatch lifecycle"
       );
-      Boundary = _Errorboundary["default"];
+      Boundary = _DefaultErrorBoundary["default"];
     }
 
     if ((0, _index.isComponentClass)(InnerComponent)) {

example-client/src/dist/components/Errorboundary.js renamed to example-client/src/dist/components/DefaultErrorBoundary.js

@@ -194,9 +194,6 @@ var DefaultErrorBoundary =
         {
           key: "render",
           value: function render() {
-            // if (is_server()) {
-            //     return serverMarkup(this.props);
-            // }
             if (this.state.hasError) {
               return React.createElement("div", null, "Something is Wrong");
             }

example-client/src/dist/foo.js

@@ -8,28 +8,15 @@ exports["default"] = void 0;
 
 var _catchReactError = _interopRequireDefault(require("./catch-react-error"));
 
-var _Errorboundary = require("./components/Errorboundary");
+var _DefaultErrorBoundary = require("./components/DefaultErrorBoundary");
 
-Object.keys(_Errorboundary).forEach(function(key) {
+Object.keys(_DefaultErrorBoundary).forEach(function(key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Errorboundary[key];
-    }
-  });
-});
-
-var _propsInterface = require("./interface/propsInterface");
-
-Object.keys(_propsInterface).forEach(function(key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _propsInterface[key];
+      return _DefaultErrorBoundary[key];
     }
   });
 });
@@ -38,5 +25,6 @@ function _interopRequireDefault(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 
+// export * from './interface/propsInterface'
 var _default = _catchReactError["default"];
 exports["default"] = _default;