comark 0.3.1 → 0.4.0

package/dist/utils/index.d.ts

@@ -18,6 +18,11 @@ export declare function textContent(node: ComarkNode, options?: {
  * @param visitor - A function that visits a node
  */
 export declare function visit(tree: ComarkTree, checker: (node: ComarkNode) => boolean, visitor: (node: ComarkNode) => ComarkNode | false | undefined | void): void;
+export declare function indent(text: string, { ignoreFirstLine, level, width }?: {
+    ignoreFirstLine?: boolean;
+    level?: number;
+    width?: number;
+}): string;
 /**
  * Convert a string to pascal case
  * @param str - The string to convert

package/dist/utils/index.js

@@ -38,10 +38,12 @@ visitor) {
             const res = visitor(node);
             if (res === false) {
                 // remove the node from the parent
+                ;
                 parent.splice(index, 1);
                 return true; // signal that node was removed
             }
             if (res !== undefined) {
+                ;
                 parent[index] = res;
                 currentNode = res;
             }
@@ -72,13 +74,29 @@ visitor) {
     }
 }
 // #region String Utils
+export function indent(text, { ignoreFirstLine = false, level = 1, width } = {}) {
+    const pad = width ? ' '.repeat(width) : '  '.repeat(level);
+    return text
+        .split('\n')
+        .map((line, index) => {
+        if (ignoreFirstLine && index === 0) {
+            return line;
+        }
+        return line ? pad + line : line;
+    })
+        .join('\n');
+}
 /**
  * Convert a string to pascal case
  * @param str - The string to convert
  * @returns The pascal case string
  */
 export function pascalCase(str) {
-    return str ? splitByCase(str).map(p => p[0].toUpperCase() + p.slice(1)).join('') : '';
+    return str
+        ? splitByCase(str)
+            .map((p) => (p ? p[0].toUpperCase() + p.slice(1) : ''))
+            .join('')
+        : '';
 }
 /**
  * Convert a string to kebab case
@@ -86,7 +104,11 @@ export function pascalCase(str) {
  * @returns The kebab case string
  */
 export function kebabCase(str) {
-    return str ? splitByCase(str).map(p => p.toLowerCase()).join('-') : '';
+    return str
+        ? splitByCase(str)
+            .map((p) => p.toLowerCase())
+            .join('-')
+        : '';
 }
 /**
  * Convert a string to camel case
@@ -123,7 +145,7 @@ function splitByCase(str) {
         const charCode = char.charCodeAt(0);
         const isNumber = charCode >= 48 && charCode <= 57; // '0' to '9'
         // Fast uppercase check using character codes
-        const isUpper = isNumber ? void 0 : (charCode >= 65 && charCode <= 90); // 'A' to 'Z'
+        const isUpper = isNumber ? void 0 : charCode >= 65 && charCode <= 90; // 'A' to 'Z'
         if (previousSplitter === false) {
             if (previousUpper === false && isUpper === true) {
                 parts.push(buff);

package/package.json

@@ -1,26 +1,34 @@
 {
   "name": "comark",
-  "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
-  "author": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/comarkdown/comark.git"
-  },
-  "bugs": {
-    "url": "https://github.com/comarkdown/comark/issues"
-  },
-  "homepage": "https://comark.dev",
   "keywords": [
     "markdown",
     "mdc",
     "parser",
+    "react",
     "streaming",
-    "vue",
-    "react"
+    "vue"
   ],
+  "homepage": "https://comark.dev",
+  "bugs": {
+    "url": "https://github.com/comarkdown/comark/issues"
+  },
+  "license": "MIT",
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/comarkdown/comark.git"
+  },
+  "files": [
+    "dist",
+    "skills"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./plugins/*": "./dist/plugins/*.js",
@@ -28,16 +36,27 @@
     "./parse": "./dist/parse.js",
     "./render": "./dist/render.js"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "skills"
-  ],
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "entities": "^8.0.0",
+    "htmlparser2": "^12.0.0",
+    "js-yaml": "^4.1.1",
+    "markdown-exit": "1.0.0-beta.9"
+  },
+  "devDependencies": {
+    "@json-render/core": "^0.16.0",
+    "@shikijs/twoslash": "^4.0.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it": "^14.1.2",
+    "github-slugger": "^2.0.0",
+    "hast-util-to-string": "^3.0.1",
+    "minimark": "0.2.0",
+    "tsx": "^4.22.4",
+    "twoslash": "^0.3.6",
+    "vitest": "^4.1.4"
+  },
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
     "katex": "^0.16.45",
@@ -54,25 +73,6 @@
       "optional": true
     }
   },
-  "devDependencies": {
-    "@json-render/core": "^0.16.0",
-    "@shikijs/twoslash": "^4.0.2",
-    "@types/js-yaml": "^4.0.9",
-    "@types/markdown-it": "^14.1.2",
-    "github-slugger": "^2.0.0",
-    "hast-util-to-string": "^3.0.1",
-    "minimark": "0.2.0",
-    "tsx": "^4.21.0",
-    "twoslash": "^0.3.6",
-    "vitest": "^4.1.4"
-  },
-  "dependencies": {
-    "@comark/markdown-it": "^0.3.4",
-    "entities": "^8.0.0",
-    "htmlparser2": "^12.0.0",
-    "js-yaml": "^4.1.1",
-    "markdown-exit": "1.0.0-beta.9"
-  },
   "scripts": {
     "stub": "node ../../scripts/stub.mjs",
     "build": "tsc",

package/skills/comark/references/rendering-svelte.md

@@ -48,9 +48,9 @@ Map custom Svelte components to Comark elements:
 ```svelte
 <script lang="ts">
   import { Comark } from '@comark/svelte'
-  import CustomHeading from './CustomHeading.svelte'
-  import CustomAlert from './CustomAlert.svelte'
-  import CustomCard from './CustomCard.svelte'
+  import CustomHeading from './components/comark/CustomHeading.svelte'
+  import CustomAlert from './components/comark/CustomAlert.svelte'
+  import CustomCard from './components/comark/CustomCard.svelte'
 
   const customComponents = {
     h1: CustomHeading,
@@ -127,9 +127,9 @@ Load components dynamically using `componentsManifest`:
   import { Comark } from '@comark/svelte'
 
   const componentMap: Record<string, () => Promise<any>> = {
-    'alert': () => import('./Alert.svelte'),
-    'card': () => import('./Card.svelte'),
-    'button': () => import('./Button.svelte'),
+    'alert': () => import('./components/comark/Alert.svelte'),
+    'card': () => import('./components/comark/Card.svelte'),
+    'button': () => import('./components/comark/Button.svelte'),
   }
 
   async function loadComponent(name: string) {
@@ -144,6 +144,50 @@ Load components dynamically using `componentsManifest`:
 <Comark markdown={content} componentsManifest={loadComponent} />
 ```
 
+In SvelteKit projects, keep components rendered from Markdown in a dedicated folder such as `$lib/components/comark/`. This keeps Comark-rendered components separate from normal app UI components and makes `componentsManifest` globs easier to audit.
+
+For SvelteKit SSR with non-eager lazy components, use `ComarkAsync` and a manifest that returns dynamic imports. An explicit map is the easiest option to audit:
+
+```svelte
+<script lang="ts">
+  import { ComarkAsync } from '@comark/svelte/async'
+
+  const componentMap: Record<string, () => Promise<any>> = {
+    'alert': () => import('$lib/components/comark/Alert.svelte'),
+    'lazy-card': () => import('$lib/components/comark/LazyCard.svelte'),
+  }
+
+  const componentsManifest = (name: string) => componentMap[name]?.()
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} {componentsManifest} />
+</svelte:boundary>
+```
+
+Use `import.meta.glob` when you want the manifest to cover every Svelte component in a folder:
+
+```svelte
+<script lang="ts">
+  import { ComarkAsync } from '@comark/svelte/async'
+  import { pascalCase } from '@comark/svelte/utils'
+
+  const modules = import.meta.glob('../lib/components/comark/*.svelte')
+
+  const componentsManifest = (name: string) => {
+    return modules[`../lib/components/comark/${pascalCase(name)}.svelte`]?.()
+  }
+</script>
+
+<svelte:boundary>
+  <ComarkAsync markdown={content} {componentsManifest} />
+</svelte:boundary>
+```
+
+Omit the boundary `pending` snippet when you want SvelteKit SSR to wait and include the resolved lazy components in the initial HTML.
+
+Use eager/static components with `ComarkRenderer` when you need stable SSR without Svelte's experimental async support.
+
 ---
 
 ## Slots Support
@@ -319,7 +363,7 @@ Override native HTML elements using the `Prose` prefix:
 
 ## Experimental Async
 
-The `ComarkAsync` component uses Svelte's experimental `await` in `$derived` for a declarative approach. Requires `experimental.async` in your Svelte config:
+The `ComarkAsync` component uses Svelte's experimental `await` in `$derived` for a declarative approach. It can also await async `componentsManifest` entries during SSR, so lazy dynamic imports render into SvelteKit server HTML. Requires `experimental.async` in your Svelte config:
 
 ```js
 // svelte.config.js

package/dist/internal/stringify/indent.d.ts

@@ -1,5 +0,0 @@
-export declare function indent(text: string, { ignoreFirstLine, level, width }?: {
-    ignoreFirstLine?: boolean;
-    level?: number;
-    width?: number;
-}): string;

package/dist/internal/stringify/indent.js

@@ -1,9 +0,0 @@
-export function indent(text, { ignoreFirstLine = false, level = 1, width } = {}) {
-    const pad = width ? ' '.repeat(width) : '  '.repeat(level);
-    return text.split('\n').map((line, index) => {
-        if (ignoreFirstLine && index === 0) {
-            return line;
-        }
-        return line ? pad + line : line;
-    }).join('\n');
-}

package/dist/vite.d.ts

@@ -1 +0,0 @@
-export * from '../src/vite'

package/dist/vite.js

@@ -1 +0,0 @@
-export * from '../src/vite.ts'

package/skills/skills/comark/AGENTS.md

@@ -1,261 +0,0 @@
-# Comark — AI Agents & LLM Streaming
-
-A guide for using Comark in AI agent and LLM-powered applications where markdown is generated incrementally by a language model.
-
-## Why Comark for AI?
-
-LLMs stream markdown token-by-token. Standard markdown parsers expect complete input — they fail or produce broken output on partial streams. Comark was built to handle exactly this:
-
-- **`autoClose`** (default: `true`) — incomplete syntax like `**bold text` is automatically closed on every parse, so partial tokens always render correctly
-- **Streaming mode** — re-renders efficiently as content arrives
-- **Caret indicator** — shows a live cursor during generation
-- **ANSI rendering** — styled terminal output for CLI agents
-
----
-
-## Vue
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue'
-import { Comark } from '@comark/vue'
-
-const content = ref('')
-const streaming = ref(false)
-
-async function generate(prompt: string) {
-  content.value = ''
-  streaming.value = true
-
-  const res = await fetch('/api/chat', {
-    method: 'POST',
-    body: JSON.stringify({ prompt }),
-  })
-
-  const reader = res.body!.getReader()
-  const decoder = new TextDecoder()
-
-  while (true) {
-    const { done, value } = await reader.read()
-    if (done) break
-    content.value += decoder.decode(value, { stream: true })
-  }
-
-  streaming.value = false
-}
-</script>
-
-<template>
-  <Comark :streaming="streaming" caret>{{ content }}</Comark>
-</template>
-```
-
----
-
-## React
-
-```tsx
-import { useState } from 'react'
-import { Comark } from '@comark/react'
-
-export default function Chat() {
-  const [content, setContent] = useState('')
-  const [streaming, setStreaming] = useState(false)
-
-  async function generate(prompt: string) {
-    setContent('')
-    setStreaming(true)
-
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({ prompt }),
-    })
-
-    const reader = res.body!.getReader()
-    const decoder = new TextDecoder()
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      setContent(prev => prev + decoder.decode(value, { stream: true }))
-    }
-
-    setStreaming(false)
-  }
-
-  return <Comark streaming={streaming} caret>{content}</Comark>
-}
-```
-
----
-
-## Svelte
-
-```svelte
-<script lang="ts">
-  import { Comark } from '@comark/svelte'
-
-  let content = $state('')
-  let streaming = $state(false)
-
-  async function generate(prompt: string) {
-    content = ''
-    streaming = true
-
-    const res = await fetch('/api/chat', {
-      method: 'POST',
-      body: JSON.stringify({ prompt }),
-    })
-
-    const reader = res.body!.getReader()
-    const decoder = new TextDecoder()
-
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      content += decoder.decode(value, { stream: true })
-    }
-
-    streaming = false
-  }
-</script>
-
-<Comark markdown={content} {streaming} caret />
-```
-
----
-
-## Terminal / CLI Agents
-
-Use `@comark/ansi` to render LLM markdown output in terminal-based agents:
-
-```typescript
-import { log } from '@comark/ansi'
-
-// Print a complete LLM response to stdout with ANSI styling
-await log(llmResponse)
-```
-
-For streaming terminal output, use `createLog` with a custom `write` function:
-
-```typescript
-import { createLog } from '@comark/ansi'
-
-const logStream = createLog({
-  write: (s) => process.stdout.write(s),
-})
-
-// Call after each chunk to show partial output
-await logStream(partialMarkdown)
-```
-
----
-
-## Caret Customization
-
-The `caret` prop appends a blinking cursor to the last text node while `streaming` is `true`. Customize it with a CSS class:
-
-```vue
-<Comark :streaming="streaming" :caret="{ class: 'animate-blink' }">{{ content }}</Comark>
-```
-
-```tsx
-<Comark streaming={streaming} caret={{ class: 'animate-blink' }}>{content}</Comark>
-```
-
-```svelte
-<Comark markdown={content} {streaming} caret={{ class: 'animate-blink' }} />
-```
-
----
-
-## With Custom Components
-
-If your LLM produces Comark component syntax (e.g., `::alert`), register components before streaming begins:
-
-```vue
-<script setup lang="ts">
-import { Comark } from '@comark/vue'
-import Alert from './Alert.vue'
-import CodeBlock from './CodeBlock.vue'
-</script>
-
-<template>
-  <Comark :components="{ alert: Alert, pre: CodeBlock }" :streaming="streaming" caret>
-    {{ content }}
-  </Comark>
-</template>
-```
-
----
-
-## With Syntax Highlighting
-
-Syntax highlighting works during streaming — each re-parse will highlight newly completed code blocks:
-
-```vue
-<script setup lang="ts">
-import { Comark } from '@comark/vue'
-import highlight from '@comark/vue/plugins/highlight'
-import githubDark from '@shikijs/themes/github-dark'
-
-const plugins = [highlight({ themes: { light: githubDark, dark: githubDark } })]
-</script>
-
-<template>
-  <Suspense>
-    <Comark :plugins="plugins" :streaming="streaming" caret>{{ content }}</Comark>
-  </Suspense>
-</template>
-```
-
-```tsx
-import { Comark } from '@comark/react'
-import highlight from '@comark/react/plugins/highlight'
-import githubDark from '@shikijs/themes/github-dark'
-
-const plugins = [highlight({ themes: { light: githubDark, dark: githubDark } })]
-
-export default function Chat({ content, streaming }) {
-  return (
-    <Comark plugins={plugins} streaming={streaming} caret>
-      {content}
-    </Comark>
-  )
-}
-```
-
----
-
-## defineComarkComponent for AI Chat
-
-Pre-configure a Comark component for your AI chat UI once, then reuse it everywhere:
-
-```typescript
-// comark.ts
-import { defineComarkComponent } from '@comark/vue'
-import highlight from '@comark/vue/plugins/highlight'
-import math, { Math } from '@comark/vue/plugins/math'
-import githubDark from '@shikijs/themes/github-dark'
-import Alert from './components/Alert.vue'
-
-export const ChatComark = defineComarkComponent({
-  name: 'ChatComark',
-  plugins: [
-    math(),
-    highlight({ themes: { light: githubDark, dark: githubDark } }),
-  ],
-  components: { Math, alert: Alert },
-  autoClose: true,
-})
-```
-
-```vue
-<template>
-  <ChatComark :streaming="streaming" caret>{{ content }}</ChatComark>
-</template>
-```
-
----
-
-[← Back to Skills Guide](./SKILL.md)