@humanspeak/svelte-markdown 0.6.8 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,7 +1,21 @@
1
1
  # Svelte Markdown
2
2
 
3
+ [![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
4
+ [![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)
5
+ [![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-markdown/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-markdown?branch=main)
6
+ [![License](https://img.shields.io/npm/l/@humanspeak/svelte-markdown.svg)](https://github.com/humanspeak/svelte-markdown/blob/main/LICENSE)
7
+ <!-- [![Bundle Size](https://img.shields.io/bundlephobia/minzip/@humanspeak/svelte-markdown)](https://bundlephobia.com/package/@humanspeak/svelte-markdown) -->
8
+ [![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
9
+ [![CodeQL](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-markdown/actions/workflows/codeql.yml)
10
+ <!-- [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md) -->
11
+ [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
12
+ [![Types](https://img.shields.io/npm/types/@humanspeak/svelte-markdown.svg)](https://www.npmjs.com/package/@humanspeak/svelte-markdown)
13
+ [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-markdown/graphs/commit-activity)
14
+
3
15
  A markdown parser that renders into Svelte Components. Inspired by [ReactMarkdown](https://github.com/remarkjs/react-markdown).
4
16
 
17
+ Feel free to play with it and leave comments on its [homepage](https://markdown.svelte.page)
18
+
5
19
  Rewriten for Svelte5 and all the updated goodies that have happened over the last two years. Also moved to Typescript because its the future!
6
20
 
7
21
  ## Installation
@@ -236,27 +250,16 @@ Note that the HTML paragraph must be enclosed within `<p>` tags.
236
250
 
237
251
  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.
238
252
 
239
- You can clone this repo and do the following:
240
-
241
- ```console
242
- yarn
243
- yarn link
244
- yarn dev
245
- ```
253
+ The current extenral dependencies are:
246
254
 
247
- This will watch all changes and make the project linkable. Now on the app you created you can link it with:
248
-
249
- ```console
250
- yarn link @humanspeak/svelte-markdown
251
- ```
252
-
253
- And then import it like in the example above.
254
-
255
- As of now the only external dependencys of this project is `marked`, `github-slugger`, `htmlparser2`.
255
+ - [Marked](https://marked.js.org/)
256
+ - [Github-Slugger](https://github.com/Flet/github-slugger)
257
+ - [HTMLParser2](https://github.com/fb55/htmlparser2).
256
258
 
257
259
  ## Related
258
260
 
259
261
  - [ReactMarkdown](https://github.com/remarkjs/react-markdown) - React library to render markdown using React components. Inspiration for this library.
260
262
  - [Svelte](https://svelte.dev) - JavaScript front-end framework.
261
- - [Marked](https://marked.js.org/) - Markdown parser
262
263
  - [Original](https://github.com/pablo-abc/svelte-markdown) - Original component
264
+
265
+ Made with ♥ by [Humanspeak](https://humanspeak.com)
@@ -1,3 +1,27 @@
1
+ <!--
2
+ @component
3
+
4
+ A Svelte component that renders Markdown content into HTML using a customizable parser.
5
+ Supports both string input and pre-parsed markdown tokens, with configurable rendering
6
+ options and custom renderers.
7
+
8
+ @example
9
+ ```svelte
10
+ <SvelteMarkdown source="# Hello World" />
11
+
12
+ <SvelteMarkdown
13
+ source={markdownString}
14
+ options={{ headerIds: false }}
15
+ renderers={{ link: CustomLink }}
16
+ />
17
+ ```
18
+
19
+ @property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
20
+ @property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
21
+ @property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
22
+ @property {boolean} [isInline=false] - Whether to parse the content as inline markdown
23
+ @property {function} [parsed] - Callback function called with the parsed tokens
24
+ -->
1
25
  <script lang="ts">
2
26
  import {
3
27
  Lexer,
@@ -1,4 +1,26 @@
1
1
  import { type Token, type TokensList, type SvelteMarkdownOptions, type Renderers } from './utils/markdown-parser.js';
2
+ /**
3
+ * A Svelte component that renders Markdown content into HTML using a customizable parser.
4
+ * Supports both string input and pre-parsed markdown tokens, with configurable rendering
5
+ * options and custom renderers.
6
+ *
7
+ * @example
8
+ * ```svelte
9
+ * <SvelteMarkdown source="# Hello World" />
10
+ *
11
+ * <SvelteMarkdown
12
+ * source={markdownString}
13
+ * options={{ headerIds: false }}
14
+ * renderers={{ link: CustomLink }}
15
+ * />
16
+ * ```
17
+ *
18
+ * @property {string | Token[]} source - The markdown content to render, either as a string or pre-parsed tokens
19
+ * @property {Partial<Renderers>} [renderers] - Custom renderers for markdown elements
20
+ * @property {SvelteMarkdownOptions} [options] - Configuration options for the markdown parser
21
+ * @property {boolean} [isInline=false] - Whether to parse the content as inline markdown
22
+ * @property {function} [parsed] - Callback function called with the parsed tokens
23
+ */
2
24
  declare const SvelteMarkdown: import("svelte").Component<{
3
25
  source: Token[] | string;
4
26
  renderers?: Partial<Renderers>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@humanspeak/svelte-markdown",
3
3
  "description": "A markdown renderer for Svelte",
4
- "version": "0.6.8",
4
+ "version": "0.7.0",
5
5
  "scripts": {
6
6
  "dev": "vite dev",
7
7
  "build": "vite build && npm run package",
@@ -30,7 +30,7 @@
30
30
  "svelte",
31
31
  "markdown"
32
32
  ],
33
- "homepage": "sveltemarkdown.com",
33
+ "homepage": "https://markdown.svelte.page",
34
34
  "files": [
35
35
  "dist",
36
36
  "!dist/**/*.test.*",
@@ -54,7 +54,7 @@
54
54
  "dependencies": {
55
55
  "github-slugger": "^2.0.0",
56
56
  "htmlparser2": "^10.0.0",
57
- "marked": "^15.0.4"
57
+ "marked": "^15.0.5"
58
58
  },
59
59
  "devDependencies": {
60
60
  "@eslint/eslintrc": "^3.2.0",
@@ -66,7 +66,7 @@
66
66
  "@testing-library/jest-dom": "^6.6.3",
67
67
  "@testing-library/svelte": "^5.2.6",
68
68
  "@testing-library/user-event": "^14.5.2",
69
- "@types/node": "^22.10.3",
69
+ "@types/node": "^22.10.5",
70
70
  "@typescript-eslint/eslint-plugin": "^8.19.0",
71
71
  "@typescript-eslint/parser": "^8.19.0",
72
72
  "@vitest/coverage-v8": "^2.1.8",
@@ -80,15 +80,18 @@
80
80
  "prettier-plugin-svelte": "^3.3.2",
81
81
  "prettier-plugin-tailwindcss": "^0.6.9",
82
82
  "publint": "^0.2.12",
83
- "svelte": "^5.16.0",
83
+ "svelte": "^5.16.1",
84
84
  "svelte-check": "^4.1.1",
85
85
  "typescript": "^5.7.2",
86
- "vite": "^6.0.6",
86
+ "vite": "^6.0.7",
87
87
  "vitest": "^2.1.8"
88
88
  },
89
89
  "overrides": {
90
90
  "@sveltejs/kit": {
91
91
  "cookie": "^0.7.0"
92
92
  }
93
+ },
94
+ "volta": {
95
+ "node": "22.12.0"
93
96
  }
94
97
  }