@brillout/docpress 0.16.9 → 0.16.11

package/Layout.tsx

@@ -28,7 +28,6 @@ import {
 import { MenuModal } from './MenuModal'
 import { autoScrollNav_SSR } from './autoScrollNav'
 import { initializeChoiceGroup_SSR } from './code-blocks/hooks/useSelectedChoice'
-import { initializeJsToggle_SSR } from './code-blocks/hooks/useSelectCodeLang'
 import { SearchLink } from './docsearch/SearchLink'
 import { navigate } from 'vike/client/router'
 import { css } from './utils/css'
@@ -101,7 +100,7 @@ function Layout({ children }: { children: React.ReactNode }) {
         {content}
       </div>
       {/* Early toggling, to avoid layout jumps */}
-      <script dangerouslySetInnerHTML={{ __html: `${initializeChoiceGroup_SSR}\n${initializeJsToggle_SSR}` }}></script>
+      <script dangerouslySetInnerHTML={{ __html: `${initializeChoiceGroup_SSR}` }}></script>
       <Style>{getStyleLayout()}</Style>
     </div>
   )

package/code-blocks/components/ChoiceGroup.css

@@ -3,16 +3,15 @@
 
   &:hover {
     .select-choice,
-    .copy-button,
-    .code-lang-toggle {
+    .copy-button {
       opacity: 1;
     }
   }
 
-  --select-width: 100px;
+  --select-width: 85px;
   --select-top-position: 10px;
   --select-right-position: 42px;
-  --has-toggle: calc(var(--select-right-position) + 61px);
+  --show-js-dropdown-right-position: calc(var(--select-right-position) + var(--select-width) + 2px);
 
   .select-choice {
     position: absolute;
@@ -25,11 +24,11 @@
     opacity: 0;
     transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
 
-    &.has-toggle {
-      --select-right-position: var(--has-toggle);
+    &.show-js-dropdown {
+      --select-right-position: var(--show-js-dropdown-right-position);
     }
 
-    &:has(+ .choice .choice-group) {
+    &:has(+ .choice > .choice-group:not([data-choice-group='codeLang'])) {
       right: calc(var(--select-width) + var(--select-right-position) + 2px);
     }
   }

package/code-blocks/components/ChoiceGroup.tsx

@@ -1,6 +1,6 @@
 export { ChoiceGroup }
 
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useRef } from 'react'
 import { usePageContext } from '../../renderer/usePageContext'
 import { useSelectedChoice } from '../hooks/useSelectedChoice'
 import { useRestoreScroll } from '../hooks/useRestoreScroll'
@@ -9,31 +9,41 @@ import { cls } from '../../utils/cls'
 import type { PageContext } from 'vike/types'
 import './ChoiceGroup.css'
 
-function ChoiceGroup({ children, choices }: { children: React.ReactNode; choices: string[] }) {
+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 ChoiceGroup({
+  children,
+  choices,
+  hide = false,
+}: { children: React.ReactNode; choices: string[]; hide: boolean }) {
   const pageContext = usePageContext()
-  const group = findGroup(pageContext, choices)
-  const [selectedChoice, setSelectedChoice] = useSelectedChoice(group.name, group.default)
-  const [hasJsToggle, setHasJsToggle] = useState(false)
+  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 prevPositionRef = useRestoreScroll([selectedChoice])
-  const isHidden = choices.length === 1 || !choices.includes(selectedChoice)
-
-  useEffect(() => {
-    if (!choiceGroupRef.current) return
-    const selectedChoiceEl = choiceGroupRef.current.querySelector<HTMLDivElement>(`div[id="${selectedChoice}"]`)
-    setHasJsToggle(!!selectedChoiceEl?.classList.contains('has-toggle'))
-  }, [selectedChoice])
+  const isHidden = choices.length === 1 || !cleanChoices.includes(selectedChoice) || hide
 
   return (
-    <div ref={choiceGroupRef} data-group-name={group.name} className="choice-group">
+    <div ref={choiceGroupRef} data-choice-group={choiceGroup.name} className="choice-group">
       <select
-        name={`${group.name}-choices`}
+        name={`choicesFor-${choiceGroup.name}`}
         value={selectedChoice}
         onChange={onChange}
-        className={cls(['select-choice', hasJsToggle && 'has-toggle', isHidden && 'hidden'])}
+        className={cls(['select-choice', isJsDropdownVisible && 'show-js-dropdown', isHidden && 'hidden'])}
       >
-        {group.choices.map((choice, i) => (
-          <option key={i} value={choice} disabled={!choices.includes(choice)}>
+        {choiceGroup.choices.map((choice, i) => (
+          <option key={i} value={choice} disabled={!cleanChoices.includes(choice)}>
             {choice}
           </option>
         ))}
@@ -49,13 +59,13 @@ function ChoiceGroup({ children, choices }: { children: React.ReactNode; choices
   }
 }
 
-function findGroup(pageContext: PageContext, choices: string[]) {
-  const { choices: choicesGroup } = pageContext.globalContext.config.docpress
-  assertUsage(choicesGroup, `+docpress.choices is not defined.`)
+function findChoiceGroup(pageContext: PageContext, choices: string[]) {
+  const { choices: choicesConfig } = pageContext.globalContext.config.docpress
+  const choicesAll = { ...CHOICES_BUILT_IN, ...choicesConfig }
 
-  const groupName = Object.keys(choicesGroup).find((key) => {
-    // get only the values that exist in both choices and choicesGroup[key].choices
-    const relevantChoices = choicesGroup[key].choices.filter((choice) => choices.includes(choice))
+  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
 
@@ -71,15 +81,15 @@ function findGroup(pageContext: PageContext, choices: string[]) {
 
     return true
   })
-  assertUsage(groupName, `the group name for [${choices}] was not found.`)
+  assertUsage(groupName, `Missing group name for [${choices}]. Define it in +docpress.choices.`)
 
-  const mergedChoices = [...new Set([...choices, ...choicesGroup[groupName].choices])]
+  const mergedChoices = [...new Set([...choices, ...choicesAll[groupName].choices])]
 
-  const group = {
+  const choiceGroup = {
     name: groupName,
-    ...choicesGroup[groupName],
+    ...choicesAll[groupName],
     choices: mergedChoices,
   }
 
-  return group
+  return choiceGroup
 }

package/code-blocks/hooks/useMDXComponents.tsx

@@ -3,13 +3,11 @@ export { useMDXComponents }
 import React from 'react'
 import type { UseMdxComponents } from '@mdx-js/mdx'
 import { Pre } from '../components/Pre.js'
-import { CodeSnippets } from '../components/CodeSnippets.js'
 import { ChoiceGroup } from '../components/ChoiceGroup.js'
 
 const useMDXComponents: UseMdxComponents = () => {
   return {
     ChoiceGroup,
-    CodeSnippets,
     pre: (props) => <Pre {...props} />,
   }
 }

package/code-blocks/hooks/useSelectedChoice.ts

@@ -1,34 +1,37 @@
 export { useSelectedChoice }
 export { initializeChoiceGroup_SSR }
 
-import { useState } from 'react'
 import { useLocalStorage } from './useLocalStorage'
 
 const keyPrefix = 'docpress'
 
 /**
- * Tracks the selected choice.
- * Uses `useLocalStorage` if `persistId` is provided, otherwise regular state.
+ * Stores and retrieves a selected choice from local storage.
  *
- * @param persistId Optional ID to persist selection.
+ * @param choiceGroupName Group name for the stored choice.
  * @param defaultValue Default choice value.
  * @returns `[selectedChoice, setSelectedChoice]`.
  */
-function useSelectedChoice(persistId: string | null, defaultValue: string) {
-  if (!persistId) return useState(defaultValue)
-
-  return useLocalStorage(`${keyPrefix}:${persistId}`, defaultValue)
+function useSelectedChoice(choiceGroupName: string, defaultValue: string) {
+  return useLocalStorage(`${keyPrefix}:choice:${choiceGroupName}`, defaultValue)
 }
 
-// WARNING: We cannot use the keyPrefix variable here: closures don't work because we serialize the function.
+// WARNING: We cannot use `keyPrefix` here: closures don't work because we serialize the function.
 const initializeChoiceGroup_SSR = `initializeChoiceGroup();${initializeChoiceGroup.toString()};`
 function initializeChoiceGroup() {
-  const groupsElements = document.querySelectorAll<HTMLDivElement>('[data-group-name]')
+  const groupsElements = document.querySelectorAll<HTMLDivElement>('[data-choice-group]')
   for (const groupEl of groupsElements) {
-    const groupName = groupEl.getAttribute('data-group-name')!
-    const selectedChoice = localStorage.getItem(`docpress:${groupName}`)
-    if (!selectedChoice) continue
-    const selectEl = groupEl.querySelector<HTMLSelectElement>(`.select-choice`)
-    if (selectEl) selectEl.value = selectedChoice
+    const choiceGroupName = groupEl.getAttribute('data-choice-group')!
+    const storageKey = `docpress:choice:${choiceGroupName}`
+    const selectedChoice = localStorage.getItem(storageKey)
+    if (selectedChoice) {
+      const selectEl = groupEl.querySelector<HTMLSelectElement>(`.select-choice`)!
+      const selectedIndex = [...selectEl.options].findIndex((option) => option.value === selectedChoice)
+      if (selectedIndex === -1) {
+        localStorage.removeItem(storageKey)
+      } else {
+        selectEl.value = selectedChoice
+      }
+    }
   }
 }

package/code-blocks/remarkChoiceGroup.ts

@@ -1,13 +1,11 @@
 export { remarkChoiceGroup }
 
-import type { Code, Root } from 'mdast'
+import type { Root } from 'mdast'
 import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
-import type { ContainerDirective } from 'mdast-util-directive'
+import type { ChoiceNode } from './utils/generateChoiceGroupCode.js'
 import { visit } from 'unist-util-visit'
 import { parseMetaString } from './rehypeMetaToProps.js'
-import { generateChoiceGroup } from './utils/generateChoiceGroup.js'
-
-type Node = Code | MdxJsxFlowElement | ContainerDirective
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
 
 function remarkChoiceGroup() {
   return function (tree: Root) {
@@ -18,13 +16,13 @@ function remarkChoiceGroup() {
         const { choice } = meta.props
         node.meta = meta.rest
 
-        if (choice) node.data ??= { choice }
+        if (choice) node.data ??= { customDataChoice: choice, customDataFilter: `code-${node.lang}` }
       }
       if (node.type === 'containerDirective' && node.name === 'Choice') {
         if (!node.attributes) return
         const { id: choice } = node.attributes
         if (choice) {
-          node.data ??= { choice }
+          node.data ??= { customDataChoice: choice, customDataFilter: node.type }
           node.attributes = {}
         }
       }
@@ -40,12 +38,12 @@ function remarkChoiceGroup() {
 
       const process = () => {
         if (start === -1 || start === end) return
-        const nodes = node.children.slice(start, end) as Node[]
-        const groupedNodes = groupByNodeType(nodes)
+        const nodes = node.children.slice(start, end) as ChoiceNode['children']
+        const choiceNodesFiltered = filterChoices(nodes)
         const replacements: MdxJsxFlowElement[] = []
 
-        for (const groupedNode of groupedNodes) {
-          const replacement = generateChoiceGroup(groupedNode)
+        for (const choiceNodes of choiceNodesFiltered) {
+          const replacement = generateChoiceGroupCode(choiceNodes)
 
           replacements.push(replacement)
           replaced.add(replacement)
@@ -65,7 +63,7 @@ function remarkChoiceGroup() {
           continue
         }
 
-        if (!child.data?.choice) {
+        if (!child.data?.customDataChoice) {
           process()
           continue
         }
@@ -78,35 +76,32 @@ function remarkChoiceGroup() {
   }
 }
 
-type NodeGroup = {
-  value: string
-  children: Node[]
-}
-
-function groupByNodeType(nodes: Node[]) {
-  const groupedNodes = new Set<NodeGroup[]>()
-  const filters = [...new Set(nodes.flat().map((node) => (node.type === 'code' ? node.lang! : node.name)))]
+function filterChoices(nodes: ChoiceNode['children']) {
+  const filteredChoices = new Set<ChoiceNode[]>()
+  const filters = [...new Set(nodes.flat().map((node) => node.data!.customDataFilter!))]
 
   filters.map((filter) => {
-    const nodesByChoice = new Map<string, Node[]>()
+    const nodesByChoice = new Map<string, ChoiceNode['children']>()
     nodes
-      .filter((node) => (node.type === 'code' ? node.lang! : node.name) === filter)
+      .filter((node) => node.data!.customDataFilter! === filter)
       .map((node) => {
-        const choice = node.data!.choice!
+        const choice = node.data!.customDataChoice!
         const nodes = nodesByChoice.get(choice) ?? []
+        node.data!.customDataChoice = undefined
         nodes.push(node)
-        node.data = {}
         nodesByChoice.set(choice, nodes)
       })
 
-    groupedNodes.add([...nodesByChoice].map(([name, nodes]) => ({ value: name, children: nodes })))
+    const choiceNodes = [...nodesByChoice].map(([name, nodes]) => ({ choiceValue: name, children: nodes }))
+    filteredChoices.add(choiceNodes)
   })
 
-  return [...groupedNodes]
+  return [...filteredChoices]
 }
 
 declare module 'mdast' {
   export interface Data {
-    choice?: string
+    customDataChoice?: string
+    customDataFilter?: string
   }
 }

package/code-blocks/remarkDetype.ts

@@ -6,6 +6,7 @@ import type { VFile } from '@mdx-js/mdx/internal-create-format-aware-processors'
 import { visit } from 'unist-util-visit'
 import { assertUsage } from '../utils/assert.js'
 import { parseMetaString } from './rehypeMetaToProps.js'
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
 import pc from '@brillout/picocolors'
 import module from 'node:module'
 // Cannot use `import { transform } from 'detype'` as it results in errors,
@@ -57,6 +58,9 @@ function transformYaml(node: CodeNode) {
   // Skip wrapping if the YAML code block hasn't changed
   if (codeBlockContentJs === codeBlock.value) return
 
+  const meta = parseMetaString(codeBlock.meta, ['choice'])
+  const { choice } = meta.props
+  codeBlock.meta = meta.rest
   const { position, ...rest } = codeBlock
 
   // Create a new code node for the JS version based on the modified YAML
@@ -65,19 +69,16 @@ function transformYaml(node: CodeNode) {
     value: codeBlockContentJs,
   }
 
-  // Wrap both the original YAML and `yamlJsCode` with <CodeSnippets>
-  const yamlContainer: MdxJsxFlowElement = {
-    type: 'mdxJsxFlowElement',
-    name: 'CodeSnippets',
-    children: [yamlJsCode, codeBlock],
-    attributes: [
-      {
-        name: 'hideToggle',
-        type: 'mdxJsxAttribute',
-      },
-    ],
-  }
-  parent.children.splice(index, 1, yamlContainer)
+  // Wrap both the original YAML and `yamlJsCode` with `<ChoiceGroup>`
+  const choiceNodes = [
+    { choiceValue: 'JavaScript', children: [yamlJsCode] },
+    { choiceValue: 'TypeScript', children: [codeBlock] },
+  ]
+  const replacement = generateChoiceGroupCode(choiceNodes)
+  replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
+  replacement.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' }
+
+  parent.children.splice(index, 1, replacement)
 }
 
 async function transformTsToJs(node: CodeNode, file: VFile) {
@@ -87,6 +88,9 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
   const { choice } = meta.props
   codeBlock.meta = meta.rest
 
+  codeBlock.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' }
+  if (choice === 'TypeScript') return
+
   let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value)
   let codeBlockContentJs = ''
 
@@ -127,9 +131,9 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
   // No wrapping needed if JS and TS code are still identical
   if (codeBlockContentJs === codeBlock.value) return
 
-  const { position, lang, ...rest } = codeBlock
-  const attributes: MdxJsxFlowElement['attributes'] = []
+  const { position, lang, data, ...rest } = codeBlock
 
+  const tsCode: Code = { ...rest, lang }
   const jsCode: Code = {
     ...rest,
     // The jsCode lang should be js|jsx|vue
@@ -137,25 +141,20 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
     value: codeBlockContentJs,
   }
 
-  // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
-  if (codeBlockReplacedJs === codeBlockContentJs) {
-    attributes.push({
-      type: 'mdxJsxAttribute',
-      name: 'hideToggle',
-    })
-  }
+  // Wrap both `tsCode` and `jsCode` with `<ChoiceGroup>`
+  const choiceNodes = [
+    { choiceValue: 'JavaScript', children: [jsCode] },
+    { choiceValue: 'TypeScript', children: [tsCode] },
+  ]
+  const replacement = generateChoiceGroupCode(choiceNodes)
 
-  // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
-  const container: MdxJsxFlowElement = {
-    type: 'mdxJsxFlowElement',
-    name: 'CodeSnippets',
-    children: [jsCode, codeBlock],
-    attributes,
+  // Add `hide` attribute (prop) to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
+  if (codeBlockReplacedJs === codeBlockContentJs) {
+    replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' })
   }
+  replacement.data ??= { ...data }
 
-  if (choice) container.data ??= { choice }
-
-  parent.children.splice(index, 1, container)
+  parent.children.splice(index, 1, replacement)
 }
 
 // Replace all '.ts' extensions with '.js'
@@ -170,8 +169,8 @@ function cleanUpCode(code: string, isJsCode: boolean = false) {
   return processMagicComments(code)
 }
 function processMagicComments(code: string) {
-  // @detype-replace DummyLayout Layout
-  const renameCommentRE = /^\s*\/\/\s@detype-replace\s([^ ]+) ([^ ]+)\n/gm
+  // @docpress-replace DummyLayout Layout
+  const renameCommentRE = /^\s*\/\/\s@docpress-replace\s([^ ]+) ([^ ]+)\n/gm
   const matches = Array.from(code.matchAll(renameCommentRE))
 
   if (matches.length) {
@@ -181,7 +180,7 @@ function processMagicComments(code: string) {
       code = code.split(fullMatch).join('').replaceAll(renameFrom, renameTo)
     }
   }
-  code = code.replaceAll('// @detype-uncomment ', '')
+  code = code.replaceAll('// @docpress-uncomment ', '')
 
   return code
 }

package/code-blocks/remarkPkgManager.ts

@@ -4,9 +4,9 @@ import type { Code, Root } from 'mdast'
 import { visit } from 'unist-util-visit'
 import convert from 'npm-to-yarn'
 import { parseMetaString } from './rehypeMetaToProps.js'
-import { generateChoiceGroup } from './utils/generateChoiceGroup.js'
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js'
 
-const PKG_MANAGERS = ['pnpm', 'yarn', 'bun'] as const
+const PKG_MANAGERS = ['pnpm', 'Bun', 'Yarn'] as const
 
 function remarkPkgManager() {
   return function (tree: Root) {
@@ -14,7 +14,6 @@ function remarkPkgManager() {
       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
-
       let choice: string | undefined = undefined
       const nodes = new Map<string, Code>()
 
@@ -24,6 +23,7 @@ function remarkPkgManager() {
         node.meta = meta.rest
       }
 
+      node.value = node.value.replaceAll('npm i ', 'npm install ')
       nodes.set('npm', node)
 
       for (const pm of PKG_MANAGERS) {
@@ -31,14 +31,14 @@ function remarkPkgManager() {
           type: node.type,
           lang: node.lang,
           meta: node.meta,
-          value: convert(node.value, pm),
+          value: convert(node.value, pm.toLowerCase() as 'pnpm' | 'bun' | 'yarn'),
         })
       }
 
-      const groupedNodes = [...nodes].map(([name, node]) => ({ value: name, children: [node] }))
-      const replacement = generateChoiceGroup(groupedNodes)
+      const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }))
+      const replacement = generateChoiceGroupCode(choiceNodes)
 
-      replacement.data ??= { choice }
+      replacement.data ??= { customDataChoice: choice, customDataFilter: replacement.type }
       parent.children.splice(index, 1, replacement)
     })
   }

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -0,0 +1,79 @@
+export { generateChoiceGroupCode }
+export type { ChoiceNode }
+
+import type { BlockContent, DefinitionContent } from 'mdast'
+import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
+
+type ChoiceNode = {
+  choiceValue: string
+  children: (BlockContent | DefinitionContent)[]
+}
+
+function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): 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',
+    value: {
+      type: 'mdxJsxAttributeValueExpression',
+      value: '',
+      data: {
+        estree: {
+          type: 'Program',
+          sourceType: 'module',
+          comments: [],
+          body: [
+            {
+              type: 'ExpressionStatement',
+              expression: {
+                type: 'ArrayExpression',
+                // @ts-ignore: Missing properties in type definition
+                elements,
+              },
+            },
+          ],
+        },
+      },
+    },
+  })
+
+  for (const choiceNode of choiceNodes) {
+    children.push({
+      type: 'mdxJsxFlowElement',
+      name: 'div',
+      attributes: [
+        { 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,
+    })
+  }
+
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'ChoiceGroup',
+    attributes,
+    children,
+  }
+}
+
+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')
+  )
+}

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

@@ -3,6 +3,7 @@ import type { Root } from 'mdast';
 declare function remarkChoiceGroup(): (tree: Root) => void;
 declare module 'mdast' {
     interface Data {
-        choice?: string;
+        customDataChoice?: string;
+        customDataFilter?: string;
     }
 }

package/dist/code-blocks/remarkChoiceGroup.js

@@ -1,7 +1,7 @@
 export { remarkChoiceGroup };
 import { visit } from 'unist-util-visit';
 import { parseMetaString } from './rehypeMetaToProps.js';
-import { generateChoiceGroup } from './utils/generateChoiceGroup.js';
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
 function remarkChoiceGroup() {
     return function (tree) {
         visit(tree, (node) => {
@@ -12,14 +12,14 @@ function remarkChoiceGroup() {
                 const { choice } = meta.props;
                 node.meta = meta.rest;
                 if (choice)
-                    node.data ??= { choice };
+                    node.data ??= { customDataChoice: choice, customDataFilter: `code-${node.lang}` };
             }
             if (node.type === 'containerDirective' && node.name === 'Choice') {
                 if (!node.attributes)
                     return;
                 const { id: choice } = node.attributes;
                 if (choice) {
-                    node.data ??= { choice };
+                    node.data ??= { customDataChoice: choice, customDataFilter: node.type };
                     node.attributes = {};
                 }
             }
@@ -36,10 +36,10 @@ function remarkChoiceGroup() {
                 if (start === -1 || start === end)
                     return;
                 const nodes = node.children.slice(start, end);
-                const groupedNodes = groupByNodeType(nodes);
+                const choiceNodesFiltered = filterChoices(nodes);
                 const replacements = [];
-                for (const groupedNode of groupedNodes) {
-                    const replacement = generateChoiceGroup(groupedNode);
+                for (const choiceNodes of choiceNodesFiltered) {
+                    const replacement = generateChoiceGroupCode(choiceNodes);
                     replacements.push(replacement);
                     replaced.add(replacement);
                 }
@@ -53,7 +53,7 @@ function remarkChoiceGroup() {
                     process();
                     continue;
                 }
-                if (!child.data?.choice) {
+                if (!child.data?.customDataChoice) {
                     process();
                     continue;
                 }
@@ -64,21 +64,22 @@ function remarkChoiceGroup() {
         });
     };
 }
-function groupByNodeType(nodes) {
-    const groupedNodes = new Set();
-    const filters = [...new Set(nodes.flat().map((node) => (node.type === 'code' ? node.lang : node.name)))];
+function filterChoices(nodes) {
+    const filteredChoices = new Set();
+    const filters = [...new Set(nodes.flat().map((node) => node.data.customDataFilter))];
     filters.map((filter) => {
         const nodesByChoice = new Map();
         nodes
-            .filter((node) => (node.type === 'code' ? node.lang : node.name) === filter)
+            .filter((node) => node.data.customDataFilter === filter)
             .map((node) => {
-            const choice = node.data.choice;
+            const choice = node.data.customDataChoice;
             const nodes = nodesByChoice.get(choice) ?? [];
+            node.data.customDataChoice = undefined;
             nodes.push(node);
-            node.data = {};
             nodesByChoice.set(choice, nodes);
         });
-        groupedNodes.add([...nodesByChoice].map(([name, nodes]) => ({ value: name, children: nodes })));
+        const choiceNodes = [...nodesByChoice].map(([name, nodes]) => ({ choiceValue: name, children: nodes }));
+        filteredChoices.add(choiceNodes);
     });
-    return [...groupedNodes];
+    return [...filteredChoices];
 }

package/dist/code-blocks/remarkDetype.js

@@ -2,6 +2,7 @@ export { remarkDetype };
 import { visit } from 'unist-util-visit';
 import { assertUsage } from '../utils/assert.js';
 import { parseMetaString } from './rehypeMetaToProps.js';
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
 import pc from '@brillout/picocolors';
 import module from 'node:module';
 // Cannot use `import { transform } from 'detype'` as it results in errors,
@@ -43,25 +44,24 @@ function transformYaml(node) {
     // Skip wrapping if the YAML code block hasn't changed
     if (codeBlockContentJs === codeBlock.value)
         return;
+    const meta = parseMetaString(codeBlock.meta, ['choice']);
+    const { choice } = meta.props;
+    codeBlock.meta = meta.rest;
     const { position, ...rest } = codeBlock;
     // Create a new code node for the JS version based on the modified YAML
     const yamlJsCode = {
         ...rest,
         value: codeBlockContentJs,
     };
-    // Wrap both the original YAML and `yamlJsCode` with <CodeSnippets>
-    const yamlContainer = {
-        type: 'mdxJsxFlowElement',
-        name: 'CodeSnippets',
-        children: [yamlJsCode, codeBlock],
-        attributes: [
-            {
-                name: 'hideToggle',
-                type: 'mdxJsxAttribute',
-            },
-        ],
-    };
-    parent.children.splice(index, 1, yamlContainer);
+    // Wrap both the original YAML and `yamlJsCode` with `<ChoiceGroup>`
+    const choiceNodes = [
+        { choiceValue: 'JavaScript', children: [yamlJsCode] },
+        { choiceValue: 'TypeScript', children: [codeBlock] },
+    ];
+    const replacement = generateChoiceGroupCode(choiceNodes);
+    replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
+    replacement.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' };
+    parent.children.splice(index, 1, replacement);
 }
 async function transformTsToJs(node, file) {
     const { codeBlock, index, parent } = node;
@@ -69,6 +69,9 @@ async function transformTsToJs(node, file) {
     const maxWidth = Number(meta.props['max-width']);
     const { choice } = meta.props;
     codeBlock.meta = meta.rest;
+    codeBlock.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' };
+    if (choice === 'TypeScript')
+        return;
     let codeBlockReplacedJs = replaceFileNameSuffixes(codeBlock.value);
     let codeBlockContentJs = '';
     // Remove TypeScript from the TS/TSX/Vue code node
@@ -105,31 +108,26 @@ async function transformTsToJs(node, file) {
     // No wrapping needed if JS and TS code are still identical
     if (codeBlockContentJs === codeBlock.value)
         return;
-    const { position, lang, ...rest } = codeBlock;
-    const attributes = [];
+    const { position, lang, data, ...rest } = codeBlock;
+    const tsCode = { ...rest, lang };
     const jsCode = {
         ...rest,
         // The jsCode lang should be js|jsx|vue
         lang: lang.replace('t', 'j'),
         value: codeBlockContentJs,
     };
-    // Add `hideToggle` attribute (prop) to `CodeSnippets` if the only change was replacing `.ts` with `.js`
+    // Wrap both `tsCode` and `jsCode` with `<ChoiceGroup>`
+    const choiceNodes = [
+        { choiceValue: 'JavaScript', children: [jsCode] },
+        { choiceValue: 'TypeScript', children: [tsCode] },
+    ];
+    const replacement = generateChoiceGroupCode(choiceNodes);
+    // Add `hide` attribute (prop) to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
     if (codeBlockReplacedJs === codeBlockContentJs) {
-        attributes.push({
-            type: 'mdxJsxAttribute',
-            name: 'hideToggle',
-        });
+        replacement.attributes.push({ type: 'mdxJsxAttribute', name: 'hide' });
     }
-    // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
-    const container = {
-        type: 'mdxJsxFlowElement',
-        name: 'CodeSnippets',
-        children: [jsCode, codeBlock],
-        attributes,
-    };
-    if (choice)
-        container.data ??= { choice };
-    parent.children.splice(index, 1, container);
+    replacement.data ??= { ...data };
+    parent.children.splice(index, 1, replacement);
 }
 // Replace all '.ts' extensions with '.js'
 function replaceFileNameSuffixes(codeBlockValue) {
@@ -142,8 +140,8 @@ function cleanUpCode(code, isJsCode = false) {
     return processMagicComments(code);
 }
 function processMagicComments(code) {
-    // @detype-replace DummyLayout Layout
-    const renameCommentRE = /^\s*\/\/\s@detype-replace\s([^ ]+) ([^ ]+)\n/gm;
+    // @docpress-replace DummyLayout Layout
+    const renameCommentRE = /^\s*\/\/\s@docpress-replace\s([^ ]+) ([^ ]+)\n/gm;
     const matches = Array.from(code.matchAll(renameCommentRE));
     if (matches.length) {
         for (let i = matches.length - 1; i >= 0; i--) {
@@ -152,7 +150,7 @@ function processMagicComments(code) {
             code = code.split(fullMatch).join('').replaceAll(renameFrom, renameTo);
         }
     }
-    code = code.replaceAll('// @detype-uncomment ', '');
+    code = code.replaceAll('// @docpress-uncomment ', '');
     return code;
 }
 /**

package/dist/code-blocks/remarkPkgManager.js

@@ -2,8 +2,8 @@ export { remarkPkgManager };
 import { visit } from 'unist-util-visit';
 import convert from 'npm-to-yarn';
 import { parseMetaString } from './rehypeMetaToProps.js';
-import { generateChoiceGroup } from './utils/generateChoiceGroup.js';
-const PKG_MANAGERS = ['pnpm', 'yarn', 'bun'];
+import { generateChoiceGroupCode } from './utils/generateChoiceGroupCode.js';
+const PKG_MANAGERS = ['pnpm', 'Bun', 'Yarn'];
 function remarkPkgManager() {
     return function (tree) {
         visit(tree, 'code', (node, index, parent) => {
@@ -20,18 +20,19 @@ function remarkPkgManager() {
                 choice = meta.props['choice'];
                 node.meta = meta.rest;
             }
+            node.value = node.value.replaceAll('npm i ', 'npm install ');
             nodes.set('npm', node);
             for (const pm of PKG_MANAGERS) {
                 nodes.set(pm, {
                     type: node.type,
                     lang: node.lang,
                     meta: node.meta,
-                    value: convert(node.value, pm),
+                    value: convert(node.value, pm.toLowerCase()),
                 });
             }
-            const groupedNodes = [...nodes].map(([name, node]) => ({ value: name, children: [node] }));
-            const replacement = generateChoiceGroup(groupedNodes);
-            replacement.data ??= { choice };
+            const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }));
+            const replacement = generateChoiceGroupCode(choiceNodes);
+            replacement.data ??= { customDataChoice: choice, customDataFilter: replacement.type };
             parent.children.splice(index, 1, replacement);
         });
     };

package/dist/code-blocks/utils/generateChoiceGroupCode.d.ts

@@ -0,0 +1,9 @@
+export { generateChoiceGroupCode };
+export type { ChoiceNode };
+import type { BlockContent, DefinitionContent } from 'mdast';
+import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
+type ChoiceNode = {
+    choiceValue: string;
+    children: (BlockContent | DefinitionContent)[];
+};
+declare function generateChoiceGroupCode(choiceNodes: ChoiceNode[]): MdxJsxFlowElement;

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

@@ -0,0 +1,63 @@
+export { generateChoiceGroupCode };
+function generateChoiceGroupCode(choiceNodes) {
+    const attributes = [];
+    const children = [];
+    const elements = choiceNodes.map((choiceNode) => ({
+        type: 'Literal',
+        value: findVisibleJsDropdown(choiceNode.children[0])
+            ? `${choiceNode.choiceValue}:jsDropdown`
+            : choiceNode.choiceValue,
+    }));
+    attributes.push({
+        type: 'mdxJsxAttribute',
+        name: 'choices',
+        value: {
+            type: 'mdxJsxAttributeValueExpression',
+            value: '',
+            data: {
+                estree: {
+                    type: 'Program',
+                    sourceType: 'module',
+                    comments: [],
+                    body: [
+                        {
+                            type: 'ExpressionStatement',
+                            expression: {
+                                type: 'ArrayExpression',
+                                // @ts-ignore: Missing properties in type definition
+                                elements,
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    });
+    for (const choiceNode of choiceNodes) {
+        children.push({
+            type: 'mdxJsxFlowElement',
+            name: 'div',
+            attributes: [
+                { 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,
+        });
+    }
+    return {
+        type: 'mdxJsxFlowElement',
+        name: 'ChoiceGroup',
+        attributes,
+        children,
+    };
+}
+function findVisibleJsDropdown(node) {
+    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'));
+}

package/index.ts

@@ -2,7 +2,6 @@
 /* PUBLIC */
 /**********/
 export { CodeBlockTransformer, Link, RepoLink, FileAdded, FileRemoved, ImportMeta, Emoji } from './components'
-export { TypescriptOnly } from './code-blocks/components/CodeSnippets'
 export { MenuToggle } from './Layout'
 export * from './components/Note'
 export * from './icons/index'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.16.9",
+  "version": "0.16.11",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",

package/code-blocks/components/CodeSnippets.css

@@ -1,75 +0,0 @@
-.code-snippets {
-  position: relative;
-
-  &:hover {
-    .copy-button,
-    .code-lang-toggle {
-      opacity: 1;
-    }
-  }
-
-  /* Language toggle styles */
-  .code-lang-toggle {
-    position: absolute !important;
-    top: 10px;
-    right: 42px;
-    z-index: 3;
-
-    /* Checkbox appearance reset */
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-
-    margin: 0;
-    padding: 0 4px;
-    height: 25px;
-    width: 59px;
-    display: flex;
-    background-color: #f7f7f7;
-    opacity: 0;
-    transition: opacity 0.5s ease-in-out, background-color 0.4s ease-in-out;
-
-    &:not(:hover) {
-      background-color: #eee;
-    }
-
-    /* Toggle Labels */
-    &::before,
-    &::after {
-      font-family: 'Inter', sans-serif;
-      width: 24px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    &::before {
-      content: 'JS';
-    }
-
-    &::after {
-      content: 'TS';
-      border-left: none;
-      opacity: 0.3;
-    }
-
-    &:checked {
-      &::before {
-        opacity: 0.3;
-      }
-
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  /* Code block visibility based on toggle */
-  &:has(.code-lang-toggle:checked) figure:first-of-type {
-    display: none;
-  }
-
-  &:has(.code-lang-toggle:not(:checked)) figure:last-of-type {
-    display: none;
-  }
-}

package/code-blocks/components/CodeSnippets.tsx

@@ -1,41 +0,0 @@
-// Public
-export { TypescriptOnly }
-
-// Internal
-export { CodeSnippets }
-
-import React from 'react'
-import { useSelectCodeLang } from '../hooks/useSelectCodeLang'
-import { useRestoreScroll } from '../hooks/useRestoreScroll'
-import './CodeSnippets.css'
-
-/** Only show if TypeScript is selected */
-function TypescriptOnly({ children }: { children: React.ReactNode }) {
-  const [codeLangSelected] = useSelectCodeLang()
-  return <div style={{ display: codeLangSelected === 'ts' ? 'block' : 'none' }}>{children}</div>
-}
-
-function CodeSnippets({ children, hideToggle = false }: { children: React.ReactNode; hideToggle: boolean }) {
-  const [codeLangSelected, selectCodeLang] = useSelectCodeLang()
-  const prevPositionRef = useRestoreScroll([codeLangSelected])
-
-  return (
-    <div className="code-snippets">
-      <input
-        type="checkbox"
-        name="code-lang-toggle"
-        className="code-lang-toggle raised"
-        style={{ display: hideToggle ? 'none' : undefined }}
-        checked={codeLangSelected === 'ts'}
-        onChange={onChange}
-        title="Toggle language"
-      />
-      {children}
-    </div>
-  )
-  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const element = e.target
-    prevPositionRef.current = { top: element.getBoundingClientRect().top, el: element }
-    selectCodeLang(element.checked ? 'ts' : 'js')
-  }
-}

package/code-blocks/hooks/useSelectCodeLang.ts

@@ -1,25 +0,0 @@
-export { useSelectCodeLang }
-export { initializeJsToggle_SSR }
-
-import { useLocalStorage } from './useLocalStorage'
-
-const storageKey = 'docpress:code-lang'
-const codeLangDefaultSsr = 'ts'
-const codeLangDefaultClient = 'js'
-
-function useSelectCodeLang() {
-  return useLocalStorage(storageKey, codeLangDefaultClient, codeLangDefaultSsr)
-}
-
-// WARNING: We cannot use the variables storageKey nor codeLangDefaultClient here: closures
-// don't work because we serialize the function.
-// WARNING: We cannot use TypeScript here, for the same reason.
-const initializeJsToggle_SSR = `initializeJsToggle();${initializeJsToggle.toString()};`
-function initializeJsToggle() {
-  const codeLangSelected = localStorage.getItem('docpress:code-lang') ?? 'js'
-  if (codeLangSelected === 'js') {
-    const inputs = document.querySelectorAll('.code-lang-toggle')
-    // @ts-ignore
-    for (const input of inputs) input.checked = false
-  }
-}

package/code-blocks/utils/generateChoiceGroup.ts

@@ -1,87 +0,0 @@
-export { generateChoiceGroup }
-export type { CodeChoice }
-
-import type { BlockContent, DefinitionContent } from 'mdast'
-import type { MdxJsxAttribute, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
-
-type CodeChoice = {
-  value: string
-  children: (BlockContent | DefinitionContent)[]
-}
-
-function generateChoiceGroup(codeChoices: CodeChoice[]): MdxJsxFlowElement {
-  const attributes: MdxJsxAttribute[] = []
-  const children: MdxJsxFlowElement[] = []
-
-  attributes.push({
-    type: 'mdxJsxAttribute',
-    name: 'choices',
-    value: {
-      type: 'mdxJsxAttributeValueExpression',
-      value: '',
-      data: {
-        estree: {
-          type: 'Program',
-          sourceType: 'module',
-          comments: [],
-          body: [
-            {
-              type: 'ExpressionStatement',
-              expression: {
-                type: 'ArrayExpression',
-                // @ts-ignore: Missing properties in type definition
-                elements: codeChoices.map((choice) => ({
-                  type: 'Literal',
-                  value: choice.value,
-                })),
-              },
-            },
-          ],
-        },
-      },
-    },
-  })
-
-  for (const codeChoice of codeChoices) {
-    const classNames = ['choice']
-    if (findHasJsToggle(codeChoice.children[0])) {
-      classNames.push('has-toggle')
-    }
-
-    children.push({
-      type: 'mdxJsxFlowElement',
-      name: 'div',
-      attributes: [
-        { type: 'mdxJsxAttribute', name: 'id', value: codeChoice.value },
-        { type: 'mdxJsxAttribute', name: 'className', value: classNames.join(' ') },
-      ],
-      children: codeChoice.children.every((node) => node.type === 'containerDirective')
-        ? codeChoice.children.flatMap((node) => [...node.children])
-        : codeChoice.children,
-    })
-  }
-
-  return {
-    type: 'mdxJsxFlowElement',
-    name: 'ChoiceGroup',
-    attributes,
-    children,
-  }
-}
-
-function findHasJsToggle(node: BlockContent | DefinitionContent) {
-  if (node.type === 'containerDirective' && node.name === 'Choice') {
-    return (
-      node.children[0].type === 'mdxJsxFlowElement' &&
-      node.children[0].name === 'CodeSnippets' &&
-      node.children[0].attributes.every(
-        (attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle',
-      )
-    )
-  }
-  return (
-    node.type === 'mdxJsxFlowElement' &&
-    node.name === 'CodeSnippets' &&
-    node.attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle')
-  )
-}

package/dist/code-blocks/utils/generateChoiceGroup.d.ts

@@ -1,9 +0,0 @@
-export { generateChoiceGroup };
-export type { CodeChoice };
-import type { BlockContent, DefinitionContent } from 'mdast';
-import type { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
-type CodeChoice = {
-    value: string;
-    children: (BlockContent | DefinitionContent)[];
-};
-declare function generateChoiceGroup(codeChoices: CodeChoice[]): MdxJsxFlowElement;

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

@@ -1,66 +0,0 @@
-export { generateChoiceGroup };
-function generateChoiceGroup(codeChoices) {
-    const attributes = [];
-    const children = [];
-    attributes.push({
-        type: 'mdxJsxAttribute',
-        name: 'choices',
-        value: {
-            type: 'mdxJsxAttributeValueExpression',
-            value: '',
-            data: {
-                estree: {
-                    type: 'Program',
-                    sourceType: 'module',
-                    comments: [],
-                    body: [
-                        {
-                            type: 'ExpressionStatement',
-                            expression: {
-                                type: 'ArrayExpression',
-                                // @ts-ignore: Missing properties in type definition
-                                elements: codeChoices.map((choice) => ({
-                                    type: 'Literal',
-                                    value: choice.value,
-                                })),
-                            },
-                        },
-                    ],
-                },
-            },
-        },
-    });
-    for (const codeChoice of codeChoices) {
-        const classNames = ['choice'];
-        if (findHasJsToggle(codeChoice.children[0])) {
-            classNames.push('has-toggle');
-        }
-        children.push({
-            type: 'mdxJsxFlowElement',
-            name: 'div',
-            attributes: [
-                { type: 'mdxJsxAttribute', name: 'id', value: codeChoice.value },
-                { type: 'mdxJsxAttribute', name: 'className', value: classNames.join(' ') },
-            ],
-            children: codeChoice.children.every((node) => node.type === 'containerDirective')
-                ? codeChoice.children.flatMap((node) => [...node.children])
-                : codeChoice.children,
-        });
-    }
-    return {
-        type: 'mdxJsxFlowElement',
-        name: 'ChoiceGroup',
-        attributes,
-        children,
-    };
-}
-function findHasJsToggle(node) {
-    if (node.type === 'containerDirective' && node.name === 'Choice') {
-        return (node.children[0].type === 'mdxJsxFlowElement' &&
-            node.children[0].name === 'CodeSnippets' &&
-            node.children[0].attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle'));
-    }
-    return (node.type === 'mdxJsxFlowElement' &&
-        node.name === 'CodeSnippets' &&
-        node.attributes.every((attribute) => attribute.type !== 'mdxJsxAttribute' || attribute.name !== 'hideToggle'));
-}