Merge pull request #8 from bloodyowl/rescript-11

ReScript 11
bloodyowl · Apr 21, 2024 · c6f9fd8 · c6f9fd8
2 parents 07fc47f + 8b9e708
commit c6f9fd8
Show file tree

Hide file tree

Showing 11 changed files with 1,321 additions and 1,051 deletions.
diff --git a/contents/docs/01_getting-started.md b/contents/docs/01_getting-started.md
@@ -40,8 +40,9 @@ The posts will be sorted by filename, but you can specify custom slugs.
 You'll need to create a React component with the following signature:
 
 ```rescript
-@react.component
-let make = (~url: ReasonReact.Router.url, ~config: Pages.config) => React.element
+type props = Pages.App.appProps
+
+let make = (Pages.App.appProps) => React.element
 ```
 
 And then expose your application:
@@ -68,7 +69,7 @@ let default = Pages.make(
         contentDirectory: "contents", /* Where to find markdown contents */
         getUrlsToPrerender: getUrlsToPrerender,
         getRedirectMap: Some(_ =>
-          Js.Dict.fromArray([("old-url", "new-url")])
+          Dict.fromArray([("old-url", "new-url")])
         ),
       },
     ],

diff --git a/contents/docs/02_consuming-content.md b/contents/docs/02_consuming-content.md
@@ -20,7 +20,7 @@ type item = {
   title: string,
   date: option<string>,
   draft: bool,
-  meta: Js.Dict.t<Js.Json.t>,
+  meta: Dict.t<JSON.t>,
   body: string,
 }
 ```
@@ -52,7 +52,7 @@ type listItem = {
   title: string,
   date: option<string>,
   draft: bool,
-  meta: Js.Dict.t<Js.Json.t>,
+  meta: Dict.t<JSON.t>,
   summary: string,
 }
 
@@ -63,7 +63,6 @@ type paginated = {
 }
 ```
 
