desmost 0.5.5 → 0.6.0

package/dist/index.internal.d.ts

@@ -1,3 +1,4 @@
+export { fill_defaults } from "./compiler/options.js";
 export type { DesmostDebug } from "./compiler/compile.js";
 export { Ast } from "./parser/index.js";
 //# sourceMappingURL=index.internal.d.ts.map

package/dist/index.internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.internal.d.ts","sourceRoot":"","sources":["../src/index.internal.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.internal.d.ts","sourceRoot":"","sources":["../src/index.internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.internal.js

@@ -1,2 +1,3 @@
+export { fill_defaults } from "./compiler/options.js";
 export { Ast } from "./parser/index.js";
 //# sourceMappingURL=index.internal.js.map

package/dist/index.internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.internal.js","sourceRoot":"","sources":["../src/index.internal.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.internal.js","sourceRoot":"","sources":["../src/index.internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "desmost",
   "author": "Sup#2.0",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "license": "MIT",
 
   "description": "A tiny DSL for compiling LaTeX to Desmos",
@@ -69,6 +69,7 @@
   {
     "@types/desmos": "1.11",
     "@types/node": "^26.0",
+    "jsdom": "^30.0",
     "oxlint": "^1.78",
     "oxlint-tsgolint": "^7.0",
     "tsc-alias": "^1.9",

package/src/index.internal.ts

@@ -1,2 +1,4 @@
+export { fill_defaults } from "./compiler/options";
 export type { DesmostDebug } from "./compiler/compile";
+
 export { Ast } from "./parser";

package/svelte/desmost.svelte

@@ -1,28 +1,30 @@
 <!-- @component `<Desmost>`
 
-Compile Desmost from Markdown.
+Mass-compile Desmost.
 
 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.
 
+This is intended to be used with MDsveX or similar, where Markdown content containing ` ```desmos ` blocks is compiled into HTML.
+
 When this component is unmounted, it calls `.destroy()` on each calculator instance to cleanup resources.
 
 ## Example
 
 ```svelte
 <script>
-  import Content from "./content.svx";
+    import Content from "./content.md";
 </script>
 
 <Desmost>
-  <Content />
+    <Content />
 </Desmost>
 ```
 
 With compile options:
 
 ```svelte
-<Desmost errors="crash">
-  <Content />
+<Desmost options={{ errors: "crash" }}>
+    <Content />
 </Desmost>
 ```
 
@@ -30,7 +32,7 @@ With styling:
 
 ```svelte
 <Desmost width="100%" height="50vh">
-  <Content />
+    <Content />
 </Desmost>
 ```
 -->
@@ -43,26 +45,81 @@ import { compile, type DesmostOptions } from "../src";
 import { onMount, type Snippet } from "svelte";
 
 
-interface Props extends DesmostOptions
+interface Props
 {
   children: Snippet;
 
-  /** CSS styles to apply to each Desmos calculator's containing element. */
+  /** Compile options to pass to Desmost.*/
+  options?: DesmostOptions;
+
+  /**
+   * Default settings to apply to all Desmos calculator instances.
+   * 
+   * These are applied *before* compilation, so individual Desmost blocks can override them with `/desmos`.
+   */
+  settings?: Desmos.GraphConfiguration & Desmos.GraphSettings;
+
+  /**
+   * Should compilation be lazy using `IntersectionObserver`?
+   * 
+   * ## Example
+   * 
+   * ```svelte
+   * <Desmost lazy />
+   * ```
+   */
+  lazy?: true;
+
+  /**
+   * CSS styles to apply to each Desmos calculator's containing element.
+   * 
+   * ## Example
+   * 
+   * ```svelte
+   * <Desmost style="margin: 1rem; border: 1px solid red" />
+   * ```
+   */
   style?: string;
 
-  /** Width of each Desmos calculator's containing element. */
+  /**
+   * Width of each Desmos calculator's containing element.
+   * 
+   * ## Example
+   * 
+   * ```svelte
+   * <Desmost width="500px" />
+   * <Desmost width="40rem" />
+   * <Desmost width="80vw" />
+   * ```
+   */
   width?: string;
   
-  /** Height of each Desmos calculator's containing element. */
+  /**
+   * Height of each Desmos calculator's containing element.
+   * 
+   * ## Example
+   * 
+   * ```svelte
+   * <Desmost height="500px" />
+   * <Desmost height="40rem" />
+   * <Desmost height="80vw" />
+   * ```
+   */
   height?: string;
 }
 
-let { children, style, width, height, ...options }: Props = $props();
+let {
+  children,
+  options, settings,
+  lazy,
+  style, width, height,
+}: Props = $props();
 
 
 let root: HTMLElement;
 
 let desmos_instances: Desmos.Calculator[] = [];
+let lazy_observers: IntersectionObserver[] = [];
 
 onMount(() =>
 {
@@ -80,10 +137,16 @@ onMount(() =>
     if (height != undefined) el_desmos.style.height = height;
     if (style  != undefined) el_desmos.style.cssText += style;
 
-    let desmos = Desmos.GraphingCalculator(el_desmos);
-    desmos_instances.push(desmos);
-
-    compile(desmos, source.textContent, options);
+    if (!lazy) {
+      inject(el_desmos, source.textContent);
+    }
+    else {
+      let observer = new IntersectionObserver(
+        _ => inject(el_desmos, source.textContent)
+      );
+      observer.observe(el_desmos);
+      lazy_observers.push(observer);
+    }
   }
 
   return () => {
@@ -93,6 +156,18 @@ onMount(() =>
   };
 });
 
+function inject(el_desmos: HTMLElement, source: string)
+{
+  let desmos = Desmos.GraphingCalculator(el_desmos);
+
+  if (settings != undefined) {
+    desmos.updateSettings(settings);
+  }
+
+  desmos_instances.push(desmos);
+  compile(desmos, source, options);
+}
+
 </script>