@brillout/docpress 0.16.12 → 0.16.13

package/+config.ts

@@ -2,8 +2,8 @@ export { config as default }
 
 import type { Config } from 'vike/types'
 import { viteConfig } from './vite.config.js'
-import type { Config as DocpressConfig } from './types/Config'
-import type { PageSection } from './parsePageSections'
+import type { Config as DocpressConfig } from './types/Config.js'
+import type { PageSection } from './parsePageSections.js'
 import type { Resolved } from './resolvePageContext.js'
 
 const config = {

package/EditLink.tsx

@@ -1,9 +1,9 @@
 export { EditLink }
 
 import React from 'react'
-import { usePageContext } from './renderer/usePageContext'
-import { iconPencil } from './icons'
-import { getRepoHref } from './components'
+import { usePageContext } from './renderer/usePageContext.js'
+import { iconPencil } from './icons/index.js'
+import { getRepoHref } from './components/index.js'
 
 function EditLink({
   className,

package/ExternalLinks.tsx

@@ -8,7 +8,7 @@ import iconBluesky from './icons/bluesky.svg'
 import iconLinkedin from './icons/linkedin.svg'
 import iconChangelog from './icons/changelog.svg'
 import iconLanguages from './icons/languages.svg'
-import { usePageContext } from './renderer/usePageContext'
+import { usePageContext } from './renderer/usePageContext.js'
 import '@docsearch/css'
 
 function ExternalLinks(props: { style?: React.CSSProperties }) {

package/Layout.tsx

@@ -15,26 +15,26 @@ export { scrollFadeMask }
 // - We use --padding-side because we cannot set a fixed max-width on the <NavHead> container .nav-head-content — DocPress doesn't know how many extra <NavHead> elements the user adds using the +docpress.topNavigation setting.
 
 import React from 'react'
-import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent'
-import { parseMarkdownMini } from './parseMarkdownMini'
-import { usePageContext } from './renderer/usePageContext'
-import { ExternalLinks } from './ExternalLinks'
+import { getNavItemsWithComputed, NavItem, NavItemComponent } from './NavItemComponent.js'
+import { parseMarkdownMini } from './parseMarkdownMini.js'
+import { usePageContext } from './renderer/usePageContext.js'
+import { ExternalLinks } from './ExternalLinks.js'
 import {
   closeMenuModalOnMouseLeaveToggle,
   ignoreHoverOnTouchStart,
   openMenuModalOnMouseEnter,
   toggleMenuModal,
-} from './MenuModal/toggleMenuModal'
-import { MenuModal } from './MenuModal'
-import { autoScrollNav_SSR } from './autoScrollNav'
-import { initializeChoiceGroup_SSR } from './code-blocks/hooks/useSelectedChoice'
-import { SearchLink } from './docsearch/SearchLink'
+} from './MenuModal/toggleMenuModal.js'
+import { MenuModal } from './MenuModal.js'
+import { autoScrollNav_SSR } from './autoScrollNav.js'
+import { initializeChoiceGroup_SSR } from './code-blocks/hooks/useSelectedChoice.js'
+import { SearchLink } from './docsearch/SearchLink.js'
 import { navigate } from 'vike/client/router'
-import { css } from './utils/css'
-import { Style } from './utils/Style'
-import { cls } from './utils/cls'
-import { iconBooks } from './icons'
-import { EditLink } from './EditLink'
+import { css } from './utils/css.js'
+import { Style } from './utils/Style.js'
+import { cls } from './utils/cls.js'
+import { iconBooks } from './icons/index.js'
+import { EditLink } from './EditLink.js'
 import './Layout.css'
 
 const blockMargin = 4
@@ -604,6 +604,7 @@ function NavHeadLogo({ isNavLeft }: { isNavLeft?: true }) {
     if (!pageContext.globalContext.config.docpress.pressKit) return // no /press page
     if (window.location.pathname === '/press') return
     ev.preventDefault()
+    // @ts-expect-error Will be fixed in the next Vike version — remove this @ts-expect-error then.
     navigate('/press#logo')
   }
 }

package/MenuModal/Collapsible.tsx

@@ -1,7 +1,7 @@
 export { Collapsible }
 
 import React, { useRef, useState } from 'react'
-import { cls } from '../utils/cls'
+import { cls } from '../utils/cls.js'
 import './Collapsible.css'
 
 function Collapsible({

package/MenuModal/NavigationWithColumnLayout.tsx

@@ -1,16 +1,16 @@
 export { NavigationWithColumnLayout }
 
 import React, { useEffect, useState } from 'react'
-import { assert } from '../utils/server'
-import { getViewportWidth } from '../utils/getViewportWidth'
-import { viewTablet, navLeftWidthMax, navLeftWidthMin, bodyMaxWidth } from '../Layout'
-import { throttle } from '../utils/throttle'
-import { Collapsible } from './Collapsible'
-import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent'
-import { usePageContext } from '../renderer/usePageContext'
+import { assert } from '../utils/server.js'
+import { getViewportWidth } from '../utils/getViewportWidth.js'
+import { viewTablet, navLeftWidthMax, navLeftWidthMin, bodyMaxWidth } from '../Layout.js'
+import { throttle } from '../utils/throttle.js'
+import { Collapsible } from './Collapsible.js'
+import { ColumnMap, getNavItemsWithComputed, NavItem, NavItemComponent, NavItemComputed } from '../NavItemComponent.js'
+import { usePageContext } from '../renderer/usePageContext.js'
 import './NavigationWithColumnLayout.css'
-import { Style } from '../utils/Style'
-import { css } from '../utils/css'
+import { Style } from '../utils/Style.js'
+import { css } from '../utils/css.js'
 
 const marginBottomOnExpand = 15
 function NavigationWithColumnLayout(props: { navItems: NavItem[] }) {
@@ -240,7 +240,7 @@ function getNavItemsByColumnLayouts(navItems: NavItemComputed[], availableWidth:
           const idx = numberOfColumns === 1 ? 0 : columnEntry.columnMap[numberOfColumns]!
           assert(idx >= 0)
           columns[idx] ??= { categories: [] }
-          const navItemLevel1 = columnEntry.navItems[0]
+          const navItemLevel1 = columnEntry.navItems[0]!
           const navItems = columnEntry.navItems.slice(1)
           columns[idx].categories.push({ navItemLevel1, navItems })
         })
@@ -255,7 +255,7 @@ function getNavItemsByColumnLayouts(navItems: NavItemComputed[], availableWidth:
           columns[idx] ??= { navItems: [] }
           let { navItems } = columnEntry
           if (i === 0) {
-            navItemLevel1 = navItems[0]
+            navItemLevel1 = navItems[0]!
             navItems = navItems.slice(1)
           }
           columns[idx].navItems.push(...navItems)

package/MenuModal/toggleMenuModal.ts

@@ -7,10 +7,10 @@ export { keepMenuModalOpenOnMouseOver }
 export { closeMenuModalOnMouseLeave }
 export { closeMenuModalOnMouseLeaveToggle }
 
-import { viewTablet } from '../Layout'
-import { getHydrationPromise } from '../renderer/getHydrationPromise'
-import { getViewportWidth } from '../utils/getViewportWidth'
-import { isBrowser } from '../utils/isBrowser'
+import { viewTablet } from '../Layout.js'
+import { getHydrationPromise } from '../renderer/getHydrationPromise.js'
+import { getViewportWidth } from '../utils/getViewportWidth.js'
+import { isBrowser } from '../utils/isBrowser.js'
 
 initScrollListener()
 

package/MenuModal.tsx

@@ -1,14 +1,18 @@
 export { MenuModal }
 
 import React from 'react'
-import { usePageContext } from './renderer/usePageContext'
-import { css } from './utils/css'
-import { bodyMaxWidth, viewDesktop, viewTablet, scrollFadeMask } from './Layout'
-import { ExternalLinks } from './ExternalLinks'
-import { Style } from './utils/Style'
-import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
-import { closeMenuModal, closeMenuModalOnMouseLeave, keepMenuModalOpenOnMouseOver } from './MenuModal/toggleMenuModal'
-import { EditLink } from './EditLink'
+import { usePageContext } from './renderer/usePageContext.js'
+import { css } from './utils/css.js'
+import { bodyMaxWidth, viewDesktop, viewTablet, scrollFadeMask } from './Layout.js'
+import { ExternalLinks } from './ExternalLinks.js'
+import { Style } from './utils/Style.js'
+import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout.js'
+import {
+  closeMenuModal,
+  closeMenuModalOnMouseLeave,
+  keepMenuModalOpenOnMouseOver,
+} from './MenuModal/toggleMenuModal.js'
+import { EditLink } from './EditLink.js'
 
 function MenuModal({ isTopNav, isNavLeftAlwaysHidden_ }: { isTopNav: boolean; isNavLeftAlwaysHidden_: boolean }) {
   return (

package/NavItemComponent.tsx

@@ -5,9 +5,9 @@ export type { NavItemComputed }
 export type { ColumnMap }
 
 import React from 'react'
-import { assert, assertWarning, jsxToTextContent } from './utils/server'
+import { assert, assertWarning, jsxToTextContent } from './utils/server.js'
 import './NavItemComponent.css'
-import { parseMarkdownMini } from './parseMarkdownMini'
+import { parseMarkdownMini } from './parseMarkdownMini.js'
 
 /*
 // We cannot do that: we must use `import type` otherwise Vite will transpile global.d.ts and throw:
@@ -18,7 +18,8 @@ import { parseMarkdownMini } from './parseMarkdownMini'
 import './global.d.ts'
 /*/
 // The only purpose of `FakeExport` is to be able to use `import type`
-import type { FakeExport } from './global.d.ts'
+// @ts-expect-error
+import type { FakeExport } from './global.js'
 //*/
 
 type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]

package/code-blocks/components/ChoiceGroup.css

@@ -8,35 +8,30 @@
     }
   }
 
+  /* layout */
   --select-width: 85px;
   --select-top-position: 10px;
-  --select-right-position: 42px;
-  --show-js-dropdown-right-position: calc(var(--select-right-position) + var(--select-width) + 2px);
+  --select-right-base: 42px;
+  --select-gap: 2px;
 
+  /* each select increments the level */
   .select-choice {
     position: absolute;
     z-index: 3;
     height: 25px;
     top: var(--select-top-position);
-    right: var(--select-right-position);
     width: var(--select-width);
+    right: calc(var(--select-right-base) + (var(--lvl) * (var(--select-width) + var(--select-gap))));
 
     opacity: 0;
     transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
-
-    &.show-js-dropdown {
-      --select-right-position: var(--show-js-dropdown-right-position);
-    }
-
-    &:has(+ .choice > .choice-group:not([data-choice-group='codeLang'])) {
-      right: calc(var(--select-width) + var(--select-right-position) + 2px);
-    }
   }
 
   .hidden {
     display: none !important;
   }
 
+  /* choice visibility logic */
   select:has(option:nth-of-type(1):not(:checked)) ~ .choice:nth-of-type(1),
   select:has(option:nth-of-type(2):not(:checked)) ~ .choice:nth-of-type(2),
   select:has(option:nth-of-type(3):not(:checked)) ~ .choice:nth-of-type(3),

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,11 +1,11 @@
 export { ChoiceGroup }
 
-import React, { useRef } from 'react'
-import { usePageContext } from '../../renderer/usePageContext'
-import { useSelectedChoice } from '../hooks/useSelectedChoice'
-import { useRestoreScroll } from '../hooks/useRestoreScroll'
-import { assertUsage } from '../../utils/assert'
-import { cls } from '../../utils/cls'
+import React from 'react'
+import { usePageContext } from '../../renderer/usePageContext.js'
+import { useSelectedChoice } from '../hooks/useSelectedChoice.js'
+import { useRestoreScroll } from '../hooks/useRestoreScroll.js'
+import { assertUsage } from '../../utils/assert.js'
+import { cls } from '../../utils/cls.js'
 import type { PageContext } from 'vike/types'
 import './ChoiceGroup.css'
 
@@ -23,27 +23,26 @@ const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> =
 function ChoiceGroup({
   children,
   choices,
+  lvl,
   hide = false,
-}: { children: React.ReactNode; choices: string[]; hide: boolean }) {
+}: { children: React.ReactNode; choices: string[]; lvl: number; hide: boolean }) {
   const pageContext = usePageContext()
-  const cleanChoices = choices.map((c) => c.split(':')[0])
-  const choiceGroup = findChoiceGroup(pageContext, cleanChoices)
-  const [selectedChoice, setSelectedChoice] = useSelectedChoice(choiceGroup.name, choiceGroup.default)
-  const isJsDropdownVisible = choices.indexOf(`${selectedChoice}:jsDropdown`) !== -1
-  const choiceGroupRef = useRef<HTMLDivElement>(null)
+  const choiceGroup = findChoiceGroup(pageContext, choices)
+  const [selectedChoice, setSelectedChoice] = useSelectedChoice(choiceGroup.name, choiceGroup.default!)
   const prevPositionRef = useRestoreScroll([selectedChoice])
-  const isHidden = choices.length === 1 || !cleanChoices.includes(selectedChoice) || hide
+  const isHidden = choices.length === 1 || !choices.includes(selectedChoice) || hide
 
   return (
-    <div ref={choiceGroupRef} data-choice-group={choiceGroup.name} className="choice-group">
+    <div data-choice-group={choiceGroup.name} className="choice-group">
       <select
         name={`choicesFor-${choiceGroup.name}`}
         value={selectedChoice}
         onChange={onChange}
-        className={cls(['select-choice', isJsDropdownVisible && 'show-js-dropdown', isHidden && 'hidden'])}
+        className={cls(['select-choice', isHidden && 'hidden'])}
+        style={{ '--lvl': lvl }}
       >
         {choiceGroup.choices.map((choice, i) => (
-          <option key={i} value={choice} disabled={!cleanChoices.includes(choice)}>
+          <option key={i} value={choice} disabled={!choices.includes(choice)}>
             {choice}
           </option>
         ))}
@@ -65,7 +64,7 @@ function findChoiceGroup(pageContext: PageContext, choices: string[]) {
 
   const groupName = Object.keys(choicesAll).find((key) => {
     // get only the values that exist in both choices and choicesAll[key].choices
-    const relevantChoices = choicesAll[key].choices.filter((choice) => choices.includes(choice))
+    const relevantChoices = choicesAll[key]!.choices.filter((choice) => choices.includes(choice))
     // if nothing exists, skip this key
     if (relevantChoices.length === 0) return false
 
@@ -83,11 +82,11 @@ function findChoiceGroup(pageContext: PageContext, choices: string[]) {
   })
   assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const mergedChoices = [...new Set([...choices, ...choicesAll[groupName].choices])]
+  const mergedChoices = [...new Set([...choices, ...choicesAll[groupName]!.choices])]
 
   const choiceGroup = {
     name: groupName,
-    ...choicesAll[groupName],
+    ...choicesAll[groupName]!,
     choices: mergedChoices,
   }
 

package/code-blocks/components/Pre.tsx

@@ -1,7 +1,7 @@
 export { Pre }
 
 import React, { useState } from 'react'
-import { cls } from '../../utils/cls'
+import { cls } from '../../utils/cls.js'
 import './Pre.css'
 
 // Styling defined in src/css/code/diff.css

package/code-blocks/hooks/useSelectedChoice.ts

@@ -1,7 +1,7 @@
 export { useSelectedChoice }
 export { initializeChoiceGroup_SSR }
 
-import { useLocalStorage } from './useLocalStorage'
+import { useLocalStorage } from './useLocalStorage.js'
 
 const keyPrefix = 'docpress'
 

package/code-blocks/remarkChoiceGroup.ts

@@ -31,7 +31,6 @@ function remarkChoiceGroup() {
     const replaced = new WeakSet()
     visit(tree, (node) => {
       if (!('children' in node) || replaced.has(node)) return 'skip'
-      if (node.type === 'mdxJsxFlowElement') return 'skip'
 
       let start = -1
       let end = 0
@@ -43,11 +42,10 @@ function remarkChoiceGroup() {
         const replacements: MdxJsxFlowElement[] = []
 
         for (const choiceNodes of choiceNodesFiltered) {
-          const replacement = generateChoiceGroupCode(choiceNodes)
-
+          const replacement = generateChoiceGroupCode(choiceNodes, node)
           replacements.push(replacement)
-          replaced.add(replacement)
         }
+        replaced.add(replacements)
 
         node.children.splice(start, end - start, ...replacements)
 
@@ -56,7 +54,7 @@ function remarkChoiceGroup() {
       }
 
       for (; end < node.children.length; end++) {
-        const child = node.children[end]
+        const child = node.children[end]!
 
         if (!['code', 'mdxJsxFlowElement', 'containerDirective'].includes(child.type)) {
           process()

package/code-blocks/remarkDetype.ts

@@ -1,7 +1,6 @@
 export { remarkDetype }
 
 import type { Root, Parent, Code } from 'mdast'
-import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors'
 import { visit } from 'unist-util-visit'
 import { assertUsage } from '../utils/assert.js'
@@ -175,9 +174,9 @@ function processMagicComments(code: string) {
 
   if (matches.length) {
     for (let i = matches.length - 1; i >= 0; i--) {
-      const match = matches[i]
+      const match = matches[i]!
       const [fullMatch, renameFrom, renameTo] = match
-      code = code.split(fullMatch).join('').replaceAll(renameFrom, renameTo)
+      code = code.split(fullMatch).join('').replaceAll(renameFrom!, renameTo!)
     }
   }
   code = code.replaceAll('// @docpress-uncomment ', '')

package/code-blocks/remarkPkgManager.ts

@@ -2,9 +2,11 @@ export { remarkPkgManager }
 
 import type { Code, Root } from 'mdast'
 import { visit } from 'unist-util-visit'
-import convert from 'npm-to-yarn'
+import convert_ from 'npm-to-yarn'
 import { parseMetaString } from './rehypeMetaToProps.js'
 import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
+// @ts-expect-error The type of npm-to-yarn doesn't work with `"moduleResolution": "Node16"`
+const convert: (str: string, to: 'npm' | 'yarn' | 'pnpm' | 'bun') => string = convert_
 
 const PKG_MANAGERS = ['pnpm', 'Bun', 'Yarn'] as const
 

package/code-blocks/shikiTransformerAutoLinks.ts

@@ -14,7 +14,7 @@ function shikiTransformerAutoLinks(): ShikiTransformer {
     name: 'docpress-shiki-autolinks',
     span(span) {
       if (span.children.length !== 1) return
-      let child = span.children[0]
+      let child = span.children[0]!
       if (child.type !== 'text') return
 
       const links: { href: string; index: number }[] = []
@@ -26,7 +26,7 @@ function shikiTransformerAutoLinks(): ShikiTransformer {
 
       for (const match of filtered) {
         const [href] = match
-        links.unshift({ href, index: match.index })
+        links.unshift({ href, index: match.index! })
       }
 
       const newChildren: typeof span.children = []

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -1,7 +1,7 @@
 export { generateChoiceGroupCode }
 export type { ChoiceNode }
 
-import type { BlockContent, DefinitionContent } from 'mdast'
+import type { BlockContent, DefinitionContent, Parent } from 'mdast'
 import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
 
 type ChoiceNode = {
@@ -9,17 +9,10 @@ type ChoiceNode = {
   children: (BlockContent | DefinitionContent)[]
 }
 
-function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement {
+function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): MdxJsxFlowElement {
   const attributes: MdxJsxAttribute[] = []
   const children: MdxJsxFlowElement[] = []
 
-  const elements = choiceNodes.map((choiceNode) => ({
-    type: 'Literal',
-    value: findVisibleJsDropdown(choiceNode.children[0])
-      ? `${choiceNode.choiceValue}:jsDropdown`
-      : choiceNode.choiceValue,
-  }))
-
   attributes.push({
     type: 'mdxJsxAttribute',
     name: 'choices',
@@ -37,7 +30,10 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement {
               expression: {
                 type: 'ArrayExpression',
                 // @ts-ignore: Missing properties in type definition
-                elements,
+                elements: choiceNodes.map((choiceNode) => ({
+                  type: 'Literal',
+                  value: choiceNode.choiceValue,
+                })),
               },
             },
           ],
@@ -46,7 +42,32 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement {
     },
   })
 
+  let initLvl: number
+
+  switch (parent?.type) {
+    case 'root':
+      initLvl = 0
+      break
+    case 'mdxJsxFlowElement':
+      initLvl = 1
+      break
+
+    default:
+      initLvl = 0
+      break
+  }
+
+  attributes.push({ type: 'mdxJsxAttribute', name: 'lvl', value: `${initLvl}` })
+
   for (const choiceNode of choiceNodes) {
+    const choiceChildren: (BlockContent | DefinitionContent)[] = []
+    if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
+      choiceChildren.push(...choiceNode.children.flatMap((node) => [...node.children]))
+    } else {
+      choiceChildren.push(...choiceNode.children)
+    }
+    for (const child of choiceChildren) increaseLvl(child)
+
     children.push({
       type: 'mdxJsxFlowElement',
       name: 'div',
@@ -54,9 +75,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement {
         { type: 'mdxJsxAttribute', name: 'data-choice-value', value: choiceNode.choiceValue },
         { type: 'mdxJsxAttribute', name: 'className', value: 'choice' },
       ],
-      children: choiceNode.children.every((node) => node.type === 'containerDirective')
-        ? choiceNode.children.flatMap((node) => [...node.children])
-        : choiceNode.children,
+      children: choiceChildren,
     })
   }
 
@@ -68,12 +87,12 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement {
   }
 }
 
-function findVisibleJsDropdown(node: BlockContent | DefinitionContent) {
-  let currentNode = node
-  if (node.type === 'containerDirective' && node.name === 'Choice') currentNode = node.children[0]
-  return (
-    currentNode.type === 'mdxJsxFlowElement' &&
-    currentNode.data?.customDataFilter === 'codeLang' &&
-    currentNode.attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hide')
-  )
+function increaseLvl(node: BlockContent | DefinitionContent) {
+  if (node.type === 'mdxJsxFlowElement' && node.name === 'ChoiceGroup') {
+    const attribute = node.attributes.find(
+      (attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'lvl',
+    )
+    const lvlValue = attribute?.value
+    if (lvlValue) attribute.value = `${Number(lvlValue) + 1}`
+  }
 }

package/components/Algolia/Hit.tsx

@@ -2,9 +2,9 @@ export { Hit }
 
 import React from 'react'
 import type { DocSearchHit, InternalDocSearchHit, StoredDocSearchHit } from '@docsearch/react'
-import { Snippet } from './Snippet'
-import { SourceIcon } from './SourceIcon'
-import { SelectIcon } from './SelectIcon'
+import { Snippet } from './Snippet.js'
+import { SourceIcon } from './SourceIcon.js'
+import { SelectIcon } from './SelectIcon.js'
 
 type HitProps = {
   hit: InternalDocSearchHit | StoredDocSearchHit

package/components/CodeBlockTransformer.tsx

@@ -1,7 +1,7 @@
 export { CodeBlockTransformer }
 
 import React from 'react'
-import { assert } from '../utils/server'
+import { assert } from '../utils/server.js'
 import './CodeBlockTransformer.css'
 
 type LineBreak = 'white-space' | 'break-word'

package/components/Comment.tsx

@@ -2,6 +2,6 @@ export { Comment }
 
 import React from 'react'
 
-function Comment({ children }: { children: React.ReactNode }) {
+function Comment() {
   return <></>
 }

package/components/HorizontalLine.tsx

@@ -1,7 +1,7 @@
 export { HorizontalLine }
 
 import React from 'react'
-import { cls } from '../utils/cls'
+import { cls } from '../utils/cls.js'
 
 function HorizontalLine({ primary }: { primary?: true }) {
   return (

package/components/ImportMeta.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { assert } from '../utils/server'
+import { assert } from '../utils/server.js'
 
 export { ImportMeta }
 

package/components/Link.tsx

@@ -2,12 +2,12 @@ export { Link }
 export type { LinkData }
 
 import React from 'react'
-import { usePageContext } from '../renderer/usePageContext'
-import { assert, assertUsage, assertWarning, determineSectionTitle, determineSectionUrlHash } from '../utils/server'
-import { parseMarkdownMini } from '../parseMarkdownMini'
+import { usePageContext } from '../renderer/usePageContext.js'
+import { assert, assertUsage, assertWarning, determineSectionTitle, determineSectionUrlHash } from '../utils/server.js'
+import { parseMarkdownMini } from '../parseMarkdownMini.js'
 import pc from '@brillout/picocolors'
 import type { PageContext } from 'vike/types'
-import type { StringArray } from '../types/Heading'
+import type { StringArray } from '../types/Heading.js'
 
 function Link({
   href,
@@ -67,7 +67,7 @@ function getLinkText({
   if (sectionTitle) breadcrumbParts.push(sectionTitle)
 
   if (noBreadcrumb || isLinkOnSamePage) {
-    return breadcrumbParts[breadcrumbParts.length - 1]
+    return breadcrumbParts[breadcrumbParts.length - 1]!
   }
   return (
     <>

package/components/Note.tsx

@@ -14,7 +14,7 @@ export { Note }
 */
 
 import React from 'react'
-import { assert } from '../utils/assert'
+import { assert } from '../utils/assert.js'
 import './Note.css'
 
 type Props = {

package/components/RepoLink.tsx

@@ -2,7 +2,7 @@ export { RepoLink }
 export { getRepoHref }
 
 import React from 'react'
-import { usePageContext } from '../renderer/usePageContext'
+import { usePageContext } from '../renderer/usePageContext.js'
 
 function RepoLink({ path, text }: { path: string; text?: string | React.ReactNode }) {
   text = text || path