String.includes("toBe(false)
+ expect(renderHtml( {React.null} ))->toContain("")
+})
+
+test(
+ "MDX code tabs read code, language, labels and line metadata from React children",
+ async () => {
+ HighlightLanguages.defaultInstance->ContentHighlighting.register
+ let html = renderHtml(
+
+
+
+
+ {React.string("let a = 1\nlet b = 2")}
+
+
+
+
+ {React.string("const a = 1;")}
+
+
+
+ ,
+ )
+ expect(html)->toContain("Source")
+ expect(html)->toContain("Output")
+ expect(html)->toContain("lang-rescript")
+ expect(html)->toContain("opacity-50")
+ expect(html)->toContain("let")
+ expect(html->String.replaceAllRegExp(/<[^>]*>/g, ""))->toContain("let b = 2")
+ },
+)
+
+test("URL boxes preserve their first paragraph, following content and destination", async () => {
+ let html = renderHtml(
+
+
+ {React.string("First paragraph")}
+ {React.string("Second paragraph")}
+
+ ,
+ )
+ expect(html)->toContain("First paragraph")
+ expect(html)->toContain("Second paragraph")
+ expect(html)->toContain("Read more")
+ expect(html)->toContain("href=\"/docs/manual/introduction\"")
+ expect(html->String.includes("toBe(false)
+})
+
+test("typed string helpers preserve empty strings and repeated hyphen behavior", async () => {
+ expect(Util.String.camelCase("hello--world-42-next"))->toBe("hello-World-42Next")
+ expect(Util.String.capitalize(""))->toBe("")
+ expect(Util.String.capitalize("hello"))->toBe("Hello")
+})
diff --git a/apps/docs/src/bindings/HighlightJsBindings.res b/apps/docs/src/bindings/HighlightJsBindings.res
index f793d247f..3943cb613 100644
--- a/apps/docs/src/bindings/HighlightJsBindings.res
+++ b/apps/docs/src/bindings/HighlightJsBindings.res
@@ -1,9 +1,3 @@
-type highlightOptions = {language: string}
-type highlightResult = {value: string}
-
-@module("highlight.js/lib/core") @scope("default")
-external make: unit => HighlightLanguages.highlighter = "newInstance"
-
@module("highlight.js/lib/languages/bash")
external bash: HighlightLanguages.definition = "default"
@@ -36,14 +30,3 @@ external toml: HighlightLanguages.definition = "default"
@module("highlightjs-rescript")
external rescript: HighlightLanguages.definition = "default"
-
-@send
-external registerLanguage: (
- HighlightLanguages.highlighter,
- string,
- HighlightLanguages.definition,
-) => unit = "registerLanguage"
-
-@send
-external highlight: (HighlightLanguages.highlighter, string, highlightOptions) => highlightResult =
- "highlight"
diff --git a/apps/docs/src/common/AlgoliaConfig.res b/apps/docs/src/common/AlgoliaConfig.res
index e486ee425..f557262e4 100644
--- a/apps/docs/src/common/AlgoliaConfig.res
+++ b/apps/docs/src/common/AlgoliaConfig.res
@@ -4,24 +4,12 @@ type publicConfig = {
searchApiKey: string,
}
-let isPresent = value =>
- switch value {
- | Some(v) => v !== ""
- | None => false
- }
-
-let missingPublicVars = (~appId, ~indexName, ~searchApiKey): array => {
- let missing = []
- if !isPresent(appId) {
- missing->Array.push("VITE_ALGOLIA_APP_ID")
- }
- if !isPresent(indexName) {
- missing->Array.push("VITE_ALGOLIA_INDEX_NAME")
- }
- if !isPresent(searchApiKey) {
- missing->Array.push("VITE_ALGOLIA_SEARCH_API_KEY")
- }
- missing
+let missingPublicVars = (~appId, ~indexName, ~searchApiKey) => {
+ let env = Dict.make()
+ appId->Option.forEach(value => env->Dict.set("VITE_ALGOLIA_APP_ID", value))
+ indexName->Option.forEach(value => env->Dict.set("VITE_ALGOLIA_INDEX_NAME", value))
+ searchApiKey->Option.forEach(value => env->Dict.set("VITE_ALGOLIA_SEARCH_API_KEY", value))
+ AlgoliaEnvStatus.getMissingPublicAlgoliaVars(~env)
}
let publicConfigFrom = (~appId, ~indexName, ~searchApiKey): option =>
diff --git a/apps/docs/src/common/Clipboard.res b/apps/docs/src/common/Clipboard.res
deleted file mode 100644
index ea9b53b51..000000000
--- a/apps/docs/src/common/Clipboard.res
+++ /dev/null
@@ -1,10 +0,0 @@
-type error = WriteFailed
-
-let writeText = async text => {
- try {
- await navigator.clipboard->WebAPI.Clipboard.writeText(text)
- Ok()
- } catch {
- | _ => Error(WriteFailed)
- }
-}
diff --git a/apps/docs/src/common/Hooks.res b/apps/docs/src/common/Hooks.res
index 682355c21..99b79381f 100644
--- a/apps/docs/src/common/Hooks.res
+++ b/apps/docs/src/common/Hooks.res
@@ -1,19 +1,3 @@
-/* Contains some generic hooks */
-let useOutsideClick: (ReactDOM.Ref.t, unit => unit) => unit = %raw(`(outerRef, trigger) => {
- function handleClickOutside(event) {
- if (outerRef.current && !outerRef.current.contains(event.target)) {
- trigger();
- }
- }
-
- React.useEffect(() => {
- document.addEventListener("mousedown", handleClickOutside);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- };
- });
-}`)
-
/** scrollDir is not memo-friendly.
It must be used with pattern matching.
Do not pass it directly to child components. */
diff --git a/apps/docs/src/common/Util.res b/apps/docs/src/common/Util.res
index 27e8d354e..aabbf2221 100644
--- a/apps/docs/src/common/Util.res
+++ b/apps/docs/src/common/Util.res
@@ -1,21 +1,14 @@
-module Unsafe = {
- external elementAsString: React.element => string = "%identity"
-}
-
module String = {
- let camelCase: string => string = %raw("str => {
- return str.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
- }")
-
- let kebabCase = string =>
- string
- ->String.replaceAllRegExp(/([a-z])([A-Z])/g, "$1-$2")
- ->String.toLowerCase
- ->String.replaceAll(" ", "-")
-
- let capitalize: string => string = %raw("str => {
- return str && str.charAt(0).toUpperCase() + str.substring(1);
- }")
+ let camelCase = str =>
+ str->String.replaceRegExpBy1Unsafe(/-([a-z])/g, (
+ ~match as _,
+ ~group1,
+ ~offset as _,
+ ~input as _,
+ ) => group1->String.toUpperCase)
+
+ let capitalize = str =>
+ str->String.slice(~start=0, ~end=1)->String.toUpperCase ++ str->String.slice(~start=1)
let capitalizeSentence = str =>
str
diff --git a/apps/docs/src/common/Util.resi b/apps/docs/src/common/Util.resi
index fb0da2991..c395ff634 100644
--- a/apps/docs/src/common/Util.resi
+++ b/apps/docs/src/common/Util.resi
@@ -6,13 +6,8 @@ module Url: {
let makeOpenGraphImageUrl: string => string
}
-module Unsafe: {
- let elementAsString: React.element => string
-}
-
module String: {
let camelCase: string => string
- let kebabCase: string => string
let capitalize: string => string
let capitalizeSentence: string => string
let leadingSlash: string => string
diff --git a/apps/docs/src/components/CodeCopyButton.res b/apps/docs/src/components/CodeCopyButton.res
new file mode 100644
index 000000000..ed56f0187
--- /dev/null
+++ b/apps/docs/src/components/CodeCopyButton.res
@@ -0,0 +1,78 @@
+type state =
+ | Init
+ | Pending
+ | Copied
+ | Failed
+
+@react.component
+let make = (~code, ~writeClipboard=Clipboard.writeText) => {
+ let (state, setState) = React.useState(_ => Init)
+
+ let buttonRef = React.useRef(Nullable.null)
+
+ let copy = async () => {
+ setState(_ => Pending)
+ let result = await writeClipboard(code)
+ setState(_ =>
+ switch result {
+ | Ok() => Copied
+ | Error(_) => Failed
+ }
+ )
+ }
+ let onClick = evt => {
+ ReactEvent.Mouse.preventDefault(evt)
+ copy()->ignore
+ }
+
+ React.useEffect(() => {
+ switch state {
+ | Copied =>
+ let buttonEl = Nullable.toOption(buttonRef.current)->Option.getOrThrow
+
+ // Note on this imperative DOM nonsense:
+ // For Tailwind transitions to behave correctly, we need to first paint the DOM element in the tree,
+ // and in the next tick, add the opacity-100 class, so the transition animation actually takes place.
+ // If we don't do that, the banner will essentially pop up without any animation
+ let bannerEl = WebAPI.Document.createElement(document, "div")
+ bannerEl.className = "opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions text-white bg-gray-100 text-gray-80-tr transition-all duration-1000 ease-in-out "
+
+ let textNode = WebAPI.Document.createTextNode(document, "Copied to clipboard")
+
+ WebAPI.Element.appendChild(bannerEl, textNode)->ignore
+ WebAPI.Element.appendChild(buttonEl, bannerEl)->ignore
+
+ let nextFrameId = WebAPI.Window.requestAnimationFrame(window, _ => {
+ WebAPI.DOMTokenList.toggle(bannerEl.classList, ~token="opacity-0")->ignore
+ WebAPI.DOMTokenList.toggle(bannerEl.classList, ~token="opacity-100")->ignore
+ })
+
+ let timeoutId = setTimeout(~handler=() => {
+ buttonEl->WebAPI.Element.removeChild(bannerEl)->ignore
+ setState(_ => Init)
+ }, ~timeout=3000)
+
+ Some(
+ () => {
+ cancelAnimationFrame(nextFrameId)
+ clearTimeout(timeoutId)
+ bannerEl->WebAPI.Element.remove
+ },
+ )
+ | _ => None
+ }
+ }, [state])
+ //Copy-Button
+
+
+}
diff --git a/apps/docs/src/components/CodeExample.res b/apps/docs/src/components/CodeExample.res
index 3736d8da0..5346b4e49 100644
--- a/apps/docs/src/components/CodeExample.res
+++ b/apps/docs/src/components/CodeExample.res
@@ -9,102 +9,6 @@ let langShortname = (lang: string) =>
| rest => rest
}
-module CopyButton = {
- let copyToClipboard: string => bool = %raw(`
- function(str) {
- try {
- const el = document.createElement('textarea');
- el.value = str;
- el.setAttribute('readonly', '');
- el.style.position = 'absolute';
- el.style.left = '-9999px';
- document.body.appendChild(el);
- const selected =
- document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
- el.select();
- document.execCommand('copy');
- document.body.removeChild(el);
- if (selected) {
- document.getSelection().removeAllRanges();
- document.getSelection().addRange(selected);
- }
- return true;
- } catch(e) {
- return false;
- }
- }
- `)
-
- type state =
- | Init
- | Copied
- | Failed
-
- @react.component
- let make = (~code) => {
- let (state, setState) = React.useState(_ => Init)
-
- let buttonRef = React.useRef(Nullable.null)
-
- let onClick = evt => {
- ReactEvent.Mouse.preventDefault(evt)
- if copyToClipboard(code) {
- setState(_ => Copied)
- } else {
- setState(_ => Failed)
- }
- }
-
- React.useEffect(() => {
- switch state {
- | Copied =>
- let buttonEl = Nullable.toOption(buttonRef.current)->Option.getOrThrow
-
- // Note on this imperative DOM nonsense:
- // For Tailwind transitions to behave correctly, we need to first paint the DOM element in the tree,
- // and in the next tick, add the opacity-100 class, so the transition animation actually takes place.
- // If we don't do that, the banner will essentially pop up without any animation
- let bannerEl = WebAPI.Document.createElement(document, "div")
- bannerEl.className = "opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions text-white bg-gray-100 text-gray-80-tr transition-all duration-1000 ease-in-out "
-
- let textNode = WebAPI.Document.createTextNode(document, "Copied to clipboard")
-
- WebAPI.Element.appendChild(bannerEl, textNode)->ignore
- WebAPI.Element.appendChild(buttonEl, bannerEl)->ignore
-
- let nextFrameId = WebAPI.Window.requestAnimationFrame(window, _ => {
- WebAPI.DOMTokenList.toggle(bannerEl.classList, ~token="opacity-0")->ignore
- WebAPI.DOMTokenList.toggle(bannerEl.classList, ~token="opacity-100")->ignore
- })
-
- let timeoutId = setTimeout(~handler=() => {
- buttonEl->WebAPI.Element.removeChild(bannerEl)->ignore
- setState(_ => Init)
- }, ~timeout=3000)
-
- Some(
- () => {
- cancelAnimationFrame(nextFrameId)
- clearTimeout(timeoutId)
- },
- )
- | _ => None
- }
- }, [state])
- //Copy-Button
- >))}
- disabled={state === Copied}
- className="relative"
- onClick
- >
-
- }
-}
-
@react.component
let make = (
~highlightedLines=[],
@@ -139,7 +43,7 @@ let make = (
let copyButton = if showCopyButton {
-
} else {
React.null
@@ -259,7 +163,7 @@ module Toggle = {
: React.null
- let copyButton =
playgroundLinkButton
diff --git a/apps/docs/src/components/Markdown.res b/apps/docs/src/components/Markdown.res
index 8ad1a1436..9840ee22d 100644
--- a/apps/docs/src/components/Markdown.res
+++ b/apps/docs/src/components/Markdown.res
@@ -40,48 +40,29 @@ module Warn = {
}
module UrlBox = {
- open! MdxLegacy.MdxChildren
-
let imgEl =
@react.component
- let make = (~text: string, ~href: string, ~children: MdxLegacy.MdxChildren.t) => {
- let content = switch classify(children) {
- | String(str) =>
-
- imgEl
- {React.string(str)}
-
- | Element(el) =>
- let subChildren = el->getMdxChildren
+ let make = (~text: string, ~href: string, ~children: React.element) => {
+ let elements = React.Children.toArray(children)
+ let content = if typeof(children) == #string || React.isValidElement(children) {
imgEl
- {subChildren->toReactElement}
+ {MdxLegacy.getChildren(children)}
- | Array(arr) =>
- // Scenario: Take the first element, rewrap its children with the hyperlink img
- let length = Array.length(arr)
- if length >= 1 {
- let head = Belt.Array.getExn(arr, 0)
- let headChildren = head->getMdxChildren
-
+ } else {
+ switch elements[0] {
+ | None => React.null
+ | Some(head) =>
+ let rest = elements->Array.slice(~start=1)
<>
imgEl
- {headChildren->toReactElement}
+ {MdxLegacy.getChildren(head)}
- {if length > 1 {
- arr->Array.slice(~start=1, ~end=length)->MdxLegacy.arrToReactElement
- } else {
- React.null
- }}
+ {React.array(rest)}
- } else {
- React.null
}
- | Unknown(el) =>
- Console.log2("Received unknown", el)
- React.null
}
let link = if Util.Url.isAbsolute(href) {
@@ -232,10 +213,7 @@ module Code = {
@module("../ffi/parse-numeric-range.js")
external parseNumericRange: string => array
= "parsePart"
- // TODO: Might be refactorable with the new @unboxed feature
- type unknown = MdxLegacy.Components.unknown
-
- external unknownAsString: unknown => string = "%identity"
+ type unknown = React.element
let parseNumericRangeMeta = (metastring: string) =>
String.split(metastring, " ")
@@ -279,7 +257,7 @@ module Code = {
}
}
- let code = children->unknownAsString
+ let code = String.make(children)
let isMultiline = code->String.includes("\n")
switch lang {
@@ -290,35 +268,25 @@ module Code = {
}
module CodeTab = {
- let getMdxMetastring: MdxLegacy.mdxComponent => option = %raw("element => {
- if(element == null || element.props == null) {
- return;
- }
- return element.props.metastring;
- }")
@react.component
- let make = (~children: MdxLegacy.MdxChildren.t, ~labels: array=[]) => {
- let mdxElements = switch MdxLegacy.MdxChildren.classify(children) {
- | Array(mdxElements) => mdxElements
- | Element(el) => [el]
- | _ => []
- }
+ let make = (~children: React.element, ~labels: array=[]) => {
+ let mdxElements = React.Children.toArray(children)
let tabs = Array.reduceWithIndex(mdxElements, [], (acc, mdxElement, i) => {
- let child = mdxElement->MdxLegacy.MdxChildren.getMdxChildren->MdxLegacy.MdxChildren.classify
+ let children = mdxElement->MdxLegacy.getChildren->React.Children.toArray
- switch child {
- | Element(codeEl) =>
- let className = MdxLegacy.getMdxClassName(codeEl)->Option.getOr("")
+ switch children {
+ | [codeEl] if React.isValidElement(codeEl) =>
+ let className = MdxLegacy.getClassName(codeEl)->Option.getOr("")
- let metastring = getMdxMetastring(codeEl)->Option.getOr("")
+ let metastring = MdxLegacy.getMetastring(codeEl)->Option.getOr("")
let lang = switch String.split(className, "-") {
| ["language", lang] => Some(lang)
| _ => None
}
- let code = String.make(MdxLegacy.MdxChildren.getMdxChildren(codeEl))
+ let code = String.make(MdxLegacy.getChildren(codeEl))
let label = labels[i]
let tab = {
CodeExample.Toggle.lang,
@@ -408,73 +376,43 @@ module Ol = {
}
module Li = {
- let typeOf: 'a => string = %raw("thing => { return typeof thing; }")
- let isArray: 'a => bool = %raw("thing => { return thing instanceof Array; }")
- external asArray: 'a => array = "%identity"
+ let getType = element =>
+ if MdxLegacy.isComponent(element, P.make) {
+ "p"
+ } else if MdxLegacy.isComponent(element, Pre.make) {
+ "pre"
+ } else if MdxLegacy.isComponent(element, Ul.make) {
+ "ul"
+ } else if MdxLegacy.isComponent(element, Ol.make) {
+ "ol"
+ } else {
+ MdxLegacy.getType(element)
+ }
@react.component
let make = (~children) => {
- /*
- There are 3 value scenarios for `children`
-
- 1) string (if bullet point is standalone text)
- 2) array(,
|) (if nested list)
- 3) array(,,...,) (if text with nested content)
- 4) array(, , string,...) (if nested content without wrapping )
-
- We are iterating on these here with quite some bailout JS
- */
-
- let elements: React.element = if isArray(children) {
- let arr = children->asArray
- let last: React.element = {
- arr->Belt.Array.getExn(arr->Array.length - 1)
- }
-
- let head = Array.slice(arr, ~start=0, ~end=arr->Array.length - 1)
-
- let first = Belt.Array.getExn(head, 0)
-
- switch {
- open MdxLegacy
- last->fromReactElement->getMdxType
- } {
- | "ul"
- | "li"
- | "pre" =>
- switch {
- open MdxLegacy
- first->fromReactElement->getMdxType
- } {
- | "p" =>
- <>
- {React.array(head)}
- last
-
- | _ =>
- <>
-
{React.array(head)}
- last
-
- }
- | _ => children
- /* Scenario 3 */
+ let elements = React.Children.toArray(children)
+ let content = switch elements {
+ | [] => React.null
+ | [child] =>
+ switch getType(child) {
+ | "pre" | "p" => child
+ | _ => child
}
- } else if typeOf(children) === "string" {
- {children->Util.Unsafe.elementAsString->React.string}
- } else {
- switch {
- /* Unknown Scenario */
- open MdxLegacy
- children->fromReactElement->getMdxType
- } {
- | "pre" => children
- | "p" => children
+ | _ =>
+ let first = elements[0]->Option.getOrThrow
+ let last = elements[elements->Array.length - 1]->Option.getOrThrow
+ let head = elements->Array.slice(~start=0, ~end=elements->Array.length - 1)
+ switch getType(last) {
+ | "ul" | "ol" | "li" | "pre" =>
+ <>
+ {getType(first) == "p" ? React.array(head) : {React.array(head)}
}
+ last
+
| _ => children
}
}
-
- elements
+ content
}
}
@@ -543,17 +481,3 @@ module Video = {
anchors for url linking
@@ -93,13 +93,13 @@ module Code: {
let make: (
~className: string=?,
~metastring: option,
- ~children: MdxLegacy.Components.unknown,
+ ~children: React.element,
) => React.element
}
module CodeTab: {
@react.component
- let make: (~children: MdxLegacy.MdxChildren.t, ~labels: array=?) => React.element
+ let make: (~children: React.element, ~labels: array=?) => React.element
}
module Blockquote: {
diff --git a/apps/docs/src/components/MarkdownComponents.res b/apps/docs/src/components/MarkdownComponents.res
index 145d118c7..ebd829c92 100644
--- a/apps/docs/src/components/MarkdownComponents.res
+++ b/apps/docs/src/components/MarkdownComponents.res
@@ -18,12 +18,9 @@ type t = {
@as("Video")
video?: React.componentLike, React.element>,
@as("UrlBox")
- urlBox?: React.componentLike<
- UrlBox.props,
- React.element,
- >,
+ urlBox?: React.componentLike, React.element>,
@as("CodeTab")
- codeTab?: CodeTab.props> => React.element,
+ codeTab?: CodeTab.props> => React.element,
/* Common markdown elements */
p?: P.props => React.element,
li?: Li.props => React.element,
@@ -41,10 +38,7 @@ type t = {
blockquote?: Blockquote.props => React.element,
strong?: Strong.props => React.element,
hr?: Hr.props => React.element,
- code?: React.componentLike<
- Code.props, MdxLegacy.Components.unknown>,
- React.element,
- >,
+ code?: React.componentLike, React.element>, React.element>,
pre?: Pre.props => React.element,
a?: A.props => React.element,
}
diff --git a/apps/docs/src/components/SearchBox.res b/apps/docs/src/components/SearchBox.res
index f99e31c3b..a83ef4f02 100644
--- a/apps/docs/src/components/SearchBox.res
+++ b/apps/docs/src/components/SearchBox.res
@@ -23,8 +23,7 @@ let make = (
onClear()
}
- let focusInput = () =>
- textInput.current->Nullable.forEach(el => el->WebAPI.HTMLInputElement.focus)
+ let focusInput = () => textInput.current->Nullable.forEach(el => el->WebAPI.HTMLElement.focus)
let onAreaFocus = evt => {
let el = ReactEvent.Focus.target(evt)
@@ -52,15 +51,11 @@ let make = (
switch full {
| "Escape" => onClear()
| "Tab" =>
- if Array.length(completionValues) === 1 {
- let targetValue = Belt.Array.getExn(completionValues, 0)
-
- if targetValue !== value {
- ReactEvent.Keyboard.preventDefault(evt)
- onValueChange(targetValue)
- } else {
- ()
- }
+ switch completionValues {
+ | [targetValue] if targetValue !== value =>
+ ReactEvent.Keyboard.preventDefault(evt)
+ onValueChange(targetValue)
+ | _ => ()
}
| _ => ()
}
@@ -84,7 +79,7 @@ let make = (
/>
,
- description: option,
- image: option,
-}
-
-/**
- This function uses JSDOM to fetch a webpage and extract the meta tags from it.
- JSDOM is required since this runs on Node.
- */
-let extractMetaTags = async (url: string) => {
- try {
- let response = await fetch(url)
-
- let html = await response->WebAPI.Response.text
- let dom = Jsdom.make(html)
- let document = dom.window.document
-
- let nodeList = document->WebAPI.Document.querySelectorAll("meta")
-
- let elements = []
-
- for i in 0 to nodeList.length {
- let node = WebAPI.NodeList.item(nodeList, i)
- // cast Node elements to Element
- elements->Array.push((Obj.magic(node): WebAPI.DOMAPI.element))
- }
-
- let metaTags = elements->Array.reduce(Dict.fromArray([]), (tags, meta) => {
- let name = meta->WebAPI.Element.getAttribute("name")
- let property = meta->WebAPI.Element.getAttribute("property")
- let itemprop = meta->WebAPI.Element.getAttribute("itemprop")
-
- let name = switch (name, property, itemprop) {
- | (Value(name), _, _) => Some(name)
- | (_, Value(property), _) => Some(property)
- | (_, _, Value(itemprop)) => Some(itemprop)
- | _ => None
- }
-
- let content = meta->WebAPI.Element.getAttribute("content")
-
- switch (name, content) {
- | (Some(name), Value(content)) => tags->Dict.set(name, content)
- | _ => ()
- }
-
- tags
- })
-
- let title = metaTags->Dict.get("og:title")
- let description = metaTags->Dict.get("og:description")
- let image = metaTags->Dict.get("og:image")
-
- Some({
- title,
- description,
- image,
- })
- } catch {
- | _ => {
- Console.error(`Error fetching Open Graph details for ${url}`)
- None
- }
- }
-}
-
-type tags = {
- ...t,
- url: string,
-}
-
-/*
- Pass an array of URLs and get back an array of meta tags for each URL.
- */
-let getMetaTags = async (urls: array) => {
- let metaTags: array = []
- for i in 0 to Array.length(urls) - 1 {
- let url = urls[i]
- switch url {
- | Some(url) => {
- let tags = await extractMetaTags(url)
- switch tags {
- | Some(tags) =>
- metaTags->Array.push({
- title: tags.title,
- description: tags.description,
- image: tags.image,
- url,
- })
- | None => ()
- }
- }
- | None => ()
- }
- }
- metaTags
-}
diff --git a/apps/docs/src/markdown/MdxLegacy.res b/apps/docs/src/markdown/MdxLegacy.res
index 922232b7e..5ee546bd3 100644
--- a/apps/docs/src/markdown/MdxLegacy.res
+++ b/apps/docs/src/markdown/MdxLegacy.res
@@ -1,72 +1,35 @@
-/*
- Abstract type for representing mdx
- components mostly passed as children to
- the component context API
- */
-/**
- * TODO: POST RR7 The code below is from Next's markdown, and I am not sure it is needed anymore.
- */
-type mdxComponent
-
-external fromReactElement: React.element => mdxComponent = "%identity"
-
-external arrToReactElement: array => React.element = "%identity"
-
-let getMdxClassName: mdxComponent => option = %raw("element => {
- if(element == null || element.props == null) {
- return;
- }
- return element.props.className;
- }")
-
-let getMdxType: mdxComponent => string = %raw("element => {
- if(element == null || element.props == null) {
- return 'unknown';
- }
- return element.props.mdxType;
- }")
+type props = {
+ children?: React.element,
+ className?: string,
+ metastring?: string,
+ mdxType?: string,
+}
-module MdxChildren = {
- type unknown
+@get external props: React.element => props = "props"
- type t
+let getChildren = element =>
+ React.isValidElement(element) ? props(element).children->Option.getOr(React.null) : element
- type case =
- | String(string)
- | Element(mdxComponent)
- | Array(array)
- | Unknown(unknown)
+let getClassName = element => React.isValidElement(element) ? props(element).className : None
- let classify = (v: t): case =>
- if %raw(`function (a) { return a instanceof Array}`)(v) {
- Array((Obj.magic(v): array))
- } else if typeof(v) == #string {
- String((Obj.magic(v): string))
- } else if typeof(v) == #object {
- Element((Obj.magic(v): mdxComponent))
- } else {
- Unknown((Obj.magic(v): unknown))
- }
+let getMetastring = element => React.isValidElement(element) ? props(element).metastring : None
- external toReactElement: t => React.element = "%identity"
+type component
+@get external elementType: React.element => component = "type"
- // Sometimes an mdxComponent element can be a string
- // which means it doesn't have any children.
- // We will return the element as its own child then
- let getMdxChildren: mdxComponent => t = %raw("element => {
- if(typeof element === 'string') {
- return element;
- }
- if(element == null || element.props == null || element.props.children == null) {
- return;
+let getType = element => {
+ if React.isValidElement(element) {
+ switch props(element).mdxType {
+ | Some(tag) => tag
+ | None => {
+ let tag = elementType(element)
+ typeof(tag) == #string ? String.make(tag) : "unknown"
}
- return element.props.children;
- }")
+ }
+ } else {
+ "unknown"
+ }
}
-module Components = {
- // Used for reflection based logic in
- // components such as `code` or `ul`
- // with runtime reflection
- type unknown
-}
+@get external component: React.element => React.componentLike<'props, React.element> = "type"
+let isComponent = (element, make) => React.isValidElement(element) && component(element) === make
diff --git a/apps/guide/__tests__/GuideHome_.test.res b/apps/guide/__tests__/GuideHome_.test.res
index 5833174f4..220dc7bf3 100644
--- a/apps/guide/__tests__/GuideHome_.test.res
+++ b/apps/guide/__tests__/GuideHome_.test.res
@@ -5,7 +5,7 @@ let secondLesson = GuideTestFixtures.secondLesson
let guideLessonsWithFinal = GuideTestFixtures.guideLessonsWithFinal
let renderGuideHome = GuideTestFixtures.renderGuideHome
let renderGuideHomeWithDocsIntroNavigation = GuideTestFixtures.renderGuideHomeWithDocsIntroNavigation
-let renderGuideHomeInBrowser = GuideTestFixtures.renderGuideHomeInBrowser
+let renderGuideHomeWithHistory = GuideTestFixtures.renderGuideHomeWithHistory
test("loads saved guide editor code into the editor", async () => {
await viewport(1440, 900)
@@ -117,11 +117,6 @@ test("navigates to the function argument page", async () => {
GuideLayout.clearExerciseCode(secondLesson.exercise.id)
})
-let guideTestUrl = hash => window.location.pathname ++ window.location.search ++ hash
-
-let resetGuideTestUrl = () =>
- WebAPI.History.replaceState(window.history, ~data=JSON.Null, ~unused="", ~url=guideTestUrl(""))
-
test("shows Back before lesson forward actions and returns to the previous lesson", async () => {
await viewport(1440, 900)
GuideLayout.clearCompletedExercises()
@@ -202,37 +197,23 @@ test("Done on a completed final lesson opens the ReScript docs intro", async ()
GuideLayout.clearExerciseCode(secondLesson.exercise.id)
})
-test("browser back returns to the previous guide lesson", async () => {
+test("history back returns to the previous guide lesson", async () => {
await viewport(1440, 900)
GuideLayout.clearCompletedExercises()
GuideLayout.clearExerciseCode(firstLesson.exercise.id)
GuideLayout.clearExerciseCode(secondLesson.exercise.id)
- WebAPI.History.replaceState(
- window.history,
- ~data=JSON.Null,
- ~unused="",
- ~url=guideTestUrl("#guide-test-start"),
- )
- WebAPI.History.pushState(
- window.history,
- ~data=JSON.Null,
- ~unused="",
- ~url=guideTestUrl("#first-contact"),
- )
-
- let screen = await renderGuideHomeInBrowser()
+ let screen = await renderGuideHomeWithHistory()
await (await screen->getByText("Learn ReScript Guide"))->element->toBeVisible
await (await screen->getByText("Next"))->click
await (await screen->getByText("Call A Function"))->element->toBeVisible
- WebAPI.History.back(window.history)
+ await (await screen->getByText("History back"))->click
await (await screen->getByText("Learn ReScript Guide"))->element->toBeVisible
GuideLayout.clearExerciseCode(firstLesson.exercise.id)
GuideLayout.clearExerciseCode(secondLesson.exercise.id)
- resetGuideTestUrl()
})
test("stretches the output surface to the full output panel", async () => {
diff --git a/apps/guide/__tests__/GuideTestFixtures.res b/apps/guide/__tests__/GuideTestFixtures.res
index b3d199fb9..e92e5f7b4 100644
--- a/apps/guide/__tests__/GuideTestFixtures.res
+++ b/apps/guide/__tests__/GuideTestFixtures.res
@@ -71,9 +71,20 @@ let renderGuideHomeWithDocsIntroNavigation = (goToDocsIntro, ~initialEntries=["/
,
)
-let renderGuideHomeInBrowser = () =>
+module HistoryBack = {
+ @module("react-router") external useNavigate: unit => int => unit = "useNavigate"
+
+ @react.component
+ let make = () => {
+ let navigate = useNavigate()
+ navigate(-1)}> {React.string("History back")}
+ }
+}
+
+let renderGuideHomeWithHistory = () =>
render(
-
+
+ ,
+ ,
)
diff --git a/apps/guide/app/GuideHome.res b/apps/guide/app/GuideHome.res
index 250e6dbaf..1462ecde6 100644
--- a/apps/guide/app/GuideHome.res
+++ b/apps/guide/app/GuideHome.res
@@ -39,7 +39,7 @@ let make = (
{React.string(lesson.title)}
- lesson.content
+ lesson.content
React.element = "default"
diff --git a/apps/guide/e2e/navigation.test.mjs b/apps/guide/e2e/navigation.test.mjs
new file mode 100644
index 000000000..10a335aaf
--- /dev/null
+++ b/apps/guide/e2e/navigation.test.mjs
@@ -0,0 +1,42 @@
+import { expect, test } from "playwright/test";
+
+test("browser Back and Forward restore the guide lesson and saved code", async ({
+ page,
+}) => {
+ const savedCode = 'let greeting = "saved greeting"';
+ await page.addInitScript((code) => {
+ localStorage.setItem(
+ "rescript-guide:v1:progress",
+ JSON.stringify(["first-contact/greeting"]),
+ );
+ localStorage.setItem(
+ "rescript-guide:v1:exercise:first-contact/greeting",
+ code,
+ );
+ }, savedCode);
+
+ await page.goto("/#first-contact");
+ await expect(
+ page.getByRole("heading", { name: "Learn ReScript Guide", exact: true }),
+ ).toBeVisible();
+ await expect(page.getByTestId("guide-code-editor")).toContainText(savedCode);
+
+ await page.getByRole("button", { name: "Next", exact: true }).click();
+ await expect(page).toHaveURL(/#functions$/);
+ await expect(
+ page.getByRole("heading", { name: "Call A Function", exact: true }),
+ ).toBeVisible();
+
+ await page.goBack();
+ await expect(page).toHaveURL(/#first-contact$/);
+ await expect(
+ page.getByRole("heading", { name: "Learn ReScript Guide", exact: true }),
+ ).toBeVisible();
+ await expect(page.getByTestId("guide-code-editor")).toContainText(savedCode);
+
+ await page.goForward();
+ await expect(page).toHaveURL(/#functions$/);
+ await expect(
+ page.getByRole("heading", { name: "Call A Function", exact: true }),
+ ).toBeVisible();
+});
diff --git a/apps/guide/package.json b/apps/guide/package.json
index eda0193b4..8cd420036 100644
--- a/apps/guide/package.json
+++ b/apps/guide/package.json
@@ -10,7 +10,8 @@
"build": "yarn build:res && yarn build:vite",
"ci:test": "yarn build:res && yarn vitest --run --browser.headless",
"dev:vite": "yarn build:res && vite --host",
- "vitest": "vitest"
+ "vitest": "vitest",
+ "test:e2e": "yarn build && playwright test"
},
"dependencies": {
"@babel/generator": "^7.29.1",
@@ -24,7 +25,6 @@
"isbot": "^5",
"react": "^19.3.0",
"react-dom": "^19.3.0",
- "react-markdown": "^10.1.0",
"react-router": "^8.3.1",
"remark-comment": "^1.0.0",
"remark-frontmatter": "^5.0.0",
diff --git a/apps/guide/playwright.config.mjs b/apps/guide/playwright.config.mjs
new file mode 100644
index 000000000..7740eee02
--- /dev/null
+++ b/apps/guide/playwright.config.mjs
@@ -0,0 +1,15 @@
+import { defineConfig } from "playwright/test";
+
+export default defineConfig({
+ testDir: "./e2e",
+ use: {
+ baseURL: "http://localhost:4174",
+ viewport: { width: 1440, height: 900 },
+ trace: "retain-on-failure",
+ },
+ webServer: {
+ command:
+ "yarn vite preview --outDir build/client --host localhost --port 4174 --strictPort",
+ url: "http://localhost:4174",
+ },
+});
diff --git a/packages/playground/src/EvalIFrame.res b/packages/playground/src/EvalIFrame.res
index 3531edcf1..aaee8db3d 100644
--- a/packages/playground/src/EvalIFrame.res
+++ b/packages/playground/src/EvalIFrame.res
@@ -69,12 +69,14 @@ let srcDoc = `
@react.component
- let make = (~text: string, ~href: string, ~children: MdxLegacy.MdxChildren.t) => {
- let content = switch classify(children) {
- | String(str) =>
-