void-plugin-hono-jsx 0.1.0-rc.1 → 0.2.0

package/src/plugins/markdown-compiler.ts

@@ -1,4 +1,5 @@
 import MarkdownExit from 'markdown-exit';
+import { configureMarkdownFeatures, type HonoMarkdownOptions } from './markdown-features.ts';
 import { parseSync } from 'vite';
 import { parseDocument } from 'yaml';
 import { findIslandImports, editIslandSource } from 'void/pages-islands-plugin';
@@ -18,38 +19,53 @@ export function extractMarkdown(source: string) {
   return { body, script, imports, graphSource, clientCode };
 }
 
-export function compileMarkdown(source: string) {
-  const extracted = extractMarkdown(source);
-  const match = extracted.body.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
-  let frontmatter: Record<string, unknown> = {};
-  if (match) {
-    const yaml = parseDocument(match[1], { uniqueKeys: true });
-    if (yaml.errors.length) throw new Error('Hono Markdown: invalid frontmatter: ' + yaml.errors.map(error => error.message).join('; '));
-    const value: unknown = yaml.toJS({ maxAliasCount: 50 });
-    if (value !== null && (typeof value !== 'object' || Array.isArray(value))) throw new Error('Hono Markdown: frontmatter must be a mapping.');
-    frontmatter = (value ?? {}) as Record<string, unknown>;
-    try { JSON.stringify(frontmatter); } catch { throw new Error('Hono Markdown: frontmatter must be JSON serializable.'); }
-  }
-  const content = match ? extracted.body.slice(match[0].length) : extracted.body;
+export function createMarkdownCompiler(options: HonoMarkdownOptions = {}) {
   const compiler = new MarkdownExit({ html: true, linkify: true });
-  const tokens = compiler.parse(content, {});
-  const headings: Heading[] = [];
-  const slugs = new Map<string, number>();
-  const authoredHtml = tokens.flatMap(token => token.type === 'html_block' || token.type === 'html_inline' ? [token.content] : (token.children ?? []).filter(child => child.type === 'html_inline').map(child => child.content)).join('\n');
-  const usedIds = new Set([...authoredHtml.matchAll(/\bid\s*=\s*(?:"([^"]*)"|'([^']*)')/g)].map(match => match[1] ?? match[2]));
-  for (let index = 0; index < tokens.length; index++) {
-    if (tokens[index].type !== 'heading_open') continue;
-    const inline = tokens[index + 1];
-    const text = inline.children?.map(token => token.type === 'text' || token.type === 'code_inline' ? token.content : token.type === 'image' ? token.content : '').join('') ?? inline.content;
-    const base = text.toLowerCase().replace(/[^\p{L}\p{N} _-]/gu, '').trim().replace(/\s+/g, '-') || 'heading';
-    let count = slugs.get(base) ?? 0;
-    let slug = count ? `${base}-${count}` : base;
-    while (usedIds.has(slug)) { count++; slug = `${base}-${count}`; }
-    slugs.set(base, count + 1); usedIds.add(slug);
-    tokens[index].attrSet('id', slug);
-    headings.push({ depth: Number(tokens[index].tag.slice(1)), slug, text });
+  configureMarkdownFeatures(compiler, options);
+  function parse(source: string) {
+    const extracted = extractMarkdown(source);
+    const match = extracted.body.match(/^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/);
+    let frontmatter: Record<string, unknown> = {};
+    if (match) {
+      const yaml = parseDocument(match[1], { uniqueKeys: true });
+      if (yaml.errors.length) throw new Error('Hono Markdown: invalid frontmatter: ' + yaml.errors.map(error => error.message).join('; '));
+      const value: unknown = yaml.toJS({ maxAliasCount: 50 });
+      if (value !== null && (typeof value !== 'object' || Array.isArray(value))) throw new Error('Hono Markdown: frontmatter must be a mapping.');
+      frontmatter = (value ?? {}) as Record<string, unknown>;
+      try { JSON.stringify(frontmatter); } catch { throw new Error('Hono Markdown: frontmatter must be JSON serializable.'); }
+    }
+    const content = match ? extracted.body.slice(match[0].length) : extracted.body;
+    const env: Record<string, unknown> = {};
+    const tokens = compiler.parse(content, env);
+    const headings: Heading[] = [];
+    const slugs = new Map<string, number>();
+    const authoredHtml = tokens.flatMap(token => token.type === 'html_block' || token.type === 'html_inline' ? [token.content] : (token.children ?? []).filter(child => child.type === 'html_inline').map(child => child.content)).join('\n');
+    const usedIds = new Set([...authoredHtml.matchAll(/\bid\s*=\s*(?:"([^"]*)"|'([^']*)')/g)].map(match => match[1] ?? match[2]));
+    for (let index = 0; index < tokens.length; index++) {
+      if (tokens[index].type !== 'heading_open') continue;
+      const inline = tokens[index + 1];
+      const text = inline.children?.map(token => token.type === 'text' || token.type === 'code_inline' ? token.content : token.type === 'image' ? token.content : '').join('') ?? inline.content;
+      const base = text.toLowerCase().replace(/[^\p{L}\p{N} _-]/gu, '').trim().replace(/\s+/g, '-') || 'heading';
+      let count = slugs.get(base) ?? 0;
+      let slug = count ? `${base}-${count}` : base;
+      while (usedIds.has(slug)) { count++; slug = `${base}-${count}`; }
+      slugs.set(base, count + 1); usedIds.add(slug);
+      tokens[index].attrSet('id', slug);
+      headings.push({ depth: Number(tokens[index].tag.slice(1)), slug, text });
+    }
+    return { ...extracted, source, frontmatter, headings, tokens, env, hasCode: tokens.some(token => token.type === 'fence') };
   }
-  return { ...extracted, frontmatter, headings, html: compiler.renderer.render(tokens, compiler.options, {}) };
+
+  async function render(parsed: ReturnType<typeof parse>) {
+    const { tokens, env, ...result } = parsed;
+    return { ...result, html: await compiler.renderer.renderAsync(tokens, compiler.options, env) };
+  }
+  return { parse, render };
+}
+
+export async function compileMarkdown(source: string, options: HonoMarkdownOptions = {}) {
+  const compiler = createMarkdownCompiler(options);
+  return compiler.render(compiler.parse(source));
 }
 
 // Component tag splitting follows @void/md 0.27.0's emit-shared convention.

package/src/plugins/markdown-copy.ts

@@ -0,0 +1,30 @@
+// Imported as a module only by Markdown pages with fenced code. No Hono runtime
+// or island scheduler is required for code-copy-only documents.
+export const markdownCopyId = 'virtual:void-hono-markdown-copy';
+export const markdownCopyCode = `
+const timers = new WeakMap();
+document.addEventListener('click', async event => {
+  const button = event.target instanceof Element && event.target.closest("div[class*='language-'] > button.copy");
+  if (!button || button.disabled) return;
+  const pre = button.parentElement?.querySelector('pre');
+  if (!pre) return;
+  clearTimeout(timers.get(button));
+  button.classList.remove('copied', 'copy-error');
+  const reset = () => { button.classList.remove('copied', 'copy-error'); button.title = 'Copy Code'; button.setAttribute('aria-label', 'Copy Code'); };
+  try {
+    if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
+    const lines = Array.from(pre.querySelectorAll('.line:not(.diff.remove)'), line => line.textContent);
+    if (lines.at(-1) === '') lines.pop();
+    button.disabled = true;
+    await navigator.clipboard.writeText(lines.join('\\n'));
+    button.classList.add('copied');
+    button.title = 'Copied'; button.setAttribute('aria-label', 'Copied');
+  } catch {
+    button.classList.add('copy-error');
+    button.title = 'Copy failed'; button.setAttribute('aria-label', 'Copy failed');
+  } finally {
+    button.disabled = false;
+    timers.set(button, setTimeout(reset, 2000));
+  }
+});
+`;

package/src/plugins/markdown-features.ts

@@ -0,0 +1,57 @@
+import { createRequire } from 'node:module';
+import type MarkdownExit from 'markdown-exit';
+import type { PluginWithParams } from 'markdown-exit';
+
+/** Matches @void/md's public Markdown options; languages load on demand. */
+export type HonoMarkdownOptions = {
+  shiki?: { themes?: { light: string; dark: string } };
+};
+
+export function configureMarkdownFeatures(md: MarkdownExit, options: HonoMarkdownOptions) {
+  const container = createRequire(import.meta.url)('markdown-it-container') as PluginWithParams;
+  for (const [kind, title] of [['tip', 'TIP'], ['info', 'INFO'], ['warning', 'WARNING'], ['danger', 'DANGER'], ['details', 'Details']]) {
+    md.use(container, kind, { render(tokens: Parameters<NonNullable<typeof md.renderer.rules.fence>>[0], index: number, _options: unknown, env: Parameters<NonNullable<typeof md.renderer.rules.fence>>[3]) {
+      if (tokens[index].nesting !== 1) return kind === 'details' ? '</details>\n' : '</div>\n';
+      const authored = tokens[index].info.trim().slice(kind.length).trim();
+      const rendered = md.renderInline(authored || title, { references: env.references });
+      if (kind === 'details') return `<details class="${kind} custom-block"><summary>${rendered}</summary>\n`;
+      return `<div class="${kind} custom-block"><p class="custom-block-title${authored ? '' : ' custom-block-title-default'}">${rendered}</p>\n`;
+    } });
+  }
+
+  // One highlighter per plugin, not a global first-options-wins singleton.
+  const themes = { light: options.shiki?.themes?.light ?? 'github-light', dark: options.shiki?.themes?.dark ?? 'github-dark' };
+  const initialize = async () => {
+    const [shiki, { createJavaScriptRegexEngine }, transformers] = await Promise.all([
+      import('shiki'), import('shiki/engine/javascript'), import('@shikijs/transformers'),
+    ]);
+    for (const theme of Object.values(themes)) if (!Object.hasOwn(shiki.bundledThemes, theme)) throw new Error(`Hono Markdown: unknown Shiki theme ${JSON.stringify(theme)}.`);
+    const selected = themes as { light: keyof typeof shiki.bundledThemes; dark: keyof typeof shiki.bundledThemes };
+    const highlighter = await shiki.createHighlighter({ engine: createJavaScriptRegexEngine(), themes: [...new Set(Object.values(selected))], langs: [] });
+    return { highlighter, selected, languages: shiki.bundledLanguages, transformers: [
+      transformers.transformerMetaHighlight(), transformers.transformerNotationDiff(),
+      transformers.transformerNotationHighlight(), transformers.transformerNotationFocus(), transformers.transformerNotationErrorLevel(),
+    ] };
+  };
+  let initialized: ReturnType<typeof initialize> | undefined;
+  const loading = new Map<string, Promise<void>>();
+  md.renderer.rules.fence = async (tokens, index) => {
+    const token = tokens[index];
+    const { highlighter, selected, languages, transformers } = await (initialized ??= initialize());
+    const label = /^[\w+-]+/.exec(token.info.trim())?.[0] ?? 'text';
+    let lang = label;
+    if (!['text', 'txt', 'plain', 'plaintext', 'ansi'].includes(lang) && !highlighter.getLoadedLanguages().includes(lang)) {
+      if (Object.hasOwn(languages, lang)) {
+        if (!loading.has(lang)) loading.set(lang, highlighter.loadLanguage(lang as keyof typeof languages));
+        await loading.get(lang);
+      } else lang = 'text';
+    }
+    const highlighted = highlighter.codeToHtml(token.content, { lang, themes: selected, defaultColor: 'light', transformers, meta: { __raw: token.info } });
+    const numbers = /:line-numbers\b/.test(token.info);
+    const start = Number(/\{=(\d+)\}/.exec(token.info)?.[1] ?? 1);
+    const count = [...highlighted.matchAll(/class="line(?:[ "])/g)].length;
+    const gutter = numbers ? `<div class="line-numbers-wrapper" aria-hidden="true">${Array.from({ length: count }, (_, offset) => `<span class="line-number">${start + offset}</span><br>`).join('')}</div>` : '';
+    const active = /(?:^|\s)active(?:\s|$)/.test(token.info) ? ' active' : '';
+    return `<div class="language-${md.utils.escapeHtml(label)}${active}${numbers ? ' line-numbers-mode' : ''}"><button type="button" title="Copy Code" aria-label="Copy Code" class="copy"></button><span class="lang">${md.utils.escapeHtml(label)}</span>${highlighted}${gutter}</div>\n`;
+  };
+}

package/src/theme/code.css

@@ -0,0 +1,202 @@
+/* Void Markdown — Code Blocks */
+
+.void-md div[class*='language-'] {
+  position: relative;
+  margin: 1em 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--vmd-bg-soft, #f8fafc);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md div[class*='language-'] {
+    background: #1e293b;
+  }
+}
+
+:root[data-theme='dark'] .void-md div[class*='language-'] {
+  background: #1e293b;
+}
+
+.void-md div[class*='language-'] pre {
+  margin: 0;
+  padding: 1.25em 1.5em;
+  overflow-x: auto;
+  background: transparent;
+}
+
+.void-md div[class*='language-'] code {
+  font-family: var(--vmd-font-mono, ui-monospace, 'Cascadia Code', Menlo, monospace);
+  font-size: 0.875em;
+  line-height: 1.7;
+  display: block;
+  width: fit-content;
+  min-width: 100%;
+}
+
+/* Language label */
+.void-md div[class*='language-'] .lang {
+  position: absolute;
+  top: 0.5em;
+  right: 3em;
+  font-size: 0.75em;
+  font-weight: 500;
+  color: var(--vmd-text-muted, #94a3b8);
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+/* Copy button */
+.void-md div[class*='language-'] .copy {
+  position: absolute;
+  top: 0.5em;
+  right: 0.5em;
+  width: 2em;
+  height: 2em;
+  border: 1px solid var(--vmd-border, #e2e8f0);
+  border-radius: 4px;
+  background: var(--vmd-bg-soft, #f8fafc);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.void-md div[class*='language-']:hover .copy {
+  opacity: 1;
+}
+
+.void-md div[class*='language-'] .copy::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E")
+    center / 60% no-repeat;
+}
+
+.void-md div[class*='language-'] .copy.copied {
+  opacity: 1;
+}
+
+.void-md div[class*='language-'] .copy.copied::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
+}
+
+/* Shiki dual theme — keep inline light colors, only swap in dark mode */
+.void-md pre.shiki.shiki-themes {
+  background-color: var(--shiki-light-bg, #fff) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md pre.shiki.shiki-themes {
+    background-color: var(--shiki-dark-bg, #1e293b) !important;
+    color: var(--shiki-dark, #e1e4e8) !important;
+  }
+
+  :root:not([data-theme='light']) .void-md pre.shiki.shiki-themes span[style*='--shiki-dark'] {
+    color: var(--shiki-dark) !important;
+  }
+}
+
+:root[data-theme='dark'] .void-md pre.shiki.shiki-themes {
+  background-color: var(--shiki-dark-bg, #1e293b) !important;
+  color: var(--shiki-dark, #e1e4e8) !important;
+}
+
+:root[data-theme='dark'] .void-md pre.shiki.shiki-themes span[style*='--shiki-dark'] {
+  color: var(--shiki-dark) !important;
+}
+
+/* Shiki notation transformers */
+.void-md pre .diff.add {
+  background: rgba(16, 185, 129, 0.14);
+}
+
+.void-md pre .diff.add::before {
+  content: '+';
+  position: absolute;
+  left: 0.5em;
+  color: #10b981;
+}
+
+.void-md pre .diff.remove {
+  background: rgba(239, 68, 68, 0.14);
+  opacity: 0.7;
+}
+
+.void-md pre .diff.remove::before {
+  content: '-';
+  position: absolute;
+  left: 0.5em;
+  color: #ef4444;
+}
+
+.void-md pre .diff {
+  position: relative;
+  padding-left: 2em;
+  margin: 0 -1.5em;
+  padding-right: 1.5em;
+}
+
+.void-md pre .highlighted {
+  background: rgba(99, 102, 241, 0.1);
+  margin: 0 -1.5em;
+  padding: 0 1.5em;
+  display: inline-block;
+  width: calc(100% + 3em);
+}
+
+.void-md pre .highlighted.warning {
+  background: rgba(234, 179, 8, 0.14);
+}
+
+.void-md pre .highlighted.error {
+  background: rgba(239, 68, 68, 0.14);
+}
+
+.void-md pre .has-focus .line:not(.focused) {
+  opacity: 0.4;
+  transition: opacity 0.3s;
+}
+
+.void-md pre:hover .has-focus .line:not(.focused) {
+  opacity: 1;
+}
+
+/* Line numbers */
+.void-md div[class*='language-'].line-numbers-mode {
+  padding-left: 2.5em;
+}
+
+.void-md .line-numbers-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 2.5em;
+  padding: 1.25em 0;
+  text-align: center;
+  font-family: var(--vmd-font-mono, monospace);
+  font-size: 0.875em;
+  line-height: 1.7;
+  color: var(--vmd-text-muted, #94a3b8);
+  border-right: 1px solid var(--vmd-border, #e2e8f0);
+  background: var(--vmd-bg-soft, #f8fafc);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md .line-numbers-wrapper {
+    background: #1e293b;
+  }
+}
+
+:root[data-theme='dark'] .void-md .line-numbers-wrapper {
+  background: #1e293b;
+}
+
+/* Keep the official theme usable with a keyboard and touch input. */
+.void-md div[class*='language-'] .copy:focus-visible,
+.void-md div[class*='language-'] .copy.copy-error { opacity: 1; }
+.void-md div[class*='language-'] .copy:focus-visible { outline: 2px solid var(--vmd-link, #2563eb); outline-offset: 2px; }
+@media (hover: none) { .void-md div[class*='language-'] .copy { opacity: 1; } }

package/src/theme/containers.css

@@ -0,0 +1,125 @@
+/* Void Markdown — Containers & GitHub Alerts */
+
+.void-md .custom-block {
+  margin: 1em 0;
+  padding: 1em 1.25em;
+  border-radius: 8px;
+  border-left: 4px solid;
+}
+
+.void-md .custom-block-title {
+  font-weight: 600;
+  margin-bottom: 0.5em;
+}
+
+.void-md .custom-block > :last-child {
+  margin-bottom: 0;
+}
+
+/* Tip */
+.void-md .tip {
+  border-color: #10b981;
+  background: rgba(16, 185, 129, 0.08);
+}
+
+.void-md .tip .custom-block-title {
+  color: #10b981;
+}
+
+/* Info / Note */
+.void-md .info,
+.void-md .note {
+  border-color: #3b82f6;
+  background: rgba(59, 130, 246, 0.08);
+}
+
+.void-md .info .custom-block-title,
+.void-md .note .custom-block-title {
+  color: #3b82f6;
+}
+
+/* Warning / Important */
+.void-md .warning,
+.void-md .important {
+  border-color: #eab308;
+  background: rgba(234, 179, 8, 0.08);
+}
+
+.void-md .warning .custom-block-title,
+.void-md .important .custom-block-title {
+  color: #ca8a04;
+}
+
+/* Danger / Caution */
+.void-md .danger,
+.void-md .caution {
+  border-color: #ef4444;
+  background: rgba(239, 68, 68, 0.08);
+}
+
+.void-md .danger .custom-block-title,
+.void-md .caution .custom-block-title {
+  color: #ef4444;
+}
+
+/* Details (collapsible) */
+.void-md details.custom-block {
+  cursor: pointer;
+}
+
+.void-md details.custom-block summary {
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.void-md details.custom-block[open] summary {
+  margin-bottom: 0.5em;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) .void-md .tip {
+    background: rgba(16, 185, 129, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .info,
+  :root:not([data-theme='light']) .void-md .note {
+    background: rgba(59, 130, 246, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .warning,
+  :root:not([data-theme='light']) .void-md .important {
+    background: rgba(234, 179, 8, 0.12);
+  }
+  :root:not([data-theme='light']) .void-md .warning .custom-block-title,
+  :root:not([data-theme='light']) .void-md .important .custom-block-title {
+    color: #eab308;
+  }
+  :root:not([data-theme='light']) .void-md .danger,
+  :root:not([data-theme='light']) .void-md .caution {
+    background: rgba(239, 68, 68, 0.12);
+  }
+}
+
+:root[data-theme='dark'] .void-md .tip {
+  background: rgba(16, 185, 129, 0.12);
+}
+:root[data-theme='dark'] .void-md .info,
+:root[data-theme='dark'] .void-md .note {
+  background: rgba(59, 130, 246, 0.12);
+}
+:root[data-theme='dark'] .void-md .warning,
+:root[data-theme='dark'] .void-md .important {
+  background: rgba(234, 179, 8, 0.12);
+}
+:root[data-theme='dark'] .void-md .warning .custom-block-title,
+:root[data-theme='dark'] .void-md .important .custom-block-title {
+  color: #eab308;
+}
+:root[data-theme='dark'] .void-md .danger,
+:root[data-theme='dark'] .void-md .caution {
+  background: rgba(239, 68, 68, 0.12);
+}
+
+/* GitHub Alerts */
+.void-md .github-alert {
+  border-left-width: 4px;
+}

package/src/theme/content.css

@@ -0,0 +1,4 @@
+/* Void Markdown — Content Styles (scoped to .void-md) */
+@import './prose.css';
+@import './code.css';
+@import './containers.css';

package/src/theme/index.css

@@ -0,0 +1,7 @@
+/* Void Markdown — Full Theme (reset + baseline + content)
+ *
+ * Use this entry for standalone markdown sites that need a complete stylesheet.
+ * For embedding markdown in an existing app, use content.css instead.
+ */
+@import './reset.css';
+@import './content.css';