@brillout/docpress 0.15.10 → 0.15.11

package/dist/parsePageSections.js

@@ -1,66 +1,26 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 export { parsePageSections };
 import { assert } from './utils/assert.js';
 import { determineSectionUrlHash } from './utils/determineSectionUrlHash.js';
 import os from 'os';
 function parsePageSections() {
-    var _this = this;
     return {
         name: '@brillout/docpress:parsePageSections',
         enforce: 'pre',
-        transform: function (code, id) { return __awaiter(_this, void 0, void 0, function () {
-            var codeNew;
-            return __generator(this, function (_a) {
-                if (!id.endsWith('+Page.mdx')) {
-                    return [2 /*return*/];
-                }
-                codeNew = transform(code);
-                return [2 /*return*/, codeNew];
-            });
-        }); },
+        transform: async (code, id) => {
+            if (!id.endsWith('+Page.mdx')) {
+                return;
+            }
+            const codeNew = transform(code);
+            return codeNew;
+        },
     };
 }
 function transform(code) {
-    var pageSections = [];
-    var isCodeBlock = false;
-    var codeNew = code
+    const pageSections = [];
+    let isCodeBlock = false;
+    let codeNew = code
         .split('\n')
-        .map(function (line) {
+        .map((line) => {
         // Skip code blocks, e.g.
         // ~~~md
         // # Markdown Example
@@ -78,51 +38,50 @@ function transform(code) {
         || line.startsWith('<h2')
         */
         ) {
-            var _a = parsePageSection(line), pageSectionId = _a.pageSectionId, pageSectionLevel = _a.pageSectionLevel, pageSectionTitle = _a.pageSectionTitle, headingHtml = _a.headingHtml;
-            pageSections.push({ pageSectionId: pageSectionId, pageSectionLevel: pageSectionLevel, pageSectionTitle: pageSectionTitle });
+            const { pageSectionId, pageSectionLevel, pageSectionTitle, headingHtml } = parsePageSection(line);
+            pageSections.push({ pageSectionId, pageSectionLevel, pageSectionTitle });
             return headingHtml;
         }
         return line;
     })
         .join('\n');
-    var exportCode = "export const pageSectionsExport = [".concat(pageSections
-        .map(function (pageSection) { return JSON.stringify(pageSection); })
-        .join(', '), "];");
-    codeNew += "\n\n".concat(exportCode, "\n");
+    const exportCode = `export const pageSectionsExport = [${pageSections
+        .map((pageSection) => JSON.stringify(pageSection))
+        .join(', ')}];`;
+    codeNew += `\n\n${exportCode}\n`;
     return codeNew;
 }
 function parsePageSection(line) {
-    var _a;
-    var _b = line.split(' '), lineBegin = _b[0], lineWords = _b.slice(1);
-    assert(lineBegin.split('#').join('') === '', { line: line, lineWords: lineWords });
-    var pageSectionLevel = lineBegin.length;
-    var titleMdx = lineWords.join(' ');
-    assert(!titleMdx.startsWith(' '), { line: line, lineWords: lineWords });
-    assert(titleMdx, { line: line, lineWords: lineWords });
-    var pageSectionTitle = titleMdx;
-    var anchor = titleMdx;
+    const [lineBegin, ...lineWords] = line.split(' ');
+    assert(lineBegin.split('#').join('') === '', { line, lineWords });
+    const pageSectionLevel = lineBegin.length;
+    const titleMdx = lineWords.join(' ');
+    assert(!titleMdx.startsWith(' '), { line, lineWords });
+    assert(titleMdx, { line, lineWords });
+    let pageSectionTitle = titleMdx;
+    let anchor = titleMdx;
     {
         // Support custom anchor: `## Some Title{#custom-anchor}`
-        var customAnchor = (_a = /(?<={#).*(?=})/g.exec(titleMdx)) === null || _a === void 0 ? void 0 : _a[0];
+        const customAnchor = /(?<={#).*(?=})/g.exec(titleMdx)?.[0];
         if (customAnchor) {
             anchor = customAnchor;
             pageSectionTitle = titleMdx.replace(/{#.*}/g, '');
         }
     }
-    var pageSectionId = determineSectionUrlHash(anchor);
-    var titleParsed = parseMarkdownMini(pageSectionTitle);
+    const pageSectionId = determineSectionUrlHash(anchor);
+    const titleParsed = parseMarkdownMini(pageSectionTitle);
     assert(pageSectionId === null || pageSectionId.length > 0);
-    var headingId = pageSectionId === null ? '' : " id=\"".concat(pageSectionId, "\"");
-    var headingHtml = "<h".concat(pageSectionLevel).concat(headingId, ">").concat(titleParsed, "</h").concat(pageSectionLevel, ">");
-    var pageSection = { pageSectionLevel: pageSectionLevel, pageSectionTitle: pageSectionTitle, pageSectionId: pageSectionId, headingHtml: headingHtml };
+    const headingId = pageSectionId === null ? '' : ` id="${pageSectionId}"`;
+    const headingHtml = `<h${pageSectionLevel}${headingId}>${titleParsed}</h${pageSectionLevel}>`;
+    const pageSection = { pageSectionLevel, pageSectionTitle, pageSectionId, headingHtml };
     return pageSection;
 }
 function parseMarkdownMini(titleMarkdown) {
-    var parts = [];
-    var current;
-    titleMarkdown.split('').forEach(function (letter) {
+    const parts = [];
+    let current;
+    titleMarkdown.split('').forEach((letter) => {
         if (letter === '`') {
-            if ((current === null || current === void 0 ? void 0 : current.nodeType) === 'code') {
+            if (current?.nodeType === 'code') {
                 // </code>
                 parts.push(current);
                 current = undefined;
@@ -145,25 +104,25 @@ function parseMarkdownMini(titleMarkdown) {
     if (current) {
         parts.push(current);
     }
-    var titleHtml = parts
-        .map(function (part) {
+    const titleHtml = parts
+        .map((part) => {
         if (part.nodeType === 'code') {
-            return "<code>".concat(serializeText(part.content), "</code>");
+            return `<code>${serializeText(part.content)}</code>`;
         }
         else {
-            assert(part.nodeType === 'text', { parts: parts });
+            assert(part.nodeType === 'text', { parts });
             return serializeText(part.content);
         }
     })
         .join('');
     return titleHtml;
     function serializeText(text) {
-        var textEscaped = text.split("'").join("\\'");
+        let textEscaped = text.split("'").join("\\'");
         // https://github.com/brillout/docpress/pull/2
         if (isWindows()) {
             textEscaped = textEscaped.replace(/\r/, '');
         }
-        return "{'".concat(textEscaped, "'}");
+        return `{'${textEscaped}'}`;
     }
 }
 function isWindows() {

package/dist/rehypeMetaToProps.d.ts

@@ -0,0 +1,19 @@
+export { rehypeMetaToProps };
+import type { Root } from 'hast';
+/**
+ * Rehype plugin to extract metadata from `<code>` blocks in markdown
+ * and attach them as props to the parent `<pre>` element.
+ *
+ * This allows using those props inside a custom `<Pre>` component.
+ *
+ * Example:
+ * ~~~mdx
+ * ```js foo="bar" hide_copy='true'
+ * export function add(a, b) {
+ *   return a + b
+ * }
+ * ```
+ * ~~~
+ * These props are then added to the `<pre>` element
+ */
+declare function rehypeMetaToProps(): (tree: Root) => void;

package/dist/rehypeMetaToProps.js

@@ -0,0 +1,62 @@
+export { rehypeMetaToProps };
+import { visit } from 'unist-util-visit';
+/**
+ * Rehype plugin to extract metadata from `<code>` blocks in markdown
+ * and attach them as props to the parent `<pre>` element.
+ *
+ * This allows using those props inside a custom `<Pre>` component.
+ *
+ * Example:
+ * ~~~mdx
+ * ```js foo="bar" hide_copy='true'
+ * export function add(a, b) {
+ *   return a + b
+ * }
+ * ```
+ * ~~~
+ * These props are then added to the `<pre>` element
+ */
+function rehypeMetaToProps() {
+    return (tree) => {
+        visit(tree, 'element', (node, _index, parent) => {
+            if (node.tagName === 'code' && parent?.type === 'element' && parent.tagName === 'pre') {
+                const props = parseMetaString(node.data?.meta);
+                parent.properties ??= {};
+                parent.properties = { ...parent.properties, ...props };
+            }
+        });
+    };
+}
+/**
+ * Minimal parser for a metadata string into key-value pairs.
+ *
+ * Supports simple patterns: key or key="value".
+ *
+ * Keys must contain only letters, dashes, or underscores (no digits).
+ * Keys are converted to kebab-case. Values default to "true" if missing.
+ *
+ * Example:
+ *   parseMetaString('foo fooBar="value"')
+ *   => { foo: 'true', foo_bar: 'value' }
+ *
+ * @param metaString - The input metadata string.
+ * @returns A plain object of parsed key-value pairs.
+ */
+function parseMetaString(metaString) {
+    if (!metaString)
+        return {};
+    const props = {};
+    const keyValuePairRE = /([a-zA-Z_-]+)(?:="([^"]*)")?(?=\s|$)/g;
+    for (const match of metaString.matchAll(keyValuePairRE)) {
+        let [_, key, value] = match;
+        props[kebabCase(key)] = value || 'true';
+    }
+    return props;
+}
+// Simple function to convert a camelCase or PascalCase string to kebab-case.
+function kebabCase(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace('_', '-')
+        .toLowerCase();
+}

package/dist/remarkDetype.d.ts

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

package/dist/remarkDetype.js

@@ -0,0 +1,146 @@
+export { remarkDetype };
+import { visit } from 'unist-util-visit';
+import { assertUsage } from './utils/assert.js';
+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,
+    printWidth: 100,
+    trailingComma: 'none',
+};
+function remarkDetype() {
+    return async function transformer(tree, file) {
+        const code_nodes = [];
+        visit(tree, 'code', (node, index, parent) => {
+            if (!parent || typeof index === 'undefined')
+                return;
+            // Skip if `node.lang` is not ts, tsx, vue, or yaml
+            if (!['ts', 'tsx', 'vue', 'yaml'].includes(node.lang || ''))
+                return;
+            // Skip if 'ts-only' meta is present
+            if (node.meta?.includes('ts-only'))
+                return;
+            // Collect this node for post-processing
+            code_nodes.push({ codeBlock: node, index, parent });
+        });
+        for (const node of code_nodes.reverse()) {
+            if (node.codeBlock.lang === 'yaml') {
+                transformYaml(node);
+            }
+            else {
+                await transformTsToJs(node, file);
+            }
+        }
+    };
+}
+function transformYaml(node) {
+    const { codeBlock, index, parent } = node;
+    const codeBlockContentJs = replaceFileNameSuffixes(codeBlock.value);
+    // Skip wrapping if the YAML code block hasn't changed
+    if (codeBlockContentJs === codeBlock.value)
+        return;
+    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: [],
+    };
+    parent.children.splice(index, 1, yamlContainer);
+}
+async function transformTsToJs(node, file) {
+    const { codeBlock, index, parent } = node;
+    let codeBlockContentJs = replaceFileNameSuffixes(codeBlock.value);
+    // Remove TypeScript from the TS/TSX/Vue code node
+    try {
+        codeBlockContentJs = await detype(codeBlockContentJs, `some-dummy-filename.${codeBlock.lang}`, {
+            customizeBabelConfig(config) {
+                // Add `onlyRemoveTypeImports: true` to the internal `@babel/preset-typescript` config
+                // https://github.com/cyco130/detype/blob/46ec867e9efd31d31a312a215ca169bd6bff4726/src/transform.ts#L206
+                assertUsage(config.presets && config.presets.length === 1, 'Unexpected Babel config presets');
+                config.presets = [[config.presets[0], { onlyRemoveTypeImports: true }]];
+            },
+            removeTsComments: true,
+            prettierOptions,
+        });
+    }
+    catch (error) {
+        // Log errors and return original content instead of throwing
+        console.error(pc.red(error.message));
+        console.error([
+            `Failed to transform the code block in: ${pc.bold(pc.blue(file.path))}.`,
+            "This likely happened due to invalid TypeScript syntax (see detype's error message above). You can either:",
+            '- Fix the code block syntax',
+            '- Set the code block language to js instead of ts',
+            '- Use custom meta or comments https://github.com/brillout/docpress#detype',
+        ].join('\n') + '\n');
+        return;
+    }
+    // Clean up both JS and TS code contents: correct diff comments (for js only) and apply custom magic comment replacements
+    codeBlockContentJs = cleanUpCode(codeBlockContentJs.trimEnd(), true);
+    codeBlock.value = cleanUpCode(codeBlock.value);
+    // No wrapping needed if JS and TS code are still identical
+    if (codeBlockContentJs === codeBlock.value)
+        return;
+    const { position, lang, ...rest } = codeBlock;
+    const jsCode = {
+        ...rest,
+        // The jsCode lang should be js|jsx|vue
+        lang: lang.replace('t', 'j'),
+        value: codeBlockContentJs,
+    };
+    // Wrap both the original `codeBlock` and `jsCode` with <CodeSnippets>
+    const container = {
+        type: 'mdxJsxFlowElement',
+        name: 'CodeSnippets',
+        children: [jsCode, codeBlock],
+        attributes: [],
+    };
+    parent.children.splice(index, 1, container);
+}
+// Replace all '.ts' extensions with '.js'
+function replaceFileNameSuffixes(codeBlockValue) {
+    return codeBlockValue.replaceAll('.ts', '.js');
+}
+function cleanUpCode(code, isJsCode = false) {
+    if (isJsCode) {
+        code = correctCodeDiffComments(code);
+    }
+    return processMagicComments(code);
+}
+function processMagicComments(code) {
+    // @detype-replace DummyLayout Layout
+    const renameCommentRE = /^\/\/\s@detype-replace\s([^ ]+) ([^ ]+)\n/gm;
+    const matches = Array.from(code.matchAll(renameCommentRE));
+    if (matches.length) {
+        for (let i = matches.length - 1; i >= 0; i--) {
+            const match = matches[i];
+            const [fullMatch, renameFrom, renameTo] = match;
+            code = code.split(fullMatch).join('').replaceAll(renameFrom, renameTo);
+        }
+    }
+    code = code.replaceAll('// @detype-uncomment ', '');
+    return code;
+}
+/**
+ * Correct code diff comments that detype() unexpectedly reformatted (using Prettier and Babel internally)
+ * after removing TypeScript.
+ * See https://github.com/brillout/docpress/pull/47#issuecomment-3263953899
+ * @param code Transformed Javascript code.
+ * @returns The corrected code.
+ */
+function correctCodeDiffComments(code) {
+    // Expected to match the code diff comments: `// [!code ++]` and `// [!code --]` started with newline and optional spaces
+    const codeDiffRE = /\n\s*\/\/\s\[!code.+\]/g;
+    return code.replaceAll(codeDiffRE, (codeDiff) => codeDiff.trimStart());
+}

package/dist/renderer/usePageContext.js

@@ -3,20 +3,19 @@ export { usePageContext };
 export { usePageContextLegacy };
 import React, { useContext } from 'react';
 import { getGlobalObject } from '../utils/getGlobalObject';
-var globalObject = getGlobalObject('usePageContext.ts', {
+const globalObject = getGlobalObject('usePageContext.ts', {
     Ctx: React.createContext(undefined),
 });
 function usePageContextLegacy() {
-    var Ctx = globalObject.Ctx;
-    var pageContext = useContext(Ctx);
+    const { Ctx } = globalObject;
+    const pageContext = useContext(Ctx);
     return pageContext.resolved;
 }
 function usePageContext() {
-    var pageContext = useContext(globalObject.Ctx);
+    const pageContext = useContext(globalObject.Ctx);
     return pageContext;
 }
-function PageContextProvider(_a) {
-    var pageContext = _a.pageContext, children = _a.children;
-    var Ctx = globalObject.Ctx;
+function PageContextProvider({ pageContext, children, }) {
+    const { Ctx } = globalObject;
     return React.createElement(Ctx.Provider, { value: pageContext }, children);
 }