@brillout/docpress 0.15.9 → 0.15.10-commit-b6b1605

package/NavItemComponent.tsx

@@ -9,6 +9,18 @@ import { assert, assertWarning, jsxToTextContent } from './utils/server'
 import './NavItemComponent.css'
 import { parseMarkdownMini } from './parseMarkdownMini'
 
+/*
+// We cannot do that: we must use `import type` otherwise Vite will transpile global.d.ts and throw:
+//  ```console
+//  [11:55:47.528][/docs/.test-dev.test.ts][pnpm run dev][stderr] 11:55:47 AM [vite] Failed to transpile /home/runner/work/telefunc/telefunc/node_modules/.pnpm/@brillout+docpress@0.15.7_@algolia+client-search@5.31.0_@types+react@19.1.8_@vitejs+plugin-re_lcm3fspejcg3ebrmr3gvb5i3se/node_modules/@brillout/docpress/global.d.ts because:
+//  x `declare` modifier not allowed for code already in an ambient context
+//  ```
+import './global.d.ts'
+/*/
+// The only purpose of `FakeExport` is to be able to use `import type`
+import type { FakeExport } from './global.d.ts'
+//*/
+
 type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]
 type NavItem = {
   level: number

package/components/CodeSnippets.tsx

@@ -0,0 +1,72 @@
+export { CodeSnippets, CodeSnippet, TypescriptOnly }
+
+import React from 'react'
+import { useSelectedLanguage } from '../utils/useSelectedLanguage'
+
+function CodeSnippets({ children }: { children: React.ReactNode }) {
+  const [selectedLang, setSelectedLang] = useSelectedLanguage()
+
+  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSelectedLang(e.target.value)
+  }
+
+  return (
+    <div>
+      <form style={{ position: 'relative' }}>
+        <select
+          name="language"
+          id="language"
+          onChange={handleOnChange}
+          value={selectedLang}
+          style={{ position: 'absolute', top: '10px', right: '60px', zIndex: 3 }}
+        >
+          <option value="js">Javascript</option>
+          <option value="ts">Typescript</option>
+        </select>
+      </form>
+      {children}
+    </div>
+  )
+}
+
+function CodeSnippet({
+  children,
+  language,
+  tsOnly = false,
+}: { children: React.ReactNode; language: string; tsOnly: boolean }) {
+  const [selectedLang] = useSelectedLanguage()
+
+  const style = tsOnly ? {} : { display: selectedLang === language ? 'block' : 'none' }
+
+  const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    try {
+      const figureEl = e.currentTarget.nextElementSibling
+      if (figureEl?.tagName === 'FIGURE') {
+        await navigator.clipboard.writeText(figureEl.textContent ?? '')
+        console.log('Copied to clipboard!')
+      }
+    } catch (error) {
+      console.warn('Copy failed', error)
+    }
+  }
+
+  return (
+    <div style={{ ...style, position: 'relative' }}>
+      <button
+        type="button"
+        style={{ position: 'absolute', top: '10px', right: '10px', zIndex: 3 }}
+        onClick={copyToClipboard}
+      >
+        Copy
+      </button>
+      {children}
+    </div>
+  )
+}
+
+// Show/hide TypeScript sections (code and/or plain)
+function TypescriptOnly({ children }: { children: React.ReactNode }) {
+  const [selectedLang] = useSelectedLanguage()
+
+  return <div style={{ display: selectedLang === 'ts' ? 'block' : 'none' }}>{children}</div>
+}

package/components/index.ts

@@ -8,3 +8,4 @@ export * from './HorizontalLine'
 export * from './CodeBlockTransformer'
 export * from './Comment'
 export * from './FileRemoved'
+export * from './CodeSnippets'

package/detypePlugin.ts

