@markdy/astro 0.7.1 → 0.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdy/astro",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "Astro island component for MarkdyScript animations.",
   "license": "MIT",
   "type": "module",
@@ -37,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@markdy/renderer-dom": "0.7.1"
+    "@markdy/renderer-dom": "0.7.3"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/Markdy.astro

@@ -88,20 +88,20 @@ const {
   <!--
     SSR placeholder: keeps layout stable before the island hydrates.
     Background matches the scene bg prop to avoid a visible flash.
-    aria-hidden because the parent role="img" aria-label carries the
-    accessible name — this inner text is decorative.
+    A <button> so it is keyboard-accessible and semantically interactive.
   -->
-  <div
+  <button
     class="markdy-placeholder"
-    aria-hidden="true"
-    style={`width:100%;height:100%;background:${bg};display:flex;align-items:center;justify-content:center;cursor:pointer`}
+    type="button"
+    aria-label={`Play ${title}`}
+    style={`width:100%;height:100%;background:${bg};display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;padding:0`}
   >
     <span
-      style="font-family:sans-serif;font-size:12px;color:#bbb;letter-spacing:0.05em"
+      style="font-family:sans-serif;font-size:12px;color:#bbb;letter-spacing:0.05em;pointer-events:none"
     >
       ▶ markdy
     </span>
-  </div>
+  </button>
 
   <!--
     noscript fallback: rendered for crawlers / users that do not run JS.
@@ -121,13 +121,90 @@ const {
   </noscript>
 </div>
 
+<script is:inline>
+  // ── Rocket Loader rescue ──────────────────────────────────────────────────
+  // Cloudflare Rocket Loader rewrites <script type="module" src="..."> in
+  // one of two ways, both of which prevent the hydration logic from running:
+  //
+  //   A) Changes type="module" → type="{uuid}-module"  (keeps tag in DOM)
+  //   B) Wraps the entire tag in an HTML comment:
+  //        <!--<script type="{uuid}-module" src="..."></script>-->
+  //      making it invisible to querySelectorAll.
+  //
+  // This inline script is NOT touched by Rocket Loader (no src, no type attr).
+  // It rescues module scripts via two strategies:
+  //   1. Query the DOM for type$="-module" + src (covers case A)
+  //   2. Regex-parse the raw HTML for commented-out script tags (covers case B)
+  // Dynamically-created scripts bypass Rocket Loader entirely.
+  (function () {
+    if (window.__markdyRescue) return;
+    window.__markdyRescue = true;
+
+    var rescued = false;
+    function rescueModuleScripts() {
+      if (rescued) return;
+      rescued = true;
+
+      var srcs = [];
+
+      // Strategy 1: Rocket Loader kept the tag in DOM but changed the type.
+      // type="module" → type="{uuid}-module"  (still has src attribute)
+      document.querySelectorAll('script[type$="-module"][src]').forEach(function (s) {
+        srcs.push(s.src);
+      });
+
+      // Strategy 2: Rocket Loader COMMENTED OUT the script tag entirely:
+      //   <!--<script type="{uuid}-module" src="..."></script>-->
+      // These are invisible to querySelectorAll, so we parse the raw HTML.
+      // We handle both attribute orderings (type-first or src-first).
+      var html = document.documentElement.innerHTML;
+      var reSrcFirst = /<!--<script\s[^>]*src="([^"]+)"[^>]*type="[^"]*-module"[^>]*>\s*<\/script>-->/g;
+      var reTypeFirst = /<!--<script\s[^>]*type="[^"]*-module"[^>]*src="([^"]+)"[^>]*>\s*<\/script>-->/g;
+      var m;
+      while ((m = reSrcFirst.exec(html)) !== null) { srcs.push(m[1]); }
+      while ((m = reTypeFirst.exec(html)) !== null) { srcs.push(m[1]); }
+
+      // Re-inject each found src as a real module script.
+      // Deduplicate first, then inject. Dynamically-created scripts bypass
+      // Rocket Loader entirely. Modules with the same URL are only executed
+      // once by the browser (cached), so re-injecting already-running scripts
+      // is safe.
+      var seen = {};
+      srcs.forEach(function (src) {
+        if (seen[src]) return;
+        seen[src] = true;
+        var fix = document.createElement('script');
+        fix.type = 'module';
+        fix.src = src;
+        document.head.appendChild(fix);
+      });
+    }
+
+    // Rescue when user clicks the placeholder (fallback if autoplay failed).
+    document.addEventListener('click', function (e) {
+      var t = e.target;
+      if (t && typeof t.closest === 'function' && t.closest('.markdy-placeholder')) {
+        rescueModuleScripts();
+      }
+    });
+
+    // Rescue automatically after a short delay for autoplay.
+    // Only fires if initAll() never ran (no data-markdy-init on any root).
+    setTimeout(function () {
+      if (document.querySelector('.markdy-root:not([data-markdy-init])')) {
+        rescueModuleScripts();
+      }
+    }, 1500);
+  }());
+</script>
+
 <script>
   // ── Hydration ────────────────────────────────────────────────────────────
   // The renderer is dynamically imported so it is code-split from the
   // host-page bundle.  The browser only downloads it when an element is
   // about to enter the viewport, keeping Time-to-Interactive low.
 
-  async function hydrate(el: HTMLElement): Promise<void> {
+  async function hydrate(el: HTMLElement, forcePlay = false): Promise<void> {
     const code = el.dataset.markdyCode;
     if (!code) return;
 
@@ -141,7 +218,7 @@ const {
       // Leave assets empty on parse failure — renderer falls back to DSL paths.
     }
 
-    const autoplay = el.dataset.markdyAutoplay !== "false";
+    const autoplay = forcePlay || el.dataset.markdyAutoplay !== "false";
     const loop = el.dataset.markdyLoop !== "false";
     const copyright = el.dataset.markdyCopyright !== "false";
     const progressBar = el.dataset.markdyProgressBar !== "false";
@@ -209,11 +286,11 @@ const {
     { threshold: 0.25 },
   );
 
-  function doHydrate(el: HTMLElement): void {
+  function doHydrate(el: HTMLElement, forcePlay = false): void {
     observer.unobserve(el);
     el.dataset.markdyInit = "hydrating";
     scheduleHydration(() => {
-      hydrate(el).catch(() => {
+      hydrate(el, forcePlay).catch(() => {
         el.dataset.markdyInit = "error";
         el.removeAttribute("aria-busy");
       });
@@ -261,6 +338,6 @@ const {
     if (!root) return;
     const state = root.dataset.markdyInit;
     if (state === "done" || state === "hydrating") return;
-    doHydrate(root);
+    doHydrate(root, true);
   });
 </script>