@paulpaulstudio/strapi-render 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -1,9 +1,9 @@
+"use client";
 'use strict';
 
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/EditModeContext.tsx
 var EditModeContext = react.createContext({ enabled: false, token: null });
 function useStrapiEditMode() {
   return react.useContext(EditModeContext);

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/EditModeContext.tsx","../src/StrapiField.tsx","../src/StrapiText.tsx","../src/StrapiImage.tsx","../src/StrapiList.tsx"],"names":["createContext","useContext","useState","useEffect","useMemo","jsx","useCallback","Fragment","Children","isValidElement","cloneElement","createElement"],"mappings":"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","file":"index.cjs","sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\ninterface EditModeState {\n  enabled: boolean;\n  token: string | null;\n}\n\nconst EditModeContext = createContext<EditModeState>({ enabled: false, token: null });\n\nexport function useStrapiEditMode(): EditModeState {\n  return useContext(EditModeContext);\n}\n\ninterface ProviderProps {\n  children: React.ReactNode;\n  /**\n   * Override automatic URL-based detection. If `true`/`false` ist gesetzt,\n   * wird der URL-Parameter ignoriert.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Provider, der den Edit-Mode aus `?__pp_edit=1&__pp_token=<jwt>` der URL\n * liest und an Kinder via Context weitergibt. Token wird sicherheitshalber\n * NICHT ans CSR exponiert über Props oder DOM — er bleibt nur im Context.\n *\n * Im Edit-Mode wird ausserdem eine kleine globale CSS-Klasse `pp-edit-active`\n * am `<html>` gesetzt, sodass Customer-Sites optional CSS-Hooks setzen können.\n */\nexport function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps) {\n  const [urlState, setUrlState] = useState<EditModeState>({ enabled: false, token: null });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (enabledOverride !== undefined) {\n      setUrlState({ enabled: enabledOverride, token: null });\n      return;\n    }\n    try {\n      const params = new URLSearchParams(window.location.search);\n      const edit = params.get(\"__pp_edit\") === \"1\";\n      const token = params.get(\"__pp_token\");\n      setUrlState({ enabled: edit, token });\n    } catch {\n      // ignore\n    }\n  }, [enabledOverride]);\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    document.documentElement.classList.toggle(\"pp-edit-active\", urlState.enabled);\n  }, [urlState.enabled]);\n\n  // postMessage \"ready\" wenn Edit-Mode aktiv ist und Iframe geladen\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (!urlState.enabled) return;\n    if (window.parent === window) return; // nicht im Iframe\n    try {\n      window.parent.postMessage(\n        { type: \"pp:edit:ready\", href: window.location.href },\n        \"*\",\n      );\n    } catch {\n      // ignore\n    }\n  }, [urlState.enabled]);\n\n  // Reload-Listener vom Parent (nach Save)\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (!urlState.enabled) return;\n    function onMsg(e: MessageEvent) {\n      const d = e.data;\n      if (d && typeof d === \"object\" && d.type === \"pp:edit:reload\") {\n        // Soft-Reload — re-loaded mit gleichem Suchparameter\n        window.location.reload();\n      }\n    }\n    window.addEventListener(\"message\", onMsg);\n    return () => window.removeEventListener(\"message\", onMsg);\n  }, [urlState.enabled]);\n\n  const value = useMemo(() => urlState, [urlState]);\n  return <EditModeContext.Provider value={value}>{children}</EditModeContext.Provider>;\n}\n","\"use client\";\n\nimport { Children, cloneElement, isValidElement, useCallback, type ReactElement, type ReactNode } from \"react\";\nimport { useStrapiEditMode } from \"./EditModeContext\";\nimport type { StrapiFieldType } from \"./types\";\n\ninterface StrapiFieldProps {\n  /** Dot-notation path im Strapi-Document, z.B. \"hero.title\" oder \"features.0.image\" */\n  path: string;\n  /** Strapi field type — bestimmt welche Edit-UI im Parent geöffnet wird */\n  type: StrapiFieldType;\n  /** Aktueller Wert. Wird beim Click-Event mitgesendet, damit der Editor initial befüllt ist */\n  value?: unknown;\n  /** Inhalt (das echte gerenderte HTML). Wird im Edit-Mode mit data-attrs + Hover/Click annotiert */\n  children: ReactNode;\n  /** Optional: zusätzliche CSS-Klassen die im Edit-Mode angehängt werden */\n  className?: string;\n}\n\nconst EDIT_ATTR_STYLE = {\n  outline: \"1px dashed transparent\",\n  outlineOffset: \"2px\",\n  cursor: \"pointer\",\n  transition: \"outline-color 0.15s ease\",\n} as const;\n\nconst EDIT_HOVER_STYLE = {\n  outlineColor: \"#FA501E\",\n};\n\n/**\n * Universeller Wrapper für editierbare Strapi-Felder.\n *\n * Im normalen Mode rendert er nur die `children` — keine zusätzlichen DOM-\n * Nodes, kein Overhead. Im Edit-Mode wird das einzige Top-Level-Child mit\n * `data-pp-edit=\"<path>\"` annotiert + Click-Handler bekommt.\n *\n * Falls children mehrere Top-Level-Knoten haben, wird automatisch ein\n * `<span>` als Wrapper eingefügt.\n */\nexport function StrapiField({ path, type, value, children, className }: StrapiFieldProps) {\n  const { enabled } = useStrapiEditMode();\n\n  const onClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (typeof window === \"undefined\" || window.parent === window) return;\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      try {\n        window.parent.postMessage(\n          {\n            type: \"pp:edit:click\",\n            path,\n            fieldType: type,\n            rect: {\n              top: rect.top,\n              left: rect.left,\n              width: rect.width,\n              height: rect.height,\n            },\n            currentValue: value,\n          },\n          \"*\",\n        );\n      } catch {\n        // ignore\n      }\n    },\n    [path, type, value],\n  );\n\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  // Wenn genau ein React-Element drin ist, klonen wir es und reichen die Edit-Attrs durch.\n  const arr = Children.toArray(children);\n  if (arr.length === 1 && isValidElement(arr[0])) {\n    const el = arr[0] as ReactElement<Record<string, unknown>>;\n    const existing = (el.props.style as React.CSSProperties) ?? {};\n    const existingClass = (el.props.className as string) ?? \"\";\n    return cloneElement(el, {\n      \"data-pp-edit\": path,\n      \"data-pp-type\": type,\n      onClick,\n      onMouseEnter: (e: React.MouseEvent) => {\n        (e.currentTarget as HTMLElement).style.outlineColor = EDIT_HOVER_STYLE.outlineColor;\n      },\n      onMouseLeave: (e: React.MouseEvent) => {\n        (e.currentTarget as HTMLElement).style.outlineColor = \"transparent\";\n      },\n      style: { ...EDIT_ATTR_STYLE, ...existing },\n      className: [existingClass, className, \"pp-edit-target\"].filter(Boolean).join(\" \"),\n    });\n  }\n\n  // Mehrere Kinder: in einen span wrappen\n  return (\n    <span\n      data-pp-edit={path}\n      data-pp-type={type}\n      onClick={onClick}\n      onMouseEnter={(e) => { (e.currentTarget).style.outlineColor = EDIT_HOVER_STYLE.outlineColor; }}\n      onMouseLeave={(e) => { (e.currentTarget).style.outlineColor = \"transparent\"; }}\n      style={EDIT_ATTR_STYLE}\n      className={[\"pp-edit-target\", className].filter(Boolean).join(\" \")}\n    >\n      {children}\n    </span>\n  );\n}\n","\"use client\";\n\nimport { createElement, type ElementType, type ReactNode } from \"react\";\nimport { StrapiField } from \"./StrapiField\";\nimport type { StrapiFieldType } from \"./types\";\n\ninterface StrapiTextProps {\n  path: string;\n  value: string | number | null | undefined;\n  /** Welcher Strapi-Feldtyp ist das? Default \"text\". Für mehrzeilige Felder \"textarea\", für Markdown \"richText\". */\n  fieldType?: Extract<StrapiFieldType, \"text\" | \"textarea\" | \"richText\" | \"email\" | \"number\">;\n  /** HTML-Tag um den Wert zu rendern. Default \"span\". */\n  as?: ElementType;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Inline-Text wrapper. Im normalen Mode rendert es einfach `value` im\n * gewählten Tag — identisch zu einem rohen `<h1>{value}</h1>`. Im Edit-Mode\n * wird ein Click-Handler aktiviert.\n *\n * Wenn `children` mitgegeben sind, werden diese statt `value` als Inhalt\n * verwendet — nützlich für custom Formatierung. Der Click-Wert bleibt\n * `value`.\n */\nexport function StrapiText({ path, value, fieldType = \"text\", as = \"span\", className, children }: StrapiTextProps) {\n  const content = children ?? (value === null || value === undefined ? \"\" : String(value));\n  const el = createElement(as, { className }, content);\n  return (\n    <StrapiField path={path} type={fieldType} value={value}>\n      {el}\n    </StrapiField>\n  );\n}\n","\"use client\";\n\nimport { StrapiField } from \"./StrapiField\";\nimport type { StrapiMediaValue } from \"./types\";\n\ninterface StrapiImageProps {\n  path: string;\n  value: StrapiMediaValue | null | undefined;\n  /** Optional: Strapi-Basis-URL für relative URLs (z.B. \"https://cms.paulpaul.studio\") */\n  baseUrl?: string;\n  /** Override alt-Text (default: alternativeText vom Strapi-Objekt, dann name) */\n  alt?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  loading?: \"lazy\" | \"eager\";\n  /** Fallback wenn value null/undefined ist */\n  fallback?: React.ReactNode;\n}\n\nfunction resolveUrl(value: StrapiMediaValue, baseUrl?: string): string {\n  const u = value.url;\n  if (u.startsWith(\"http\")) return u;\n  if (baseUrl) return `${baseUrl.replace(/\\/$/, \"\")}${u.startsWith(\"/\") ? \"\" : \"/\"}${u}`;\n  return u;\n}\n\n/**\n * Wrapper für ein einzelnes Strapi-Media-Feld. Rendert `<img>` mit der\n * abgeleiteten URL. Im Edit-Mode klickbar — der Editor öffnet einen\n * MediaPicker.\n *\n * Wenn `value` null ist, wird der `fallback` gerendert (oder ein leeres\n * `<span>`).\n */\nexport function StrapiImage({ path, value, baseUrl, alt, className, style, loading = \"lazy\", fallback }: StrapiImageProps) {\n  if (!value) {\n    return (\n      <StrapiField path={path} type=\"media\" value={null}>\n        <span className={className} style={style}>{fallback ?? \"\"}</span>\n      </StrapiField>\n    );\n  }\n  return (\n    <StrapiField path={path} type=\"media\" value={value}>\n      <img\n        src={resolveUrl(value, baseUrl)}\n        alt={alt ?? value.alternativeText ?? value.name ?? \"\"}\n        width={value.width}\n        height={value.height}\n        loading={loading}\n        className={className}\n        style={style}\n      />\n    </StrapiField>\n  );\n}\n","\"use client\";\n\nimport { Fragment, type ReactNode } from \"react\";\n\ninterface StrapiListProps<T> {\n  /** Pfad zum Array-Feld, z.B. \"features\" */\n  path: string;\n  value: T[] | null | undefined;\n  /**\n   * Render-Funktion pro Item. Bekommt einen `itemPath` als zweites Argument,\n   * der für nested-StrapiText/Image-Calls als path-Prefix dient.\n   */\n  renderItem: (item: T, itemPath: string, index: number) => ReactNode;\n  /** Optional: Fallback wenn value null/leer ist */\n  fallback?: ReactNode;\n}\n\n/**\n * Iteriert über ein Strapi-Repeatable-Field oder eine Relation-Liste. Generiert\n * pro Item den vollständigen Edit-Pfad (z.B. \"features.0\", \"features.1\"), den\n * der Caller in nested StrapiText/Image weitergibt.\n *\n * Beispiel:\n *   <StrapiList path=\"features\" value={page.features} renderItem={(f, fp) => (\n *     <div>\n *       <StrapiText path={`${fp}.title`} value={f.title} as=\"h3\" />\n *       <StrapiImage path={`${fp}.icon`} value={f.icon} />\n *     </div>\n *   )} />\n */\nexport function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>) {\n  if (!Array.isArray(value) || value.length === 0) {\n    return <>{fallback ?? null}</>;\n  }\n  return (\n    <>\n      {value.map((item, i) => (\n        <Fragment key={i}>{renderItem(item, `${path}.${i}`, i)}</Fragment>\n      ))}\n    </>\n  );\n}\n"]}
+{"version":3,"sources":["../src/EditModeContext.tsx","../src/StrapiField.tsx","../src/StrapiText.tsx","../src/StrapiImage.tsx","../src/StrapiList.tsx"],"names":["createContext","useContext","useState","useEffect","useMemo","jsx","useCallback","Fragment","Children","isValidElement","cloneElement","createElement"],"mappings":"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","file":"index.cjs","sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useEffect, useMemo, useState } from \"react\";\n\ninterface EditModeState {\n  enabled: boolean;\n  token: string | null;\n}\n\nconst EditModeContext = createContext<EditModeState>({ enabled: false, token: null });\n\nexport function useStrapiEditMode(): EditModeState {\n  return useContext(EditModeContext);\n}\n\ninterface ProviderProps {\n  children: React.ReactNode;\n  /**\n   * Override automatic URL-based detection. If `true`/`false` ist gesetzt,\n   * wird der URL-Parameter ignoriert.\n   */\n  enabled?: boolean;\n}\n\n/**\n * Provider, der den Edit-Mode aus `?__pp_edit=1&__pp_token=<jwt>` der URL\n * liest und an Kinder via Context weitergibt. Token wird sicherheitshalber\n * NICHT ans CSR exponiert über Props oder DOM — er bleibt nur im Context.\n *\n * Im Edit-Mode wird ausserdem eine kleine globale CSS-Klasse `pp-edit-active`\n * am `<html>` gesetzt, sodass Customer-Sites optional CSS-Hooks setzen können.\n */\nexport function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps) {\n  const [urlState, setUrlState] = useState<EditModeState>({ enabled: false, token: null });\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (enabledOverride !== undefined) {\n      setUrlState({ enabled: enabledOverride, token: null });\n      return;\n    }\n    try {\n      const params = new URLSearchParams(window.location.search);\n      const edit = params.get(\"__pp_edit\") === \"1\";\n      const token = params.get(\"__pp_token\");\n      setUrlState({ enabled: edit, token });\n    } catch {\n      // ignore\n    }\n  }, [enabledOverride]);\n\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    document.documentElement.classList.toggle(\"pp-edit-active\", urlState.enabled);\n  }, [urlState.enabled]);\n\n  // postMessage \"ready\" wenn Edit-Mode aktiv ist und Iframe geladen\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (!urlState.enabled) return;\n    if (window.parent === window) return; // nicht im Iframe\n    try {\n      window.parent.postMessage(\n        { type: \"pp:edit:ready\", href: window.location.href },\n        \"*\",\n      );\n    } catch {\n      // ignore\n    }\n  }, [urlState.enabled]);\n\n  // Reload-Listener vom Parent (nach Save)\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (!urlState.enabled) return;\n    function onMsg(e: MessageEvent) {\n      const d = e.data;\n      if (d && typeof d === \"object\" && d.type === \"pp:edit:reload\") {\n        // Soft-Reload — re-loaded mit gleichem Suchparameter\n        window.location.reload();\n      }\n    }\n    window.addEventListener(\"message\", onMsg);\n    return () => window.removeEventListener(\"message\", onMsg);\n  }, [urlState.enabled]);\n\n  const value = useMemo(() => urlState, [urlState]);\n  return <EditModeContext.Provider value={value}>{children}</EditModeContext.Provider>;\n}\n","\"use client\";\n\nimport { Children, cloneElement, isValidElement, useCallback, type ReactElement, type ReactNode } from \"react\";\nimport { useStrapiEditMode } from \"./EditModeContext\";\nimport type { StrapiFieldType } from \"./types\";\n\ninterface StrapiFieldProps {\n  /** Dot-notation path im Strapi-Document, z.B. \"hero.title\" oder \"features.0.image\" */\n  path: string;\n  /** Strapi field type — bestimmt welche Edit-UI im Parent geöffnet wird */\n  type: StrapiFieldType;\n  /** Aktueller Wert. Wird beim Click-Event mitgesendet, damit der Editor initial befüllt ist */\n  value?: unknown;\n  /** Inhalt (das echte gerenderte HTML). Wird im Edit-Mode mit data-attrs + Hover/Click annotiert */\n  children: ReactNode;\n  /** Optional: zusätzliche CSS-Klassen die im Edit-Mode angehängt werden */\n  className?: string;\n}\n\nconst EDIT_ATTR_STYLE = {\n  outline: \"1px dashed transparent\",\n  outlineOffset: \"2px\",\n  cursor: \"pointer\",\n  transition: \"outline-color 0.15s ease\",\n} as const;\n\nconst EDIT_HOVER_STYLE = {\n  outlineColor: \"#FA501E\",\n};\n\n/**\n * Universeller Wrapper für editierbare Strapi-Felder.\n *\n * Im normalen Mode rendert er nur die `children` — keine zusätzlichen DOM-\n * Nodes, kein Overhead. Im Edit-Mode wird das einzige Top-Level-Child mit\n * `data-pp-edit=\"<path>\"` annotiert + Click-Handler bekommt.\n *\n * Falls children mehrere Top-Level-Knoten haben, wird automatisch ein\n * `<span>` als Wrapper eingefügt.\n */\nexport function StrapiField({ path, type, value, children, className }: StrapiFieldProps) {\n  const { enabled } = useStrapiEditMode();\n\n  const onClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (typeof window === \"undefined\" || window.parent === window) return;\n      const target = e.currentTarget as HTMLElement;\n      const rect = target.getBoundingClientRect();\n      try {\n        window.parent.postMessage(\n          {\n            type: \"pp:edit:click\",\n            path,\n            fieldType: type,\n            rect: {\n              top: rect.top,\n              left: rect.left,\n              width: rect.width,\n              height: rect.height,\n            },\n            currentValue: value,\n          },\n          \"*\",\n        );\n      } catch {\n        // ignore\n      }\n    },\n    [path, type, value],\n  );\n\n  if (!enabled) {\n    return <>{children}</>;\n  }\n\n  // Wenn genau ein React-Element drin ist, klonen wir es und reichen die Edit-Attrs durch.\n  const arr = Children.toArray(children);\n  if (arr.length === 1 && isValidElement(arr[0])) {\n    const el = arr[0] as ReactElement<Record<string, unknown>>;\n    const existing = (el.props.style as React.CSSProperties) ?? {};\n    const existingClass = (el.props.className as string) ?? \"\";\n    return cloneElement(el, {\n      \"data-pp-edit\": path,\n      \"data-pp-type\": type,\n      onClick,\n      onMouseEnter: (e: React.MouseEvent) => {\n        (e.currentTarget as HTMLElement).style.outlineColor = EDIT_HOVER_STYLE.outlineColor;\n      },\n      onMouseLeave: (e: React.MouseEvent) => {\n        (e.currentTarget as HTMLElement).style.outlineColor = \"transparent\";\n      },\n      style: { ...EDIT_ATTR_STYLE, ...existing },\n      className: [existingClass, className, \"pp-edit-target\"].filter(Boolean).join(\" \"),\n    });\n  }\n\n  // Mehrere Kinder: in einen span wrappen\n  return (\n    <span\n      data-pp-edit={path}\n      data-pp-type={type}\n      onClick={onClick}\n      onMouseEnter={(e) => { (e.currentTarget).style.outlineColor = EDIT_HOVER_STYLE.outlineColor; }}\n      onMouseLeave={(e) => { (e.currentTarget).style.outlineColor = \"transparent\"; }}\n      style={EDIT_ATTR_STYLE}\n      className={[\"pp-edit-target\", className].filter(Boolean).join(\" \")}\n    >\n      {children}\n    </span>\n  );\n}\n","\"use client\";\n\nimport { createElement, type ElementType, type ReactNode } from \"react\";\nimport { StrapiField } from \"./StrapiField\";\nimport type { StrapiFieldType } from \"./types\";\n\ninterface StrapiTextProps {\n  path: string;\n  value: string | number | null | undefined;\n  /** Welcher Strapi-Feldtyp ist das? Default \"text\". Für mehrzeilige Felder \"textarea\", für Markdown \"richText\". */\n  fieldType?: Extract<StrapiFieldType, \"text\" | \"textarea\" | \"richText\" | \"email\" | \"number\">;\n  /** HTML-Tag um den Wert zu rendern. Default \"span\". */\n  as?: ElementType;\n  className?: string;\n  children?: ReactNode;\n}\n\n/**\n * Inline-Text wrapper. Im normalen Mode rendert es einfach `value` im\n * gewählten Tag — identisch zu einem rohen `<h1>{value}</h1>`. Im Edit-Mode\n * wird ein Click-Handler aktiviert.\n *\n * Wenn `children` mitgegeben sind, werden diese statt `value` als Inhalt\n * verwendet — nützlich für custom Formatierung. Der Click-Wert bleibt\n * `value`.\n */\nexport function StrapiText({ path, value, fieldType = \"text\", as = \"span\", className, children }: StrapiTextProps) {\n  const content = children ?? (value === null || value === undefined ? \"\" : String(value));\n  const el = createElement(as, { className }, content);\n  return (\n    <StrapiField path={path} type={fieldType} value={value}>\n      {el}\n    </StrapiField>\n  );\n}\n","\"use client\";\n\nimport { StrapiField } from \"./StrapiField\";\nimport type { StrapiMediaValue } from \"./types\";\n\ninterface StrapiImageProps {\n  path: string;\n  value: StrapiMediaValue | null | undefined;\n  /** Optional: Strapi-Basis-URL für relative URLs (z.B. \"https://cms.paulpaul.studio\") */\n  baseUrl?: string;\n  /** Override alt-Text (default: alternativeText vom Strapi-Objekt, dann name) */\n  alt?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  loading?: \"lazy\" | \"eager\";\n  /** Fallback wenn value null/undefined ist */\n  fallback?: React.ReactNode;\n}\n\nfunction resolveUrl(value: StrapiMediaValue, baseUrl?: string): string {\n  const u = value.url;\n  if (u.startsWith(\"http\")) return u;\n  if (baseUrl) return `${baseUrl.replace(/\\/$/, \"\")}${u.startsWith(\"/\") ? \"\" : \"/\"}${u}`;\n  return u;\n}\n\n/**\n * Wrapper für ein einzelnes Strapi-Media-Feld. Rendert `<img>` mit der\n * abgeleiteten URL. Im Edit-Mode klickbar — der Editor öffnet einen\n * MediaPicker.\n *\n * Wenn `value` null ist, wird der `fallback` gerendert (oder ein leeres\n * `<span>`).\n */\nexport function StrapiImage({ path, value, baseUrl, alt, className, style, loading = \"lazy\", fallback }: StrapiImageProps) {\n  if (!value) {\n    return (\n      <StrapiField path={path} type=\"media\" value={null}>\n        <span className={className} style={style}>{fallback ?? \"\"}</span>\n      </StrapiField>\n    );\n  }\n  return (\n    <StrapiField path={path} type=\"media\" value={value}>\n      <img\n        src={resolveUrl(value, baseUrl)}\n        alt={alt ?? value.alternativeText ?? value.name ?? \"\"}\n        width={value.width}\n        height={value.height}\n        loading={loading}\n        className={className}\n        style={style}\n      />\n    </StrapiField>\n  );\n}\n","\"use client\";\n\nimport { Fragment, type ReactNode } from \"react\";\n\ninterface StrapiListProps<T> {\n  /** Pfad zum Array-Feld, z.B. \"features\" */\n  path: string;\n  value: T[] | null | undefined;\n  /**\n   * Render-Funktion pro Item. Bekommt einen `itemPath` als zweites Argument,\n   * der für nested-StrapiText/Image-Calls als path-Prefix dient.\n   */\n  renderItem: (item: T, itemPath: string, index: number) => ReactNode;\n  /** Optional: Fallback wenn value null/leer ist */\n  fallback?: ReactNode;\n}\n\n/**\n * Iteriert über ein Strapi-Repeatable-Field oder eine Relation-Liste. Generiert\n * pro Item den vollständigen Edit-Pfad (z.B. \"features.0\", \"features.1\"), den\n * der Caller in nested StrapiText/Image weitergibt.\n *\n * Beispiel:\n *   <StrapiList path=\"features\" value={page.features} renderItem={(f, fp) => (\n *     <div>\n *       <StrapiText path={`${fp}.title`} value={f.title} as=\"h3\" />\n *       <StrapiImage path={`${fp}.icon`} value={f.icon} />\n *     </div>\n *   )} />\n */\nexport function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>) {\n  if (!Array.isArray(value) || value.length === 0) {\n    return <>{fallback ?? null}</>;\n  }\n  return (\n    <>\n      {value.map((item, i) => (\n        <Fragment key={i}>{renderItem(item, `${path}.${i}`, i)}</Fragment>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext, useState, useEffect, useMemo, useCallback, Children, isValidElement, cloneElement, createElement, Fragment as Fragment$1 } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paulpaulstudio/strapi-render",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React SDK für Strapi-Frontends mit onpage-edit-Support über cms.paulpaul.studio.",
   "keywords": ["strapi", "cms", "onpage", "edit", "react"],
   "author": "Paul & Paul Studio <info@paulpaul.studio>",
@@ -31,10 +31,10 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node -e \"const fs=require('fs');for(const f of ['dist/index.js','dist/index.cjs'])fs.writeFileSync(f,'\\\"use client\\\";\\n'+fs.readFileSync(f,'utf8'));\"",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
-    "prepare": "tsup",
+    "prepare": "npm run build",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {