@refrakt-md/svelte 0.5.0 → 0.5.1
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/package.json +3 -3
- package/src/Renderer.svelte +21 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@refrakt-md/svelte",
|
|
3
3
|
"description": "Svelte renderer for refrakt.md content",
|
|
4
|
-
"version": "0.5.
|
|
4
|
+
"version": "0.5.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@markdoc/markdoc": "0.4.0",
|
|
30
|
-
"@refrakt-md/behaviors": "0.5.
|
|
31
|
-
"@refrakt-md/types": "0.5.
|
|
30
|
+
"@refrakt-md/behaviors": "0.5.1",
|
|
31
|
+
"@refrakt-md/types": "0.5.1"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
34
|
"svelte": "^5.0.0"
|
package/src/Renderer.svelte
CHANGED
|
@@ -24,6 +24,25 @@
|
|
|
24
24
|
return result;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
function escapeAttr(str: string): string {
|
|
28
|
+
return str.replace(/&/g, '&').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/** Serialize an SVG tag tree to HTML string. Using {@html} avoids SVG namespace
|
|
32
|
+
* issues that occur when <svelte:element> creates child SVG elements (path, circle, etc.)
|
|
33
|
+
* outside the SVG namespace context during client-side navigation. */
|
|
34
|
+
function svgToHtml(tag: SerializedTag): string {
|
|
35
|
+
const attrs = Object.entries(htmlAttrs(tag.attributes))
|
|
36
|
+
.map(([k, v]) => ` ${k}="${escapeAttr(v)}"`)
|
|
37
|
+
.join('');
|
|
38
|
+
const children = tag.children.map(child => {
|
|
39
|
+
if (typeof child === 'string') return escapeAttr(child);
|
|
40
|
+
if (isTag(child)) return svgToHtml(child);
|
|
41
|
+
return '';
|
|
42
|
+
}).join('');
|
|
43
|
+
return `<${tag.name}${attrs}>${children}</${tag.name}>`;
|
|
44
|
+
}
|
|
45
|
+
|
|
27
46
|
const globalOverrides = getElementOverrides();
|
|
28
47
|
const merged = $derived(overrides
|
|
29
48
|
? { ...globalOverrides, ...overrides }
|
|
@@ -55,6 +74,8 @@
|
|
|
55
74
|
<Renderer node={child} overrides={merged} />
|
|
56
75
|
{/each}
|
|
57
76
|
</ElementOverride>
|
|
77
|
+
{:else if node.name === 'svg'}
|
|
78
|
+
{@html svgToHtml(node)}
|
|
58
79
|
{:else}
|
|
59
80
|
<svelte:element this={node.name} {...htmlAttrs(node.attributes)}>
|
|
60
81
|
{#each node.children as child}
|