@brillout/docpress 0.16.15 → 0.16.16

package/+config.ts

@@ -2,7 +2,7 @@ export { config as default }
 
 import type { Config } from 'vike/types'
 import { viteConfig } from './vite.config.js'
-import type { Config as DocpressConfig } from './types/Config.js'
+import type { Config as DocpressConfig, ChoicesConfig } from './types/Config.js'
 import type { PageSection } from './parsePageSections.js'
 import type { Resolved } from './resolvePageContext.js'
 
@@ -21,6 +21,10 @@ const config = {
       env: { server: true, client: true },
       global: true,
     },
+    choices: {
+      env: { server: true, client: true, config: true },
+      global: true,
+    },
   },
   prefetch: {
     staticAssets: 'hover',
@@ -37,9 +41,11 @@ declare global {
     }
     interface Config {
       docpress?: DocpressConfig
+      choices?: ChoicesConfig
     }
     interface ConfigResolved {
       docpress: DocpressConfig
+      choices: ChoicesConfig
       pageSectionsExport: PageSection[] | undefined
     }
   }

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,36 +1,26 @@
 export { ChoiceGroup }
 
 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'
 
-const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> = {
-  codeLang: {
-    choices: ['JavaScript', 'TypeScript'],
-    default: 'JavaScript',
-  },
-  pkgManager: {
-    choices: ['npm', 'pnpm', 'Bun', 'Yarn'],
-    default: 'npm',
-  },
+type TChoiceGroup = {
+  name: string
+  choices: string[]
+  default: string
+  disabled: string[]
 }
 
 function ChoiceGroup({
   children,
-  choices,
+  choiceGroup,
   lvl,
   hide = false,
-}: { children: React.ReactNode; choices: string[]; lvl: number; hide: boolean }) {
-  const pageContext = usePageContext()
-  const choiceGroup = findChoiceGroup(pageContext, choices)
-  const [selectedChoice, setSelectedChoice] = useSelectedChoice(choiceGroup.name, choiceGroup.default!)
+}: { children: React.ReactNode; choiceGroup: TChoiceGroup; lvl: number; hide: boolean }) {
+  const [selectedChoice, setSelectedChoice] = useSelectedChoice(choiceGroup.name, choiceGroup.default)
   const prevPositionRef = useRestoreScroll([selectedChoice])
-  const isHidden = choices.length === 1 || !choices.includes(selectedChoice) || hide
 
   return (
     <div data-choice-group={choiceGroup.name} className="choice-group">
@@ -38,11 +28,11 @@ function ChoiceGroup({
         name={`choicesFor-${choiceGroup.name}`}
         value={selectedChoice}
         onChange={onChange}
-        className={cls(['select-choice', isHidden && 'hidden'])}
+        className={cls(['select-choice', hide && 'hidden'])}
         style={{ '--lvl': lvl }}
       >
         {choiceGroup.choices.map((choice, i) => (
-          <option key={i} value={choice} disabled={!choices.includes(choice)}>
+          <option key={i} value={choice} disabled={choiceGroup.disabled.includes(choice)}>
             {choice}
           </option>
         ))}
@@ -57,38 +47,3 @@ function ChoiceGroup({
     setSelectedChoice(el.value)
   }
 }
-
-function findChoiceGroup(pageContext: PageContext, choices: string[]) {
-  const { choices: choicesConfig } = pageContext.globalContext.config.docpress
-  const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
-
-  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))
-    // if nothing exists, skip this key
-    if (relevantChoices.length === 0) return false
-
-    // check order
-    let i = 0
-    for (const choice of choices) {
-      if (choice === relevantChoices[i]) i++
-    }
-    assertUsage(
-      i === relevantChoices.length,
-      `Choices exist for key "${key}" but NOT in order. Expected order: [${relevantChoices}], got: [${choices}]`,
-    )
-
-    return true
-  })
-  assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
-
-  const mergedChoices = [...new Set([...choices, ...choicesAll[groupName]!.choices])]
-
-  const choiceGroup = {
-    name: groupName,
-    ...choicesAll[groupName]!,
-    choices: mergedChoices,
-  }
-
-  return choiceGroup
-}

