sketchmark 2.1.9 → 2.1.10

package/README.md

@@ -246,6 +246,7 @@ const html = renderToEmbedHtml(doc, {
 
 `renderToEmbedHtml()` inlines sampled SVG frames so the preview can play without a server route. Use `maxFrames` to trade file size for smoother motion.
 The embed chrome defaults to a transparent outer background and uses light/dark-aware translucent controls so it can sit inside either theme more naturally.
+For broad embed-host compatibility, prefer self-contained HTML with inline scripts/styles, avoid CDN dependencies, avoid dynamic module imports from blob/object URLs, and avoid using blob URLs for runtime-loaded assets when a `data:` URL or other inline form will work.
 The embed export menu includes MP4 when the browser supports WebCodecs, so Chrome and Edge are the safest targets for video export.
 
 The root package intentionally exports no builders, player, project loader, deck/sequence helpers, 3D renderer, or preset compiler.

package/dist/src/render/embed.js

@@ -19,6 +19,7 @@ function renderToEmbedHtml(document, options = {}) {
     const initialFrameIndex = frameIndexForTime(initialTime, frameTimes);
     const initialFrame = frames[initialFrameIndex] ?? frames[0] ?? (0, svg_1.renderToSvg)(document, options);
     const chromeBackground = escapeHtml(String(options.chromeBackground ?? "transparent"));
+    const mp4MuxerRuntimeSource = inlineMp4MuxerRuntime(mp4_muxer_source_1.MP4_MUXER_SOURCE);
     const statusLabel = escapeHtml(title || "Sketchmark embed");
     const payload = {
         title,
@@ -225,9 +226,11 @@ function renderToEmbedHtml(document, options = {}) {
     </details>` : ""}
     <div id="meta">${statusLabel}</div>
   </div>
+  <script>
+    ${mp4MuxerRuntimeSource}
+  </script>
   <script>
     const payload = ${serializeForScript(payload)};
-    const mp4MuxerSource = ${serializeForScript(mp4_muxer_source_1.MP4_MUXER_SOURCE)};
     const stage = document.getElementById("stage");
     const playButton = document.getElementById("play");
     const slider = document.getElementById("time");
@@ -244,7 +247,6 @@ function renderToEmbedHtml(document, options = {}) {
     };
     let metaTimer = 0;
     let exportBusy = false;
-    let mp4MuxerModulePromise = null;
 
     function clampTime(value) {
       if (!payload.duration) return 0;
@@ -372,9 +374,7 @@ function renderToEmbedHtml(document, options = {}) {
     }
 
     function loadSvgImage(svg) {
-      const blob = new Blob([svg], { type: "image/svg+xml;charset=utf-8" });
-      const url = URL.createObjectURL(blob);
-      return loadImage(url).finally(() => URL.revokeObjectURL(url));
+      return loadImage(svgDataUrl(svg));
     }
 
     function loadImage(url) {
@@ -386,6 +386,10 @@ function renderToEmbedHtml(document, options = {}) {
       });
     }
 
+    function svgDataUrl(svg) {
+      return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
+    }
+
     function canvasToBlob(canvas, type, quality) {
       return new Promise((resolve, reject) => {
         canvas.toBlob((blob) => {
@@ -431,17 +435,9 @@ function renderToEmbedHtml(document, options = {}) {
     }
 
     async function loadMp4Muxer() {
-      if (!mp4MuxerModulePromise) {
-        const blob = new Blob([mp4MuxerSource], { type: "text/javascript;charset=utf-8" });
-        const url = URL.createObjectURL(blob);
-        mp4MuxerModulePromise = import(url)
-          .catch((error) => {
-            mp4MuxerModulePromise = null;
-            throw error;
-          })
-          .finally(() => URL.revokeObjectURL(url));
-      }
-      return mp4MuxerModulePromise;
+      const module = globalThis.__SKETCHMARK_MP4_MUXER__;
+      if (module && module.Muxer && module.ArrayBufferTarget) return module;
+      throw new Error("MP4 runtime could not be initialized in this host.");
     }
 
     async function rasterBlob(format) {
@@ -686,3 +682,17 @@ function serializeForScript(value) {
         .replace(/\u2028/g, "\\u2028")
         .replace(/\u2029/g, "\\u2029");
 }
+function inlineMp4MuxerRuntime(source) {
+    const withoutExportBlock = source.replace(/\s*export\s*\{[\s\S]*?\}\s*;?\s*$/, "");
+    const runtime = `${withoutExportBlock}
+globalThis.__SKETCHMARK_MP4_MUXER__ = {
+  ArrayBufferTarget,
+  FileSystemWritableFileStreamTarget,
+  Muxer,
+  StreamTarget
+};`;
+    return escapeInlineScript(runtime);
+}
+function escapeInlineScript(value) {
+    return value.replace(/<\/script/gi, "<\\/script").replace(/<!--/g, "<\\!--");
+}

package/dist/tests/run.js

@@ -137,7 +137,9 @@ test("renders a self-contained interactive embed HTML shell", () => {
     assert(html.includes('data-export-format="svg"'), "should include export controls");
     assert(html.includes('data-export-format="mp4"'), "should include mp4 export");
     assert(html.includes("__SKETCHMARK_EMBED__"), "should expose a runtime controller");
-    assert(html.includes("loadMp4Muxer"), "should inline mp4 export runtime");
+    assert(html.includes("__SKETCHMARK_MP4_MUXER__"), "should inline the mp4 muxer runtime");
+    assert(!html.includes("import(url)"), "should avoid blob-based dynamic module imports");
+    assert(html.includes("data:image/svg+xml;charset=utf-8,"), "should use data URLs for SVG rasterization inside embed hosts");
     assert(html.includes("sketchmark-rendered"), "should notify host frames when ready");
 });
 test("resolves element-local timeline tracks", () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sketchmark",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "Render kernel for Sketchmark visual documents.",
   "license": "MIT",
   "type": "commonjs",