@@ -0,0 +1,112 @@
+export { detypePlugin }
+
+import type { PluginOption } from 'vite'
+import module from 'node:module'
+import { createContentMap, contentMapKeyRE, type ContentMap } from './utils/contentMap.js'
+
+// Cannot use `import { transform } from 'detype'` as it results in errors,
+// and the package has no default export. Using `module.createRequire` instead.
+const { transform } = module.createRequire(import.meta.url)('detype') as typeof import('detype')
+
+function detypePlugin(): PluginOption {
+  return {
+    name: '@brillout/docpress:detypePlugin',
+    enforce: 'pre',
+    transform: async (code: string, id: string) => {
+      if (!id.endsWith('+Page.mdx')) {
+        return
+      }
+      const contentMap = createContentMap()
+      const codeNew = await transformCode(code, contentMap)
+      const replaced = replaceContent(codeNew, contentMapKeyRE, (match) => {
+        const content = contentMap.get(match[0])
+        if (!content) {
+          throw new Error('Content not found')
+        }
+        return content
+      })
+
+      return replaced
+    },
+  }
+}
+
+const codeBlockRE = /^([ \t]{0,3}>?[ \t]?)```(tsx?|vue)[^\n]*\n([\s\S]*?)```/gm
+const prettierOptions = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 120,
+}
+
+async function transformCode(code: string, contentMap: ContentMap) {
+  const matches = Array.from(code.matchAll(codeBlockRE))
+  if (matches.length === 0) {
+    return code
+  }
+
+  let codeNew = `import { CodeSnippets, CodeSnippet } from '@brillout/docpress';\n`
+  let lastIndex = 0
+
+  for (const match of matches) {
+    let [fullMatch, startsWith, lang, tsCode] = match
+    const tsOpeningCode = fullMatch.split('\n')[0].slice(startsWith.length)
+
+    const blockStart = match.index
+    const blockEnd = blockStart + fullMatch.length
+
+    codeNew += code.slice(lastIndex, blockStart)
+
+    if (startsWith.length > 0) {
+      tsCode = stripStarts(tsCode, startsWith)
+    }
+
+    if (tsOpeningCode.includes('ts-only')) {
+      const key = contentMap.add('ts-code-snippet', fullMatch.length, fullMatch)
+      codeNew += `${startsWith}<CodeSnippet language={'ts'} tsOnly={'true'}>\n${key}\n${startsWith}</CodeSnippet>`
+    } else {
+      const jsCode = await transform(tsCode.replaceAll('.ts', '.js'), `tsCode.${lang}`, {
+        removeTsComments: true,
+        prettierOptions,
+      })
+      const jsLang = lang === 'vue' ? 'vue' : lang.replace('t', 'j') // ts => js | tsx => jsx
+      const jsOpeningCode = tsOpeningCode.replace(lang, jsLang)
+      const closing = `\`\`\``
+
+      const jsCodeSnippet = `<CodeSnippet language={'js'}>\n${jsOpeningCode}\n${jsCode}${closing}\n</CodeSnippet>`
+      const tsCodeSnippet = `<CodeSnippet language={'ts'}>\n${tsOpeningCode}\n${tsCode}${closing}\n</CodeSnippet>`
+      const codeSnippets = putBackStarts(`${tsCodeSnippet}\n${jsCodeSnippet}`, startsWith)
+
+      const key = contentMap.add(`ts-js-code-snippets`, codeSnippets.length, codeSnippets)
+      codeNew += `${startsWith}<CodeSnippets>\n${key}\n${startsWith}</CodeSnippets>`
+    }
+
+    lastIndex = blockEnd
+  }
+  codeNew += code.slice(lastIndex)
+
+  return codeNew
+}
+
+function stripStarts(code: string, startsWith: string) {
+  return code
+    .split('\n')
+    .map((line) => line.slice(startsWith.length))
+    .join('\n')
+}
+
+function putBackStarts(code: string, startsWith: string) {
+  if (!startsWith.length) {
+    return code
+  }
+  return code
+    .split('\n')
+    .map((line) => `${startsWith}${line}`)
+    .join('\n')
+}
+
+function replaceContent(input: string, re: RegExp, replacer: (match: RegExpMatchArray) => string): string {
+  const replacements = Array.from(input.matchAll(re), replacer)
+  let i = 0
+
+  return input.replace(re, () => replacements[i++])
+}

package/dist/components/CodeSnippets.d.ts

