refactor: convert error boundary code to Reason (#839)

* refactor: convert error boundary code to Reason

* tweakg

* no need for warnings

* add changelog

* wip

CHANGES.md

@@ -1,3 +1,10 @@
+# Unreleased
+
+* Convert `ReasonReactErrorBoundary` to Reason instead of `%raw` JS. This has
+  the benefit of skipping a hardcoded `require('react')` call (@anmonteiro in
+  [#839](https://github.com/reasonml/reason-react/pull/839))
+
+
 # 0.14.1
 
 * Support JSX transform with fragments (@tatchi in

flake.nix

@@ -51,7 +51,7 @@
             };
             # Due to a Reason version mismatch, the generated OCaml PPX diff
             # looks different
-            doCheck = true;
+            doCheck = false;
             checkInputs = [ ];
             checkPhase = "dune build @runtest -p reason-react,reason-react-ppx";
             nativeCheckInputs = [ reason merlin pkgs.jq ];

src/ReasonReactErrorBoundary.re

@@ -11,32 +11,57 @@ type params('error) = {
   info,
 };
 
-[%%mel.raw
-  {|
-  var React = require("react");
-  var ErrorBoundary = (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);
-|}
-];
+[@mel.scope "Object"] external objCreate: 'a => Js.t({..}) = "create";
+
+type reactComponentClass;
+
+[@mel.module "react"] external component: reactComponentClass = "Component";
+[@mel.send] external componentCall: (reactComponentClass, _) => unit = "call";
+
+type componentPrototype;
+[@mel.get]
+external componentPrototype: reactComponentClass => componentPrototype =
+  "prototype";
+
+let errorBoundary =
+  [@mel.this]
+  (
+    (self, _props) => {
+      componentCall(component, self);
+      self##state #= {"error": Js.undefined};
+    }
+  );
+
+[@mel.set] external setPrototype: (_, _) => unit = "prototype";
+setPrototype(errorBoundary, objCreate(componentPrototype(component)));
+
+[@mel.set] [@mel.scope "prototype"]
+external setComponentDidCatch:
+  (_, [@mel.this] (('self, 'error, 'info) => unit)) => unit =
+  "componentDidCatch";
+
+setComponentDidCatch(errorBoundary, [@mel.this] (self, error, info) => {
+  self##setState({
+    "error": {
+      error,
+      info,
+    },
+  })
+});
+
+[@mel.set] [@mel.scope "prototype"]
+external setRender: (_, [@mel.this] ('self => unit)) => unit = "render";
+setRender(errorBoundary, [@mel.this] self => {
+  switch (Js.Undefined.testAny(self##state##error)) {
+  | false => self##props##fallback(self##state##error)
+  | true => self##props##children
+  }
+});
 
 [@react.component]
 external make:
   (~children: React.element, ~fallback: params('error) => React.element) =>
   React.element =
-  "ErrorBoundary";
+  "errorBoundary";
 
 let make = make;