@brillout/docpress 0.15.10-commit-e9efbd3 → 0.15.10-commit-af2d9bc

package/components/CodeSnippets/useSelectCodeLang.ts

@@ -0,0 +1,61 @@
+export { useSelectCodeLang }
+
+import { useState, useEffect, useCallback } from 'react'
+import { assertWarning } from '../../utils/assert'
+
+const storageKey = 'docpress:code-lang'
+const codeLangDefaultSsr = 'ts'
+const codeLangDefaultClient = 'js'
+
+function useSelectCodeLang() {
+  const [codeLangSelected, setCodeLangSelected] = useState(codeLangDefaultSsr)
+  const updateState = () => {
+    setCodeLangSelected(getCodeLangStorage())
+  }
+  const updateStateOnStorageEvent = (event: StorageEvent) => {
+    if (event.key === storageKey) return
+    updateState()
+  }
+
+  const getCodeLangStorage = () => {
+    try {
+      return window.localStorage.getItem(storageKey) ?? codeLangDefaultClient
+    } catch (error) {
+      console.error(error)
+      assertWarning(false, 'Error reading from localStorage')
+      return codeLangDefaultClient
+    }
+  }
+
+  const selectCodeLang = useCallback((value: string) => {
+    try {
+      window.localStorage.setItem(storageKey, value)
+      setCodeLangSelected(value)
+      window.dispatchEvent(new CustomEvent('code-lang-storage'))
+    } catch (error) {
+      console.error(error)
+      assertWarning(false, 'Error setting localStorage')
+    }
+  }, [])
+
+  useEffect(() => {
+    // Initial load from localStorage
+    updateState()
+    // Update code lang in current tab
+    window.addEventListener('code-lang-storage', updateState)
+    // Update code lang if changed in another tab
+    window.addEventListener('storage', updateStateOnStorageEvent)
+    return () => {
+      window.removeEventListener('code-lang-storage', updateState)
+      window.removeEventListener('storage', updateStateOnStorageEvent)
+    }
+  }, [])
+
+  return [codeLangSelected, selectCodeLang] as const
+}
+
+declare global {
+  interface WindowEventMap {
+    'code-lang-storage': CustomEvent
+  }
+}

package/components/CodeSnippets.css