@@ -0,0 +1,13 @@
+export { CodeSnippets, CodeSnippet, TypescriptOnly };
+import React from 'react';
+declare function CodeSnippets({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function CodeSnippet({ children, language, tsOnly, }: {
+    children: React.ReactNode;
+    language: string;
+    tsOnly: boolean;
+}): React.JSX.Element;
+declare function TypescriptOnly({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/CodeSnippets.js

@@ -0,0 +1,101 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { CodeSnippets, CodeSnippet, TypescriptOnly };
+import React from 'react';
+import { useSelectedLanguage } from '../utils/useSelectedLanguage';
+function CodeSnippets(_a) {
+    var children = _a.children;
+    var _b = useSelectedLanguage(), selectedLang = _b[0], setSelectedLang = _b[1];
+    var handleOnChange = function (e) {
+        setSelectedLang(e.target.value);
+    };
+    return (React.createElement("div", null,
+        React.createElement("form", { style: { position: 'relative' } },
+            React.createElement("select", { name: "language", id: "language", onChange: handleOnChange, value: selectedLang, style: { position: 'absolute', top: '10px', right: '60px', zIndex: 3 } },
+                React.createElement("option", { value: "js" }, "Javascript"),
+                React.createElement("option", { value: "ts" }, "Typescript"))),
+        children));
+}
+function CodeSnippet(_a) {
+    var _this = this;
+    var children = _a.children, language = _a.language, _b = _a.tsOnly, tsOnly = _b === void 0 ? false : _b;
+    var selectedLang = useSelectedLanguage()[0];
+    var style = tsOnly ? {} : { display: selectedLang === language ? 'block' : 'none' };
+    var copyToClipboard = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        var figureEl, error_1;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 3, , 4]);
+                    figureEl = e.currentTarget.nextElementSibling;
+                    if (!((figureEl === null || figureEl === void 0 ? void 0 : figureEl.tagName) === 'FIGURE')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, navigator.clipboard.writeText((_a = figureEl.textContent) !== null && _a !== void 0 ? _a : '')];
+                case 1:
+                    _b.sent();
+                    console.log('Copied to clipboard!');
+                    _b.label = 2;
+                case 2: return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _b.sent();
+                    console.warn('Copy failed', error_1);
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React.createElement("div", { style: __assign(__assign({}, style), { position: 'relative' }) },
+        React.createElement("button", { type: "button", style: { position: 'absolute', top: '10px', right: '10px', zIndex: 3 }, onClick: copyToClipboard }, "Copy"),
+        children));
+}
+// Show/hide TypeScript sections (code and/or plain)
+function TypescriptOnly(_a) {
+    var children = _a.children;
+    var selectedLang = useSelectedLanguage()[0];
+    return React.createElement("div", { style: { display: selectedLang === 'ts' ? 'block' : 'none' } }, children);
+}

package/dist/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './HorizontalLine';
 export * from './CodeBlockTransformer';
 export * from './Comment';
 export * from './FileRemoved';
+export * from './CodeSnippets';

package/dist/components/index.js

@@ -8,3 +8,4 @@ export * from './HorizontalLine';
 export * from './CodeBlockTransformer';
 export * from './Comment';
 export * from './FileRemoved';
+export * from './CodeSnippets';

package/dist/detypePlugin.d.ts

@@ -0,0 +1,3 @@
+export { detypePlugin };
+import type { PluginOption } from 'vite';
+declare function detypePlugin(): PluginOption;

package/dist/detypePlugin.js

@@ -0,0 +1,156 @@
+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 { detypePlugin };
+import module from 'node:module';
+import { createContentMap, contentMapKeyRE } from './utils/contentMap.js';
+// Cannot use `import { transform } from 'detype'` as it results in errors,
+// and the package has no default export. Using `module.createRequire` instead.
+var transform = module.createRequire(import.meta.url)('detype').transform;
+function detypePlugin() {
+    var _this = this;
+    return {
+        name: '@brillout/docpress:detypePlugin',
+        enforce: 'pre',
+        transform: function (code, id) { return __awaiter(_this, void 0, void 0, function () {
+            var contentMap, codeNew, replaced;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!id.endsWith('+Page.mdx')) {
+                            return [2 /*return*/];
+                        }
+                        contentMap = createContentMap();
+                        return [4 /*yield*/, transformCode(code, contentMap)];
+                    case 1:
+                        codeNew = _a.sent();
+                        replaced = replaceContent(codeNew, contentMapKeyRE, function (match) {
+                            var content = contentMap.get(match[0]);
+                            if (!content) {
+                                throw new Error('Content not found');
+                            }
+                            return content;
+                        });
+                        return [2 /*return*/, replaced];
+                }
+            });
+        }); },
+    };
+}
+var codeBlockRE = /^([ \t]{0,3}>?[ \t]?)```(tsx?|vue)[^\n]*\n([\s\S]*?)```/gm;
+var prettierOptions = {
+    semi: false,
+    singleQuote: true,
+    printWidth: 120,
+};
+function transformCode(code, contentMap) {
+    return __awaiter(this, void 0, void 0, function () {
+        var matches, codeNew, lastIndex, _i, matches_1, match, fullMatch, startsWith, lang, tsCode, tsOpeningCode, blockStart, blockEnd, key, jsCode, jsLang, jsOpeningCode, closing, jsCodeSnippet, tsCodeSnippet, codeSnippets, key;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    matches = Array.from(code.matchAll(codeBlockRE));
+                    if (matches.length === 0) {
+                        return [2 /*return*/, code];
+                    }
+                    codeNew = "import { CodeSnippets, CodeSnippet } from '@brillout/docpress';\n";
+                    lastIndex = 0;
+                    _i = 0, matches_1 = matches;
+                    _a.label = 1;
+                case 1:
+                    if (!(_i < matches_1.length)) return [3 /*break*/, 6];
+                    match = matches_1[_i];
+                    fullMatch = match[0], startsWith = match[1], lang = match[2], tsCode = match[3];
+                    tsOpeningCode = fullMatch.split('\n')[0].slice(startsWith.length);
+                    blockStart = match.index;
+                    blockEnd = blockStart + fullMatch.length;
+                    codeNew += code.slice(lastIndex, blockStart);
+                    if (startsWith.length > 0) {
+                        tsCode = stripStarts(tsCode, startsWith);
+                    }
+                    if (!tsOpeningCode.includes('ts-only')) return [3 /*break*/, 2];
+                    key = contentMap.add('ts-code-snippet', fullMatch.length, fullMatch);
+                    codeNew += "".concat(startsWith, "<CodeSnippet language={'ts'} tsOnly={'true'}>\n").concat(key, "\n").concat(startsWith, "</CodeSnippet>");
+                    return [3 /*break*/, 4];
+                case 2: return [4 /*yield*/, transform(tsCode.replaceAll('.ts', '.js'), "tsCode.".concat(lang), {
+                        removeTsComments: true,
+                        prettierOptions: prettierOptions,
+                    })];
+                case 3:
+                    jsCode = _a.sent();
+                    jsLang = lang === 'vue' ? 'vue' : lang.replace('t', 'j') // ts => js | tsx => jsx
+                    ;
+                    jsOpeningCode = tsOpeningCode.replace(lang, jsLang);
+                    closing = "```";
+                    jsCodeSnippet = "<CodeSnippet language={'js'}>\n".concat(jsOpeningCode, "\n").concat(jsCode).concat(closing, "\n</CodeSnippet>");
+                    tsCodeSnippet = "<CodeSnippet language={'ts'}>\n".concat(tsOpeningCode, "\n").concat(tsCode).concat(closing, "\n</CodeSnippet>");
+                    codeSnippets = putBackStarts("".concat(tsCodeSnippet, "\n").concat(jsCodeSnippet), startsWith);
+                    key = contentMap.add("ts-js-code-snippets", codeSnippets.length, codeSnippets);
+                    codeNew += "".concat(startsWith, "<CodeSnippets>\n").concat(key, "\n").concat(startsWith, "</CodeSnippets>");
+                    _a.label = 4;
+                case 4:
+                    lastIndex = blockEnd;
+                    _a.label = 5;
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 1];
+                case 6:
+                    codeNew += code.slice(lastIndex);
+                    return [2 /*return*/, codeNew];
+            }
+        });
+    });
+}
+function stripStarts(code, startsWith) {
+    return code
+        .split('\n')
+        .map(function (line) { return line.slice(startsWith.length); })
+        .join('\n');
+}
+function putBackStarts(code, startsWith) {
+    if (!startsWith.length) {
+        return code;
+    }
+    return code
+        .split('\n')
+        .map(function (line) { return "".concat(startsWith).concat(line); })
+        .join('\n');
+}
+function replaceContent(input, re, replacer) {
+    var replacements = Array.from(input.matchAll(re), replacer);
+    var i = 0;
+    return input.replace(re, function () { return replacements[i++]; });
+}

