@markdy/mdx 0.7.15

package/LICENSE

@@ -0,0 +1 @@
+MIT

package/README.md

@@ -0,0 +1,48 @@
+# @markdy/mdx
+
+MDX integration for MarkdyScript with Lighthouse-safe defaults:
+
+- `remarkMarkdy` converts fenced code blocks (` ```markdy `) into a player component.
+- `MarkdyPlayer` hydrates only when visible and lazy-loads `@markdy/renderer-dom`.
+
+## Install
+
+```sh
+pnpm add @markdy/mdx react react-dom
+```
+
+## Usage
+
+```ts
+// mdx config
+import { remarkMarkdy } from "@markdy/mdx";
+
+export default {
+  remarkPlugins: [[remarkMarkdy, { componentName: "MarkdyPlayer" }]],
+};
+```
+
+```tsx
+// shared MDX components map
+import { MarkdyPlayer } from "@markdy/mdx";
+
+export const mdxComponents = {
+  MarkdyPlayer,
+};
+```
+
+Then write Markdown:
+
+````md
+```markdy width=800 height=400 bg="#f8fafc" autoplay=false loop=false
+scene width=800 height=400 bg=#f8fafc
+actor label = text("Hello, MDX") at (80, 180) size 48
+@0.2: label.fade_in(dur=0.6)
+```
+````
+
+## Performance Notes
+
+- Default transform options set `autoplay=false`, `loop=false`, `progressBar=false`.
+- Runtime player does not import renderer code until the block enters viewport.
+- Placeholder is SSR-safe and keeps stable layout ratio to avoid CLS.

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { Root } from 'mdast';
+
+type MarkdyPlayerProps = {
+    code: string;
+    width?: number | string;
+    height?: number | string;
+    bg?: string;
+    assets?: Record<string, string>;
+    autoplay?: boolean | string;
+    loop?: boolean | string;
+    copyright?: boolean | string;
+    progressBar?: boolean | string;
+    className?: string;
+    title?: string;
+    description?: string;
+};
+declare function MarkdyPlayer({ code, width, height, bg, assets, autoplay, loop, copyright, progressBar, className, title, description, }: MarkdyPlayerProps): react.JSX.Element;
+
+type MarkdyFenceDefaults = Partial<{
+    width: number;
+    height: number;
+    bg: string;
+    autoplay: boolean;
+    loop: boolean;
+    copyright: boolean;
+    progressBar: boolean;
+    title: string;
+    description: string;
+}>;
+type RemarkMarkdyOptions = {
+    componentName?: string;
+    defaults?: MarkdyFenceDefaults;
+};
+declare function remarkMarkdy(opts?: RemarkMarkdyOptions): (tree: Root) => void;
+
+export { MarkdyPlayer, type MarkdyPlayerProps, type RemarkMarkdyOptions, remarkMarkdy };

package/dist/index.js

@@ -0,0 +1,276 @@
+// src/player.tsx
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function scheduleBackgroundTask(work) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if ("requestIdleCallback" in window) {
+    const requestIdleCallbackFn = window.requestIdleCallback;
+    requestIdleCallbackFn(() => work(), { timeout: 1500 });
+    return;
+  }
+  globalThis.setTimeout(work, 0);
+}
+function coerceBoolean(value, fallback) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") {
+    if (value.toLowerCase() === "true") return true;
+    if (value.toLowerCase() === "false") return false;
+  }
+  return fallback;
+}
+function coerceNumber(value, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const parsed = Number(value);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return fallback;
+}
+function MarkdyPlayer({
+  code,
+  width = 800,
+  height = 400,
+  bg = "#ffffff",
+  assets = {},
+  autoplay = false,
+  loop = false,
+  copyright = false,
+  progressBar = false,
+  className,
+  title = "Markdy animation",
+  description
+}) {
+  const resolvedWidth = coerceNumber(width, 800);
+  const resolvedHeight = coerceNumber(height, 400);
+  const resolvedAutoplay = coerceBoolean(autoplay, false);
+  const resolvedLoop = coerceBoolean(loop, false);
+  const resolvedCopyright = coerceBoolean(copyright, false);
+  const resolvedProgressBar = coerceBoolean(progressBar, false);
+  const rootRef = useRef(null);
+  const playerRef = useRef(null);
+  const hydratedRef = useRef(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const root = rootRef.current;
+    if (!root || hydratedRef.current) return;
+    let disposed = false;
+    let observer = null;
+    const doHydrate = (forceAutoplay = false) => {
+      if (disposed || hydratedRef.current) return;
+      hydratedRef.current = true;
+      root.dataset.markdyInit = "hydrating";
+      scheduleBackgroundTask(() => {
+        void (async () => {
+          try {
+            const renderer = await import("@markdy/renderer-dom");
+            if (disposed) return;
+            const createPlayer = renderer.createPlayer;
+            root.innerHTML = "";
+            playerRef.current = createPlayer({
+              container: root,
+              code,
+              assets,
+              autoplay: forceAutoplay || resolvedAutoplay,
+              loop: resolvedLoop,
+              copyright: resolvedCopyright,
+              progressBar: resolvedProgressBar
+            });
+            root.dataset.markdyInit = "done";
+            root.removeAttribute("aria-busy");
+          } catch (error) {
+            hydratedRef.current = false;
+            root.dataset.markdyInit = "error";
+            root.removeAttribute("aria-busy");
+            console.error("Failed to hydrate MarkdyPlayer", error);
+          }
+        })();
+      });
+    };
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (!entry.isIntersecting) continue;
+          observer?.unobserve(root);
+          doHydrate(false);
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(root);
+    root.dataset.markdyInit = "pending";
+    const onClick = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      if (!target.closest("[data-markdy-placeholder]")) return;
+      observer?.unobserve(root);
+      doHydrate(true);
+    };
+    root.addEventListener("click", onClick);
+    return () => {
+      disposed = true;
+      observer?.disconnect();
+      root.removeEventListener("click", onClick);
+      playerRef.current?.destroy();
+      playerRef.current = null;
+    };
+  }, [assets, code, resolvedAutoplay, resolvedCopyright, resolvedLoop, resolvedProgressBar]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      role: "img",
+      "aria-label": title,
+      "aria-busy": "true",
+      style: {
+        maxWidth: `${width}px`,
+        width: "100%",
+        aspectRatio: `${resolvedWidth}/${resolvedHeight}`,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "data-markdy-placeholder": "true",
+            type: "button",
+            "aria-label": `Play ${title}`,
+            style: {
+              width: "100%",
+              height: "100%",
+              background: bg,
+              border: "none",
+              padding: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer"
+            },
+            children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  fontFamily: "sans-serif",
+                  fontSize: "12px",
+                  color: "#8a8a8a",
+                  letterSpacing: "0.04em",
+                  pointerEvents: "none"
+                },
+                children: "\u25B6 markdy"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              background: bg,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(
+              "p",
+              {
+                style: {
+                  fontFamily: "sans-serif",
+                  fontSize: "14px",
+                  color: "#666666",
+                  margin: 0,
+                  padding: "1rem",
+                  textAlign: "center"
+                },
+                children: description ?? title
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/remark.ts
+import { visit } from "unist-util-visit";
+var MARKDY_LANGS = /* @__PURE__ */ new Set(["markdy", "markdyscript"]);
+var META_TOKEN_RE = /([A-Za-z_]\w*)=("[^"]*"|'[^']*'|[^\s]+)/g;
+function parseMetaValue(raw) {
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  if (raw.startsWith('"') && raw.endsWith('"') || raw.startsWith("'") && raw.endsWith("'")) {
+    return raw.slice(1, -1);
+  }
+  const asNumber = Number(raw);
+  if (!Number.isNaN(asNumber)) return asNumber;
+  return raw;
+}
+function normalizeMetaKey(key) {
+  if (key === "progress_bar") return "progressBar";
+  return key;
+}
+function parseMeta(meta) {
+  if (!meta) return {};
+  const out = {};
+  for (const match of meta.matchAll(META_TOKEN_RE)) {
+    const key = normalizeMetaKey(match[1]);
+    out[key] = parseMetaValue(match[2]);
+  }
+  return out;
+}
+function toAttribute(name, value) {
+  return {
+    type: "mdxJsxAttribute",
+    name,
+    value: String(value)
+  };
+}
+function toCodeAttribute(code) {
+  return {
+    type: "mdxJsxAttribute",
+    name: "code",
+    value: code
+  };
+}
+function remarkMarkdy(opts = {}) {
+  const componentName = opts.componentName ?? "MarkdyPlayer";
+  const defaultProps = {
+    autoplay: false,
+    loop: false,
+    progressBar: false,
+    ...opts.defaults
+  };
+  return (tree) => {
+    visit(tree, "code", (node, index, parent) => {
+      if (index === void 0 || !parent) return;
+      const codeNode = node;
+      const lang = codeNode.lang?.toLowerCase() ?? "";
+      if (!MARKDY_LANGS.has(lang)) return;
+      const parsedMeta = parseMeta(codeNode.meta);
+      const mergedProps = {
+        ...defaultProps,
+        ...parsedMeta
+      };
+      const attributes = [toCodeAttribute(codeNode.value)];
+      for (const [key, value] of Object.entries(mergedProps)) {
+        if (value === void 0) continue;
+        attributes.push(toAttribute(key, value));
+      }
+      const replacement = {
+        type: "mdxJsxFlowElement",
+        name: componentName,
+        attributes,
+        children: []
+      };
+      parent.children[index] = replacement;
+    });
+  };
+}
+export {
+  MarkdyPlayer,
+  remarkMarkdy
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@markdy/mdx",
+  "version": "0.7.15",
+  "description": "MDX integration plugin and lightweight React player for Markdy.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "keywords": [
+    "markdy",
+    "mdx",
+    "remark",
+    "react",
+    "animation"
+  ],
+  "author": "Hoang Yell <hoangyell@gmail.com> (https://hoangyell.com)",
+  "homepage": "https://markdy.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HoangYell/markdy-com.git",
+    "directory": "packages/mdx"
+  },
+  "bugs": {
+    "url": "https://github.com/HoangYell/markdy-com/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "unist-util-visit": "^5.0.0",
+    "@markdy/renderer-dom": "0.7.15"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "^4.0.4",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "echo \"No tests yet\"",
+    "typecheck": "tsc --noEmit",
+    "lint": "tsc --noEmit"
+  }
+}