desmost 0.5.2 → 0.5.3
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 +1 -1
- package/svelte/desmost.svelte +45 -8
package/package.json
CHANGED
package/svelte/desmost.svelte
CHANGED
|
@@ -3,28 +3,64 @@
|
|
|
3
3
|
Compile Desmost from Markdown.
|
|
4
4
|
|
|
5
5
|
This transforms `<pre lang="desmos">` blocks into Desmos calculator embeds. It selects each `<pre lang="desmos">` block in its children, and for each constructs a `Desmos.GraphingCalculator` instance then calls the Desmost compiler on the source.
|
|
6
|
+
|
|
7
|
+
When this component is unmounted, it calls `.destroy()` on each calculator instance to cleanup resources.
|
|
8
|
+
|
|
9
|
+
## Example
|
|
10
|
+
|
|
11
|
+
```svelte
|
|
12
|
+
<script>
|
|
13
|
+
import Content from "./content.svx";
|
|
14
|
+
</script>
|
|
15
|
+
|
|
16
|
+
<Desmost>
|
|
17
|
+
<Content />
|
|
18
|
+
</Desmost>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
With compile options:
|
|
22
|
+
|
|
23
|
+
```svelte
|
|
24
|
+
<Desmost errors="crash">
|
|
25
|
+
<Content />
|
|
26
|
+
</Desmost>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
With styling:
|
|
30
|
+
|
|
31
|
+
```svelte
|
|
32
|
+
<Desmost width="100%" height="50vh">
|
|
33
|
+
<Content />
|
|
34
|
+
</Desmost>
|
|
35
|
+
```
|
|
6
36
|
-->
|
|
7
37
|
|
|
8
38
|
<script lang="ts">
|
|
9
39
|
/// <reference types="desmos" />
|
|
10
40
|
|
|
11
|
-
import { compile, DesmostOptions } from "../src";
|
|
41
|
+
import { compile, type DesmostOptions } from "../src";
|
|
12
42
|
|
|
13
|
-
import { onMount } from "svelte";
|
|
43
|
+
import { onMount, type Snippet } from "svelte";
|
|
14
44
|
|
|
15
45
|
|
|
16
46
|
interface Props extends DesmostOptions
|
|
17
47
|
{
|
|
18
|
-
children:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
48
|
+
children: Snippet;
|
|
49
|
+
|
|
50
|
+
/** CSS styles to apply to each Desmos calculator's containing element. */
|
|
51
|
+
style?: string;
|
|
52
|
+
|
|
53
|
+
/** Width of each Desmos calculator's containing element. */
|
|
54
|
+
width?: string;
|
|
55
|
+
|
|
56
|
+
/** Height of each Desmos calculator's containing element. */
|
|
57
|
+
height?: string;
|
|
22
58
|
}
|
|
23
59
|
|
|
24
60
|
let { children, style, width, height, ...options }: Props = $props();
|
|
25
61
|
|
|
26
62
|
|
|
27
|
-
|
|
63
|
+
let root: HTMLElement;
|
|
28
64
|
|
|
29
65
|
let desmos_instances: Desmos.Calculator[] = [];
|
|
30
66
|
|
|
@@ -34,6 +70,7 @@ onMount(() =>
|
|
|
34
70
|
|
|
35
71
|
for (let source of sources.values()) {
|
|
36
72
|
source.style.display = "none";
|
|
73
|
+
if (style != undefined) source.cssText = style;
|
|
37
74
|
|
|
38
75
|
let el_desmos = source.parentNode!.insertBefore(
|
|
39
76
|
document.createElement("div"),
|
|
@@ -56,6 +93,6 @@ onMount(() =>
|
|
|
56
93
|
</script>
|
|
57
94
|
|
|
58
95
|
|
|
59
|
-
<div bind:this={root}>
|
|
96
|
+
<div bind:this={root} style:display="contents">
|
|
60
97
|
{@render children?.()}
|
|
61
98
|
</div>
|