package/dist/utils/contentMap.d.ts

@@ -0,0 +1,9 @@
+export type ContentMap = {
+    /**
+     * @returns key
+     */
+    add(title: string, sourceLength: number, content: string): string;
+    get(key: string): string | undefined;
+};
+export declare const createContentMap: () => ContentMap;
+export declare const contentMapKeyRE: RegExp;

package/dist/utils/contentMap.js

@@ -0,0 +1,22 @@
+import { createHash } from 'node:crypto';
+export var createContentMap = function () {
+    var map = new Map();
+    return {
+        add: function (title, length, content) {
+            var key = generateKey("".concat(title, "_").concat(length));
+            if (!map.has(key)) {
+                map.set(key, content);
+            }
+            return key;
+        },
+        get: function (key) {
+            var val = map.get(key);
+            return val;
+        },
+    };
+};
+var generateKey = function (value) {
+    var hash = createHash('md5').update(value).digest('hex');
+    return "#_#_".concat(hash, "_#_#");
+};
+export var contentMapKeyRE = /#_#_[0-9a-fA-F]{32}_#_#/g;

package/dist/utils/useSelectedLanguage.d.ts

@@ -0,0 +1,7 @@
+export { useSelectedLanguage };
+declare global {
+    interface WindowEventMap {
+        'lang-storage': CustomEvent;
+    }
+}
+declare function useSelectedLanguage(): readonly [string, (value: string) => void];