package/code-blocks/remarkDetype.ts

@@ -6,11 +6,8 @@ import { visit } from 'unist-util-visit'
 import { assertUsage } from '../utils/assert.js'
 import { parseMetaString } from './rehypeMetaToProps.js'
 import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
+import { transform as detype } from 'detype'
 import pc from '@brillout/picocolors'
-import module from 'node:module'
-// Cannot use `import { transform } from 'detype'` as it results in errors,
-// and the package has no default export. Using `module.createRequire` instead.
-const { transform: detype } = module.createRequire(import.meta.url)('detype') as typeof import('detype')
 
 const prettierOptions: NonNullable<Parameters<typeof detype>[2]>['prettierOptions'] = {
   semi: false,

package/code-blocks/remarkPkgManager.ts

@@ -1,21 +1,30 @@
 export { remarkPkgManager }
 
 import type { Code, Root } from 'mdast'
+import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors'
 import { visit } from 'unist-util-visit'
 import convert_ from 'npm-to-yarn'
 import { parseMetaString } from './rehypeMetaToProps.js'
 import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
+import { assertUsage } from '../utils/assert.js'
+import pc from '@brillout/picocolors'
 // @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
 
 function remarkPkgManager() {
-  return function (tree: Root) {
+  return function (tree: Root, file: VFile) {
     visit(tree, 'code', (node, index, parent) => {
       if (!parent || typeof index === 'undefined') return
-      if (!['sh', 'shell'].includes(node.lang || '')) return
-      if (node.value.indexOf('npm') === -1 && node.value.indexOf('npx') === -1) return
+      if (!['bash', 'sh', 'shell'].includes(node.lang || '')) return
+      assertUsage(
+        !node.value.includes('pnpm'),
+        `Found a 'pnpm' command in the code block at: ${pc.bold(pc.blue(file.path))}, line ${
+          node.position?.start.line
+        }. Replace it with the equivalent 'npm' command for the package manager toggle to work.`,
+      )
+      if (!node.value.includes('npm ') && !node.value.includes('npx ')) return
       let choice: string | undefined = undefined
       const nodes = new Map<string, Code>()
 

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -1,21 +1,49 @@
 export { generateChoiceGroupCode }
 export type { ChoiceNode }
 
+import type { VikeConfig } from 'vike/types'
 import type { BlockContent, DefinitionContent, Parent } from 'mdast'
 import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
+import { getVikeConfig } from 'vike/plugin'
+import { assertUsage } from '../../utils/assert.js'
+import { valueToEstree } from 'estree-util-value-to-estree'
 
 type ChoiceNode = {
   choiceValue: string
   children: (BlockContent | DefinitionContent)[]
 }
 
+const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> = {
+  codeLang: {
+    choices: ['JavaScript', 'TypeScript'],
+    default: 'JavaScript',
+  },
+  pkgManager: {
+    choices: ['npm', 'pnpm', 'Bun', 'Yarn'],
+    default: 'npm',
+  },
+}
+
 function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): MdxJsxFlowElement {
+  const vikeConfig = getVikeConfig()
+  const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue)
+  const choiceGroup = findChoiceGroup(vikeConfig, choices)
+
+  const mergedChoiceNodes = choiceGroup.choices.map((choice) => {
+    const node = choiceNodes.find((n) => n.choiceValue === choice)
+
+    return {
+      choiceValue: choice,
+      children: node?.children ?? [],
+    }
+  })
+
   const attributes: MdxJsxAttribute[] = []
   const children: MdxJsxFlowElement[] = []
 
   attributes.push({
     type: 'mdxJsxAttribute',
-    name: 'choices',
+    name: 'choiceGroup',
     value: {
       type: 'mdxJsxAttributeValueExpression',
       value: '',
@@ -25,23 +53,18 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
           sourceType: 'module',
           comments: [],
           body: [
-            {
-              type: 'ExpressionStatement',
-              expression: {
-                type: 'ArrayExpression',
-                // @ts-ignore: Missing properties in type definition
-                elements: choiceNodes.map((choiceNode) => ({
-                  type: 'Literal',
-                  value: choiceNode.choiceValue,
-                })),
-              },
-            },
+            // @ts-ignore: Missing properties in type definition
+            { type: 'ExpressionStatement', expression: valueToEstree(choiceGroup) },
           ],
         },
       },
     },
   })
 
+  if (choiceNodes.length === 1) {
+    attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
+  }
+
   let initLvl: number
 
   switch (parent?.type) {
@@ -59,7 +82,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
 
   attributes.push({ type: 'mdxJsxAttribute', name: 'lvl', value: `${initLvl}` })
 
-  for (const choiceNode of choiceNodes) {
+  for (const choiceNode of mergedChoiceNodes) {
     const choiceChildren: (BlockContent | DefinitionContent)[] = []
     if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
       choiceChildren.push(...choiceNode.children.flatMap((node) => [...node.children]))
@@ -87,6 +110,30 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent?: Parent): Md
   }
 }
 
+function findChoiceGroup(vikeConfig: VikeConfig, choices: string[]) {
+  const { choices: choicesConfig } = vikeConfig.config
+  const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
+
+  const groupName = Object.keys(choicesAll).find((key) => {
+    // get only the values that exist in both choices and choicesAll[key].choices
+    const existsChoices = choicesAll[key]!.choices.filter((choice) => choices.includes(choice))
+    // if nothing exists, skip this key
+    if (existsChoices.length === 0) return false
+    return true
+  })
+  assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
+
+  const disabled = choicesAll[groupName]!.choices.filter((choice) => !choices.includes(choice))
+
+  const choiceGroup = {
+    name: groupName,
+    ...choicesAll[groupName]!,
+    disabled,
+  }
+
+  return choiceGroup
+}
+
 function increaseLvl(node: BlockContent | DefinitionContent) {
   if (node.type === 'mdxJsxFlowElement' && node.name === 'ChoiceGroup') {
     const attribute = node.attributes.find(

package/dist/+config.d.ts

@@ -1,5 +1,5 @@
 export { config as default };
-import type { Config as DocpressConfig } from './types/Config.js';
+import type { Config as DocpressConfig, ChoicesConfig } from './types/Config.js';
 import type { PageSection } from './parsePageSections.js';
 import type { Resolved } from './resolvePageContext.js';
 declare const config: {
@@ -24,6 +24,14 @@ declare const config: {
             };
             global: true;
         };
+        choices: {
+            env: {
+                server: true;
+                client: true;
+                config: true;
+            };
+            global: true;
+        };
     };
     prefetch: {
         staticAssets: "hover";
@@ -39,9 +47,11 @@ declare global {
         }
         interface Config {
             docpress?: DocpressConfig;
+            choices?: ChoicesConfig;
         }
         interface ConfigResolved {
             docpress: DocpressConfig;
+            choices: ChoicesConfig;
             pageSectionsExport: PageSection[] | undefined;
         }
     }

package/dist/+config.js

@@ -15,6 +15,10 @@ const config = {
             env: { server: true, client: true },
             global: true,
         },
+        choices: {
+            env: { server: true, client: true, config: true },
+            global: true,
+        },
     },
     prefetch: {
         staticAssets: 'hover',

package/dist/code-blocks/remarkDetype.js

@@ -3,11 +3,8 @@ import { visit } from 'unist-util-visit';
 import { assertUsage } from '../utils/assert.js';
 import { parseMetaString } from './rehypeMetaToProps.js';
 import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
+import { transform as detype } from 'detype';
 import pc from '@brillout/picocolors';
-import module from 'node:module';
-// Cannot use `import { transform } from 'detype'` as it results in errors,
-// and the package has no default export. Using `module.createRequire` instead.
-const { transform: detype } = module.createRequire(import.meta.url)('detype');
 const prettierOptions = {
     semi: false,
     singleQuote: true,

package/dist/code-blocks/remarkPkgManager.d.ts

@@ -1,3 +1,4 @@
 export { remarkPkgManager };
 import type { Root } from 'mdast';
-declare function remarkPkgManager(): (tree: Root) => void;
+import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors';
+declare function remarkPkgManager(): (tree: Root, file: VFile) => void;

package/dist/code-blocks/remarkPkgManager.js

@@ -3,17 +3,20 @@ import { visit } from 'unist-util-visit';
 import convert_ from 'npm-to-yarn';
 import { parseMetaString } from './rehypeMetaToProps.js';
 import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
+import { assertUsage } from '../utils/assert.js';
+import pc from '@brillout/picocolors';
 // @ts-expect-error The type of npm-to-yarn doesn't work with `"moduleResolution": "Node16"`
 const convert = convert_;
 const PKG_MANAGERS = ['pnpm', 'Bun', 'Yarn'];
 function remarkPkgManager() {
-    return function (tree) {
+    return function (tree, file) {
         visit(tree, 'code', (node, index, parent) => {
             if (!parent || typeof index === 'undefined')
                 return;
-            if (!['sh', 'shell'].includes(node.lang || ''))
+            if (!['bash', 'sh', 'shell'].includes(node.lang || ''))
                 return;
-            if (node.value.indexOf('npm') === -1 && node.value.indexOf('npx') === -1)
+            assertUsage(!node.value.includes('pnpm'), `Found a 'pnpm' command in the code block at: ${pc.bold(pc.blue(file.path))}, line ${node.position?.start.line}. Replace it with the equivalent 'npm' command for the package manager toggle to work.`);
+            if (!node.value.includes('npm ') && !node.value.includes('npx '))
                 return;
             let choice = undefined;
             const nodes = new Map();

package/dist/code-blocks/utils/generateChoiceGroupCode.js

@@ -1,10 +1,33 @@
 export { generateChoiceGroupCode };
+import { getVikeConfig } from 'vike/plugin';
+import { assertUsage } from '../../utils/assert.js';
+import { valueToEstree } from 'estree-util-value-to-estree';
+const CHOICES_BUILT_IN = {
+    codeLang: {
+        choices: ['JavaScript', 'TypeScript'],
+        default: 'JavaScript',
+    },
+    pkgManager: {
+        choices: ['npm', 'pnpm', 'Bun', 'Yarn'],
+        default: 'npm',
+    },
+};
 function generateChoiceGroupCode(choiceNodes, parent) {
+    const vikeConfig = getVikeConfig();
+    const choices = choiceNodes.map((choiceNode) => choiceNode.choiceValue);
+    const choiceGroup = findChoiceGroup(vikeConfig, choices);
+    const mergedChoiceNodes = choiceGroup.choices.map((choice) => {
+        const node = choiceNodes.find((n) => n.choiceValue === choice);
+        return {
+            choiceValue: choice,
+            children: node?.children ?? [],
+        };
+    });
     const attributes = [];
     const children = [];
     attributes.push({
         type: 'mdxJsxAttribute',
-        name: 'choices',
+        name: 'choiceGroup',
         value: {
             type: 'mdxJsxAttributeValueExpression',
             value: '',
@@ -14,22 +37,16 @@ function generateChoiceGroupCode(choiceNodes, parent) {
                     sourceType: 'module',
                     comments: [],
                     body: [
-                        {
-                            type: 'ExpressionStatement',
-                            expression: {
-                                type: 'ArrayExpression',
-                                // @ts-ignore: Missing properties in type definition
-                                elements: choiceNodes.map((choiceNode) => ({
-                                    type: 'Literal',
-                                    value: choiceNode.choiceValue,
-                                })),
-                            },
-                        },
+                        // @ts-ignore: Missing properties in type definition
+                        { type: 'ExpressionStatement', expression: valueToEstree(choiceGroup) },
                     ],
                 },
             },
         },
     });
+    if (choiceNodes.length === 1) {
+        attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
+    }
     let initLvl;
     switch (parent?.type) {
         case 'root':
@@ -43,7 +60,7 @@ function generateChoiceGroupCode(choiceNodes, parent) {
             break;
     }
     attributes.push({ type: 'mdxJsxAttribute', name: 'lvl', value: `${initLvl}` });
-    for (const choiceNode of choiceNodes) {
+    for (const choiceNode of mergedChoiceNodes) {
         const choiceChildren = [];
         if (choiceNode.children.every((node) => node.type === 'containerDirective')) {
             choiceChildren.push(...choiceNode.children.flatMap((node) => [...node.children]));
@@ -70,6 +87,26 @@ function generateChoiceGroupCode(choiceNodes, parent) {
         children,
     };
 }
+function findChoiceGroup(vikeConfig, choices) {
+    const { choices: choicesConfig } = vikeConfig.config;
+    const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig };
+    const groupName = Object.keys(choicesAll).find((key) => {
+        // get only the values that exist in both choices and choicesAll[key].choices
+        const existsChoices = choicesAll[key].choices.filter((choice) => choices.includes(choice));
+        // if nothing exists, skip this key
+        if (existsChoices.length === 0)
+            return false;
+        return true;
+    });
+    assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`);
+    const disabled = choicesAll[groupName].choices.filter((choice) => !choices.includes(choice));
+    const choiceGroup = {
+        name: groupName,
+        ...choicesAll[groupName],
+        disabled,
+    };
+    return choiceGroup;
+}
 function increaseLvl(node) {
     if (node.type === 'mdxJsxFlowElement' && node.name === 'ChoiceGroup') {
         const attribute = node.attributes.find((attribute) => attribute.type === 'mdxJsxAttribute' && attribute.name === 'lvl');

package/dist/types/Config.d.ts

@@ -1,4 +1,4 @@
-export type { Config };
+export type { Config, ChoicesConfig };
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js';
 type Config = {
     name: string;
@@ -37,7 +37,6 @@ type Config = {
     navLogoStyle?: React.CSSProperties;
     navLogoTextStyle?: React.CSSProperties;
     globalNote?: React.ReactNode;
-    choices?: Record<string, Choice>;
 };
 /** Order in Algolia search results */
 type Category = string | {
@@ -45,6 +44,7 @@ type Category = string | {
     /** Hide from Algolia search */
     hide?: boolean;
 };
+type ChoicesConfig = Record<string, Choice>;
 type Choice = {
     choices: string[];
     default: string;

package/docsearch/DocSearchInstall.tsx

@@ -20,13 +20,13 @@ function DocSearchInstall() {
         maxResultsPerGroup={Infinity}
         searchParameters={{
           filters: 'is_available:true',
+          hitsPerPage: 50,
         }}
         transformItems={(hits) => {
           hits.map((hit) => {
-            if (hit.type === 'lvl1') {
-              hit.url = hit.url.split('#')[0]!
-            }
+            if (hit.type === 'lvl1') hit.url = hit.url.split('#')[0]!
           })
+          hits.sort((a, b) => Number(a.url.includes('#')) - Number(b.url.includes('#')))
           return hits
         }}
       />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.15",
+  "version": "0.16.16",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,7 +11,8 @@
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
-    "detype": "^1.1.3",
+    "detype": "^2.0.2",
+    "estree-util-value-to-estree": "^3.5.0",
     "npm-to-yarn": "^3.0.1",
     "rehype-pretty-code": "0.13.0",
     "remark-directive": "^4.0.0",

package/types/Config.ts

@@ -1,4 +1,4 @@
-export type { Config }
+export type { Config, ChoicesConfig }
 
 import type { HeadingDefinition, HeadingDetachedDefinition } from './Heading.js'
 
@@ -48,7 +48,6 @@ type Config = {
   navLogoTextStyle?: React.CSSProperties
 
   globalNote?: React.ReactNode
-  choices?: Record<string, Choice>
 }
 
 /** Order in Algolia search results */
@@ -60,6 +59,8 @@ type Category =
       hide?: boolean
     }
 
+type ChoicesConfig = Record<string, Choice>
+
 type Choice = {
   choices: string[]
   default: string