@brillout/docpress 0.15.10-commit-ef0b9a0 → 0.15.10-commit-b6b1605

package/components/CodeSnippets.tsx

@@ -52,7 +52,11 @@ function CodeSnippet({
 
   return (
     <div style={{ ...style, position: 'relative' }}>
-      <button type="button" style={{ position: 'absolute', top: '10px', right: '10px' }} onClick={copyToClipboard}>
+      <button
+        type="button"
+        style={{ position: 'absolute', top: '10px', right: '10px', zIndex: 3 }}
+        onClick={copyToClipboard}
+      >
         Copy
       </button>
       {children}

package/detypePlugin.ts

@@ -2,6 +2,7 @@ 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.
@@ -15,49 +16,68 @@ function detypePlugin(): PluginOption {
       if (!id.endsWith('+Page.mdx')) {
         return
       }
-      const codeNew = await transformCode(code)
-      return codeNew
+      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 tsBlockRegex = /```(tsx?|vue)(\s+ts-only)?([\s\S]*?)```/g
-
-async function transformCode(code: string) {
-  let codeNew = `import { CodeSnippets, CodeSnippet } from '@brillout/docpress';\n`
-  let lastIndex = 0
-
-  const matches = [...code.matchAll(tsBlockRegex)]
+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) {
-    const [tsCodeBlock, lang, tsOnly, tsCode] = match // lang = ts | tsx | vue
-    const type = lang === 'vue' ? 'vue' : lang.replace('t', 'j') // ts => js | tsx => jsx
+    let [fullMatch, startsWith, lang, tsCode] = match
+    const tsOpeningCode = fullMatch.split('\n')[0].slice(startsWith.length)
 
     const blockStart = match.index
-    const blockEnd = blockStart + tsCodeBlock.length
+    const blockEnd = blockStart + fullMatch.length
 
     codeNew += code.slice(lastIndex, blockStart)
 
-    if (tsOnly) {
-      codeNew += `\n<CodeSnippet language={'ts'} tsOnly={'true'}>\n${tsCodeBlock}\n</CodeSnippet>\n`
+    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.trim().replaceAll('.ts', '.js'), `tsCode.${lang}`, {
+      const jsCode = await transform(tsCode.replaceAll('.ts', '.js'), `tsCode.${lang}`, {
         removeTsComments: true,
-        prettierOptions: {
-          semi: false,
-          singleQuote: true,
-        },
+        prettierOptions,
       })
+      const jsLang = lang === 'vue' ? 'vue' : lang.replace('t', 'j') // ts => js | tsx => jsx
+      const jsOpeningCode = tsOpeningCode.replace(lang, jsLang)
+      const closing = `\`\`\``
 
-      const jsCodeBlock = `\`\`\`${type}\n${jsCode}\`\`\``
-      const jsCodeSnippet = `\n<CodeSnippet language={'js'}>\n${jsCodeBlock}\n</CodeSnippet>\n`
-      const tsCodeSnippet = `\n<CodeSnippet language={'ts'}>\n${tsCodeBlock}\n</CodeSnippet>\n`
+      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)
 
-      codeNew += `<CodeSnippets>${jsCodeSnippet}${tsCodeSnippet}</CodeSnippets>`
+      const key = contentMap.add(`ts-js-code-snippets`, codeSnippets.length, codeSnippets)
+      codeNew += `${startsWith}<CodeSnippets>\n${key}\n${startsWith}</CodeSnippets>`
     }
 
     lastIndex = blockEnd
@@ -66,3 +86,27 @@ async function transformCode(code: string) {
 
   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/+config.js

@@ -1,6 +1,6 @@
 export { config as default };
 import { viteConfig } from './vite.config.js';
-const config = {
+var config = {
     name: '@brillout/docpress',
     require: { vike: '>=0.4.234' },
     vite: viteConfig,

package/dist/NavItemComponent.js

@@ -1,39 +1,53 @@
+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);
+};
 export { NavItemComponent };
 export { getNavItemsWithComputed };
 import React from 'react';
 import { assert, assertWarning, jsxToTextContent } from './utils/server';
 import './NavItemComponent.css';
 import { parseMarkdownMini } from './parseMarkdownMini';
-function NavItemComponent({ navItem, onClick, }) {
+function NavItemComponent(_a) {
+    var _b;
+    var _c;
+    var navItem = _a.navItem, onClick = _a.onClick;
     assert([1, 2, 3, 4].includes(navItem.level), navItem);
-    const titleJsx = parseMarkdownMini(navItem.title);
-    const titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
-    const iconSize = 25;
-    const icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: { height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4, ...navItem.titleIconStyle } }));
+    var titleJsx = parseMarkdownMini(navItem.title);
+    var titleInNavJsx = parseMarkdownMini(navItem.titleInNav);
+    var iconSize = 25;
+    var icon = navItem.titleIcon && (React.createElement("img", { src: navItem.titleIcon, style: __assign({ height: iconSize, width: iconSize, marginRight: 8, marginLeft: 4 }, navItem.titleIconStyle) }));
     if (navItem.level === 1 || navItem.level === 4) {
         assert(navItem.url === undefined);
     }
     else {
-        const sectionTitle = jsxToTextContent(titleJsx);
+        var sectionTitle = jsxToTextContent(titleJsx);
         assertWarning(navItem.url, [
-            `${jsxToTextContent(titleInNavJsx)} is missing a URL hash.`,
-            `Add a URL hash with: \`## ${sectionTitle}{#some-hash}\`.`,
+            "".concat(jsxToTextContent(titleInNavJsx), " is missing a URL hash."),
+            "Add a URL hash with: `## ".concat(sectionTitle, "{#some-hash}`."),
             /* TO-DO/eventually: not implemented yet.
             `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
             */
         ].join(' '));
     }
-    let children = titleInNavJsx;
+    var children = titleInNavJsx;
     if (navItem.level === 1) {
         children = (React.createElement(React.Fragment, null,
             icon,
             children,
             React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
     }
-    const props = {
-        href: navItem.url ?? undefined,
-        children,
-        onClick,
+    var props = {
+        href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
+        children: children,
+        onClick: onClick,
         className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
@@ -45,51 +59,45 @@ function NavItemComponent({ navItem, onClick, }) {
             .join(' '),
     };
     if (navItem.level === 1) {
-        props.style = {
-            ['--category-color']: navItem.color,
-        };
+        props.style = (_b = {},
+            _b['--category-color'] = navItem.color,
+            _b);
     }
     if (navItem.level === 2 || navItem.level === 3) {
-        return React.createElement("a", { ...props });
+        return React.createElement("a", __assign({}, props));
     }
     else {
-        return React.createElement("span", { ...props });
+        return React.createElement("span", __assign({}, props));
     }
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
-    let navItemIdx;
-    const navItemsWithComputed = navItems.map((navItem, i) => {
+    var navItemIdx;
+    var navItemsWithComputed = navItems.map(function (navItem, i) {
         assert([1, 2, 3, 4].includes(navItem.level), navItem);
-        const navItemPrevious = navItems[i - 1];
-        const navItemNext = navItems[i + 1];
-        let isActive = false;
+        var navItemPrevious = navItems[i - 1];
+        var navItemNext = navItems[i + 1];
+        var isActive = false;
         if (navItem.url === currentUrl) {
-            assert(navItem.level === 2, { currentUrl });
+            assert(navItem.level === 2, { currentUrl: currentUrl });
             assert(navItemIdx === undefined);
             navItemIdx = i;
             isActive = true;
         }
-        const isFirstOfItsKind = navItem.level !== navItemPrevious?.level;
-        const isLastOfItsKind = navItem.level !== navItemNext?.level;
-        const navItemComputed = {
-            ...navItem,
-            isActive,
-            isRelevant: false,
-            isFirstOfItsKind,
-            isLastOfItsKind,
-        };
+        var isFirstOfItsKind = navItem.level !== (navItemPrevious === null || navItemPrevious === void 0 ? void 0 : navItemPrevious.level);
+        var isLastOfItsKind = navItem.level !== (navItemNext === null || navItemNext === void 0 ? void 0 : navItemNext.level);
+        var navItemComputed = __assign(__assign({}, navItem), { isActive: isActive, isRelevant: false, isFirstOfItsKind: isFirstOfItsKind, isLastOfItsKind: isLastOfItsKind });
         return navItemComputed;
     });
     // Set `isRelevant`
     if (navItemIdx !== undefined) {
-        for (let i = navItemIdx; i >= 0; i--) {
-            const navItem = navItemsWithComputed[i];
+        for (var i = navItemIdx; i >= 0; i--) {
+            var navItem = navItemsWithComputed[i];
             navItem.isRelevant = true;
             if (navItem.level === 1)
                 break;
         }
-        for (let i = navItemIdx; i < navItemsWithComputed.length; i++) {
-            const navItem = navItemsWithComputed[i];
+        for (var i = navItemIdx; i < navItemsWithComputed.length; i++) {
+            var navItem = navItemsWithComputed[i];
             if (navItem.level === 1)
                 break;
             navItem.isRelevant = true;
@@ -98,6 +106,6 @@ function getNavItemsWithComputed(navItems, currentUrl) {
     return navItemsWithComputed;
 }
 function Chevron(props) {
-    return (React.createElement("svg", { viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg", ...props },
+    return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
         React.createElement("path", { fill: "#aaa", d: "M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z" })));
 }

package/dist/components/CodeBlockTransformer.js

@@ -2,8 +2,9 @@ export { CodeBlockTransformer };
 import React from 'react';
 import { assert } from '../utils/server';
 import './CodeBlockTransformer.css';
-function CodeBlockTransformer({ children, lineBreak }) {
+function CodeBlockTransformer(_a) {
+    var children = _a.children, lineBreak = _a.lineBreak;
     assert(lineBreak === 'white-space' || lineBreak === 'break-word', '`lineBreak` is currently the only use case for <CodeBlockTransformer>');
-    const className = `with-line-break_${lineBreak}`;
+    var className = "with-line-break_".concat(lineBreak);
     return React.createElement("div", { className: className }, children);
 }

package/dist/components/CodeSnippets.js

@@ -1,9 +1,57 @@
+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({ children }) {
-    const [selectedLang, setSelectedLang] = useSelectedLanguage();
-    const handleOnChange = (e) => {
+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,
@@ -13,27 +61,41 @@ function CodeSnippets({ children }) {
                 React.createElement("option", { value: "ts" }, "Typescript"))),
         children));
 }
-function CodeSnippet({ children, language, tsOnly = false, }) {
-    const [selectedLang] = useSelectedLanguage();
-    const style = tsOnly ? {} : { display: selectedLang === language ? 'block' : 'none' };
-    const copyToClipboard = async (e) => {
-        try {
-            const figureEl = e.currentTarget.nextElementSibling;
-            if (figureEl?.tagName === 'FIGURE') {
-                await navigator.clipboard.writeText(figureEl.textContent ?? '');
-                console.log('Copied to clipboard!');
+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*/];
             }
-        }
-        catch (error) {
-            console.warn('Copy failed', error);
-        }
-    };
-    return (React.createElement("div", { style: { ...style, position: 'relative' } },
-        React.createElement("button", { type: "button", style: { position: 'absolute', top: '10px', right: '10px' }, onClick: copyToClipboard }, "Copy"),
+        });
+    }); };
+    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({ children }) {
-    const [selectedLang] = useSelectedLanguage();
+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/Comment.js

@@ -1,5 +1,6 @@
 export { Comment };
 import React from 'react';
-function Comment({ children }) {
+function Comment(_a) {
+    var children = _a.children;
     return React.createElement(React.Fragment, null);
 }

package/dist/components/FileRemoved.js

@@ -2,23 +2,25 @@ export { FileRemoved };
 export { FileAdded };
 import React from 'react';
 // Styling defined in src/css/code/diff.css
-const classRemoved = [
+var classRemoved = [
     //
     'diff-entire-file',
     'diff-entire-file-removed',
 ].join(' ');
-const classAdded = [
+var classAdded = [
     //
     'diff-entire-file',
     'diff-entire-file-added',
 ].join(' ');
-function FileRemoved({ children }) {
+function FileRemoved(_a) {
+    var children = _a.children;
     return React.createElement("div", { className: classRemoved },
         " ",
         children,
         " ");
 }
-function FileAdded({ children }) {
+function FileAdded(_a) {
+    var children = _a.children;
     return React.createElement("div", { className: classAdded },
         " ",
         children,

package/dist/components/HorizontalLine.js

@@ -1,7 +1,8 @@
 export { HorizontalLine };
 import React from 'react';
 import { cls } from '../utils/cls';
-function HorizontalLine({ primary }) {
+function HorizontalLine(_a) {
+    var primary = _a.primary;
     return (React.createElement("div", { className: cls(primary && 'primary'), style: { textAlign: 'center' } },
         React.createElement("hr", { style: {
                 display: 'inline-block',

package/dist/components/ImportMeta.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { assert } from '../utils/server';
 export { ImportMeta };
-function ImportMeta({ prop }) {
+function ImportMeta(_a) {
+    var prop = _a.prop;
     assert(!prop.startsWith('import'));
     assert(!prop.startsWith('.'));
-    const text = 'imp' + 'ort.meta.' + prop;
+    var text = 'imp' + 'ort.meta.' + prop;
     return React.createElement("code", null, text);
 }