package/dist/utils/useSelectedLanguage.js

@@ -0,0 +1,49 @@
+export { useSelectedLanguage };
+import { useState, useEffect, useCallback } from 'react';
+var key = 'docpress:selectedLang';
+var defaultSsrLang = 'ts';
+var defaultClientLang = 'js';
+function useSelectedLanguage() {
+    var _a = useState(defaultSsrLang), selectedLang = _a[0], setSelectedLang = _a[1];
+    var getValue = function () {
+        var _a;
+        try {
+            return (_a = localStorage.getItem(key)) !== null && _a !== void 0 ? _a : defaultClientLang;
+        }
+        catch (error) {
+            console.warn('Error reading from localStorage:', error);
+            return defaultClientLang;
+        }
+    };
+    var setValue = useCallback(function (value) {
+        try {
+            window.localStorage.setItem(key, value);
+            setSelectedLang(value);
+            window.dispatchEvent(new CustomEvent('lang-storage'));
+        }
+        catch (error) {
+            console.warn('Error setting localStorage:', error);
+        }
+    }, []);
+    useEffect(function () {
+        // Initial load from localStorage
+        setSelectedLang(getValue());
+        // Update language in current tab
+        var handleCustomEvent = function () {
+            setSelectedLang(getValue());
+        };
+        // Update language if changed in another tab
+        var handleNativeStorage = function (event) {
+            if (event.key === key) {
+                setSelectedLang(getValue());
+            }
+        };
+        window.addEventListener('lang-storage', handleCustomEvent);
+        window.addEventListener('storage', handleNativeStorage);
+        return function () {
+            window.removeEventListener('lang-storage', handleCustomEvent);
+            window.removeEventListener('storage', handleNativeStorage);
+        };
+    }, []);
+    return [selectedLang, setValue];
+}

package/dist/vite.config.js

@@ -2,6 +2,7 @@ export { config as viteConfig };
 import mdx from '@mdx-js/rollup';
 import react from '@vitejs/plugin-react-swc';
 import { parsePageSections } from './parsePageSections.js';
+import { detypePlugin } from './detypePlugin.js';
 import rehypePrettyCode from 'rehype-pretty-code';
 import remarkGfm from 'remark-gfm';
 import { transformerNotationDiff } from '@shikijs/transformers';