-
 ## AsyncData
 
 As the server fetch is asynchronous, the two hooks return [AsyncData](https://github.com/bloodyowl/rescript-asyncdata) values:

diff --git a/example/App.res b/example/App.res
@@ -1,4 +1,4 @@
-open Belt
+open! Belt
 include CssReset
 
 module WidthContainer = {
@@ -156,7 +156,9 @@ module Home = {
         <WidthContainer>
           <BlockGrid width="33.3333%">
             {items
-            ->Array.map(block => <FeatureBlock title=block.title text=block.summary />)
+            ->Array.map(block =>
+              <FeatureBlock key={block.slug} title=block.title text=block.summary />
+            )
             ->React.array}
           </BlockGrid>
         </WidthContainer>
@@ -223,9 +225,13 @@ module Docs = {
       <div className=Styles.container>
         <div className=Styles.column>
           {switch list {
-          | NotAsked | Loading => <div className=Styles.loader> <Pages.ActivityIndicator /> </div>
+          | NotAsked | Loading =>
+            <div className=Styles.loader>
+              <Pages.ActivityIndicator />
+            </div>
           | Done(Error(_)) => <Pages.ErrorIndicator />
-          | Done(Ok({items})) => <>
+          | Done(Ok({items})) =>
+            <>
               {items
               ->Array.map(item =>
                 <Pages.Link
@@ -242,11 +248,15 @@ module Docs = {
         </div>
         <div className=Styles.body>
           {switch item {
-          | NotAsked | Loading => <div className=Styles.loader> <Pages.ActivityIndicator /> </div>
+          | NotAsked | Loading =>
+            <div className=Styles.loader>
+              <Pages.ActivityIndicator />
+            </div>
           | Done(Error(_)) => <Pages.ErrorIndicator />
           | Done(Ok(item)) =>
             <div className=Styles.contents>
-              <h1> {item.title->React.string} </h1> <MarkdownBody body=item.body />
+              <h1> {item.title->React.string} </h1>
+              <MarkdownBody body=item.body />
             </div>
           }}
         </div>
@@ -401,14 +411,14 @@ module ShowcaseWebsite = {
 
   @react.component
   let make = (~title, ~url, ~image) => {
-    let imageRef = React.useRef(Js.Nullable.null)
+    let imageRef = React.useRef(Nullable.null)
     let (imageRatio, setImageRatio) = React.useState(() => None)
 
     React.useEffect0(() => {
-      switch imageRef.current->Js.Nullable.toOption {
+      switch imageRef.current->Nullable.toOption {
       | Some(image) =>
         let image = image->elementAsObject
-        Js.log(image["complete"])
+        Console.log(image["complete"])
         if image["complete"] {
           setImageRatio(_ => Some(image["naturalHeight"] /. image["naturalWidth"]))
         }
@@ -470,7 +480,9 @@ module Showcase = {
         <BlockGrid width="50%">
           {ShowcaseWebsiteList.websites
           ->Array.map(website => {
-            <ShowcaseWebsite title=website.title url=website.url image=website.image />
+            <ShowcaseWebsite
+              key=website.url title=website.title url=website.url image=website.image
+            />
           })
           ->React.array}
         </BlockGrid>
@@ -491,17 +503,27 @@ module App = {
       "fontSize": 14,
     })
   }
-  @react.component
-  let make = (~url as {RescriptReactRouter.path: path}, ~config as _) => {
+  type props = Pages.App.appProps
+
+  let make = ({url: {path}}: props) => {
     <div className=Styles.container>
       <Pages.Head>
         <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport" />
       </Pages.Head>
       <Header />
       {switch path {
-      | list{} => <> <Home /> </>
-      | list{"showcase"} => <> <Showcase /> </>
-      | list{"docs", slug} => <> <Docs slug /> </>
+      | list{} =>
+        <>
+          <Home />
+        </>
+      | list{"showcase"} =>
+        <>
+          <Showcase />
+        </>
+      | list{"docs", slug} =>
+        <>
+          <Docs slug />
+        </>
       | list{"404.html"} => <div> {"Page not found..."->React.string} </div>
       | _ => <div> {"Page not found..."->React.string} </div>
       }}
@@ -532,10 +554,10 @@ let default = Pages.make(
         subdirectory: None,
         localeFile: None,
         contentDirectory: "contents",
-        getUrlsToPrerender: getUrlsToPrerender,
+        getUrlsToPrerender,
         getRedirectMap: Some(
           _ => {
-            Js.Dict.fromArray([("old_url", "new_url")])
+            Dict.fromArray([("old_url", "new_url")])
           },
         ),
       },

diff --git a/package.json b/package.json
@@ -23,13 +23,15 @@
   "author": "bloodyowl <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@rescript/react": "^0.10.3",
-    "rescript": "^10.0.1",
-    "rescript-test": "^4.0.0"
+    "@rescript/react": "^0.12.0",
+    "rescript": "^11.0.0",
+    "rescript-nodejs": "^16.1.0",
+    "rescript-test": "^7.0.0"
   },
   "dependencies": {
     "@emotion/css": "^11.1.3",
     "@emotion/server": "^11.0.0",
+    "@rescript/core": "^1.3.0",
     "bs-fetch": "^0.6.2",
     "chalk": "4.1.1",
     "chokidar": "^3.4.3",
@@ -43,8 +45,8 @@
     "inline-translations-webpack-plugin": "^1.0.2",
     "memfs": "^3.2.0",
     "mime": "^2.4.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "reason-highlightjs": "^0.2.1",
     "remarkable": "^2.0.1",
@@ -53,15 +55,15 @@
     "rescript-future": "^2.1.0",
     "rescript-request": "^3.0.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
-    "webpack": "^5.0.0",
+    "webpack": "^5.91.0",
     "webpack-cli": "^4.5.0",
     "ws": "^7.4.0"
   },
   "peerDependencies": {
     "@emotion/css": "^11.1.3",
-    "@rescript/react": "^0.10.3",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@rescript/react": "^0.12.0",
+    "react": "^18.0.1",
+    "react-dom": "^18.0.1",
     "rescript-asyncdata": "^4.0.0"
   }
 }
diff --git a/bsconfig.json → rescript.json b/bsconfig.json → rescript.json
@@ -1,9 +1,7 @@
 {
   "name": "rescript-pages",
   "version": "0.1.0",
-  "reason": {
-    "react-jsx": 3
-  },
+  "jsx": { "version": 4 },
   "sources": [
     {
       "dir": "src",
@@ -21,18 +19,20 @@
     }
   ],
   "package-specs": {
-    "module": "es6",
+    "module": "esmodule",
     "in-source": true
   },
   "suffix": ".mjs",
   "bs-dependencies": [
     "@rescript/react",
+    "@rescript/core",
     "rescript-asyncdata",
     "rescript-future",
     "rescript-request"
   ],
-  "bs-dev-dependencies": ["rescript-test"],
+  "bs-dev-dependencies": ["rescript-nodejs", "rescript-test"],
   "warnings": {
     "error": "+101"
-  }
+  },
+  "bsc-flags": ["-open RescriptCore"]
 }