Migrate to ReScript v11

.gitignore

@@ -25,4 +25,4 @@ lib/
 
 .vercel
 
-src/**/*.mjs
+*.bs.mjs

next.config.mjs

@@ -7,14 +7,14 @@ import remarkFrontmatter from 'remark-frontmatter'
 import remarkMdxFrontmatter from "remark-mdx-frontmatter";
 import { createLoader } from 'simple-functional-loader'
 
-const bsconfig = JSON.parse(fs.readFileSync("./bsconfig.json"))
+const bsconfig = JSON.parse(fs.readFileSync("./rescript.json"))
 
 const { ProvidePlugin } = webpack;
 
 const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]);
 
 const config = {
-  pageExtensions: ["jsx", "js", "bs.js", "mdx", "mjs"],
+  pageExtensions: ["jsx", "js", "bs.mjs", "mdx", "mjs"],
   env: {
     ENV: process.env.NODE_ENV,
   },

package.json

@@ -17,8 +17,7 @@
   "dependencies": {
     "@headlessui/react": "^1.2.0",
     "@mdx-js/loader": "^2.3.0",
-    "@rescript/react": "^0.10.3",
-    "@ryyppy/rescript-promise": "2.1.0",
+    "@rescript/react": "^0.12.0-alpha.3",
     "codemirror": "^5.54.0",
     "docson": "^2.1.0",
     "eslint-config-next": "^13.1.1",
@@ -60,7 +59,7 @@
     "postcss": "^8.4.27",
     "postcss-cli": "^8.3.0",
     "reanalyze": "^2.16.0",
-    "rescript": "^10.1.4",
+    "rescript": "^11.0.0-rc.4",
     "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.3.3"
   }

pages/_app.js

@@ -12,7 +12,7 @@ import "codemirror/lib/codemirror.css";
 import "styles/cm.css";
 import "styles/docson.css";
 
-import {make as ResApp} from "src/common/App.mjs";
+import {make as ResApp} from "src/common/App.bs.mjs";
 
 export default function App(props) {
   return <ResApp {...props} />

pages/api/revalidate.js

@@ -1 +1 @@
-export { handler as default } from "src/others/Revalidate.mjs";
+export { handler as default } from "src/others/Revalidate.bs.mjs";

pages/blog.js

@@ -1,6 +1,6 @@
-import BlogRes from "src/Blog.mjs";
+import BlogRes from "src/Blog.bs.mjs";
 
-export { getStaticProps } from "src/Blog.mjs";
+export { getStaticProps } from "src/Blog.bs.mjs";
 
 export default function Blog(props) {
   return <BlogRes {...props} />

pages/blog/[slug].js

@@ -2,4 +2,4 @@ export {
   default,
   getStaticPaths,
   getStaticProps
-} from "src/BlogArticle.mjs";
+} from "src/BlogArticle.bs.mjs";

pages/docs/latest.js

@@ -1,3 +1,3 @@
-import make from "src/DocsOverview.mjs";
+import make from "src/DocsOverview.bs.mjs";
 
 export default make;

pages/docs/v8.0.0.js

@@ -1,3 +1,3 @@
-import make from "src/DocsOverview.mjs";
+import make from "src/DocsOverview.bs.mjs";
 
 export default make;

pages/docs/v9.0.0.js

@@ -1,3 +1,3 @@
-import make from "src/DocsOverview.mjs";
+import make from "src/DocsOverview.bs.mjs";
 
 export default make;

pages/packages.js

@@ -1,6 +1,6 @@
-import Comp from "src/Packages"
+import Comp from "src/Packages.bs.mjs"
 
-export { getStaticProps } from "src/Packages"
+export { getStaticProps } from "src/Packages.bs.mjs"
 
 export default function PackagesPage(props) {
   return <Comp {...props}/>;

pages/syntax-lookup.js

@@ -1,6 +1,6 @@
-import SyntaxLookupRes from "src/SyntaxLookup.mjs";
+import SyntaxLookupRes from "src/SyntaxLookup.bs.mjs";
 
-export { getStaticProps } from "src/SyntaxLookup.mjs";
+export { getStaticProps } from "src/SyntaxLookup.bs.mjs";
 
 export default function SyntaxLookup(props) {
   return <SyntaxLookupRes {...props} />

pages/try.js

@@ -1,19 +1 @@
-import dynamic from "next/dynamic";
-
-export { getStaticProps } from "src/Try.mjs";
-import Try from "src/Try.mjs";
-
-const Playground = dynamic(() => import("src/Playground.mjs"), {
-  ssr: false,
-  loading: () => <span>Loading...</span>
-});
-
-function Comp(props) {
-  return (
-    <Try>
-      <Playground {...props} />
-    </Try>
-  );
-}
-
-export default Comp;
+export { getStaticProps, default } from "src/Try.bs.mjs";

bsconfig.json → rescript.json

@@ -1,13 +1,13 @@
 {
   "name": "rescript-lang.org",
   "namespace": false,
-  "reason": {
-    "react-jsx": 3
+  "jsx": {
+    "version": 4
   },
   "bs-dependencies": [
-    "@rescript/react",
-    "@ryyppy/rescript-promise"
+    "@rescript/react"
   ],
+  "uncurried": true,
   "ppx-flags": [],
   "sources": [
     {
@@ -27,7 +27,7 @@
   "warnings": {
     "error": "+8"
   },
-  "suffix": ".mjs",
+  "suffix": ".bs.mjs",
   "bsc-flags": [
     "-bs-g"
   ],

scripts/test-hrefs.mjs

@@ -14,7 +14,7 @@ import path from "path";
 import fs from "fs";
 import urlModule from "url";
 import { URL } from 'url';
-import {getAllPosts, blogPathToSlug} from '../src/common/BlogApi.mjs'
+import {getAllPosts, blogPathToSlug} from '../src/common/BlogApi.bs.mjs'
 
 const pathname = new URL('.', import.meta.url).pathname;
 const __dirname = process.platform !== 'win32' ? pathname : pathname.substring(1)

src/Blog.res

@@ -101,10 +101,7 @@ module BlogCard = {
             <Badge badge />
           </div>
         }}
-        <Link
-          href="/blog/[slug]"
-          _as={"/blog/" ++ slug}
-          className="relative hl-title block mb-4 pt-9/16">
+        <Link href={`/blog/${slug}`} className="relative hl-title block mb-4 pt-9/16">
           {
             let className = "absolute top-0 h-full w-full object-cover"
             switch previewImg {
@@ -115,7 +112,7 @@ module BlogCard = {
         </Link>
       </div>
       <div className="px-2">
-        <Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
+        <Link href={`/blog/${slug}`}>
           <h2 className="hl-4"> {React.string(title)} </h2>
         </Link>
         <div className="captions text-gray-40 pt-1">
@@ -156,7 +153,7 @@ module FeatureCard = {
           ~maxHeight="25.4375rem",
           (),
         )}>
-        <Link href="/blog/[slug]" _as={"/blog/" ++ slug} className="relative block pt-2/3">
+        <Link href={`/blog/${slug}`} className="relative block pt-2/3">
           {switch badge {
           | Some(badge) =>
             <div className="absolute z-10 top-0 mt-10 ml-4 lg:-ml-4">
@@ -202,7 +199,7 @@ module FeatureCard = {
             <p className="body-md text-gray-70"> {React.string(firstParagraph)} </p>
           </div>
         </div>
-        <Link href="/blog/[slug]" _as={"/blog/" ++ slug}>
+        <Link href={`/blog/${slug}`}>
           <Button> {React.string("Read Article")} </Button>
         </Link>
       </div>
@@ -304,13 +301,13 @@ let default = (props: props): React.element => {
         <Navigation overlayState />
         <div className="flex justify-center overflow-hidden">
           <main className="min-w-320 lg:align-center w-full lg:px-0 max-w-1280 pb-48">
-            <Mdx.Provider components=Markdown.default>
+            <MdxProvider components=MarkdownComponents.default>
               <div className="flex justify-center">
                 <div className="w-full" style={ReactDOMStyle.make(~maxWidth="66.625rem", ())}>
                   content
                 </div>
               </div>
-            </Mdx.Provider>
+            </MdxProvider>
           </main>
         </div>
         <Footer />

src/BlogArticle.res

@@ -22,7 +22,7 @@ module Params = {
   type t = {slug: string}
 }
 
-type props = {mdxSource: Mdx.Remote.output, isArchived: bool, path: string}
+type props = {mdxSource: MdxRemote.output, isArchived: bool, path: string}
 
 module Line = {
   @react.component
@@ -116,29 +116,16 @@ module BlogHeader = {
   }
 }
 
-type remarkPlugin
-@module("remark-comment") external remarkComment: remarkPlugin = "default"
-@module("remark-gfm") external remarkGfm: remarkPlugin = "default"
-@module("remark-frontmatter") external remarkFrontmatter: remarkPlugin = "default"
-
-let mdxOptions = {"remarkPlugins": [remarkComment, remarkGfm, remarkFrontmatter]}
-
-external asProps: {..} => {"props": Mdx.Remote.output} = "%identity"
-
 let default = (props: props) => {
   let {mdxSource, isArchived, path} = props
 
-  let mdxProps = {
-    "frontmatter": mdxSource.frontmatter,
-    "scope": mdxSource.scope,
-    "compiledSource": mdxSource.compiledSource,
-    "components": Markdown.default,
-    "options": {
-      "mdxOptions": mdxOptions,
-    },
-  }
-
-  let children = React.createElement(Mdx.MDXRemote.make, asProps(mdxProps))
+  let children =
+    <MdxRemote
+      frontmatter={mdxSource.frontmatter}
+      compiledSource={mdxSource.compiledSource}
+      scope={mdxSource.scope}
+      components={MarkdownComponents.default}
+    />
 
   let fm = mdxSource.frontmatter->BlogFrontmatter.decode
 
@@ -230,11 +217,11 @@ let getStaticProps: Next.GetStaticProps.t<props, Params.t> = async ctx => {
 
   let isArchived = Js.String2.startsWith(path, "archive/")
 
-  let source = filePath->Node.Fs.readFileSync(#utf8)
+  let source = filePath->Node.Fs.readFileSync
 
-  let mdxSource = await Mdx.Remote.serialize(
+  let mdxSource = await MdxRemote.serialize(
     source,
-    {"parseFrontmatter": true, "mdxOptions": mdxOptions},
+    {parseFrontmatter: true, mdxOptions: MdxRemote.defaulltMdxOptions},
   )
 
   let props = {mdxSource, isArchived, path}