with-reasonml: use default exports

[rase-]

Here is a suggestion for the ReasonML example to remove the js files for pages, which basically just wrap a default export.

ReasonML enables ES6 default exports so that's done here, but this way we have to use the lib/js directory the bucklescript compiler targets. I think it's a very acceptable tradeoff in this example.

[timneutkens]

I wonder if this should actually use https://github.com/reasonml-community/bs-loader 🤔

[rase-]

Probably could. I'm experimenting with that separately right now actually.

Don't think it's necessary for this PR tho. Already a nice incremental improvement.

[rase-]

Not bs-loader exactly, since it's deprecated, but a similarly smoother set up here could work, that is.

[timneutkens]

Oh yeah definitely 👍

[timneutkens]

Looks good to me

[tmepple]

Hi @rase- Thanks for working on improving the with-reasonml example over the past few days. Some good stuff!

Quick question... with the new pattern from this PR are you able to call getInitialProps from ReasonML pages? I was using the old pattern in the .js file like this:

import { jsComponent as About } from "./About.re";

About.getInitialProps = async (context) => {
  // code here
};

export default () => <About />		

It is good to be able to avoid the extra .js file if possible with your change but not sure how to call getInitialProps in that case.

[rase-]

@tmepple Sure, you just have to do a little bit of hackery, similarly to how you'd have to do it with the separate JS file. Here's a quick example of how you could go about it (as a diff to the About page):

diff --git a/examples/with-reasonml/pages/about.re b/examples/with-reasonml/pages/about.re
index f104565..27c4db4 100644
--- a/examples/with-reasonml/pages/about.re
+++ b/examples/with-reasonml/pages/about.re
@@ -1,13 +1,24 @@
 let component = ReasonReact.statelessComponent("About");
 
-let make = (_children) => {
+let make = (~a, ~b, _children) => {
   ...component,
   render: (_self) =>
     <div>
       <Header />
       <p> (ReasonReact.stringToElement("This is the about page.")) </p>
+      <p> (ReasonReact.stringToElement(a)) </p>
+      <p> (ReasonReact.stringToElement(b)) </p>
       <Counter />
     </div>
 };
 
-let default = ReasonReact.wrapReasonForJs(~component, (_jsProps) => make([||]));
+let default = ReasonReact.wrapReasonForJs(~component, (jsProps) => make(~a=jsProps##a, ~b=jsProps##b, [||]));
+
+let getInitialProps = () => {
+  Js.Promise.make ((~resolve, ~reject as _) => {
+    resolve(.{"a": "test", "b": "b" });
+  })
+};
+
+let inject = [%bs.raw {| (cls, fn) => cls.getInitialProps = fn |}];
+inject(default, getInitialProps);

That said, I'm trying to explore some ways of doing this in a cleaner way as a wrapper on top of ReasonReact or additional next.js configuration which I'll share when I get there. In the meantime, the above is a similar trick to injecting to the imported component class in the JS file.

[tmepple]

I felt like there was a way to use the %bs.raw hack or something to get it done. It's pretty straightforward but if you find a cleaner way at some point that would be awesome. Thanks again for improving the with-reasonml example and getting back to me so fast.