@brillout/docpress 0.16.35 → 0.16.37

package/code-blocks/components/ChoiceGroup.css

@@ -10,7 +10,6 @@
     display: flex;
     flex-direction: row-reverse;
     gap: 2px;
-    z-index: 3;
     top: var(--top-position);
     right: 42px;
   }
@@ -18,6 +17,7 @@
   .choice-select {
     background: #eee;
     font-size: 13.3333px;
+    z-index: 3;
 
     -webkit-user-select: none; /* Safari */
     -moz-user-select: none; /* Firefox */
@@ -58,6 +58,7 @@
   .choice-select[aria-expanded='true'] {
     overflow: visible;
     border-width: 0;
+    z-index: 5;
 
     .choice-select__list {
       border-style: solid;

package/code-blocks/components/ChoiceGroup.tsx

@@ -109,7 +109,7 @@ function ChoiceGroup({ children, choiceGroup, parentChoiceGroup }: ChoiceGroupPr
         ))}
       </select>
       {children}
-      {lvl === 0 && (
+      {lvl === 0 && !choiceGroup.hidden && (
         <div className={`choice-group__selects`}>
           {choiceGroupAll
             .slice()

package/code-blocks/remarkChoiceGroup.ts

@@ -16,7 +16,10 @@ function remarkChoiceGroup() {
         const { choice } = meta.props
         node.meta = meta.rest
 
-        if (choice) node.data ??= { customDataChoice: choice, customDataFilter: `code-${node.lang}` }
+        if (choice) {
+          const filter = ['jsx', 'tsx', 'vue'].includes(node.lang ?? '') ? 'code-component' : `code-${node.lang}`
+          node.data ??= { customDataChoice: choice, customDataFilter: filter }
+        }
       }
       if (node.type === 'containerDirective' && node.name === 'Choice') {
         if (!node.attributes) return
@@ -28,9 +31,8 @@ function remarkChoiceGroup() {
       }
     })
 
-    const replaced = new WeakSet()
     visit(tree, (node) => {
-      if (!('children' in node) || replaced.has(node)) return 'skip'
+      if (!('children' in node) || node.data?.customDataIsVisited) return 'skip'
 
       let start = -1
       let end = 0
@@ -43,9 +45,10 @@ function remarkChoiceGroup() {
 
         for (const choiceNodes of choiceNodesFiltered) {
           const replacement = generateChoiceGroupCode(choiceNodes, node)
+          replacement.data ??= {}
+          replacement.data.customDataIsVisited = true
           replacements.push(replacement)
         }
-        replaced.add(replacements)
 
         node.children.splice(start, end - start, ...replacements)
 
@@ -56,7 +59,7 @@ function remarkChoiceGroup() {
       for (; end < node.children.length; end++) {
         const child = node.children[end]!
 
-        if (!['code', 'mdxJsxFlowElement', 'containerDirective'].includes(child.type)) {
+        if (!['code', 'containerDirective'].includes(child.type)) {
           process()
           continue
         }
@@ -85,7 +88,6 @@ function filterChoices(nodes: ChoiceNode['children']) {
       .map((node) => {
         const choice = node.data!.customDataChoice!
         const nodes = nodesByChoice.get(choice) ?? []
-        node.data!.customDataChoice = undefined
         nodes.push(node)
         nodesByChoice.set(choice, nodes)
       })
@@ -99,6 +101,7 @@ function filterChoices(nodes: ChoiceNode['children']) {
 
 declare module 'mdast' {
   export interface Data {
+    customDataIsVisited?: boolean
     customDataChoice?: string
     customDataFilter?: string
     customDataParentChoiceGroup?: {

package/code-blocks/remarkDetype.ts

@@ -33,6 +33,9 @@ function remarkDetype() {
       // Skip if 'ts-only' meta is present
       if (node.meta?.includes('ts-only')) return
 
+      // Skip if 'customDataChoice' is 'TypeScript'
+      if (node.data?.customDataChoice === 'TypeScript') return
+
       // Collect this node for post-processing
       code_nodes.push({ codeBlock: node, index, parent })
     })
@@ -54,9 +57,6 @@ 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
@@ -71,21 +71,16 @@ function transformYaml(node: CodeNode) {
     { choiceValue: 'TypeScript', children: [codeBlock] },
   ]
   const replacement = generateChoiceGroupCode(choiceNodes, parent, true)
-  replacement.data ??= { customDataChoice: choice, customDataFilter: 'codeLang' }
 
   parent.children.splice(index, 1, replacement)
 }
 
 async function transformTsToJs(node: CodeNode, file: VFile) {
   const { codeBlock, index, parent } = node
-  const meta = parseMetaString(codeBlock.meta, ['max-width', 'choice'])
+  const meta = parseMetaString(codeBlock.meta, ['max-width'])
   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 = ''
 
@@ -126,7 +121,7 @@ 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, data, ...rest } = codeBlock
+  const { position, lang, ...rest } = codeBlock
 
   const tsCode: Code = { ...rest, lang }
   const jsCode: Code = {
@@ -145,8 +140,6 @@ async function transformTsToJs(node: CodeNode, file: VFile) {
   const hide = codeBlockReplacedJs === codeBlockContentJs
   const replacement = generateChoiceGroupCode(choiceNodes, parent, hide)
 
-  replacement.data ??= { ...data }
-
   parent.children.splice(index, 1, replacement)
 }
 

package/code-blocks/remarkPkgManager.ts

@@ -4,7 +4,6 @@ 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'
@@ -25,15 +24,8 @@ function remarkPkgManager() {
         }. 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>()
 
-      if (node.meta) {
-        const meta = parseMetaString(node.meta, ['choice'])
-        choice = meta.props['choice']
-        node.meta = meta.rest
-      }
-
       node.value = node.value.replaceAll('npm i ', 'npm install ')
       nodes.set('npm', node)
 
@@ -49,7 +41,6 @@ function remarkPkgManager() {
       const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }))
       const replacement = generateChoiceGroupCode(choiceNodes, parent)
 
-      replacement.data ??= { customDataChoice: choice, customDataFilter: replacement.type }
       parent.children.splice(index, 1, replacement)
     })
   }

package/code-blocks/utils/generateChoiceGroupCode.ts

@@ -25,6 +25,11 @@ const CHOICES_BUILT_IN: Record<string, { choices: string[]; default: string }> =
 
 function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide: boolean = false): MdxJsxFlowElement {
   let lvl: number = 0
+  const customHidden = choiceNodes.some((node) =>
+    node.children.some((node) => node.type === 'containerDirective' && node.children[0]!.type !== 'code'),
+  )
+  const hidden = hide || customHidden
+
   const { choiceGroup, mergedChoiceNodes } = resolveChoiceGroupNodes(choiceNodes)
   const attributes: MdxJsxAttribute[] = []
   const children: MdxJsxFlowElement[] = []
@@ -66,7 +71,7 @@ function generateChoiceGroupCode(choiceNodes: ChoiceNode[], parent: Parent, hide
   }
 
   attributes.push(
-    expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hide, lvl }),
+    expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hidden, lvl }),
   )
 
   const choiceGroupNode: MdxJsxFlowElement = {

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 {
+        customDataIsVisited?: boolean;
         customDataChoice?: string;
         customDataFilter?: string;
         customDataParentChoiceGroup?: {

package/dist/code-blocks/remarkChoiceGroup.js

@@ -11,8 +11,10 @@ function remarkChoiceGroup() {
                 const meta = parseMetaString(node.meta, ['choice']);
                 const { choice } = meta.props;
                 node.meta = meta.rest;
-                if (choice)
-                    node.data ?? (node.data = { customDataChoice: choice, customDataFilter: `code-${node.lang}` });
+                if (choice) {
+                    const filter = ['jsx', 'tsx', 'vue'].includes(node.lang ?? '') ? 'code-component' : `code-${node.lang}`;
+                    node.data ?? (node.data = { customDataChoice: choice, customDataFilter: filter });
+                }
             }
             if (node.type === 'containerDirective' && node.name === 'Choice') {
                 if (!node.attributes)
@@ -24,9 +26,8 @@ function remarkChoiceGroup() {
                 }
             }
         });
-        const replaced = new WeakSet();
         visit(tree, (node) => {
-            if (!('children' in node) || replaced.has(node))
+            if (!('children' in node) || node.data?.customDataIsVisited)
                 return 'skip';
             let start = -1;
             let end = 0;
@@ -38,16 +39,17 @@ function remarkChoiceGroup() {
                 const replacements = [];
                 for (const choiceNodes of choiceNodesFiltered) {
                     const replacement = generateChoiceGroupCode(choiceNodes, node);
+                    replacement.data ?? (replacement.data = {});
+                    replacement.data.customDataIsVisited = true;
                     replacements.push(replacement);
                 }
-                replaced.add(replacements);
                 node.children.splice(start, end - start, ...replacements);
                 end = start;
                 start = -1;
             };
             for (; end < node.children.length; end++) {
                 const child = node.children[end];
-                if (!['code', 'mdxJsxFlowElement', 'containerDirective'].includes(child.type)) {
+                if (!['code', 'containerDirective'].includes(child.type)) {
                     process();
                     continue;
                 }
@@ -72,7 +74,6 @@ function filterChoices(nodes) {
             .map((node) => {
             const choice = node.data.customDataChoice;
             const nodes = nodesByChoice.get(choice) ?? [];
-            node.data.customDataChoice = undefined;
             nodes.push(node);
             nodesByChoice.set(choice, nodes);
         });

package/dist/code-blocks/remarkDetype.js

@@ -22,6 +22,9 @@ function remarkDetype() {
             // Skip if 'ts-only' meta is present
             if (node.meta?.includes('ts-only'))
                 return;
+            // Skip if 'customDataChoice' is 'TypeScript'
+            if (node.data?.customDataChoice === 'TypeScript')
+                return;
             // Collect this node for post-processing
             code_nodes.push({ codeBlock: node, index, parent });
         });
@@ -41,9 +44,6 @@ 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 = {
@@ -56,18 +56,13 @@ function transformYaml(node) {
         { choiceValue: 'TypeScript', children: [codeBlock] },
     ];
     const replacement = generateChoiceGroupCode(choiceNodes, parent, true);
-    replacement.data ?? (replacement.data = { customDataChoice: choice, customDataFilter: 'codeLang' });
     parent.children.splice(index, 1, replacement);
 }
 async function transformTsToJs(node, file) {
     const { codeBlock, index, parent } = node;
-    const meta = parseMetaString(codeBlock.meta, ['max-width', 'choice']);
+    const meta = parseMetaString(codeBlock.meta, ['max-width']);
     const maxWidth = Number(meta.props['max-width']);
-    const { choice } = meta.props;
     codeBlock.meta = meta.rest;
-    codeBlock.data ?? (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
@@ -104,7 +99,7 @@ async function transformTsToJs(node, file) {
     // No wrapping needed if JS and TS code are still identical
     if (codeBlockContentJs === codeBlock.value)
         return;
-    const { position, lang, data, ...rest } = codeBlock;
+    const { position, lang, ...rest } = codeBlock;
     const tsCode = { ...rest, lang };
     const jsCode = {
         ...rest,
@@ -120,7 +115,6 @@ async function transformTsToJs(node, file) {
     // Add `hide` prop to `<ChoiceGroup>` if the only change was replacing `.ts` with `.js`
     const hide = codeBlockReplacedJs === codeBlockContentJs;
     const replacement = generateChoiceGroupCode(choiceNodes, parent, hide);
-    replacement.data ?? (replacement.data = { ...data });
     parent.children.splice(index, 1, replacement);
 }
 // Replace all '.ts' extensions with '.js'

package/dist/code-blocks/remarkPkgManager.js

@@ -1,7 +1,6 @@
 export { remarkPkgManager };
 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';
@@ -18,13 +17,7 @@ function remarkPkgManager() {
             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();
-            if (node.meta) {
-                const meta = parseMetaString(node.meta, ['choice']);
-                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) {
@@ -37,7 +30,6 @@ function remarkPkgManager() {
             }
             const choiceNodes = [...nodes].map(([name, node]) => ({ choiceValue: name, children: [node] }));
             const replacement = generateChoiceGroupCode(choiceNodes, parent);
-            replacement.data ?? (replacement.data = { customDataChoice: choice, customDataFilter: replacement.type });
             parent.children.splice(index, 1, replacement);
         });
     };

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

@@ -14,6 +14,8 @@ const CHOICES_BUILT_IN = {
 };
 function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
     let lvl = 0;
+    const customHidden = choiceNodes.some((node) => node.children.some((node) => node.type === 'containerDirective' && node.children[0].type !== 'code'));
+    const hidden = hide || customHidden;
     const { choiceGroup, mergedChoiceNodes } = resolveChoiceGroupNodes(choiceNodes);
     const attributes = [];
     const children = [];
@@ -49,7 +51,7 @@ function generateChoiceGroupCode(choiceNodes, parent, hide = false) {
         lvl = parentLvl + 1;
         parent.data.customDataParentChoiceGroup = undefined;
     }
-    attributes.push(expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hide, lvl }));
+    attributes.push(expressionToAttribute('choiceGroup', { ...choiceGroup, hidden: choiceNodes.length === 1 || hidden, lvl }));
     const choiceGroupNode = {
         type: 'mdxJsxFlowElement',
         name: 'ChoiceGroup',

package/package.json

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