@humanspeak/svelte-markdown 0.6.8 → 0.7.1

package/README.md

@@ -1,7 +1,25 @@
 # Svelte Markdown
 
+[![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
+[![Build Status](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-markdown/actions/workflows/npm-publish.yml)
+[![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-markdown/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-markdown?branch=main)
+[![License](https://img.shields.io/npm/l/@humanspeak/svelte-markdown.svg)](https://github.com/humanspeak/svelte-markdown/blob/main/LICENSE)
+
+<!-- [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@humanspeak/svelte-markdown)](https://bundlephobia.com/package/@humanspeak/svelte-markdown) -->
+
+[![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
+[![CodeQL](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml)
+
+<!-- [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md) -->
+
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Types](https://img.shields.io/npm/types/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
+[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-markdown/graphs/commit-activity)
+
 A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
 
+Feel free to play with it and leave comments on its [homepage](https://markdown.svelte.page)
+
 Rewriten for Svelte5 and all the updated goodies that have happened over the last two years. Also moved to Typescript because its the future!
 
 ## Installation
@@ -236,27 +254,16 @@ Note that the HTML paragraph must be enclosed within `<p>` tags.
 
 Some tests have been added to the `tests` folder. You can clone this repo and create another svelte app and link it to this repo to try modifying it.
 
-You can clone this repo and do the following:
+The current extenral dependencies are:
 
-```console
-yarn
-yarn link
-yarn dev
-```
-
-This will watch all changes and make the project linkable. Now on the app you created you can link it with:
-
-```console
-yarn link @humanspeak/svelte-markdown
-```
-
-And then import it like in the example above.
-
-As of now the only external dependencys of this project is `marked`, `github-slugger`, `htmlparser2`.
+- [Marked](https://marked.js.org/)
+- [Github-Slugger](https://github.com/Flet/github-slugger)
+- [HTMLParser2](https://github.com/fb55/htmlparser2).
 
 ## Related
 
 - [ReactMarkdown](https://github.com/remarkjs/react-markdown) - React library to render markdown using React components. Inspiration for this library.
 - [Svelte](https://svelte.dev) - JavaScript front-end framework.
-- [Marked](https://marked.js.org/) - Markdown parser
 - [Original](https://github.com/pablo-abc/svelte-markdown) - Original component
+
+Made with ♥ by [Humanspeak](https://humanspeak.com)

package/dist/SvelteMarkdown.svelte

@@ -1,3 +1,27 @@
+<!--
+@component
+
+ A Svelte component that renders Markdown content into HTML using a customizable parser.
+ Supports both string input and pre-parsed markdown tokens, with configurable rendering
+ options and custom renderers.
+
+ @example
+ ```svelte
+ <SvelteMarkdown source="# Hello World" />
+
+ <SvelteMarkdown
+   source={markdownString}
+   options={{ headerIds: false }}
+   renderers={{ link: CustomLink }}
+ />
+ ```
+
+ @property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
+ @property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
+ @property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
+ @property {boolean} [isInline=false] - Whether to parse the content as inline markdown
+ @property {function} [parsed] - Callback function called with the parsed tokens
+-->
 <script lang="ts">
     import {
         Lexer,
@@ -30,7 +54,8 @@
     }: Props & {
         [key: string]: unknown
     } = $props()
-    let tokens: Token[] | undefined
+    // @ts-expect-error - Intentionally not using $state for tokens
+    let tokens: Token[] | undefined // eslint-disable-line svelte/valid-compile
     let previousSource = $state<string | Token[] | undefined>(undefined)
     let lexer: Lexer
 

package/dist/SvelteMarkdown.svelte.d.ts

@@ -1,4 +1,26 @@
 import { type Token, type TokensList, type SvelteMarkdownOptions, type Renderers } from './utils/markdown-parser.js';
+/**
+ * A Svelte component that renders Markdown content into HTML using a customizable parser.
+ * Supports both string input and pre-parsed markdown tokens, with configurable rendering
+ * options and custom renderers.
+ *
+ * @example
+ * ```svelte
+ * <SvelteMarkdown source="# Hello World" />
+ *
+ * <SvelteMarkdown
+ *   source={markdownString}
+ *   options={{ headerIds: false }}
+ *   renderers={{ link: CustomLink }}
+ * />
+ * ```
+ *
+ * @property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
+ * @property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
+ * @property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
+ * @property {boolean} [isInline=false] - Whether to parse the content as inline markdown
+ * @property {function} [parsed] - Callback function called with the parsed tokens
+ */
 declare const SvelteMarkdown: import("svelte").Component<{
     source: Token[] | string;
     renderers?: Partial<Renderers>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@humanspeak/svelte-markdown",
-    "description": "A markdown renderer for Svelte",
-    "version": "0.6.8",
+    "description": "A powerful, customizable markdown renderer for Svelte with TypeScript support",
+    "version": "0.7.1",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -30,7 +30,22 @@
         "svelte",
         "markdown"
     ],
-    "homepage": "sveltemarkdown.com",
+    "keywords": [
+        "svelte",
+        "markdown",
+        "renderer",
+        "parser",
+        "marked",
+        "component",
+        "sveltekit",
+        "svelte5",
+        "md",
+        "documentation",
+        "html",
+        "converter",
+        "formatting"
+    ],
+    "homepage": "https://markdown.svelte.page",
     "files": [
         "dist",
         "!dist/**/*.test.*",
@@ -54,7 +69,7 @@
     "dependencies": {
         "github-slugger": "^2.0.0",
         "htmlparser2": "^10.0.0",
-        "marked": "^15.0.4"
+        "marked": "^15.0.5"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
@@ -66,7 +81,7 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.6",
         "@testing-library/user-event": "^14.5.2",
-        "@types/node": "^22.10.3",
+        "@types/node": "^22.10.5",
         "@typescript-eslint/eslint-plugin": "^8.19.0",
         "@typescript-eslint/parser": "^8.19.0",
         "@vitest/coverage-v8": "^2.1.8",
@@ -80,15 +95,25 @@
         "prettier-plugin-svelte": "^3.3.2",
         "prettier-plugin-tailwindcss": "^0.6.9",
         "publint": "^0.2.12",
-        "svelte": "^5.16.0",
+        "svelte": "^5.16.1",
         "svelte-check": "^4.1.1",
         "typescript": "^5.7.2",
-        "vite": "^6.0.6",
+        "vite": "^6.0.7",
         "vitest": "^2.1.8"
     },
     "overrides": {
         "@sveltejs/kit": {
             "cookie": "^0.7.0"
         }
+    },
+    "volta": {
+        "node": "22.12.0"
+    },
+    "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/humanspeak"
+    },
+    "publishConfig": {
+        "access": "public"
     }
 }