Merge branch 'master' into new-react-docs-only

Author: ryyppy

README.md

@@ -13,13 +13,15 @@ This is the official documentation platform for the [ReScript](https://rescript-
 ## Setup
 
 ```sh
-# For first time clone / build
+# For first time clone / build (install dependencies)
 yarn
-yarn run update-index
 
 # Initial build
 yarn bs:build
 
+# Build the index data
+yarn run update-index
+
 # In a new tab
 yarn dev
 

common/Mdx.res

@@ -48,16 +48,15 @@ module MdxChildren: {
 } = {
   type unknown
 
-  @unboxed
-  type rec t = Any('a): t
+  type t
 
   type case =
     | String(string)
     | Element(mdxComponent)
     | Array(array<mdxComponent>)
     | Unknown(unknown)
 
-  let classify = (Any(v): t): case =>
+  let classify = (v: t): case =>
     if %raw(`function (a) { return  a instanceof Array}`)(v) {
       Array((Obj.magic(v): array<mdxComponent>))
     } else if Js.typeof(v) == "string" {

common/MetaFrontmatter.js

@@ -0,0 +1,5 @@
+# compilers
+
+This folder is needed to install additional rescript compiler versions for testing our documented source code on multiple compiler versions.
+
+Our `scripts/test-examples.js` script will automatically install all package.json dependencies if it cannot find any compiler versions.

common/MetaFrontmatter.res

@@ -0,0 +1,10 @@
+{
+  "name": "compilers",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "rescript-820": "npm:bs-platform@8.2.0"
+  }
+}

compilers/README.md

@@ -1,7 +1,3 @@
-// This file was automatically converted to ReScript from 'ApiMarkdown.re'
-// Check the output and make sure to delete the original file
-open Util.ReactStuff
-
 /*
    This module is intended for the ODOC like documentation layout.
    It hides the h2 tags and does

compilers/package-lock.json

@@ -1,5 +1,3 @@
-open Util.ReactStuff
-
 @react.component
 let make = (~children) =>
   <button

compilers/package.json

@@ -58,7 +58,7 @@ let useWindowWidth: unit => int = %raw(
   }
   return null;
   }
-  ` // Empty array ensures that effect is only run on mount and unmount
+  `
 )
 
 /* The module for interacting with the imperative CodeMirror API */
@@ -112,7 +112,7 @@ module CM = {
   @bs.send
   external setGutterMarker: (t, int, string, Dom.element) => unit = "setGutterMarker"
 
-  @bs.send external clearGutter: (t, string) => unit = ""
+  @bs.send external clearGutter: (t, string) => unit = "clearGutter"
 
   type markPos = {
     line: int,
@@ -211,7 +211,8 @@ module Error = {
 
 module GutterMarker = {
   // Note: this is not a React component
-  let make = (~rowCol: (int, int), ~kind: Error.kind, ~wrapper: Dom.element, ()): Dom.element => { // row, col
+  let make = (~rowCol: (int, int), ~kind: Error.kind, ()): Dom.element => {
+    // row, col
     open DomUtil
 
     let marker = createElement("div")
@@ -269,7 +270,7 @@ let updateErrors = (~state: state, ~onMarkerFocus=?, ~onMarkerFocusLeave=?, ~cm:
     open DomUtil
     open Error
 
-    let marker = GutterMarker.make(~rowCol=(e.row, e.column), ~kind=e.kind, ~wrapper, ())
+    let marker = GutterMarker.make(~rowCol=(e.row, e.column), ~kind=e.kind, ())
 
     wrapper->appendChild(marker)
 
@@ -361,13 +362,13 @@ let make = // props relevant for the react wrapper
   ~lineWrapping=false,
 ): React.element => {
   let inputElement = React.useRef(Js.Nullable.null)
-  let cmRef: React.Ref.t<option<CM.t>> = React.useRef(None)
+  let cmRef: React.ref<option<CM.t>> = React.useRef(None)
   let cmStateRef = React.useRef({marked: []})
 
   let windowWidth = useWindowWidth()
 
   React.useEffect0(() =>
-    switch inputElement->React.Ref.current->Js.Nullable.toOption {
+    switch inputElement.current->Js.Nullable.toOption {
     | Some(input) =>
       let options = CM.Options.t(
         ~theme="material",
@@ -399,14 +400,14 @@ let make = // props relevant for the react wrapper
       // so we need to set the initial value imperatively
       cm->CM.setValue(value)
 
-      React.Ref.setCurrent(cmRef, Some(cm))
+      cmRef.current = Some(cm)
 
       let cleanup = () => {
         /* Js.log2("cleanup", options->CM.Options.mode); */
 
         // This will destroy the CM instance
         cm->CM.toTextArea
-        React.Ref.setCurrent(cmRef, None)
+        cmRef.current = None
       }
 
       Some(cleanup)
@@ -428,12 +429,12 @@ let make = // props relevant for the react wrapper
      By checking if the local state of the CM instance is different
      to the input value, we can sync up both states accordingly
  */
-  switch cmRef->React.Ref.current {
+  switch cmRef.current {
   | Some(cm) =>
     if CM.getValue(cm) === value {
       ()
     } else {
-      let state = cmStateRef->React.Ref.current
+      let state = cmStateRef.current
       cm->CM.operation(() =>
         updateErrors(~onMarkerFocus?, ~onMarkerFocusLeave?, ~state, ~cm, errors)
       )
@@ -454,8 +455,8 @@ let make = // props relevant for the react wrapper
   })->Js.Array2.joinWith(";")
 
   React.useEffect1(() => {
-    let state = cmStateRef->React.Ref.current
-    switch cmRef->React.Ref.current {
+    let state = cmStateRef.current
+    switch cmRef.current {
     | Some(cm) =>
       cm->CM.operation(() =>
         updateErrors(~onMarkerFocus?, ~onMarkerFocusLeave?, ~state, ~cm, errors)
@@ -470,7 +471,7 @@ let make = // props relevant for the react wrapper
       a codemirror instance, or the window has been resized.
  */
   React.useEffect2(() => {
-    switch cmRef->React.Ref.current {
+    switch cmRef.current {
     | Some(cm) => cm->CM.refresh
     | None => ()
     }

components/ApiMarkdown.res

@@ -37,22 +37,21 @@ let make = () => {
   let (state, setState) = React.useState(_ => Inactive)
 
   let focusInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
+    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
   let clearInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
+    inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
 
-  let blurInput = () =>
-    React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
+  let blurInput = () => inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
 
-  let onClick = evt => {
+  let onClick = _ => {
     /* ReactEvent.Mouse.preventDefault(evt); */
     setState(_ => Active)
     clearInput()
     focusInput()
   }
 
-  let onBlur = evt => {
+  let onBlur = _ => {
     /* ReactEvent.Focus.preventDefault(evt); */
     /* ReactEvent.Focus.stopPropagation(evt); */
     clearInput()
@@ -113,21 +112,21 @@ module Textbox = {
     let (state, setState) = React.useState(_ => Inactive)
 
     let focusInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->focus)
 
-    let clearInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
+    let _clearInput = () =>
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->value(""))
 
     let blurInput = () =>
-      React.Ref.current(inputRef)->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
+      inputRef.current->Js.Nullable.toOption->Belt.Option.forEach(el => el->blur)
 
-    let onClick = evt => {
+    let onClick = _ => {
       /* ReactEvent.Mouse.preventDefault(evt); */
       setState(_ => Active)
       focusInput()
     }
 
-    let onBlur = evt =>
+    let onBlur = _ =>
       /* ReactEvent.Focus.preventDefault(evt); */
       /* ReactEvent.Focus.stopPropagation(evt); */
       setState(_ => Inactive)

components/Button.res

@@ -32,7 +32,7 @@ let linkOrActiveDocsSubroute = (~route) => {
 }
 
 let githubHref = "https://github.com/reason-association/rescript-lang.org#rescript-langorg"
-let twitterHref = "https://twitter.com/rescriptlang"
+//let twitterHref = "https://twitter.com/rescriptlang"
 let discourseHref = "https://forum.rescript-lang.org"
 
 module CollapsibleLink = {
@@ -43,11 +43,11 @@ module CollapsibleLink = {
     | Closed
 
   @react.component
-  let make = (
+  let _make = (
     ~title: string,
     ~onStateChange: (~id: string, state) => unit,
     ~allowHover=true,
-    ~allowInteraction=true,
+    /* ~allowInteraction=true, */
     ~id: string,
     ~state: state,
     ~active=false,
@@ -165,7 +165,7 @@ let useWindowWidth: unit => option<int> = %raw(
   }
   return null;
   }
-  ` // Empty array ensures that effect is only run on mount and unmount
+  `
 )
 
 type collapsible = {
@@ -175,10 +175,12 @@ type collapsible = {
   state: CollapsibleLink.state,
 }
 
+@@warning("-60")
 module SubNav = {
+  @@warning("-60")
   module DocsLinks = {
     @react.component
-    let make = (~route: string) => {
+    let _make = (~route: string) => {
       let reTheme = ColorTheme.toCN(#Reason)
       let jsTheme = ColorTheme.toCN(#Js)
 
@@ -346,7 +348,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
 
   let route = router.route
 
-  let (collapsibles, setCollapsibles) = React.useState(_ => [/* { */
+  let (_collapsibles, setCollapsibles) = React.useState(_ => [/* { */
   /* title: "Docs", */
   /* href: "/docs", */
   /* children: route => { */
@@ -374,7 +376,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
   let windowWidth = useWindowWidth()
 
   // Don't allow hover behavior for collapsibles if mobile navigation is on
-  let allowHover = switch windowWidth {
+  let _allowHover = switch windowWidth {
   | Some(width) => width > 576 // Value noted in tailwind config
   | None => true
   }