fix ErrorBoundary comp by external binding

This reverts commit 8704f78.

Author: mununki

.gitignore

@@ -9,7 +9,6 @@ finalOutput/*.js
 /docs/
 *.log
 .bsb.lock
-/src/**/*.js
 _esy
 _build
 *.install

Changes.md

@@ -2,7 +2,7 @@
 
 ## master
 
-- Rewrite the `RescriptReactErrorBoundary` component implementation with `@react.component`, so it can be compatible with the changes of JSX PPX.
+- Nothing yet
 
 ## v0.10.3
 
@@ -26,14 +26,12 @@ For history on previous evolution of the code, check out the original [reason-re
 - **IMPORTANT:** Currently, old third-party packages that are still dependent on `reason-react` will not mix with other `@rescript/react` based code due to a build system problem. Which means that every third-party dependency needs to be upgraded to `@rescript/react` first to make it compatible. See [this forum discussion](https://forum.rescript-lang.org/t/discussion-reason-react-rescript-react-migration-path/1086) for more details.
 
 - Removed legacy modules ("record api"):
-
   - `ReasonReactCompat`
   - `ReactDOMServerRe`
   - `ReactEventRe`
   - `ReasonReactOptimizedCreateClass`
 
 - Renamed existing modules:
-
   - `ReasonReactErrorBoundary` -> `RescriptReactErrorBoundary`
   - `ReasonReactRouter` -> `RescriptReactRouter`
   - (Note: Usually the two only valid styles would be `ReScript` or `rescript`, the latter being the version for technical writing. We are using `Rescript` here, since it is essentially the capitalized version of `rescript`)

src/RescriptReactErrorBoundary.res

@@ -3,34 +3,15 @@
  * As soon as React provides a mechanism for error-catching using functional component,
  * this is likely to be deprecated and/or move to user space.
  ")
-type reactComponentClass
-
-@module("react") external component: reactComponentClass = "Component"
-
 type info = {componentStack: string}
 
 type params<'error> = {
   error: 'error,
   info: info,
 }
 
-let getErrorBoundary: reactComponentClass => React.element = %raw(`
-  function (Component) {
-    function ErrorBoundary(props) {
-      Component.call(this);
-      this.state = {error: undefined};
-    };
-    ErrorBoundary.prototype = Object.create(Component.prototype);
-    ErrorBoundary.prototype.componentDidCatch = function(error, info) {
-      this.setState({error: {error: error, info: info}})
-    };
-    ErrorBoundary.prototype.render = function() {
-      return this.state.error != undefined ? this.props.fallback(this.state.error) : this.props.children
-    }
-    return ErrorBoundary;
-  }
-`)
-
-@react.component
-let make = (~children as _: React.element, ~fallback as _: params<'error> => React.element) =>
-  getErrorBoundary(component)
+@react.component @module("./react/ErrorBoundary.js")
+external make: (
+  ~children: React.element,
+  ~fallback: params<'error> => React.element,
+) => React.element = "default"

src/react/ErrorBoundary.js

@@ -0,0 +1,18 @@
+var React = require("react");
+
+export default (function (Component) {
+  function ErrorBoundary(props) {
+    Component.call(this);
+    this.state = { error: undefined };
+  }
+  ErrorBoundary.prototype = Object.create(Component.prototype);
+  ErrorBoundary.prototype.componentDidCatch = function (error, info) {
+    this.setState({ error: { error: error, info: info } });
+  };
+  ErrorBoundary.prototype.render = function () {
+    return this.state.error != undefined
+      ? this.props.fallback(this.state.error)
+      : this.props.children;
+  };
+  return ErrorBoundary;
+})(React.Component);