@@ -0,0 +1,47 @@
+/* Language select */
+.code-lang-select {
+  right: 42px;
+  padding-left: 6px;
+  padding-right: 21px;
+  font-size: 14px;
+  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1'><path fill='%23666' d='M0 0l1 1 1-1z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 7px center;
+  background-size: 10px;
+  /* Remove default arrow in some browsers */
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+/* Copy button */
+.copy-button {
+  display: inline-flex;
+  align-items: center;
+  right: 10px;
+  width: 30px;
+  & svg {
+    width: 100%;
+    height: 100%;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+  }
+}
+
+/* Common style */
+.copy-button,
+.code-lang-select {
+  position: absolute !important;
+  height: 25px;
+  top: 10px;
+  z-index: 3;
+  outline: none;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #f7f7f7;
+  &:hover {
+    background-color: #eee;
+  }
+}

package/components/CodeSnippets.tsx

@@ -1,72 +1,107 @@
-export { CodeSnippets, CodeSnippet, TypescriptOnly }
+// Public
+export { TypescriptOnly }
 
-import React from 'react'
-import { useSelectedLanguage } from '../utils/useSelectedLanguage'
+// Internal
+export { CodeSnippets }
+export { CodeSnippet }
 
-function CodeSnippets({ children }: { children: React.ReactNode }) {
-  const [selectedLang, setSelectedLang] = useSelectedLanguage()
+import React, { useState } from 'react'
+import { useSelectCodeLang } from './CodeSnippets/useSelectCodeLang'
+import './CodeSnippets.css'
 
-  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedLang(e.target.value)
-  }
+/** 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 }: { children: React.ReactNode }) {
+  const [codeLangSelected, selectCodeLang] = useSelectCodeLang()
   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 className="code-lang-select" onChange={onChange} value={codeLangSelected}>
+          <option value="js">JavaScript</option>
+          <option value="ts">TypeScript</option>
         </select>
       </form>
       {children}
     </div>
   )
+  function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    selectCodeLang(e.target.value)
+  }
 }
 
 function CodeSnippet({
   children,
-  language,
+  codeLang,
   tsOnly = false,
-}: { children: React.ReactNode; language: string; tsOnly: boolean }) {
-  const [selectedLang] = useSelectedLanguage()
+}: { children: React.ReactNode; codeLang: string; tsOnly: boolean }) {
+  const [codeLangSelected] = useSelectCodeLang()
 
-  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)
-    }
-  }
+  const displayStyle = tsOnly ? {} : { display: codeLangSelected === codeLang ? 'block' : 'none' }
 
   return (
-    <div style={{ ...style, position: 'relative' }}>
-      <button
-        type="button"
-        style={{ position: 'absolute', top: '10px', right: '10px', zIndex: 3 }}
-        onClick={copyToClipboard}
-      >
-        Copy
-      </button>
+    <div style={{ ...displayStyle, position: 'relative' }}>
+      <CopyButton />
       {children}
     </div>
   )
 }
 
-// Show/hide TypeScript sections (code and/or plain)
-function TypescriptOnly({ children }: { children: React.ReactNode }) {
-  const [selectedLang] = useSelectedLanguage()
+function CopyButton() {
+  const [isSuccess, setIsSuccess] = useState(null as null | boolean)
+  const onCopy = (success: boolean) => {
+    setIsSuccess(success)
+    setTimeout(() => {
+      setIsSuccess(null)
+    }, 900)
+  }
+  const tooltip = isSuccess === null ? 'Copy to clipboard' : isSuccess ? 'Copied' : 'Failed'
+  const text =
+    isSuccess === null ? (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+    ) : isSuccess ? (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="#28a745" strokeWidth="3">
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    ) : (
+      '❌'
+    )
+  return (
+    <button className="copy-button" aria-label={tooltip} data-label-position="top" type="button" onClick={onClick}>
+      {text}
+    </button>
+  )
+  async function onClick(e: React.MouseEvent<HTMLButtonElement>) {
+    let success: boolean
+    try {
+      await copyToClipboard(e)
+      success = true
+    } catch (error) {
+      console.error(error)
+      success = false
+    }
+    onCopy(success)
+  }
+}
+
+async function copyToClipboard(e: React.MouseEvent<HTMLButtonElement>) {
+  const figureEl = e.currentTarget.nextElementSibling
+  if (figureEl?.tagName === 'FIGURE') {
+    let text = figureEl.textContent ?? ''
+    text = removeTrailingWhitespaces(text)
+    await navigator.clipboard.writeText(text)
+  }
+}
 
-  return <div style={{ display: selectedLang === 'ts' ? 'block' : 'none' }}>{children}</div>
+function removeTrailingWhitespaces(text: string) {
+  return text
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .join('\n')
 }

package/css/tooltip.css

@@ -17,10 +17,8 @@
     font-size: 12px;
     content: attr(aria-label);
     position: absolute;
-    top: 100%;
     left: 50%;
     transform: translate(-50%, 0);
-    margin-top: 5px;
     background: #fdfdfd;
     padding: 3px 10px;
     box-shadow: rgb(0 0 0 / 8%) 2px 4px 7px 0px;
@@ -34,4 +32,14 @@
     */
     white-space: nowrap;
   }
+  /* Show below */
+  [aria-label]:not([data-label-position])::before {
+    top: 100%;
+    margin-top: 5px;
+  }
+  /* Show above */
+  [aria-label][data-label-position='top']::before {
+    bottom: 100%;
+    margin-bottom: 7px;
+  }
 }

package/detypePlugin.ts

@@ -2,96 +2,121 @@ export { detypePlugin }
 
 import type { PluginOption } from 'vite'
 import module from 'node:module'
-
+import { assertUsage } from './utils/assert.js'
+import pc from '@brillout/picocolors'
 // 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')
