@mzebley/mark-down-react 1.2.1 → 1.2.3

package/README.md

@@ -1,5 +1,6 @@
 # mark↓ React Adapter
-*(published as `@mzebley/mark-down-react`)*
+
+_(published as `@mzebley/mark-down-react`)_
 
 React bindings for the [mark↓ core runtime](../core/README.md). This package exposes context providers, hooks, and ready-to-use components that make it simple to render Markdown snippets safely. For a broader overview of the project, start with the [root README](../../README.md).
 
@@ -29,11 +30,11 @@ Generate a manifest with the [CLI](../cli/README.md) before rendering snippets.
 Wrap your app with the `SnippetProvider` so that hooks and components can access a shared client instance:
 
 ```tsx
-import { SnippetProvider } from '@mzebley/mark-down-react';
+import { SnippetProvider } from "@mzebley/mark-down-react";
 
 export function App({ children }: { children: React.ReactNode }) {
   return (
-    <SnippetProvider options={{ manifest: '/snippets-index.json' }}>
+    <SnippetProvider options={{ manifest: "/snippets-index.json" }}>
       {children}
     </SnippetProvider>
   );
@@ -49,10 +50,10 @@ export function App({ children }: { children: React.ReactNode }) {
 Fetch a single snippet and track loading / error state:
 
 ```tsx
