Update ReasonReact JSX to version 3 (#1279)

* Update bsconfig to jsx 3 * Attempt to update packages * Attempt to update modules * Remove @react.component * Return back link types * Update bs-platform and reason-react * Change type definitions * Update bs-react-helmet * Fix Error page and how it imports * Update link prop types * Update rest of components to jsx 3 * Fix helpers and how props are passed * Change make to default export * Remove deps field * Change type def for HOC
MoOx · May 28, 2019 · b3f49c4 · b3f49c4
1 parent a1de4e9
commit b3f49c4
Show file tree

Hide file tree

Showing 30 changed files with 170 additions and 183 deletions.
diff --git a/examples/reason-react-app/App.js b/examples/reason-react-app/App.js
@@ -11,18 +11,12 @@ import ErrorPage from "./lib/es6/src/components/ErrorPage.bs.js";
 
 const routes = () => (
   <Router history={browserHistory}>
-    <Route
-      path="/"
-      component={withPhenomicApi(Home.jsComponent, Home.queries)}
-    />
+    <Route path="/" component={withPhenomicApi(Home.make, Home.queries)} />
     <Route
       path="/after/:after"
-      component={withPhenomicApi(Home.jsComponent, Home.queries)}
-    />
-    <Route
-      path="blog/*"
-      component={withPhenomicApi(Post.jsComponent, Post.queries)}
+      component={withPhenomicApi(Home.make, Home.queries)}
     />
+    <Route path="blog/*" component={withPhenomicApi(Post.make, Post.queries)} />
     <Route path="*" component={ErrorPage} />
     <Route path="404.html" component={ErrorPage} />
   </Router>

diff --git a/examples/reason-react-app/bsconfig.json b/examples/reason-react-app/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/example-reason-react-app",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "suffix": ".bs.js",
   "package-specs": {

diff --git a/examples/reason-react-app/package.json b/examples/reason-react-app/package.json
@@ -2,17 +2,17 @@
   "private": true,
   "name": "@phenomic/example-reason-react-app",
   "devDependencies": {
-    "@moox/bs-react-helmet": "^1.0.0",
+    "@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",
-    "bs-platform": "^5.0.0",
+    "bs-platform": "^5.0.4",
     "npm-run-all": "^4.0.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "react-helmet": "^5.2.0",
     "react-router": "^3.2.0",
-    "reason-react": "^0.6.0"
+    "reason-react": "^0.7.0"
   },
   "scripts": {
     "reason:cleanup": "bsb -clean-world",

diff --git a/examples/reason-react-app/src/Helpers.re b/examples/reason-react-app/src/Helpers.re
@@ -1,7 +1,7 @@
-let nothing = ReasonReact.null;
+let nothing = React.null;
 
-let text = ReasonReact.string;
+let text = React.string;
 
-let list = list => list |> Array.of_list |> ReasonReact.array;
+let list = list => list |> Array.of_list |> React.array;
 
 let nodeList = node => node##list |> Array.to_list;
diff --git a/examples/reason-react-app/src/components/ErrorPage.re b/examples/reason-react-app/src/components/ErrorPage.re
@@ -1,19 +1,13 @@
 open Helpers;
 
-let component = ReasonReact.statelessComponent("Post");
-
+[@react.component]
 let make = (~message: option(string)=?, _) => {
-  ...component,
-  render: _self =>
-    <div style={ReactDOMRe.Style.make(~fontSize="80px", ())}>
-      {switch (message) {
-       | None => "An error occured" |> text
-       | Some(msg) => msg |> text
-       }}
-    </div>,
+  <div style={ReactDOMRe.Style.make(~fontSize="80px", ())}>
+    {switch (message) {
+     | None => "An error occured" |> text
+     | Some(msg) => msg |> text
+     }}
+  </div>;
 };
 
-let default =
-  ReasonReact.wrapReasonForJs(~component, jsProps =>
-    make(~message=?Js.Nullable.toOption(jsProps##message), [||])
-  );
+let default = make;
diff --git a/examples/reason-react-app/src/components/Home.re b/examples/reason-react-app/src/components/Home.re
@@ -1,66 +1,59 @@
 open Helpers;
 
-let component = ReasonReact.statelessComponent("Home");
-
+[@react.component]
 let make = (~posts) => {
-  ...component,
-  render: _self =>
-    <div>
-      <BsReactHelmet>
-        <title> {"Hello world" |> text} </title>
-        <meta name="description" content="Everything is awesome!" />
-      </BsReactHelmet>
-      <h1> {"Home" |> text} </h1>
-      {switch ((posts: Types.posts)) {
-       | Inactive
-       | Loading => "Loading ..." |> text
-       | Errored => "An error occured" |> text
-       | Idle(posts) =>
-         let postsList = posts##list |> Array.to_list;
+  let posts' = PhenomicPresetReactApp.jsEdge(posts);
+  <div>
+    <BsReactHelmet>
+      <title> {"Hello world" |> text} </title>
+      <meta name="description" content="Everything is awesome!" />
+    </BsReactHelmet>
+    <h1> {"Home" |> text} </h1>
+    {switch ((posts': Types.posts)) {
+     | Inactive
+     | Loading => "Loading ..." |> text
+     | Errored => "An error occured" |> text
+     | Idle(posts) =>
+       let postsList = posts##list |> Array.to_list;
+       <div>
+         <ul>
+           {postsList
+            |> List.map(item =>
+                 <li key=item##id>
+                   <PhenomicPresetReactApp.Link
+                     href={"/blog/" ++ item##id ++ "/"}>
+                     {item##title |> text}
+                   </PhenomicPresetReactApp.Link>
+                 </li>
+               )
+            |> list}
+         </ul>
          <div>
-           <ul>
-             {postsList
-              |> List.map(item =>
-                   <li key=item##id>
-                     <PhenomicPresetReactApp.Link
-                       href={"/blog/" ++ item##id ++ "/"}>
-                       {item##title |> text}
-                     </PhenomicPresetReactApp.Link>
-                   </li>
-                 )
-              |> list}
-           </ul>
-           <div>
-             {switch (posts##previous |> Js.toOption) {
-              | Some(previous) =>
-                <PhenomicPresetReactApp.Link
-                  href={
-                    posts##previousPageIsFirst
-                      ? "/" : "/after/" ++ previous ++ "/"
-                  }>
-                  {"Newer posts" |> text}
-                </PhenomicPresetReactApp.Link>
-              | None => nothing
-              }}
-             {" " |> text}
-             {switch (posts##next |> Js.toOption) {
-              | Some(next) =>
-                <PhenomicPresetReactApp.Link href={"/after/" ++ next ++ "/"}>
-                  {"Older posts" |> text}
-                </PhenomicPresetReactApp.Link>
-              | None => nothing
-              }}
-           </div>
-         </div>;
-       }}
-    </div>,
+           {switch (posts##previous |> Js.toOption) {
+            | Some(previous) =>
+              <PhenomicPresetReactApp.Link
+                href={
+                  posts##previousPageIsFirst
+                    ? "/" : "/after/" ++ previous ++ "/"
+                }>
+                {"Newer posts" |> text}
+              </PhenomicPresetReactApp.Link>
+            | None => nothing
+            }}
+           {" " |> text}
+           {switch (posts##next |> Js.toOption) {
+            | Some(next) =>
+              <PhenomicPresetReactApp.Link href={"/after/" ++ next ++ "/"}>
+                {"Older posts" |> text}
+              </PhenomicPresetReactApp.Link>
+            | None => nothing
+            }}
+         </div>
+       </div>;
+     }}
+  </div>;
 };
 
-let jsComponent =
-  ReasonReact.wrapReasonForJs(~component, jsProps =>
-    make(~posts=PhenomicPresetReactApp.jsEdge(jsProps##posts))
-  );
-
 let queries = props => {
   let posts =
     PhenomicPresetReactApp.query(

diff --git a/examples/reason-react-app/src/components/Post.re b/examples/reason-react-app/src/components/Post.re
@@ -1,32 +1,25 @@
 open Helpers;
 
-let component = ReasonReact.statelessComponent("Post");
-
+[@react.component]
 let make = (~post) => {
-  ...component,
-  render: _self =>
-    <div>
-      {switch ((post: Types.postNode)) {
-       | Inactive
-       | Loading => "Loading ..." |> text
-       | Errored => <ErrorPage />
-       | Idle(post) =>
-         <div>
-           <BsReactHelmet>
-             <title> {post##title |> text} </title>
-           </BsReactHelmet>
-           <h1> {post##title |> text} </h1>
-           <PhenomicPresetReactApp.BodyRenderer body=post##body />
-         </div>
-       }}
-    </div>,
+  let post' = PhenomicPresetReactApp.jsEdge(post);
+  <div>
+    {switch ((post': Types.postNode)) {
+     | Inactive
+     | Loading => "Loading ..." |> text
+     | Errored => <ErrorPage />
+     | Idle(post) =>
+       <div>
+         <BsReactHelmet>
+           <title> {post##title |> text} </title>
+         </BsReactHelmet>
+         <h1> {post##title |> text} </h1>
+         <PhenomicPresetReactApp.BodyRenderer body=post##body />
+       </div>
+     }}
+  </div>;
 };
 
-let jsComponent =
-  ReasonReact.wrapReasonForJs(~component, jsProps =>
-    make(~post=PhenomicPresetReactApp.jsEdge(jsProps##post))
-  );
-
 let queries = props => {
   let post =
     PhenomicPresetReactApp.query(

diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.0",
     "babel-jest": "^23.6.0",
-    "bs-platform": "^5.0.0",
+    "bs-platform": "^5.0.4",
     "chalk": "^1.1.3",
     "cross-env": "^2.0.0",
     "cross-spawn": "^5.1.0",

diff --git a/packages/api-client/bsconfig.json b/packages/api-client/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/api-client",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/babel-preset/bsconfig.json b/packages/babel-preset/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/babel-preset",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/bs-platform/bsconfig.json b/packages/bs-platform/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/bs-platform",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [],
   "suffix": ".bs.js",

diff --git a/packages/bs-platform/package.json b/packages/bs-platform/package.json
@@ -15,7 +15,7 @@
     "lib/**/*.js"
   ],
   "devDependencies": {
-    "bs-platform": "^5.0.0",
+    "bs-platform": "^5.0.4",
     "cpy-cli": "^2.0.0",
     "replace": "^1.0.0"
   },

diff --git a/packages/cli/bsconfig.json b/packages/cli/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/cli",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/core/bsconfig.json b/packages/core/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/core",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/helpers-transform/bsconfig.json b/packages/helpers-transform/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/helpers-transform",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/plugin-api-related-content/bsconfig.json b/packages/plugin-api-related-content/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/plugin-api-related-content",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/plugin-bundler-webpack/bsconfig.json b/packages/plugin-bundler-webpack/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/plugin-bundler-webpack",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/plugin-collector-files/bsconfig.json b/packages/plugin-collector-files/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/plugin-collector-files",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/plugin-public-assets/bsconfig.json b/packages/plugin-public-assets/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/plugin-public-assets",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {

diff --git a/packages/plugin-renderer-react/bsconfig.json b/packages/plugin-renderer-react/bsconfig.json
@@ -2,7 +2,7 @@
   "name": "@phenomic/plugin-renderer-react",
   "refmt": 3,
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
   "sources": [
     {