@@ -13,6 +14,7 @@ var config = {
     root: root,
     plugins: [
         parsePageSections(),
+        detypePlugin(),
         mdx({ rehypePlugins: rehypePlugins, remarkPlugins: remarkPlugins }),
         // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
         react(),

package/global.d.ts

@@ -5,3 +5,5 @@ declare module 'react' {
     [key: `--${string}`]: string | number | undefined
   }
 }
+// The only purpose of `FakeExport` is to be able to use `import type`
+export type FakeExport = never

package/index.ts

@@ -6,6 +6,9 @@ export {
   FileRemoved,
   ImportMeta,
   Emoji,
+  CodeSnippets,
+  CodeSnippet,
+  TypescriptOnly,
 } from './components'
 export { MenuToggle } from './Layout'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brillout/docpress",
-  "version": "0.15.9",
+  "version": "0.15.10-commit-b6b1605",
   "type": "module",
   "dependencies": {
     "@brillout/picocolors": "^1.0.10",
@@ -11,6 +11,7 @@
     "@mdx-js/rollup": "3.0.1",
     "@shikijs/transformers": "1.2.0",
     "@vitejs/plugin-react-swc": "^3.10.2",
+    "detype": "^1.1.2",
     "rehype-pretty-code": "0.13.0",
     "remark-gfm": "4.0.0",
     "shiki": "1.2.0",

package/utils/contentMap.ts

@@ -0,0 +1,34 @@
+import { createHash } from 'node:crypto'
+
+export type ContentMap = {
+  /**
+   * @returns key
+   */
+  add(title: string, sourceLength: number, content: string): string
+  get(key: string): string | undefined
+}
+
+export const createContentMap = (): ContentMap => {
+  const map = new Map<string, string>()
+
+  return {
+    add(title, length, content) {
+      const key = generateKey(`${title}_${length}`)
+      if (!map.has(key)) {
+        map.set(key, content)
+      }
+      return key
+    },
+    get(key) {
+      const val = map.get(key)
+      return val
+    },
+  }
+}
+
+const generateKey = (value: string) => {
+  const hash = createHash('md5').update(value).digest('hex')
+  return `#_#_${hash}_#_#`
+}
+
+export const contentMapKeyRE = /#_#_[0-9a-fA-F]{32}_#_#/g

package/utils/useSelectedLanguage.ts

@@ -0,0 +1,61 @@
+export { useSelectedLanguage }
+
+import { useState, useEffect, useCallback } from 'react'
+
+const key = 'docpress:selectedLang'
+const defaultSsrLang = 'ts'
+const defaultClientLang = 'js'
+
+declare global {
+  interface WindowEventMap {
+    'lang-storage': CustomEvent
+  }
+}
+
+function useSelectedLanguage() {
+  const [selectedLang, setSelectedLang] = useState(defaultSsrLang)
+
+  const getValue = () => {
+    try {
+      return localStorage.getItem(key) ?? defaultClientLang
+    } catch (error) {
+      console.warn('Error reading from localStorage:', error)
+      return defaultClientLang
+    }
+  }
+
+  const setValue = useCallback((value: string) => {
+    try {
+      window.localStorage.setItem(key, value)
+      setSelectedLang(value)
+      window.dispatchEvent(new CustomEvent('lang-storage'))
+    } catch (error) {
+      console.warn('Error setting localStorage:', error)
+    }
+  }, [])
+
+  useEffect(() => {
+    // Initial load from localStorage
+    setSelectedLang(getValue())
+    // Update language in current tab
+    const handleCustomEvent = () => {
+      setSelectedLang(getValue())
+    }
+    // Update language if changed in another tab
+    const handleNativeStorage = (event: StorageEvent) => {
+      if (event.key === key) {
+        setSelectedLang(getValue())
+      }
+    }
+
+    window.addEventListener('lang-storage', handleCustomEvent)
+    window.addEventListener('storage', handleNativeStorage)
+
+    return () => {
+      window.removeEventListener('lang-storage', handleCustomEvent)
+      window.removeEventListener('storage', handleNativeStorage)
+    }
+  }, [])
+
+  return [selectedLang, setValue] as const
+}

package/vite.config.ts

@@ -4,6 +4,7 @@ import mdx from '@mdx-js/rollup'
 import react from '@vitejs/plugin-react-swc'
 import type { PluginOption, UserConfig } from 'vite'
 import { parsePageSections } from './parsePageSections.js'
+import { detypePlugin } from './detypePlugin.js'
 import rehypePrettyCode from 'rehype-pretty-code'
 import remarkGfm from 'remark-gfm'
 import { transformerNotationDiff } from '@shikijs/transformers'
@@ -17,6 +18,7 @@ const config: UserConfig = {
   root,
   plugins: [
     parsePageSections(),
+    detypePlugin(),
     mdx({ rehypePlugins, remarkPlugins }) as PluginOption,
     // @vitejs/plugin-react-swc needs to be added *after* the mdx plugins
     react(),