+const { transform: detype } = module.createRequire(import.meta.url)('detype') as typeof import('detype')
+
+const prettierOptions: NonNullable<Parameters<typeof detype>[2]>['prettierOptions'] = {
+  semi: false,
+  singleQuote: true,
+  printWidth: 100,
+  trailingComma: 'none',
+}
+// RegExp to find TypeScript code blocks.
+//
+// For example:
+// ~~~mdx
+// ```ts
+// const hello: string = 'world'
+// ```
+// ~~~
+//
+// But also indented code blocks:
+// ~~~mdx
+// > Also works:
+// > - In blockquotes
+// > - In bullet points
+// >   ```ts
+// >   const hello: string = 'world'
+// >   ```
+// ~~~
+const codeBlockRE = /^(.*)```(tsx?|vue)[^\n]*\n([\s\S]*?)```/gm
 
 function detypePlugin(): PluginOption {
   return {
     name: '@brillout/docpress:detypePlugin',
     enforce: 'pre',
-    transform: async (code: string, id: string) => {
-      if (!id.endsWith('+Page.mdx')) {
-        return
-      }
-      const codeNew = await transformCode(code)
-
+    transform: async (code: string, moduleId: string) => {
+      if (!moduleId.endsWith('.mdx')) return
+      const codeNew = await transformCode(code, moduleId)
       return codeNew
     },
   }
 }
 
-const codeBlockRE = /^([ \t]{0,3}>?[ \t]?)```(tsx?|vue)[^\n]*\n([\s\S]*?)```/gm
-const prettierOptions = {
-  semi: false,
-  singleQuote: true,
-  printWidth: 100,
-}
-
-async function transformCode(code: string) {
+async function transformCode(code: string, moduleId: string) {
   const matches = Array.from(code.matchAll(codeBlockRE))
-  if (matches.length === 0) {
-    return code
-  }
+  if (matches.length === 0) return
 
   let codeNew = `import { CodeSnippets, CodeSnippet } from '@brillout/docpress';\n\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 [codeBlockOuterStr, codeBlockIndent, codeBlockLang, codeBlockContentWithIndent] = match
 
-    const blockStart = match.index
-    const blockEnd = blockStart + fullMatch.length
+    // Remove indentation
+    const codeBlockOpen = codeBlockOuterStr.split('\n')[0].slice(codeBlockIndent.length)
+    const codeBlockContent = removeCodeBlockIndent(codeBlockContentWithIndent, codeBlockIndent, moduleId)
 
-    codeNew += code.slice(lastIndex, blockStart)
+    const blockStartIndex = match.index
+    const blockEndIndex = blockStartIndex + codeBlockOuterStr.length
+    codeNew += code.slice(lastIndex, blockStartIndex)
 
-    if (startsWith.length > 0) {
-      tsCode = stripStarts(tsCode, startsWith)
-    }
-
-    if (tsOpeningCode.includes('ts-only')) {
-      codeNew += `${startsWith}<CodeSnippet language={'ts'} tsOnly={'true'}>\n${fullMatch}\n${startsWith}</CodeSnippet>`
+    if (codeBlockOpen.includes('ts-only')) {
+      codeNew += `${codeBlockIndent}<CodeSnippet codeLang="ts" tsOnly>\n${codeBlockOuterStr}\n${codeBlockIndent}</CodeSnippet>`
     } else {
-      const jsCode = await transform(tsCode.replaceAll('.ts', '.js'), `tsCode.${lang}`, {
+      // someFileName.ts => someFileName.js
+      let codeBlockContentJs = codeBlockContent.replaceAll('.ts', '.js')
+      // Remove TypeScript
+      codeBlockContentJs = await detype(codeBlockContentJs, `some-dummy-filename.${codeBlockLang}`, {
         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(
-        `<CodeSnippets>\n${tsCodeSnippet}\n${jsCodeSnippet}\n</CodeSnippets>`,
-        startsWith,
+      const codeBlockLangJs =
+        codeBlockLang === 'vue'
+          ? 'vue'
+          : // ts => js | tsx => jsx
+            codeBlockLang.replace('t', 'j')
+      const codeBlockOpenJs = codeBlockOpen.replace(codeBlockLang, codeBlockLangJs)
+      const codeBlockClose = '```'
+
+      const codeSnippetTs = `<CodeSnippet codeLang="ts">\n${codeBlockOpen}\n${codeBlockContent}${codeBlockClose}\n</CodeSnippet>`
+      const codeSnippetJs = `<CodeSnippet codeLang="js">\n${codeBlockOpenJs}\n${codeBlockContentJs}${codeBlockClose}\n</CodeSnippet>`
+      const codeSnippets = restoreCodeBlockIndent(
+        `<CodeSnippets>\n${codeSnippetJs}\n${codeSnippetTs}\n</CodeSnippets>`,
+        codeBlockIndent,
       )
 
       codeNew += codeSnippets
     }
 
-    lastIndex = blockEnd
+    lastIndex = blockEndIndex
   }
   codeNew += code.slice(lastIndex)
 
   return codeNew
 }
 
-function stripStarts(code: string, startsWith: string) {
+function removeCodeBlockIndent(code: string, codeBlockIndent: string, moduleId: string) {
+  if (!codeBlockIndent.length) return code
   return code
     .split('\n')
-    .map((line) => line.slice(startsWith.length))
+    .map((line) => {
+      assertUsage(
+        line.startsWith(codeBlockIndent.trimEnd()),
+        `In ${pc.bold(pc.blue(moduleId))} the line ${pc.bold(line)} must start with ${pc.bold(codeBlockIndent)}`,
+      )
+      return line.slice(codeBlockIndent.length)
+    })
     .join('\n')
 }
-
-function putBackStarts(code: string, startsWith: string) {
-  if (!startsWith.length) {
-    return code
-  }
+function restoreCodeBlockIndent(code: string, codeBlockIndent: string) {
+  if (!codeBlockIndent.length) return code
   return code
     .split('\n')
-    .map((line) => `${startsWith}${line}`)
+    .map((line) => `${codeBlockIndent}${line}`)
     .join('\n')
 }

package/dist/+config.js

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

package/dist/NavItemComponent.js

@@ -1,53 +1,39 @@
-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(_a) {
-    var _b;
-    var _c;
-    var navItem = _a.navItem, onClick = _a.onClick;
+function NavItemComponent({ navItem, onClick, }) {
     assert([1, 2, 3, 4].includes(navItem.level), navItem);
-    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) }));
+    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 } }));
     if (navItem.level === 1 || navItem.level === 4) {
         assert(navItem.url === undefined);
     }
     else {
-        var sectionTitle = jsxToTextContent(titleJsx);
+        const sectionTitle = jsxToTextContent(titleJsx);
         assertWarning(navItem.url, [
-            "".concat(jsxToTextContent(titleInNavJsx), " is missing a URL hash."),
-            "Add a URL hash with: `## ".concat(sectionTitle, "{#some-hash}`."),
+            `${jsxToTextContent(titleInNavJsx)} is missing a URL hash.`,
+            `Add a URL hash with: \`## ${sectionTitle}{#some-hash}\`.`,
             /* TO-DO/eventually: not implemented yet.
             `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
             */
         ].join(' '));
     }
