@izumisy/md-react-preview 0.1.0

package/app/src/preview-block.tsx

@@ -0,0 +1,217 @@
+import { useEffect, useRef, useState } from "react";
+import { CodeBlock } from "./code-block";
+import { useTheme } from "./theme";
+
+function ChevronIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      style={{
+        transition: "transform 0.15s",
+        transform: open ? "rotate(90deg)" : "rotate(0deg)",
+      }}
+    >
+      <path d="M6 4l4 4-4 4" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M7 3H3v10h10V9" />
+      <path d="M10 2h4v4" />
+      <path d="M14 2L7 9" />
+    </svg>
+  );
+}
+
+function CodeSection({
+  code,
+  open,
+  onToggle,
+}: {
+  code: string;
+  open: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <div style={{ borderTop: "1px solid var(--ms-border)" }}>
+      <button
+        type="button"
+        onClick={onToggle}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 4,
+          width: "100%",
+          padding: "8px 12px",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          fontSize: 13,
+          color: "var(--ms-fg-muted)",
+          fontFamily: "inherit",
+        }}
+      >
+        <ChevronIcon open={open} />
+        Code
+      </button>
+      {open && (
+        <CodeBlock className="language-tsx" noBorderRadius>
+          {code}
+        </CodeBlock>
+      )}
+    </div>
+  );
+}
+
+export function PreviewBlock({
+  code,
+  blockId,
+  height,
+  wrap,
+  align,
+  standalone,
+}: {
+  code: string;
+  blockId: string;
+  height?: string;
+  wrap?: string;
+  align?: string;
+  standalone?: boolean;
+}) {
+  const DEFAULT_HEIGHT = 200;
+  const [open, setOpen] = useState(true);
+  const [iframeHeight, setIframeHeight] = useState(height ? Number(height) : DEFAULT_HEIGHT);
+  const { colorScheme } = useTheme();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Build the initial URL (theme is applied via postMessage after load)
+  const params = new URLSearchParams({ theme: colorScheme });
+  if (wrap) params.set("wrap", wrap);
+  if (align) params.set("align", align);
+  const previewUrl = `/__preview/${blockId}?${params}`;
+
+  // Sync theme changes to the iframe via postMessage instead of reloading
+  const initialColorScheme = useRef(colorScheme);
+  useEffect(() => {
+    if (colorScheme === initialColorScheme.current) return;
+    iframeRef.current?.contentWindow?.postMessage({ type: "mrp-theme", theme: colorScheme }, "*");
+  }, [colorScheme]);
+
+  useEffect(() => {
+    function onMessage(e: MessageEvent) {
+      if (e.data?.type === "mrp-resize" && e.data?.blockId === blockId) {
+        setIframeHeight(e.data.height);
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [blockId]);
+
+  return (
+    <div
+      style={{
+        border: "1px solid var(--ms-border)",
+        borderRadius: 8,
+        overflow: "hidden",
+        margin: "16px 0",
+      }}
+    >
+      {standalone ? (
+        <a
+          href={previewUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 12,
+            padding: "20px 16px",
+            textDecoration: "none",
+            color: "var(--ms-fg-muted)",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "var(--ms-code-bg)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
+          }}
+        >
+          <ExternalLinkIcon />
+          <span style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 500,
+                color: "var(--ms-fg)",
+              }}
+            >
+              Open full-page preview
+            </span>
+            <span style={{ fontSize: 12, color: "var(--ms-fg-muted)" }}>
+              This component requires a full viewport to render correctly.
+            </span>
+          </span>
+        </a>
+      ) : (
+        <div style={{ position: "relative" }}>
+          <a
+            href={previewUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Open in separate page"
+            style={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 28,
+              height: 28,
+              borderRadius: 6,
+              border: "1px solid var(--ms-border)",
+              background: "var(--ms-bg)",
+              color: "var(--ms-fg-muted)",
+              cursor: "pointer",
+              zIndex: 1,
+              textDecoration: "none",
+            }}
+          >
+            <ExternalLinkIcon />
+          </a>
+          <iframe
+            ref={iframeRef}
+            src={previewUrl}
+            style={{
+              display: "block",
+              width: "100%",
+              height: iframeHeight,
+              border: "none",
+              transition: "height 0.15s ease",
+            }}
+          />
+        </div>
+      )}
+      <CodeSection code={code} open={open} onToggle={() => setOpen((v) => !v)} />
+    </div>
+  );
+}

package/app/src/theme.tsx

@@ -0,0 +1,45 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+type ColorScheme = "light" | "dark";
+
+interface ThemeContextValue {
+  colorScheme: ColorScheme;
+  toggle: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  colorScheme: "light",
+  toggle: () => {},
+});
+
+function getSystemScheme(): ColorScheme {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(getSystemScheme);
+
+  useEffect(() => {
+    const root = document.documentElement;
+    root.setAttribute("data-theme", colorScheme);
+    root.classList.remove("light", "dark");
+    root.classList.add(colorScheme);
+  }, [colorScheme]);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => {
+      setColorScheme(e.matches ? "dark" : "light");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  const toggle = () => setColorScheme((s) => (s === "light" ? "dark" : "light"));
+
+  return <ThemeContext.Provider value={{ colorScheme, toggle }}>{children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/app/src/virtual-modules.d.ts

@@ -0,0 +1,26 @@
+declare module "virtual:previewer-entries" {
+  import type { ComponentType } from "react";
+  interface PreviewEntryFrontmatter {
+    title?: string;
+    description?: string;
+  }
+  export interface PreviewEntry {
+    name: string;
+    Component: ComponentType;
+    frontmatter: PreviewEntryFrontmatter;
+    /** File path relative to the host project root */
+    filePath: string;
+  }
+  export const entries: PreviewEntry[];
+}
+
+declare module "virtual:previewer-css" {}
+
+declare module "virtual:mrp-preview-registry" {
+  export const registry: Record<
+    string,
+    () => Promise<{ default: import("react").FC; css: string }>
+  >;
+}
+
+declare const __PREVIEWER_TITLE__: string;

package/dist/cli.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/cli.mjs

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+import { n as runPreview, r as startDev, t as runBuild } from "./server-C2ZxWhHj.mjs";
+import { defineCommand, runMain } from "citty";
+import { loadConfig } from "c12";
+import fg from "fast-glob";
+//#region src/cli.ts
+async function resolveRunOptions(cwd) {
+	const { config } = await loadConfig({
+		name: "mrp",
+		cwd
+	});
+	const cfg = config ?? {};
+	const resolveFiles = () => fg(cfg.glob ?? "docs/**/*.md", {
+		cwd,
+		absolute: true
+	});
+	return {
+		cwd,
+		config: cfg,
+		resolveFiles
+	};
+}
+runMain(defineCommand({
+	meta: {
+		name: "mrp",
+		description: "md-react-preview CLI"
+	},
+	subCommands: {
+		dev: defineCommand({
+			meta: {
+				name: "dev",
+				description: "Start the dev server"
+			},
+			async run() {
+				await startDev(await resolveRunOptions(process.cwd()));
+			}
+		}),
+		build: defineCommand({
+			meta: {
+				name: "build",
+				description: "Build for production"
+			},
+			async run() {
+				await runBuild(await resolveRunOptions(process.cwd()));
+			}
+		}),
+		preview: defineCommand({
+			meta: {
+				name: "preview",
+				description: "Preview the production build locally"
+			},
+			async run() {
+				await runPreview(await resolveRunOptions(process.cwd()));
+			}
+		})
+	}
+}));
+//#endregion
+export {};