astro-abcjs 1.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-abcjs",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "An Astro component to embed abcjs in content",
   "keywords": [
     "astro",

package/src/components/AbcjsPlayer.astro

@@ -1,19 +1,36 @@
 ---
 // AbcjsPlayer.astro
 // Reusable Astro component for rendering ABCjs music notation and audio playback
+
 import "abcjs/abcjs-audio.css";
 
+// Use official abcjs types
+import type { AbcVisualParams } from "abcjs";
+
+// Props interface using official abcjs types
 interface Props {
   notation: string;
+  /**
+   * Options for abcjs.renderAbc (see AbcVisualParams in abcjs types)
+   * Note: Function callbacks (e.g., clickListener) are not supported as options
+   * are serialized to JSON for client-side use. For advanced interactivity, use
+   * custom events or request a callback/event API.
+   */
+  options?: AbcVisualParams;
+  /**
+   * Show audio playback controls (default: true)
+   */
   showControls?: boolean;
-  responsive?: boolean;
+  /**
+   * abcjs version to load from CDN (default: "6.6.0")
+   */
   abcjsVersion?: string;
 }
 
 const {
   notation,
+  options = {},
   showControls = true,
-  responsive = true,
   abcjsVersion = "6.6.0",
 } = Astro.props;
 ---
@@ -21,13 +38,13 @@ const {
 <div
   class="abcjs-container"
   data-notation={notation}
-  data-responsive={responsive}
+  data-options={JSON.stringify(options)}
 >
   <div class="abcjs-paper"></div>
   {showControls && <div class="abcjs-audio" />}
 </div>
 
-<script define:vars={{ abcjsVersion }}>
+<script define:vars={{ abcjsVersion, options }}>
   if (typeof window !== "undefined") {
     // Load abcjs browser build from CDN if not already loaded
     if (!window.ABCJS) {
@@ -47,19 +64,14 @@ const {
         if (container.dataset.abcjsInitialized === "true") return;
         const notation = container.getAttribute("data-notation");
         if (!notation) return;
-        const isResponsive =
-          container.getAttribute("data-responsive") === "true";
         const paperDiv = container.querySelector(".abcjs-paper");
         const audioDiv = container.querySelector(".abcjs-audio");
-        // Render music notation
-        const visualObj = abcjs.renderAbc(paperDiv, notation, {
-          responsive: isResponsive ? "resize" : undefined,
-          add_classes: true,
-          paddingleft: 0,
-          paddingright: 0,
-          paddingbottom: 10,
-          paddingtop: 10,
-        });
+        // Render music notation using options prop (passed via define:vars)
+        // Render music notation using per-container options
+        const containerOptions = JSON.parse(
+          container.getAttribute("data-options") || "{}",
+        );
+        const visualObj = abcjs.renderAbc(paperDiv, notation, containerOptions);
         // Audio playback controls
         if (audioDiv && abcjs.synth) {
           const synthControl = new abcjs.synth.SynthController();