make sure paths start with /

Author: jderochervlk

app/routes.mjs

@@ -1,12 +1,13 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Belt_Array from "rescript/lib/es6/Belt_Array.js";
+import * as Belt_Array from "@rescript/runtime/lib/es6/Belt_Array.js";
 import * as Server from "react-router-mdx/server";
 import * as Routes from "@react-router/dev/routes";
 
 let $$default = Belt_Array.concatMany([
   [
     Routes.index("./routes/LandingPageRoute.mjs"),
+    Routes.route("packages", "./routes/PackagesRoute.mjs"),
     Routes.route("try", "./routes/TryRoute.mjs"),
     Routes.route("community", "./routes/CommunityRoute.mjs"),
     Routes.route("community/overview", "./routes/CommunityRoute.mjs", {

app/routes.res

@@ -3,6 +3,7 @@ open ReactRouter.Mdx
 
 let default = [
   index("./routes/LandingPageRoute.mjs"),
+  route("packages", "./routes/PackagesRoute.mjs"),
   route("try", "./routes/TryRoute.mjs"),
   route("community", "./routes/CommunityRoute.mjs"),
   route("community/overview", "./routes/CommunityRoute.mjs", ~options={id: "overview"}),

app/routes/LandingPageRoute.res

@@ -1,5 +1,5 @@
 let default = () => {
   <LandingPageLayout>
-    <div></div>
+    <></>
   </LandingPageLayout>
 }

app/routes/PackagesRoute.res

@@ -0,0 +1,3 @@
+let default = () => {
+  <Packages packages=[] unmaintained=[] />
+}

generate-route-types.mjs

@@ -5,7 +5,7 @@ init({ paths: ["_blogposts", "docs"], aliases: ["blog", "docs"] });
 
 const { default: routes } = await import("./app/routes.mjs");
 
-const paths = routes.map((route) => `#"${route.path}"`).join(" |\n");
+const paths = routes.map((route) => `#"/${route.path}"`).join(" |\n");
 
 await fs.writeFile(
   "src/Path.res",

package-lock.json

@@ -10,8 +10,9 @@
   "type": "module",
   "scripts": {
     "dev": "react-router dev",
-    "res:watch": "rescript build -w",
-    "build": "rescript && react-router build",
+    "res:watch": "rescript watch",
+    "res:clean": "rescript clean",
+    "build": "rescript build && react-router build",
     "test": "node scripts/test-examples.mjs && node scripts/test-hrefs.mjs",
     "reanalyze": "reanalyze -all-cmt .",
     "update-index": "npm run generate-llms && node scripts/extract-indices.mjs && node scripts/extract-tocs.mjs && node scripts/extract-syntax.mjs && node scripts/generate_feed.mjs > public/blog/feed.xml",
@@ -30,7 +31,7 @@
     "@mdx-js/loader": "^3.1.0",
     "@react-router/node": "^7.8.1",
     "@rescript/react": "^0.14.0-rc.1",
-    "@rescript/webapi": "^0.1.0-experimental-0b87498",
+    "@rescript/webapi": "^0.1.0-experimental-ae90e53",
     "codemirror": "^5.54.0",
     "docson": "^2.1.0",
     "escodegen": "^2.1.0",

package.json

@@ -31,7 +31,8 @@ module Badge = {
     let text = badge->BlogFrontmatter.Badge.toString
 
     <div
-      className={bgColor ++ " flex items-center h-6 font-medium tracking-tight text-gray-80-tr text-14 px-2 rounded-sm"}>
+      className={bgColor ++ " flex items-center h-6 font-medium tracking-tight text-gray-80-tr text-14 px-2 rounded-sm"}
+    >
       <div>
         <img className="h-3 block mr-1" src="/star.svg" />
       </div>
@@ -85,7 +86,7 @@ module BlogCard = {
   ) =>
     <section className="h-full">
       <div className="relative">
-        <ReactRouter.Link to=#"syntax-lookup" />
+        <ReactRouter.Link to=#"/syntax-lookup" />
         {switch badge {
         | None => React.null
         | Some(badge) =>
@@ -142,7 +143,8 @@ module FeatureCard = {
       </div>
     }
     <section
-      className="flex sm:px-4 md:px-8 lg:px-0 flex-col justify-end lg:flex-row sm:items-center h-full">
+      className="flex sm:px-4 md:px-8 lg:px-0 flex-col justify-end lg:flex-row sm:items-center h-full"
+    >
       <div className="w-full h-full sm:self-start md:self-auto max-h-101.75">
         <Link.String to={`/blog/${slug}`} className="relative block pt-2/3">
           {switch badge {
@@ -162,7 +164,8 @@ module FeatureCard = {
         </Link.String>
       </div>
       <div
-        className="relative px-4 lg:self-auto sm:pt-12 md:px-20 sm:self-start md:-mt-20 mt-4 bg-white lg:w-full lg:pt-0 lg:mt-0 lg:px-0 lg:ml-12">
+        className="relative px-4 lg:self-auto sm:pt-12 md:px-20 sm:self-start md:-mt-20 mt-4 bg-white lg:w-full lg:pt-0 lg:mt-0 lg:px-0 lg:ml-12"
+      >
         <div className="max-w-400 ">
           <h2 className="hl-1"> {React.string(title)} </h2>
           <div className="mb-6">
@@ -175,7 +178,8 @@ module FeatureCard = {
                   | X(handle) => "https://x.com/" ++ handle
                   | Bluesky(handle) => "https://bsky.app/profile/" ++ handle
                   }}
-                  rel="noopener noreferrer">
+                  rel="noopener noreferrer"
+                >
                   {React.string(author.fullname)}
                 </a>
                 {switch category {
@@ -238,7 +242,8 @@ let default = (props: props): React.element => {
       | [] => React.null
       | rest =>
         <div
-          className="px-4 md:px-8 xl:px-0 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-20 gap-y-12 md:gap-y-24 w-full">
+          className="px-4 md:px-8 xl:px-0 grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-20 gap-y-12 md:gap-y-24 w-full"
+        >
           {Array.map(rest, post => {
             let badge = post.frontmatter.badge->Null.toOption
 

src/Blog.res

@@ -177,7 +177,8 @@ module Card = {
           <button
             ?onMouseDown
             className="hover:pointer px-2 rounded-lg text-white bg-fire-70 text-14"
-            key={keyword}>
+            key={keyword}
+          >
             {React.string(keyword)}
           </button>
         })->React.array}
@@ -248,7 +249,8 @@ module InfoSidebar = {
               setFilter(prev => {
                 {...prev, Filter.includeOfficial: !filter.includeOfficial}
               })
-            }}>
+            }}
+          >
             {React.string("Official")}
           </Toggle>
           <Toggle
@@ -257,7 +259,8 @@ module InfoSidebar = {
               setFilter(prev => {
                 {...prev, Filter.includeCommunity: !filter.includeCommunity}
               })
-            }}>
+            }}
+          >
             {React.string("Community")}
           </Toggle>
           // <Toggle
@@ -275,15 +278,16 @@ module InfoSidebar = {
               setFilter(prev => {
                 {...prev, Filter.includeOutdated: !filter.includeOutdated}
               })
-            }}>
+            }}
+          >
             {React.string("Outdated")}
           </Toggle>
         </div>
       </div>
       <div>
         <h2 className=h2> {React.string("Guidelines")} </h2>
         <ul className="space-y-4">
-          <ReactRouter.Link to=#"docs/guidelines/publishing-packages" className=link>
+          <ReactRouter.Link to=#"/docs/guidelines/publishing-packages" className=link>
             {React.string("Publishing ReScript npm packages")}
           </ReactRouter.Link>
           /* <li> */
@@ -306,7 +310,7 @@ type state =
   | All
   | Filtered(string) // search term
 
-let default = (props: props) => {
+let make = (props: props) => {
   open Markdown
 
   let (state, setState) = React.useState(_ => All)
@@ -395,7 +399,8 @@ let default = (props: props) => {
     </Category>
   }
 
-  let router = Next.Router.useRouter()
+  let location = ReactRouter.useLocation()
+  let (searchParams, setSearchParams) = ReactRouter.useSearchParams()
 
   // On first render, the router query is undefined so we set a flag.
   let firstRenderDone = React.useRef(false)
@@ -407,16 +412,19 @@ let default = (props: props) => {
 
   // On second render, this hook runs one more time to actually trigger the search.
   React.useEffect(() => {
-    router.query->Dict.get("search")->Option.forEach(onValueChange)
+    // TODO RR7: test this
+
+    // TODO RR7: this is broken
+    let _ = searchParams["search"]->Option.map(onValueChange)
+
+    // location.search->Option.forEach(onValueChange)
+
+    // router.query->Dict.get("search")->Option.forEach(onValueChange)
 
     None
   }, [firstRenderDone.current])
 
-  let updateQuery = value =>
-    router->Next.Router.replaceObj({
-      pathname: router.pathname,
-      query: value === "" ? Dict.make() : Dict.fromArray([("search", value)]),
-    })
+  let updateQuery = value => setSearchParams({"search": value})
 
   // When the search term changes, update the router query accordingly.
   React.useEffect(() => {
@@ -440,7 +448,8 @@ let default = (props: props) => {
         <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex overflow-hidden">
           <div
-            className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48">
+            className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48"
+          >
             <MdxProvider components=MarkdownComponents.default>
               <main className="max-w-1280 w-full flex justify-center">
                 <div className="w-full max-w-176.25">

src/Packages.res

@@ -22,6 +22,6 @@ type props = {
   unmaintained: array<npmPackage>,
 }
 
-let default: props => React.element
+let make: props => React.element
 
 let getStaticProps: Next.GetStaticProps.t<props, unit>