-import { useSnippet } from '@mzebley/mark-down-react';
+import { useSnippet } from "@mzebley/mark-down-react";
 
 export function Hero() {
-  const { snippet, loading, error } = useSnippet('getting-started-welcome');
+  const { snippet, loading, error } = useSnippet("getting-started-welcome");
 
   if (loading) return <p>Loading…</p>;
   if (error) return <p role="alert">Failed to load snippet.</p>;
@@ -67,13 +68,13 @@ export function Hero() {
 Render snippets declaratively with built-in loading and error fallbacks:
 
 ```tsx
-import { SnippetView } from '@mzebley/mark-down-react';
+import { SnippetView } from "@mzebley/mark-down-react";
 
 <SnippetView
   slug="components-button"
   loadingFallback={<p>Loading…</p>}
   errorFallback={<p role="alert">Unable to load snippet.</p>}
-  onLoaded={(snippet) => console.log('Rendered', snippet.slug)}
+  onLoaded={(snippet) => console.log("Rendered", snippet.slug)}
 />;
 ```
 
@@ -88,18 +89,19 @@ Features:
 When using Next.js, Remix, or another SSR framework, provide a server-safe fetch implementation:
 
 ```tsx
-import fetch from 'node-fetch';
-import { SnippetProvider } from '@mzebley/mark-down-react';
+import fetch from "node-fetch";
+import { SnippetProvider } from "@mzebley/mark-down-react";
 
 <SnippetProvider
   options={{
-    manifest: () => import('../snippets-index.json'),
-    fetch: (url) => fetch(url).then((response) => {
-      if (!response.ok) {
-        throw new Error(`Request failed with status ${response.status}`);
-      }
-      return response;
-    }),
+    manifest: () => import("../snippets-index.json"),
+    fetch: (url) =>
+      fetch(url).then((response) => {
+        if (!response.ok) {
+          throw new Error(`Request failed with status ${response.status}`);
+        }
+        return response;
+      }),
   }}
 >
   {children}

package/dist/index.cjs

@@ -42,7 +42,11 @@ var import_react = require("react");
 var import_mark_down = require("@mzebley/mark-down");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SnippetClientContext = (0, import_react.createContext)(null);
-function SnippetProvider({ client, options, children }) {
+function SnippetProvider({
+  client,
+  options,
+  children
+}) {
   const value = (0, import_react.useMemo)(() => {
     if (client) {
       return client;
@@ -102,7 +106,15 @@ function SnippetView({
   onLoaded
 }) {
   const state = useSnippet(slug);
-  const safeHtml = (0, import_react3.useMemo)(() => state.snippet ? import_dompurify.default.sanitize(state.snippet.html) : void 0, [state.snippet]);
+  const safeHtml = (0, import_react3.useMemo)(() => {
+    if (!state.snippet) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return state.snippet.html;
+    }
+    return import_dompurify.default.sanitize(state.snippet.html);
+  }, [state.snippet]);
   (0, import_react3.useEffect)(() => {
     onLoaded?.(state.snippet);
   }, [state.snippet, onLoaded]);
@@ -115,7 +127,13 @@ function SnippetView({
   if (!state.snippet) {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, children: "Snippet not found" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, dangerouslySetInnerHTML: { __html: safeHtml ?? "" } });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: safeHtml ?? "" }
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -7,7 +7,7 @@ interface SnippetProviderProps {
     options?: SnippetClientOptions;
     children: ReactNode;
 }
-declare function SnippetProvider({ client, options, children }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
+declare function SnippetProvider({ client, options, children, }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSnippetClient(): SnippetClient;
 
 interface UseSnippetResult {
@@ -24,6 +24,6 @@ interface SnippetViewProps {
     errorFallback?: ReactNode;
     onLoaded?: (snippet?: Snippet) => void;
 }
-declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded }: SnippetViewProps): react_jsx_runtime.JSX.Element;
+declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded, }: SnippetViewProps): react_jsx_runtime.JSX.Element;
 
 export { SnippetProvider, type SnippetProviderProps, SnippetView, type SnippetViewProps, type UseSnippetResult, useSnippet, useSnippetClient };

package/dist/index.d.ts

@@ -7,7 +7,7 @@ interface SnippetProviderProps {
     options?: SnippetClientOptions;
     children: ReactNode;
 }
-declare function SnippetProvider({ client, options, children }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
+declare function SnippetProvider({ client, options, children, }: SnippetProviderProps): react_jsx_runtime.JSX.Element;
 declare function useSnippetClient(): SnippetClient;
 
 interface UseSnippetResult {
@@ -24,6 +24,6 @@ interface SnippetViewProps {
     errorFallback?: ReactNode;
     onLoaded?: (snippet?: Snippet) => void;
 }
-declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded }: SnippetViewProps): react_jsx_runtime.JSX.Element;
+declare function SnippetView({ slug, className, loadingFallback, errorFallback, onLoaded, }: SnippetViewProps): react_jsx_runtime.JSX.Element;
 
 export { SnippetProvider, type SnippetProviderProps, SnippetView, type SnippetViewProps, type UseSnippetResult, useSnippet, useSnippetClient };

package/dist/index.js

@@ -3,7 +3,11 @@ import { createContext, useContext, useMemo } from "react";
 import { SnippetClient } from "@mzebley/mark-down";
 import { jsx } from "react/jsx-runtime";
 var SnippetClientContext = createContext(null);
-function SnippetProvider({ client, options, children }) {
+function SnippetProvider({
+  client,
+  options,
+  children
+}) {
   const value = useMemo(() => {
     if (client) {
       return client;
@@ -63,7 +67,15 @@ function SnippetView({
   onLoaded
 }) {
   const state = useSnippet(slug);
-  const safeHtml = useMemo2(() => state.snippet ? DOMPurify.sanitize(state.snippet.html) : void 0, [state.snippet]);
+  const safeHtml = useMemo2(() => {
+    if (!state.snippet) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return state.snippet.html;
+    }
+    return DOMPurify.sanitize(state.snippet.html);
+  }, [state.snippet]);
   useEffect2(() => {
     onLoaded?.(state.snippet);
   }, [state.snippet, onLoaded]);
@@ -76,7 +88,13 @@ function SnippetView({
   if (!state.snippet) {
     return /* @__PURE__ */ jsx2("div", { className, children: "Snippet not found" });
   }
-  return /* @__PURE__ */ jsx2("div", { className, dangerouslySetInnerHTML: { __html: safeHtml ?? "" } });
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className,
+      dangerouslySetInnerHTML: { __html: safeHtml ?? "" }
+    }
+  );
 }
 export {
   SnippetProvider,

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@mzebley/mark-down-react",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "mark↓ React Adapter",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -13,7 +16,7 @@
     "build": "tsup src/index.ts --dts --format esm,cjs"
   },
   "dependencies": {
-    "@mzebley/mark-down": "^1.2.1",
+    "@mzebley/mark-down": "^1.2.2",
     "dompurify": "^3.0.5"
   },
   "peerDependencies": {

package/src/context.tsx

@@ -1,32 +0,0 @@
-import { createContext, ReactNode, useContext, useMemo } from "react";
-import { SnippetClient, type SnippetClientOptions } from "@mzebley/mark-down";
-
-const SnippetClientContext = createContext<SnippetClient | null>(null);
-
-export interface SnippetProviderProps {
-  client?: SnippetClient;
-  options?: SnippetClientOptions;
-  children: ReactNode;
-}
-
-export function SnippetProvider({ client, options, children }: SnippetProviderProps) {
-  const value = useMemo(() => {
-    if (client) {
-      return client;
-    }
-    if (options) {
-      return new SnippetClient(options);
-    }
-    throw new Error("SnippetProvider requires either a client or options");
-  }, [client, options]);
-
-  return <SnippetClientContext.Provider value={value}>{children}</SnippetClientContext.Provider>;
-}
-
-export function useSnippetClient(): SnippetClient {
-  const client = useContext(SnippetClientContext);
-  if (!client) {
-    throw new Error("useSnippetClient must be used within a SnippetProvider");
-  }
-  return client;
-}

package/src/hooks.ts

@@ -1,43 +0,0 @@
-import { useEffect, useState } from "react";
-import type { Snippet } from "@mzebley/mark-down";
-import { useSnippetClient } from "./context";
-
-export interface UseSnippetResult {
-  snippet?: Snippet;
-  loading: boolean;
-  error?: Error;
-}
-
-export function useSnippet(slug?: string | null): UseSnippetResult {
-  const client = useSnippetClient();
-  const [result, setResult] = useState<UseSnippetResult>(() => ({
-    loading: Boolean(slug)
-  }));
-
-  useEffect(() => {
-    if (!slug) {
-      setResult({ loading: false });
-      return;
-    }
-
-    let cancelled = false;
-    setResult((prev) => ({ ...prev, loading: true, error: undefined }));
-
-    client
-      .get(slug)
-      .then((snippet) => {
-        if (cancelled) return;
-        setResult({ snippet, loading: false });
-      })
-      .catch((error: Error) => {
-        if (cancelled) return;
-        setResult({ loading: false, error });
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [client, slug]);
-
-  return result;
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export * from "./context";
-export * from "./hooks";
-export * from "./snippet-view";

package/src/snippet-view.tsx

@@ -1,41 +0,0 @@
-import { ReactNode, useEffect, useMemo } from "react";
-import DOMPurify from "dompurify";
-import type { Snippet } from "@mzebley/mark-down";
-import { useSnippet } from "./hooks";
-
-export interface SnippetViewProps {
-  slug: string;
-  className?: string;
-  loadingFallback?: ReactNode;
-  errorFallback?: ReactNode;
-  onLoaded?: (snippet?: Snippet) => void;
-}
-
-export function SnippetView({
-  slug,
-  className,
-  loadingFallback = "Loading…",
-  errorFallback = "Unable to load snippet",
-  onLoaded
-}: SnippetViewProps) {
-  const state = useSnippet(slug);
-  const safeHtml = useMemo(() => (state.snippet ? DOMPurify.sanitize(state.snippet.html) : undefined), [state.snippet]);
-
-  useEffect(() => {
-    onLoaded?.(state.snippet);
-  }, [state.snippet, onLoaded]);
-
-  if (state.loading) {
-    return <div className={className}>{loadingFallback}</div>;
-  }
-
-  if (state.error) {
-    return <div className={className}>{errorFallback}</div>;
-  }
-
-  if (!state.snippet) {
-    return <div className={className}>Snippet not found</div>;
-  }
-
-  return <div className={className} dangerouslySetInnerHTML={{ __html: safeHtml ?? "" }} />;
-}

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "outDir": "dist"
-  },
-  "include": ["src/**/*"]
-}