- {toJsxRuntime(starryNight.highlight(value, scope), runtime)}
+ {toJsxRuntime(starryNight.highlight(value, scope), {
+ Fragment,
+ jsx,
+ jsxs
+ })}
{/* Trailing whitespace in a `textarea` is shown, but not in a `div`
with `white-space: pre-wrap`.
Add a `br` to make the last newline explicit. */}
@@ -527,9 +529,9 @@ function Playground() {
{' '}
keep JSX (
jsx: true)
@@ -538,9 +540,9 @@ function Playground() {
{' '}
compile JSX away (
jsx: false)
@@ -570,9 +572,9 @@ function Playground() {
/**
*
- * @param {Readonly
} properties
+ * @param {Readonly} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
function ErrorFallback(properties) {
@@ -592,7 +594,7 @@ function ErrorFallback(properties) {
/**
* @param {DisplayProperties} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
function DisplayError(properties) {
@@ -642,6 +644,7 @@ function cleanUnistNode(node) {
Array.isArray(node.attributes)
) {
for (const attribute of node.attributes) {
+ removePosition(attribute, {force: true})
cleanUnistNode(attribute)
}
}
@@ -659,9 +662,7 @@ function cleanUnistNode(node) {
*/
function removeFromEstree(node) {
delete node.loc
- // @ts-expect-error: this field is added by acorn.
delete node.start
- // @ts-expect-error: this field is added by acorn.
delete node.end
delete node.range
}
diff --git a/docs/_asset/index.css b/docs/_asset/index.css
index 159461113..c336896ac 100644
--- a/docs/_asset/index.css
+++ b/docs/_asset/index.css
@@ -43,6 +43,30 @@
--hl: var(--blue-5);
--fg: var(--black);
--bg: var(--white);
+
+ /* We manually add a blur on `::before` of the container, so no background needed. */
+ --docsearch-container-background: transparent !important;
+ --docsearch-footer-background: var(--white) !important;
+ --docsearch-footer-shadow: 0 -1px 0 0 var(--gray-2) !important;
+ --docsearch-highlight-color: var(--hl) !important;
+ --docsearch-hit-color: var(--gray-7) !important;
+ --docsearch-hit-shadow: inset 0 0 0 1px var(--gray-2) !important;
+ /* This is actually used in a `background` field so does not have to be a gradient. */
+ --docsearch-key-gradient: var(--gray-0) !important;
+ --docsearch-key-pressed-shadow: none !important;
+ --docsearch-key-shadow: inset 0 -1px 0 var(--gray-4) !important;
+ --docsearch-modal-background: var(--white) !important;
+ /* Card shadow: */
+ --docsearch-modal-shadow: 0 0 0 0.2em rgb(3 102 214 / 0%),
+ 0 13px 27px -5px rgb(50 50 93 / 25%), 0 8px 16px -8px rgb(0 0 0 / 30%),
+ 0 -6px 16px -6px rgb(0 0 0 / 2.5%) !important;
+ /* Use the regular color: */
+ --docsearch-muted-color: var(--black) !important;
+ --docsearch-primary-color: var(--hl) !important;
+ --docsearch-searchbox-background: var(--white) !important;
+ --docsearch-searchbox-focus-background: var(--gray-0) !important;
+ --docsearch-searchbox-shadow: inset 0 0 0 2px var(--hl) !important;
+ --docsearch-text-color: var(--black) !important;
}
* {
@@ -297,7 +321,6 @@ pre code {
}
pre code,
-.hljs,
.frame-body,
.frame-tab-item-selected {
background-color: #fafafa !important; /* Color from one-light */
@@ -527,7 +550,8 @@ button.success {
padding-top: calc(2 * (1em + 1ex));
}
-.navigation::before {
+.navigation::before,
+.DocSearch-Container::before {
content: '';
inset: 0;
position: absolute;
@@ -539,6 +563,10 @@ button.success {
);
}
+.DocSearch li {
+ margin: 0;
+}
+
#banner {
padding: calc(0.25 * (1em + 1ex));
background-color: var(--mdx-yellow);
@@ -565,7 +593,8 @@ button.success {
/* Note that the `backdrop-filter` itself is applied in light mode. */
@supports (backdrop-filter: blur(1ex)) {
- .navigation::before {
+ .navigation::before,
+ .DocSearch-Container::before {
backdrop-filter: saturate(200%) blur(1ex);
background-image: radial-gradient(
ellipse at 50% 0%,
@@ -575,15 +604,16 @@ button.success {
}
}
+.DocSearch-Modal,
.navigation-primary,
.navigation-secondary,
+.navigation-search,
.navigation-tertiary {
z-index: 3;
}
.navigation .icon {
display: block;
- vertical-align: middle;
width: auto;
height: calc(1em + 1ex);
}
@@ -599,6 +629,7 @@ button.success {
.navigation-primary,
.navigation-secondary,
+.navigation-search,
.navigation-tertiary {
margin: 0;
padding: calc(0.5 * (1em + 1ex));
@@ -606,6 +637,14 @@ button.success {
list-style-type: none;
}
+.navigation-search {
+ padding: calc(0.25em + 0.25ex);
+}
+
+.DocSearch-Button {
+ margin: 0 !important;
+}
+
.navigation-primary h1,
.navigation-secondary li,
.navigation-tertiary li {
@@ -660,9 +699,6 @@ button.success {
padding-inline-start: calc(0.5 * (1em + 1ex));
}
-.nav-description {
-}
-
.skip-to-navigation {
inset-block-start: 0;
inset-inline-start: 0;
@@ -837,11 +873,13 @@ button.success {
overflow-y: auto;
}
-.frame-tab-bar + pre {
+.frame-tab-bar + pre,
+.frame-tab-bar + .highlight > pre {
margin-block-start: 0;
}
-.frame-tab-bar + pre code {
+.frame-tab-bar + pre code,
+.frame-tab-bar + .highlight > pre code {
--squircle-radius: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -946,6 +984,55 @@ details[open] {
padding: calc(1em + 1ex);
}
+.rehype-twoslash-completion-deprecated {
+ opacity: 0.5;
+}
+
+.rehype-twoslash-popover-target {
+ cursor: default;
+}
+
+.highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
+ background-color: var(--gray-2);
+}
+
+/* Wavy underline for errors. */
+.rehype-twoslash-error-target {
+ background-repeat: repeat-x;
+ background-position: bottom left;
+ background-image: url('data:image/svg+xml,');
+}
+
+/* The content that will be shown in the tooltip. */
+.rehype-twoslash-popover {
+ position: absolute;
+ max-width: calc(45 * (1em + 1ex));
+ padding: calc(0.5 * (1em + 1ex));
+ margin: 0;
+ background-color: var(--bg);
+ border: 1px solid var(--gray-2);
+ border-radius: 3px;
+}
+
+/* No padding if we have a padded code block (and perhaps more blocks) */
+.rehype-twoslash-popover:has(.rehype-twoslash-popover-code) {
+ padding: 0;
+}
+
+.rehype-twoslash-popover-code {
+ margin: 0;
+}
+
+.rehype-twoslash-popover-code > code {
+ mask-image: none;
+ border-radius: 0;
+}
+
+.rehype-twoslash-popover-description {
+ background-color: var(--bg);
+ padding: 0 1em;
+}
+
@media (prefers-color-scheme: dark) {
:root {
--white: #f0f6fc;
@@ -963,6 +1050,8 @@ details[open] {
--hl: var(--mdx-yellow);
--fg: var(--white);
--bg: var(--black);
+
+ --docsearch-key-gradient: #eaeef2 !important;
}
.navigation-secondary a {
@@ -1038,6 +1127,14 @@ details[open] {
background-color: var(--gray-8);
}
+ .highlight:is(:hover, :focus-within) .rehype-twoslash-popover-target {
+ background-color: var(--gray-5);
+ }
+
+ .rehype-twoslash-popover {
+ border-color: var(--gray-6);
+ }
+
h6 {
color: var(--gray-3);
}
@@ -1062,7 +1159,6 @@ details[open] {
}
pre code,
- .hljs,
.frame-body,
.frame-tab-item-selected,
.frame-tab-item-dark.frame-tab-item-selected {
@@ -1148,6 +1244,10 @@ details[open] {
font-size: 1.125em;
}
+ .navigation-search {
+ padding: calc(0.3em + 0.3ex);
+ }
+
#markdown-for-thecomponent-era {
font-size: 3rem;
line-height: calc(1em + (1 / 3 * 1ex));
@@ -1213,7 +1313,7 @@ details[open] {
@media (min-width: 76em) {
#markdown-for-thecomponent-era {
- font-size: 6rem;
+ font-size: 5.9rem;
line-height: calc(1em + (1 / 6 * 1ex));
margin-block: calc(1 / 6 * (1em + 1ex));
}
@@ -1231,23 +1331,6 @@ details[open] {
}
}
-/* Fix a11y. */
-.hljs-built_in,
-.hljs-symbol {
- color: hsl(24deg 92% 40%) !important;
-}
-
-@media (prefers-color-scheme: dark) {
- .hljs-section {
- color: #488bef !important;
- }
-
- .hljs-built_in,
- .hljs-symbol {
- color: #ffa657 !important;
- }
-}
-
.playground {
min-height: 40rem;
gap: calc(1em + 1ex);
diff --git a/docs/_asset/index.js b/docs/_asset/index.js
index 2b4f9e2a1..3346cd828 100644
--- a/docs/_asset/index.js
+++ b/docs/_asset/index.js
@@ -1,8 +1,12 @@
+/* eslint-disable unicorn/prefer-query-selector */
///
+import docsearch_ from '@docsearch/js'
+import {computePosition, shift} from '@floating-ui/dom'
import copyToClipboard from 'copy-to-clipboard'
import {ok as assert} from 'devlop'
+// Squircles.
if ('paintWorklet' in CSS) {
// @ts-expect-error: TS doesn’t understand Houdini.
CSS.paintWorklet.addModule(
@@ -10,6 +14,7 @@ if ('paintWorklet' in CSS) {
)
}
+// Copy buttons.
const copies = Array.from(document.querySelectorAll('button.copy-button'))
const copyTemplate = document.createElement('template')
const copiedTemplate = document.createElement('template')
@@ -57,7 +62,35 @@ for (const copy of copies) {
assert(copy instanceof HTMLButtonElement)
copy.type = 'button'
copy.replaceChildren(copyIcon.cloneNode(true))
- copy.addEventListener('click', onclick)
+ copy.addEventListener('click', oncopyonclick)
+}
+
+const popoverTargets = /** @type {Array} */ (
+ Array.from(document.querySelectorAll('.rehype-twoslash-popover-target'))
+)
+
+for (const popoverTarget of popoverTargets) {
+ /** @type {NodeJS.Timeout | number} */
+ let timeout = 0
+
+ popoverTarget.addEventListener('click', function () {
+ popoverShow(popoverTarget)
+ })
+
+ popoverTarget.addEventListener('mouseenter', function () {
+ clearTimeout(timeout)
+ timeout = setTimeout(function () {
+ popoverShow(popoverTarget)
+ }, 300)
+ })
+
+ popoverTarget.addEventListener('mouseleave', function () {
+ clearTimeout(timeout)
+ })
+
+ if (popoverTarget.classList.contains('rehype-twoslash-autoshow')) {
+ popoverShow(popoverTarget)
+ }
}
/**
@@ -66,7 +99,7 @@ for (const copy of copies) {
* @returns {undefined}
* Nothing.
*/
-function onclick() {
+function oncopyonclick() {
assert(copyIcon)
assert(copiedIcon)
assert(this instanceof HTMLButtonElement)
@@ -84,3 +117,44 @@ function onclick() {
this.replaceChildren(copyIcon.cloneNode(true))
}, 2000)
}
+
+/**
+ * @param {HTMLElement} popoverTarget
+ * Popover target.
+ * @returns {undefined}
+ * Nothing.
+ */
+function popoverShow(popoverTarget) {
+ const id = popoverTarget.dataset.popoverTarget
+ if (!id) return
+ const popover = document.getElementById(id)
+ if (!popover) return
+
+ popover.showPopover()
+
+ computePosition(popoverTarget, popover, {
+ placement: 'bottom',
+ middleware: [shift({padding: 5})]
+ }).then(
+ /**
+ * @param {{x: number, y: number}} value
+ */
+ function (value) {
+ popover.style.left = value.x + 'px'
+ popover.style.top = value.y + 'px'
+ }
+ )
+}
+
+// Docsearch.
+// Note: types are wrong.
+const docsearch = /** @type {import('@docsearch/js')['default']} */ (
+ /** @type {unknown} */ (docsearch_)
+)
+
+docsearch({
+ appId: 'B0O9AAZ9L2',
+ apiKey: '71f38eae605e3e6d500368617e32c19f',
+ container: '#docsearch',
+ indexName: 'mdxjs'
+})
diff --git a/docs/_component/blog.jsx b/docs/_component/blog.jsx
index ff2b728fe..f6aba62b9 100644
--- a/docs/_component/blog.jsx
+++ b/docs/_component/blog.jsx
@@ -1,5 +1,6 @@
/**
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Item} from './sort.js'
*/
/**
@@ -21,18 +22,15 @@
import {apStyleTitleCase} from 'ap-style-title-case'
import {toJsxRuntime} from 'hast-util-to-jsx-runtime'
import React from 'react'
-// @ts-expect-error: the automatic react runtime is untyped.
import {Fragment, jsx, jsxs} from 'react/jsx-runtime'
import {sortItems} from './sort.js'
-const runtime = {Fragment, jsx, jsxs}
-
const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
/**
* @param {Readonly} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
export function BlogEntry(properties) {
@@ -69,7 +67,7 @@ export function BlogEntry(properties) {
{meta.descriptionHast ? (
- toJsxRuntime(meta.descriptionHast, runtime)
+ toJsxRuntime(meta.descriptionHast, {Fragment, jsx, jsxs})
) : description ? (
{description}
) : undefined}
@@ -108,7 +106,7 @@ export function BlogEntry(properties) {
/**
* @param {Readonly
} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
export function BlogGroup(properties) {
diff --git a/docs/_component/home.jsx b/docs/_component/home.jsx
index 949cead3d..841798464 100644
--- a/docs/_component/home.jsx
+++ b/docs/_component/home.jsx
@@ -1,11 +1,11 @@
/**
- * @typedef {import('react').ReactNode} ReactNode
- * @typedef {import('vfile').Data['meta']} DataMeta
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Data} from 'vfile'
+ * @import {Item} from './sort.js'
*/
/**
- * @typedef {Exclude} Meta
+ * @typedef {Exclude} Meta
*
* @typedef Properties
* Properties.
@@ -26,7 +26,7 @@ import {NavigationSite, NavigationSiteSkip} from './nav-site.jsx'
/**
* @param {Readonly} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
export function Home(properties) {
diff --git a/docs/_component/layout.jsx b/docs/_component/layout.jsx
index 6e4694520..8073a5464 100644
--- a/docs/_component/layout.jsx
+++ b/docs/_component/layout.jsx
@@ -1,6 +1,7 @@
/**
- * @typedef {import('vfile').Data['meta']} DataMeta
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Data} from 'vfile'
+ * @import {Item} from './sort.js'
*/
/**
@@ -10,11 +11,11 @@
* Name.
* @property {Readonly} ghUrl
* GitHub URL.
- * @property {Readonly | undefined} [meta]
+ * @property {Readonly | undefined} [meta]
* Meta.
* @property {Readonly- } navigationTree
* Navigation tree.
- * @property {JSX.Element} children
+ * @property {ReactNode} children
* Children.
*/
@@ -28,7 +29,7 @@ const dateTimeFormat = new Intl.DateTimeFormat('en', {dateStyle: 'long'})
/**
* @param {Readonly} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
export function Layout(properties) {
diff --git a/docs/_component/nav-site.jsx b/docs/_component/nav-site.jsx
index 06d47f7ef..c29ca757d 100644
--- a/docs/_component/nav-site.jsx
+++ b/docs/_component/nav-site.jsx
@@ -1,5 +1,6 @@
/**
- * @typedef {import('./sort.js').Item} Item
+ * @import {ReactNode} from 'react'
+ * @import {Item} from './sort.js'
*/
/**
@@ -34,7 +35,7 @@ export function NavigationSiteSkip() {
/**
* @param {Readonly} properties
* Properties.
- * @returns {JSX.Element}
+ * @returns {ReactNode}
* Element.
*/
export function NavigationSite(properties) {
@@ -57,6 +58,9 @@ export function NavigationSite(properties) {