svelte-streamdown 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/Block.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { parseIncompleteMarkdown } from './utils/parse-incomplete-markdown.js';
+	import { parseMarkdown } from './utils/parse.js';
+	import { useStreamdown } from './Streamdown.svelte';
+	import type { Root } from 'hast';
+	import Element from './Elements/Element.svelte';
+	let {
+		block
+	}: {
+		block: string;
+	} = $props();
+
+	const streamdownContext = useStreamdown();
+	const root = $derived(parseMarkdown(streamdownContext, parseIncompleteMarkdown(block.trim())));
+</script>
+
+{#snippet renderChildren(nodeChildren: Root['children'])}
+	{#each nodeChildren as node}
+		{#if node.type === 'element'}
+			{@const {
+				properties: { className, ...props }
+			} = node}
+			<Element {node} {className} {props} type={node.tagName}>
+				{#if 'children' in node && node.children?.length}
+					{@render renderChildren(node.children)}
+				{/if}
+			</Element>
+		{:else if node.type === 'text' && node.value}
+			{node.value}
+		{/if}
+	{/each}
+{/snippet}
+
+{@render renderChildren(root.children)}

package/dist/Block.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    block: string;
+};
+declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
+type Block = ReturnType<typeof Block>;
+export default Block;

package/dist/Elements/A.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { transformUrl } from '../utils/url.js';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, className, node, props }: ElementProps = $props();
+
+	const transformedUrl = $derived(
+		transformUrl(
+			node.properties.href,
+			streamdown.allowedLinkPrefixes ?? [],
+			streamdown.defaultOrigin
+		)
+	);
+</script>
+
+{#if transformedUrl}
+	<Slot
+		props={{
+			href: transformedUrl,
+			target: '_blank',
+			rel: 'noopener noreferrer',
+			children,
+			node,
+			props,
+			className
+		}}
+		render={streamdown.snippets.a}
+	>
+		<a
+			{...props}
+			class={clsx(streamdown.theme.a.base, className)}
+			href={transformedUrl}
+			target="_blank"
+			rel="noopener noreferrer"
+		>
+			{@render children()}
+		</a>
+	</Slot>
+{:else}
+	<span class={streamdown.theme.a.blocked} title={`Blocked URL: ${node.properties.href}`}>
+		{@render children()} [blocked]
+	</span>
+{/if}

package/dist/Elements/A.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const A: import("svelte").Component<ElementProps, {}, "">;
+type A = ReturnType<typeof A>;
+export default A;

package/dist/Elements/Alert.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	const icons = {
+		note: `<circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" />`,
+		caution: `<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>`,
+		important: `<path
+		d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
+	/><path d="M7 11h10" /><path d="M7 15h6" /><path d="M7 7h8" />`,
+		tip: `<path
+		d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
+	/><path d="M9 18h6" /><path d="M10 22h4" />`,
+		warning: `<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path
+		d="M12 9v4"
+	/><path d="M12 17h.01" />`
+	};
+
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, className, node, props }: ElementProps = $props();
+
+	// Extract alertType from className
+	const alertType = $derived.by(() => {
+		const className = node.properties.className as string[] | undefined;
+		if (!className) return 'note';
+		const alertClass = className.find((cls) => cls.startsWith('markdown-alert-'));
+		if (!alertClass) return 'note';
+		return alertClass.replace('markdown-alert-', '') as
+			| 'note'
+			| 'tip'
+			| 'warning'
+			| 'caution'
+			| 'important';
+	});
+
+	// Extract icon from node properties
+	const icon = $derived((node.properties.icon as string) || '');
+	const title = $derived(streamdown.translations?.alert?.[alertType] || alertType);
+</script>
+
+<Slot
+	props={{
+		children,
+		alertType,
+		icon,
+		node,
+		props,
+		className
+	}}
+	render={streamdown.snippets.alert}
+>
+	<div
+		{...props}
+		class={clsx(streamdown.theme.alert.base, className, streamdown.theme.alert[alertType])}
+	>
+		<div data-alert-title class={streamdown.theme.alert.title}>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="24"
+				height="24"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				class={streamdown.theme.alert.icon}
+			>
+				<!-- {@html icon} -->
+				{@html icons[alertType]}
+			</svg>
+			{title}
+		</div>
+		{@render children()}
+	</div>
+</Slot>

package/dist/Elements/Alert.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Alert: import("svelte").Component<ElementProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/Elements/Blockquote.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+
+	console.log({ node });
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		props,
+		className
+	}}
+	render={streamdown.snippets.blockquote}
+>
+	<blockquote {...props} class={clsx(streamdown.theme.blockquote.base, className)}>
+		{@render children()}
+	</blockquote>
+</Slot>

package/dist/Elements/Blockquote.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Blockquote: import("svelte").Component<ElementProps, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
+export default Blockquote;