-    var children = titleInNavJsx;
+    let children = titleInNavJsx;
     if (navItem.level === 1) {
         children = (React.createElement(React.Fragment, null,
             icon,
             children,
             React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
     }
-    var props = {
-        href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
-        children: children,
-        onClick: onClick,
+    const props = {
+        href: navItem.url ?? undefined,
+        children,
+        onClick,
         className: [
             'nav-item',
             'nav-item-level-' + navItem.level,
@@ -59,45 +45,51 @@ function NavItemComponent(_a) {
             .join(' '),
     };
     if (navItem.level === 1) {
-        props.style = (_b = {},
-            _b['--category-color'] = navItem.color,
-            _b);
+        props.style = {
+            ['--category-color']: navItem.color,
+        };
     }
     if (navItem.level === 2 || navItem.level === 3) {
-        return React.createElement("a", __assign({}, props));
+        return React.createElement("a", { ...props });
     }
     else {
-        return React.createElement("span", __assign({}, props));
+        return React.createElement("span", { ...props });
     }
 }
 function getNavItemsWithComputed(navItems, currentUrl) {
-    var navItemIdx;
-    var navItemsWithComputed = navItems.map(function (navItem, i) {
+    let navItemIdx;
+    const navItemsWithComputed = navItems.map((navItem, i) => {
         assert([1, 2, 3, 4].includes(navItem.level), navItem);
-        var navItemPrevious = navItems[i - 1];
-        var navItemNext = navItems[i + 1];
-        var isActive = false;
+        const navItemPrevious = navItems[i - 1];
+        const navItemNext = navItems[i + 1];
+        let isActive = false;
         if (navItem.url === currentUrl) {
-            assert(navItem.level === 2, { currentUrl: currentUrl });
+            assert(navItem.level === 2, { currentUrl });
             assert(navItemIdx === undefined);
             navItemIdx = i;
             isActive = true;
         }
-        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 });
+        const isFirstOfItsKind = navItem.level !== navItemPrevious?.level;
+        const isLastOfItsKind = navItem.level !== navItemNext?.level;
+        const navItemComputed = {
+            ...navItem,
+            isActive,
+            isRelevant: false,
+            isFirstOfItsKind,
+            isLastOfItsKind,
+        };
         return navItemComputed;
     });
     // Set `isRelevant`
     if (navItemIdx !== undefined) {
-        for (var i = navItemIdx; i >= 0; i--) {
-            var navItem = navItemsWithComputed[i];
+        for (let i = navItemIdx; i >= 0; i--) {
+            const navItem = navItemsWithComputed[i];
             navItem.isRelevant = true;
             if (navItem.level === 1)
                 break;
         }
-        for (var i = navItemIdx; i < navItemsWithComputed.length; i++) {
-            var navItem = navItemsWithComputed[i];
+        for (let i = navItemIdx; i < navItemsWithComputed.length; i++) {
+            const navItem = navItemsWithComputed[i];
             if (navItem.level === 1)
                 break;
             navItem.isRelevant = true;
@@ -106,6 +98,6 @@ function getNavItemsWithComputed(navItems, currentUrl) {
     return navItemsWithComputed;
 }
 function Chevron(props) {
-    return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
+    return (React.createElement("svg", { 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,9 +2,8 @@ export { CodeBlockTransformer };
 import React from 'react';
 import { assert } from '../utils/server';
 import './CodeBlockTransformer.css';
-function CodeBlockTransformer(_a) {
-    var children = _a.children, lineBreak = _a.lineBreak;
+function CodeBlockTransformer({ children, lineBreak }) {
     assert(lineBreak === 'white-space' || lineBreak === 'break-word', '`lineBreak` is currently the only use case for <CodeBlockTransformer>');
-    var className = "with-line-break_".concat(lineBreak);
+    const className = `with-line-break_${lineBreak}`;
     return React.createElement("div", { className: className }, children);
 }

package/dist/components/CodeSnippets/useSelectCodeLang.d.ts

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