asciify-engine 1.0.6 → 1.0.8

package/dist/index.d.cts

@@ -160,9 +160,15 @@ declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElem
  */
 declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
- * Generate a professional 3-line embed snippet.
- * The render runtime is loaded from jsDelivr CDN (free, served from npm).
- * Only the base64-encoded frame data is inlined.
+ * Generate a clean 2-line embed snippet.
+ *
+ * All data lives in data attributes on the <canvas>.
+ * The <script> tag is always the same CDN line — identical across all embeds,
+ * so browsers/CDNs cache it once and reuse it everywhere.
+ *
+ * Output:
+ *   <canvas data-asciify-id="ar-xxx" data-asciify-src="…" data-asciify-opts="{…}" width="…" height="…"></canvas>
+ *   <script src="https://cdn.jsdelivr.net/npm/asciify-engine@x.x.x/dist/embed.js" async></script>
  */
 declare function generateEmbedCode(frame: AsciiFrame, options: AsciiOptions, width: number, height: number): string;
 /**

package/dist/index.d.ts

@@ -160,9 +160,15 @@ declare function asciifyGif(source: string | ArrayBuffer, canvas: HTMLCanvasElem
  */
 declare function asciifyVideo(source: HTMLVideoElement | string, canvas: HTMLCanvasElement, { fontSize, style, options }?: AsciifySimpleOptions): Promise<() => void>;
 /**
- * Generate a professional 3-line embed snippet.
- * The render runtime is loaded from jsDelivr CDN (free, served from npm).
- * Only the base64-encoded frame data is inlined.
+ * Generate a clean 2-line embed snippet.
+ *
+ * All data lives in data attributes on the <canvas>.
+ * The <script> tag is always the same CDN line — identical across all embeds,
+ * so browsers/CDNs cache it once and reuse it everywhere.
+ *
+ * Output:
+ *   <canvas data-asciify-id="ar-xxx" data-asciify-src="…" data-asciify-opts="{…}" width="…" height="…"></canvas>
+ *   <script src="https://cdn.jsdelivr.net/npm/asciify-engine@x.x.x/dist/embed.js" async></script>
  */
 declare function generateEmbedCode(frame: AsciiFrame, options: AsciiOptions, width: number, height: number): string;
 /**

package/dist/index.js

@@ -717,22 +717,24 @@ function renderFrameToCanvas(ctx, frame, options, canvasWidth, canvasHeight, tim
   }
   ctx.globalAlpha = 1;
 }
-function serializeFrame(frame, includeChars) {
+function serializeFrame(frame, fullColor) {
   const rows = frame.length;
   const cols = rows > 0 ? frame[0].length : 0;
-  const buf = new Uint8Array(rows * cols * 5);
-  let i = 0;
+  const stride = fullColor ? 4 : 2;
+  const buf = new Uint8Array(1 + rows * cols * stride);
+  buf[0] = stride;
+  let i = 1;
   for (let y = 0; y < rows; y++) {
     for (let x = 0; x < cols; x++) {
       const cell = frame[y][x];
-      buf[i++] = cell.r;
-      buf[i++] = cell.g;
-      buf[i++] = cell.b;
-      buf[i++] = cell.a;
-      if (includeChars) {
-        buf[i++] = cell.char.charCodeAt(0) & 255;
+      if (fullColor) {
+        buf[i++] = cell.r;
+        buf[i++] = cell.g;
+        buf[i++] = cell.b;
+        buf[i++] = cell.a;
       } else {
         buf[i++] = Math.round(0.299 * cell.r + 0.587 * cell.g + 0.114 * cell.b);
+        buf[i++] = cell.a;
       }
     }
   }
@@ -830,7 +832,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.5";
+var EMBED_CDN_VERSION = "1.0.8";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -854,32 +856,31 @@ function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   if (animated) o.anim = true;
   return JSON.stringify(o);
 }
+var CDN_SCRIPT = `<script src="https://cdn.jsdelivr.net/npm/asciify-engine@${EMBED_CDN_VERSION}/dist/embed.js" async></script>`;
 function generateEmbedCode(frame, options, width, height) {
   const rows = frame.length;
   if (rows === 0) return "";
   const cols = frame[0].length;
-  const isDots = options.renderMode === "dots";
-  const data = serializeFrame(frame, !isDots);
+  const isFullColor = options.colorMode === "fullcolor";
+  const data = serializeFrame(frame, isFullColor);
   const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
   const opts = buildEmbedOpts(options, rows, cols, width, height);
   return `<!-- Asciify Embed -->
-<canvas id="${id}" width="${width}" height="${height}" style="display:block"></canvas>
-<script src="https://cdn.jsdelivr.net/npm/asciify-engine@${EMBED_CDN_VERSION}/dist/embed.js"></script>
-<script>Asciify('${id}','${data}',${opts})</script>
+<canvas data-asciify-id="${id}" data-asciify-src='"${data}"' data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+${CDN_SCRIPT}
 <!-- /Asciify Embed -->`;
 }
 function generateAnimatedEmbedCode(frames, options, fps, width, height) {
   if (frames.length === 0) return "";
   const rows = frames[0].length;
   const cols = frames[0][0].length;
-  const isDots = options.renderMode === "dots";
-  const allData = frames.map((f) => serializeFrame(f, !isDots));
+  const isFullColor = options.colorMode === "fullcolor";
+  const allData = frames.map((f) => serializeFrame(f, isFullColor));
   const id = `ar-${Math.random().toString(36).slice(2, 9)}`;
   const opts = buildEmbedOpts(options, rows, cols, width, height, fps, true);
   return `<!-- Asciify Animated Embed -->
-<canvas id="${id}" width="${width}" height="${height}" style="display:block"></canvas>
-<script src="https://cdn.jsdelivr.net/npm/asciify-engine@${EMBED_CDN_VERSION}/dist/embed.js"></script>
-<script>Asciify('${id}',${JSON.stringify(allData)},${opts})</script>
+<canvas data-asciify-id="${id}" data-asciify-src='${JSON.stringify(allData)}' data-asciify-opts='${opts}' width="${width}" height="${height}"></canvas>
+${CDN_SCRIPT}
 <!-- /Asciify Animated Embed -->`;
 }
 function _fade(t) {