Merge pull request #738 from aspeddro/migrate-rescript-v11

Migrate to ReScript v11

Author: fhammerschmidt

.gitignore

@@ -26,3 +26,4 @@ lib/
 .vercel
 
 src/**/*.mjs
+scripts/**/*.mjs

next.config.mjs

@@ -7,7 +7,7 @@ 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;
 

package-lock.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.6",
     "simple-functional-loader": "^1.2.1",
     "tailwindcss": "^3.3.3"
   }

package.json

@@ -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.mjs";

pages/try.js

@@ -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": [
     {

bsconfig.json renamed to rescript.json

@@ -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 />

scripts/generate_feed.mjs

@@ -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.defaultMdxOptions},
   )
 
   let props = {mdxSource, isArchived, path}

src/Blog.res

@@ -2,7 +2,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}
 
 let default: props => React.element