package/dist/Elements/Code.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { Snippet } from 'svelte';
+	import type { BundledLanguage, BundledTheme } from 'shiki';
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { save } from '../utils/save.js';
+	import { useCopy } from '../utils/copy.svelte.js';
+	import { highlighter, languageExtensionMap } from '../hightlighter.svelte.js';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+
+	let { node, className, props }: ElementProps = $props();
+
+	const streamdown = useStreamdown();
+	const themes = $derived(streamdown.shikiTheme);
+	let codeContent = $derived((node.children[0] as any).value);
+	const language = $derived(node.properties.language as string);
+	const copy = useCopy({
+		get content() {
+			return codeContent;
+		}
+	});
+
+	// Download button functionality
+
+	const downloadCode = () => {
+		try {
+			const extension =
+				language && language in languageExtensionMap
+					? languageExtensionMap[language as keyof typeof languageExtensionMap]
+					: 'txt';
+			const filename = `file.${extension}`;
+			const mimeType = 'text/plain';
+			save(filename, codeContent, mimeType);
+		} catch (error) {
+			console.error('Failed to download file:', error);
+		}
+	};
+</script>
+
+<div {...props} class={clsx(streamdown.theme.code.container, className)} data-language={language}>
+	<div class={clsx(streamdown.theme.code.header)} data-code-block-header data-language={language}>
+		<span class={streamdown.theme.code.language}>{language}</span>
+		<div class="flex items-center gap-2">
+			<!-- Download button snippet -->
+			<button
+				class={streamdown.theme.code.button}
+				onclick={downloadCode}
+				title="Download file"
+				type="button"
+			>
+				{@render downloadIcon()}
+			</button>
+
+			<button class={streamdown.theme.code.button} onclick={copy.copy} type="button">
+				{@render copyIcon()}
+			</button>
+		</div>
+	</div>
+	<div style="height: fit-content; width: 100%;" class="relative overflow-visible">
+		<div class={streamdown.theme.code.base}>
+			{#await highlighter.isReady(themes, language as any)}
+				{@render Skeleton()}
+			{:then}
+				{@const code = highlighter.highlightCode(
+					codeContent,
+					language as any,
+					themes,
+					streamdown.theme.code.pre
+				)}
+				{@html code}
+			{/await}
+		</div>
+	</div>
+</div>
+
+{#snippet Skeleton()}
+	{@const lines = codeContent.split('\n')}
+	<!--  -->
+	<pre class={streamdown.theme.code.pre}><!--  -->
+<!--  --><code
+			><!--  -->{#each lines as line}<!--  --><span class={streamdown.theme.code.skeleton}
+					>{line}</span
+				><!--  -->
+<!--  -->{/each}<!--  --></code
+		><!--  -->
+						</pre>
+{/snippet}
+{#snippet copyIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="100%"
+		height="100%"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="lucide lucide-clipboard-icon lucide-clipboard"
+		><rect width="8" height="4" x="8" y="2" rx="1" ry="1" /><path
+			d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
+		/></svg
+	>
+{/snippet}
+
+{#snippet downloadIcon()}
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="100%"
+		height="100%"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		class="lucide lucide-download-icon lucide-download"
+		><path d="M12 15V3" /><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path
+			d="m7 10 5 5 5-5"
+		/></svg
+	>
+{/snippet}

package/dist/Elements/Code.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Code: import("svelte").Component<ElementProps, {}, "">;
+type Code = ReturnType<typeof Code>;
+export default Code;

package/dist/Elements/Del.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		props,
+		className
+	}}
+	render={streamdown.snippets.del}
+>
+	<del {...props} class={clsx(streamdown.theme.del.base, className)}>
+		{@render children()}
+	</del>
+</Slot>

package/dist/Elements/Del.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Del: import("svelte").Component<ElementProps, {}, "">;
+type Del = ReturnType<typeof Del>;
+export default Del;

package/dist/Elements/Element.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+	import type { Element } from 'hast';
+	import type { Snippet } from 'svelte';
+
+	let {
+		node,
+		props,
+		className,
+		type,
+		children
+	}: { node: Element; props: any; className: any; type: string; children: Snippet } = $props();
+
+	// Import all element components
+	import A from './A.svelte';
+	import Blockquote from './Blockquote.svelte';
+	import Code from './Code.svelte';
+	import H1 from './H1.svelte';
+	import H2 from './H2.svelte';
+	import H3 from './H3.svelte';
+	import H4 from './H4.svelte';
+	import H5 from './H5.svelte';
+	import H6 from './H6.svelte';
+	import Hr from './Hr.svelte';
+	import Image from './Image.svelte';
+	import Li from './Li.svelte';
+	import Ol from './Ol.svelte';
+	import P from './P.svelte';
+	import Strong from './Strong.svelte';
+	import Sub from './Sub.svelte';
+	import Sup from './Sup.svelte';
+	import Table from './Table.svelte';
+	import Tbody from './Tbody.svelte';
+	import Td from './Td.svelte';
+	import Th from './Th.svelte';
+	import Thead from './Thead.svelte';
+	import Tr from './Tr.svelte';
+	import Ul from './Ul.svelte';
+	import InlineCode from './InlineCode.svelte';
+	import Mermaid from './Mermaid.svelte';
+	import Math from './Math.svelte';
+	import Em from './Em.svelte';
+	import Del from './Del.svelte';
+	import Alert from './Alert.svelte';
+</script>
+
+{#if type === 'a'}
+	<A {props} {className} {children} {node} />
+{:else if type === 'blockquote'}
+	<Blockquote {props} {className} {children} {node} />
+{:else if type === 'code' && node?.properties.language === 'math'}
+	<Math {props} {className} {children} {node} />
+{:else if type === 'code' && node?.position?.start.line === node?.position?.end.line}
+	<InlineCode {props} {className} {children} {node} />
+{:else if type === 'code' && node?.properties.language === 'mermaid'}
+	<Mermaid {props} {className} {children} {node} />
+{:else if type === 'code'}
+	<Code {props} {className} {children} {node} />
+{:else if type === 'h1'}
+	<H1 {props} {className} {children} {node} />
+{:else if type === 'h2'}
+	<H2 {props} {className} {children} {node} />
+{:else if type === 'h3'}
+	<H3 {props} {className} {children} {node} />
+{:else if type === 'h4'}
+	<H4 {props} {className} {children} {node} />
+{:else if type === 'h5'}
+	<H5 {props} {className} {children} {node} />
+{:else if type === 'h6'}
+	<H6 {props} {className} {children} {node} />
+{:else if type === 'hr'}
+	<Hr {children} {node} {props} {className} />
+{:else if type === 'img'}
+	<Image
+		src={node.properties.src as string}
+		alt={node.properties.alt as string}
+		{props}
+		{className}
+		{children}
+		{node}
+	/>
+{:else if type === 'li'}
+	<Li {props} {className} {children} {node} />
+{:else if type === 'ol'}
+	<Ol {props} {className} {children} {node} />
+{:else if type === 'p'}
+	<P {props} {className} {children} {node} />
+{:else if type === 'strong'}
+	<Strong {props} {className} {children} {node} />
+{:else if type === 'sub'}
+	<Sub {props} {className} {children} {node} />
+{:else if type === 'sup'}
+	<Sup {props} {className} {children} {node} />
+{:else if type === 'table'}
+	<Table {props} {className} {children} {node} />
+{:else if type === 'tbody'}
+	<Tbody {props} {className} {children} {node} />
+{:else if type === 'td'}
+	<Td {props} {className} {children} {node} />
+{:else if type === 'th'}
+	<Th {props} {className} {children} {node} />
+{:else if type === 'thead'}
+	<Thead {props} {className} {children} {node} />
+{:else if type === 'tr'}
+	<Tr {props} {className} {children} {node} />
+{:else if type === 'ul'}
+	<Ul {props} {className} {children} {node} />
+{:else if type === 'ol'}
+	<Ol {props} {className} {children} {node} />
+{:else if type === 'br'}
+	<br />
+{:else if type === 'em'}
+	<Em {props} {className} {children} {node} />
+{:else if type === 'ins'}
+	<!-- <Ins {props} {children} {node} /> -->
+{:else if type === 'del'}
+	<Del {props} {className} {children} {node} />
+{:else if type === 'alert'}
+	<Alert {props} {className} {children} {node} />
+{:else}
+	<!-- Fallback for unsupported elements -->
+	{@render children?.()}
+{/if}

package/dist/Elements/Element.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Element } from 'hast';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    node: Element;
+    props: any;
+    className: any;
+    type: string;
+    children: Snippet;
+};
+declare const Element: import("svelte").Component<$$ComponentProps, {}, "">;
+type Element = ReturnType<typeof Element>;
+export default Element;

package/dist/Elements/Em.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.em}
+>
+	<em {...props} class={clsx(streamdown.theme.em.base, className)}>
+		{@render children()}
+	</em>
+</Slot>

package/dist/Elements/Em.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const Em: import("svelte").Component<ElementProps, {}, "">;
+type Em = ReturnType<typeof Em>;
+export default Em;

package/dist/Elements/H1.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h1}
+>
+	<h1 {...props} class={clsx(streamdown.theme.h1.base, className)}>
+		{@render children()}
+	</h1>
+</Slot>

package/dist/Elements/H1.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H1: import("svelte").Component<ElementProps, {}, "">;
+type H1 = ReturnType<typeof H1>;
+export default H1;

package/dist/Elements/H2.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import { clsx } from 'clsx';
+	import type { ElementProps } from './element.js';
+	import Slot from './Slot.svelte';
+
+	const streamdown = useStreamdown();
+
+	const { children, node, className, props }: ElementProps = $props();
+</script>
+
+<Slot
+	props={{
+		children,
+		node,
+		...props
+	}}
+	render={streamdown.snippets.h2}
+>
+	<h2 {...props} class={clsx(streamdown.theme.h2.base, className)}>
+		{@render children()}
+	</h2>
+</Slot>

package/dist/Elements/H2.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ElementProps } from './element.js';
+declare const H2: import("svelte").Component<ElementProps, {}, "">;
+type H2 = ReturnType<typeof H2>;
+export default H2;