reason-react 0.7 migration with bs-react-native-jsx3-compat

Ref https://github.com/reasonml-community/bs-react-native/pull/472

bsconfig.json

@@ -2,7 +2,7 @@
   "name": "moox.io",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "package-specs": {
     "module": "es6",
@@ -24,7 +24,8 @@
     "bs-fetch",
     "@glennsl/bs-json",
     "reason-react",
-    "bs-react-native-monorepo/bs-react-native",
+    "reason-react-compat",
+    "bs-react-native-monorepo/bs-react-native-jsx3-compat",
     "@moox/bs-react-helmet",
     "@phenomic/preset-react-app",
     "@phenomic/plugin-renderer-react",

package.json

@@ -4,10 +4,10 @@
   "version": "0.0.0",
   "devDependencies": {
     "@glennsl/bs-json": "^3.0.0",
-    "@moox/bs-react-helmet": "^1.1.3",
-    "@phenomic/cli": "^1.0.0-beta.8",
-    "@phenomic/core": "^1.0.0-beta.8",
-    "@phenomic/preset-react-app": "^1.0.0-beta.8",
+    "@moox/bs-react-helmet": "^2.0.0",
+    "@phenomic/cli": "^1.0.0-beta.11",
+    "@phenomic/core": "^1.0.0-beta.11",
+    "@phenomic/preset-react-app": "^1.0.0-beta.11",
     "@svgr/cli": "^3.1.0",
     "b64-image": "^0.0.1",
     "babel-jest": "^21.2.0",
@@ -26,16 +26,16 @@
     "mkdirp": "^0.5.1",
     "npm-run-all": "^4.0.2",
     "prettier": "^1.15.0",
-    "react": "^16.8.0",
-    "react-art": "^16.8.0",
+    "react": "^16.8.1",
+    "react-art": "^16.8.1",
     "react-disqus-comments": "^1.2.0",
-    "react-dom": "^16.8.0",
+    "react-dom": "^16.8.1",
     "react-helmet": "^5.2.0",
     "react-native-web": "^0.9.8",
     "react-router": "^3.2.0",
-    "react-test-renderer": "^16.8.0",
+    "react-test-renderer": "^16.8.1",
     "reason-react": "https://github.com/reasonml/reason-react.git",
-    "reason-react-compat": "^0.2.0",
+    "reason-react-compat": "^0.4.0",
     "trash-cli": "^1.4.0",
     "upgrade-reason-react": "https://github.com/bloodyowl/upgrade-reason-react"
   },
@@ -54,7 +54,8 @@
     "svg:convert": "trash assets/SVGs/components && yarn svg:convert:web && yarn svg:convert:native && yarn svg:convert:re",
     "cover-blur-base64": "mkdirp lib && convert -resize 32x32 public/cover.jpg public/cover.blur.jpg && echo \"module.exports = \\\"$(b64-image public/cover.blur.jpg)\\\"\" > lib/cover.blur.js",
     "#prepare": "yarn cleanup && yarn cover-blur-base64 && yarn svg:convert && yarn reason:compile",
-    "prepare": "yarn cleanup && yarn svg:convert && yarn reason:compile",
+    "bs-react-native-monorepo-trick": "ln -sFf ../node_modules/bs-react-native-monorepo/reason-react-native/ ./node_modules",
+    "prepare": "yarn bs-react-native-monorepo-trick && yarn cleanup && yarn svg:convert && yarn reason:compile",
     "start": "echo Choose start:web or start:native",
     "start:reason": "yarn reason:compile -w",
     "start:web": "npm-run-all --parallel start:web:*",

scripts/generate-svg-reason.js

@@ -3,23 +3,34 @@ const path = require("path");
 
 const template = ({ name }) =>
   `
-[@bs.scope "Platform"] [@bs.module "react-native"] external _os : string = "OS";
-
-[@bs.module "./${name}"] external js${name} : ReasonReact.reactClass = "default";
-
-let defaultSize = 16.;
-
-let make = (~width=defaultSize, ~height=defaultSize, ~fill="#000", ~style=?, children) =>
-  ReasonReact.wrapJsForReason(
-    ~reactClass=js${name},
-    ~props={
-      "width": string_of_float(width) ++ (_os === "web" ? "0px" : "0"),
-      "height": string_of_float(height) ++ (_os === "web" ? "0px" : "0"),
-      "fill": fill,
-      "style": style
-    },
-    children
-  );
+  [@bs.scope "Platform"] [@bs.module "react-native"] external _os: string = "OS";
+
+  let defaultSize = 16.;
+
+  module JsImplem = {
+    [@bs.module "./${name}"] [@react.component]
+    external make:
+      (
+        ~width: string,
+        ~height: string,
+        ~fill: string,
+        ~style: option(BsReactNative.Style.t),
+        unit
+      ) =>
+      React.element =
+      "default";
+  };
+
+  [@react.component]
+  let make =
+      (~width=defaultSize, ~height=defaultSize, ~fill="#000", ~style=?, ()) =>
+    <JsImplem
+      width={string_of_float(width) ++ (_os === "web" ? "0px" : "0")}
+      height={string_of_float(height) ++ (_os === "web" ? "0px" : "0")}
+      fill
+      style
+    />;
+
 `;
 
 const folderName = process.argv[2];