Fixture

facebook · Apr 10, 2020 · fbb0189 · fbb0189
1 parent df0ef46
commit fbb0189
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 0 deletions.
diff --git a/fixtures/stacks/BabelClass-compiled.js b/fixtures/stacks/BabelClass-compiled.js
diff --git a/fixtures/stacks/BabelClass-compiled.js.map b/fixtures/stacks/BabelClass-compiled.js.map
diff --git a/fixtures/stacks/BabelClass.js b/fixtures/stacks/BabelClass.js
@@ -0,0 +1,8 @@
+// Compile this with Babel.
+// babel --config-file ./babel.config.json BabelClass.js --out-file BabelClass-compiled.js --source-maps
+
+class BabelClass extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/fixtures/stacks/Component.js b/fixtures/stacks/Component.js
@@ -0,0 +1,20 @@
+// Example
+
+const Throw = React.lazy(() => {
+  throw new Error('Example');
+});
+
+const Component = React.memo(function Component({children}) {
+  return children;
+});
+
+function DisplayName({children}) {
+  return children;
+}
+DisplayName.displayName = 'Custom Name';
+
+class NativeClass extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/fixtures/stacks/Example.js b/fixtures/stacks/Example.js
@@ -0,0 +1,59 @@
+// Example
+
+const x = React.createElement;
+
+class ErrorBoundary extends React.Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error: error,
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log(error.message, errorInfo.componentStack);
+    this.setState({
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  render() {
+    if (this.state && this.state.error) {
+      return x(
+        'div',
+        null,
+        x('h3', null, this.state.error.message),
+        x('pre', null, this.state.componentStack)
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function Example() {
+  let state = React.useState(false);
+  return x(
+    ErrorBoundary,
+    null,
+    x(
+      DisplayName,
+      null,
+      x(
+        React.SuspenseList,
+        null,
+        x(
+          NativeClass,
+          null,
+          x(
+            BabelClass,
+            null,
+            x(
+              React.Suspense,
+              null,
+              x('div', null, x(Component, null, x(Throw)))
+            )
+          )
+        )
+      )
+    )
+  );
+}
diff --git a/fixtures/stacks/babel.config.json b/fixtures/stacks/babel.config.json
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["@babel/plugin-transform-classes", {"loose": true}]
+  ]
+}
diff --git a/fixtures/stacks/index.html b/fixtures/stacks/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Component Stacks</title>
+    <style>
+      html, body {
+        margin: 20px;
+      }
+      pre {
+        background: #eee;
+        border: 1px solid #ccc;
+        padding: 2px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <p>
+        To install React, follow the instructions on
+        <a href="https://github.com/facebook/react/">GitHub</a>.
+      </p>
+      <p>
+        If you can see this, React is <strong>not</strong> working right.
+        If you checked out the source from GitHub make sure to run <code>npm run build</code>.
+      </p>
+    </div>
+    <script src="../../build/node_modules/react/umd/react.production.min.js"></script>
+    <script src="../../build/node_modules/react-dom/umd/react-dom.production.min.js"></script>
+    <script src="./Component.js"></script>
+    <script src="./BabelClass-compiled.js"></script>
+    <script src="./Example.js"></script>
+    <script>
+      const container = document.getElementById("container");
+      ReactDOM.render(React.createElement(Example), container);
+    </script>
+    <h3>The above stack should look something like this:</h3>
+    <pre>
+
+    at Lazy
+    at Component (/stacks/Component.js:7:50)
+    at div
+    at Suspense
+    at BabelClass (/stacks/BabelClass-compiled.js:13:29)
+    at NativeClass (/stacks/Component.js:16:1)
+    at SuspenseList
+    at Custom Name (/stacks/Component.js:11:23)
+    at ErrorBoundary (/stacks/Example.js:5:1)
+    at Example (/stacks/Example.js:33:21)</pre>
+  </body>
+</html>