Update with-reasonml to with-rescript example

examples/with-reasonml/.gitignore → examples/with-rescript/.gitignore

@@ -21,7 +21,7 @@
 bs
 .merlin
 lib/
-*.bs.js
+src/*.bs.js
 .bsb.lock
 
 # debug

examples/with-reasonml/README.md → examples/with-rescript/README.md

@@ -1,44 +1,36 @@
-# Example app using ReasonML & ReasonReact components
+# Example app using ReScript & React components
 
 This example features:
 
-- An app that mixes together JavaScript and ReasonML components and functions
+- An app that mixes together JavaScript ReScript components and functions
 - An app with two pages which has a common Counter component
-- That Counter component maintain the counter inside its module. This is used
-  primarily to illustrate that modules get initialized once and their state
-  variables persist in runtime
+- That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime
 
 ## Deploy your own
 
 Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reasonml&project-name=with-reasonml&repository-name=with-reasonml)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-rescript&project-name=with-rescript&repository-name=with-rescript)
 
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-reasonml with-reasonml-app
+npx create-next-app --example with-rescript with-rescript-app
 # or
-yarn create next-app --example with-reasonml with-reasonml-app
+yarn create next-app --example with-rescript with-rescript-app
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 
 ### Recommendation:
 
-Run BuckleScript build system `bsb -w` and `next -w` separately. For the sake
-of simple convention, `npm run dev` run both `bsb` and `next` concurrently.
-However, this doesn't offer the full [colorful and very, very, veeeery nice
-error
-output](https://reasonml.github.io/blog/2017/08/25/way-nicer-error-messages.html)
-experience that ReasonML can offer, don't miss it!
+Run ReScript's build system `rescript build -w` and `next` separately.
 
 There are 2 convenience scripts to facilitate running these separate processes:
 
-1. `npm run dev:reason` - This script will start the ReasonML toolchain in
-   watch mode to re-compile whenever you make changes.
+1. `npm run watch` - This script will start the ReScript compiler in watch mode to re-compile whenever you make changes.
 2. `npm run dev:next` - This script will start the next.js development server
    so that you will be able to access your site at the location output by the
    script. This will also hot reload as you make changes.

examples/with-rescript/bsconfig.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-rescript",
+  "reason": { "react-jsx": 3 },
+  "sources": [
+    {
+      "dir": "src",
+      "subdirs": true
+    }
+  ],
+  "bs-dependencies": ["@rescript/react"],
+  "package-specs": {
+    "module": "es6",
+    "in-source": true
+  },
+  "suffix": ".bs.js",
+  "warnings": {
+    "number": "-3",
+    "error": "+101+8"
+  }
+}

examples/with-rescript/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

examples/with-rescript/next.config.js

@@ -0,0 +1,29 @@
+const bsconfig = require('./bsconfig.json');
+const fs = require("fs");
+
+const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]);
+const withTM = require("next-transpile-modules")(transpileModules);
+
+// There is an issue where webpack doesn't detect npm packages within node_modules when
+// there is no dedicated package.json "main" entry + index.js file existent.
+// This function will make sure that every ReScript dependency folder is conforming
+// to webpack's resolve mechanism
+//
+// This will eventually be removed at some point, so keep an eye out for updates
+// on our template repository.
+function patchResDeps() {
+  ["rescript"].concat(bsconfig["bs-dependencies"]).forEach((bsDep) => {
+    fs.writeFileSync(`./node_modules/${bsDep}/index.js`, "");
+    const json = require(`./node_modules/${bsDep}/package.json`);
+    json.main = "index.js";
+    fs.writeFileSync(
+      `./node_modules/${bsDep}/package.json`,
+      JSON.stringify(json, null, 2)
+    );
+  });
+}
+patchResDeps(); // update package.json and create empty `index.js` before transpiling
+
+module.exports = withTM({
+  pageExtensions: ['jsx', 'js', 'mjs'],
+})

examples/with-rescript/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "with-reasonml",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "watch": "rescript build -w",
+    "dev:next": "next dev",
+    "build": "rescript && next build",
+    "start": "next start"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "next-transpile-modules": "7.0.0",
+    "@rescript/react": "^0.10.1",
+    "rescript": "^9.1.2"
+  }
+}

examples/with-rescript/pages/about.js

@@ -0,0 +1,12 @@
+import AboutRes from "src/About.bs.js";
+
+// Note:
+// We need to wrap the make call with
+// a Fast-Refresh conform function name,
+// (in this case, uppercased first letter)
+//
+// If you don't do this, your Fast-Refresh will
+// not work!
+export default function About(props) {
+  return <AboutRes {...props}/>;
+}

examples/with-rescript/pages/index.js

@@ -0,0 +1,15 @@
+import IndexRes from "src/Index.bs.js";
+
+// This can be re-exported as is (no Fast-Refresh issues)
+export { getServerSideProps } from "src/Index.bs.js";
+
+// Note:
+// We need to wrap the make call with
+// a Fast-Refresh conform function name,
+// (in this case, uppercased first letter)
+//
+// If you don't do this, your Fast-Refresh will
+// not work!
+export default function Index(props) {
+  return <IndexRes {...props}/>;
+}

examples/with-rescript/src/About.res

@@ -0,0 +1,5 @@
+@react.component
+let make = () =>
+  <div> <Header /> <p> {React.string("This is the about page.")} </p> <Counter /> </div>
+
+let default = make