@fragmentsx/runtime-react 0.1.0

package/README.md

@@ -0,0 +1,51 @@
+# @fragmentsx/runtime-react
+
+React-рантайм для встраивания опубликованных фрагментов Fragments в
+приложение потребителя. Строится поверх `@fragmentsx/fragments-client` —
+берёт готовый клиент и раскладывает его в провайдеры, хуки и компоненты
+React.
+
+## Что это решает
+
+Скомпилированный сервером фрагмент — это ESM-артефакт, который нужно
+загрузить, смонтировать в дерево React, подключить его стили и дать доступу
+к метрикам и переменным области. `runtime-react` закрывает весь этот путь:
+
+- `FragmentsProvider` + `FragmentsClientProvider` — контекст клиента на
+  дерево приложения;
+- `Area` / `FragmentRenderer` — резолвинг и рендер области/фрагмента;
+- `useFragmentComponent`, `useFragmentStylesheet`, `FragmentStylesheet` —
+  подгрузка компонента и его CSS;
+- `useFragmentMetrics`, `useArea`, `useProjectProperty` — доступ к метрикам,
+  данным области и project-переменным площадки внутри фрагмента.
+
+## Установка
+
+```bash
+pnpm add @fragmentsx/runtime-react @fragmentsx/fragments-client react react-dom
+```
+
+## Использование
+
+```tsx
+import { createBrowserClient, FragmentsProvider, Area } from '@fragmentsx/runtime-react';
+
+const client = createBrowserClient({
+  apiUrl: 'https://api.fragments.example.com',
+  projectId: 'my-project',
+});
+
+function App() {
+  return (
+    <FragmentsProvider client={client}>
+      <Area code="home" />
+    </FragmentsProvider>
+  );
+}
+```
+
+## Пара с fragments-client
+
+`runtime-react` зависит от `@fragmentsx/fragments-client` как от транспортного
+ядра (`workspace:*` внутри монорепозитория, `^0.1.0` из npm) — устанавливать
+и обновлять пакеты стоит вместе.

package/dist/index.d.ts

@@ -0,0 +1,290 @@
+import { ComponentType } from 'react';
+import { Context } from 'react';
+import { createFragmentsClient } from '../../fragments-client/src/index.ts';
+import { CreateFragmentsClientOptions } from '../../fragments-client/src/index.ts';
+import { FC } from 'react';
+import { FragmentsApiVersionError } from '../../fragments-client/src/index.ts';
+import { FragmentsAreaError } from '../../fragments-client/src/index.ts';
+import { FragmentsLoadError } from '../../fragments-client/src/index.ts';
+import { GraphState } from '@graph-state/core';
+import { JSX } from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Area — публичный компонент для рендеринга compiled fragment в consumer app.
+ *
+ * Req #4: Area + useArea оба public exports из @fragmentsx/runtime-react.
+ * Req #9: требует FragmentsProvider в tree (FragmentsClientContext + ModulesMapContext).
+ */
+export declare const Area: FC<AreaProps>;
+
+/**
+ * Props для Area компонента (D-09, сокращён Phase 73 B-13):
+ *   - areaCode — строковый код области (Area.code в backend schema)
+ *   - options.pause — пропустить рендер (conditional skip per legacy contract)
+ *   - options.timeout — network timeout для $area.resolve fetch
+ *   - options.ssr — отключить auto-resolve в SSR environment (default `true`);
+ *     в browser auto-resolve запускается всегда. Параллель к render-react
+ *     Area options.ssr.
+ */
+export declare interface AreaProps {
+    areaCode: string;
+    options?: {
+        timeout?: number;
+        pause?: boolean;
+        ssr?: boolean;
+    };
+}
+
+/**
+ * Browser-specific options — identical к CreateFragmentsClientOptions, но без `inject`.
+ * `inject` pre-populated через `injectStylesheet` из runtime-react автоматически.
+ */
+declare type BrowserClientOptions = Omit<CreateFragmentsClientOptions, "inject">;
+
+/**
+ * Создаёт FragmentsClient с pre-populated inject = injectStylesheet (BLOCKER-4-wiring bridge).
+ *
+ * @param opts - все поля CreateFragmentsClientOptions кроме inject
+ * @returns FragmentsClient готовый к использованию в browser environments
+ */
+export declare function createBrowserClient(opts: BrowserClientOptions): ReturnType<typeof createFragmentsClient>;
+
+/**
+ * Дефолтное значение, когда Provider не установлен (потребитель вне
+ * `FragmentRenderer`, например изолированный юнит-тест компонента).
+ */
+export declare const defaultProjectProperties: Record<string, unknown>;
+
+export declare interface FragmentMetrics {
+    reachGoal: (info: ReachGoalInfo) => void;
+}
+
+/**
+ * Публичный компонент — тело композиции за собственными Suspense + границей
+ * ошибок. `Area` тело не использует напрямую (у неё Suspense/граница уже
+ * стоят вокруг `useArea`); preview и прочие потребители без `areaCode`
+ * используют этот компонент целиком.
+ */
+export declare const FragmentRenderer: FC<FragmentRendererProps>;
+
+/**
+ * Контракт тела композиции (D-03). `globalCssUrl` — то, что сегодня отдаёт
+ * `useArea`; у preview (без области) это будет статика DRAFT-манифеста.
+ * `props` — единственный канал значений (Phase 73, B-02/B-06): готовые
+ * значения props корневого артефакта, разрешённые сервером либо переданные
+ * потребителем напрямую (preview).
+ */
+export declare interface FragmentRendererProps {
+    fragmentId: number;
+    props?: Record<string, unknown>;
+    globalCssUrl?: string | null;
+    /** Словарь project-переменных площадки (манифест области или блок данных preview); ключ — имя переменной, значение — голое (D-72-02). */
+    projectProperties?: Record<string, unknown>;
+    onError?: (error: Error) => void;
+}
+
+export { FragmentsApiVersionError }
+
+export { FragmentsAreaError }
+
+/**
+ * Псевдоним для GraphState — возвращаемый тип `createFragmentsClient(...)` из
+ * `@fragmentsx/client-core`. Compiled Fragment.tsx не зависит от client-core
+ * напрямую: он импортирует тип отсюда и читает client через
+ * `FragmentsClientContext` (D-07).
+ */
+export declare type FragmentsClient = GraphState;
+
+/**
+ * Single source of truth для FragmentsClient в compiled output.
+ *
+ * Значение `null` означает «client ещё не установлен» — defensive в
+ * `useFragmentMetrics` чтобы reachGoal был no-op (preview / SSG-первая загрузка
+ * до hydration).
+ */
+export declare const FragmentsClientContext: Context<FragmentsClient | null>;
+
+/**
+ * React-компонент-обёртка для установки FragmentsClient в Context. Эмиссия
+ * compiled-output её не вызывает — это app-level wiring entry point.
+ */
+export declare function FragmentsClientProvider(props: {
+    value: FragmentsClient;
+    children: ReactNode;
+}): JSX.Element;
+
+export { FragmentsLoadError }
+
+/**
+ * Unified Provider для compiled fragments.
+ *
+ * Одновременно устанавливает:
+ *   - FragmentsClientContext: client — для useArea cache lookup + $metrics.reachGoal
+ *   - ModulesMapContext: {read} cache-reader — для useFragmentComponent delegation
+ *
+ * useMemo критично — Context value identity stability (без него cache invalidation
+ * на каждый render).
+ */
+export declare function FragmentsProvider({ client, children }: FragmentsProviderProps): ReactElement;
+
+declare interface FragmentsProviderProps {
+    client: FragmentsClient;
+    children: ReactNode;
+}
+
+export declare function FragmentStylesheet({ href, fragmentKey }: FragmentStylesheetProps): JSX.Element | null;
+
+declare interface FragmentStylesheetProps {
+    href: string;
+    fragmentKey: string;
+}
+
+/**
+ * Инжектирует `<link rel="stylesheet">` в `document.head` с ref-count dedup.
+ *
+ * @param href - CDN URL стилевого файла
+ * @param key - уникальный ключ для dedup (например `chunk:201` или `fragment:42:abc`)
+ * @returns cleanup callback — при refCount = 0 удаляет `<link>` из head
+ */
+export declare const injectStylesheet: (href: string, key: string) => (() => void);
+
+export declare const InstanceIdContext: Context<string | null>;
+
+/**
+ * React Context для инъекции cache-reader'а в дерево компонентов.
+ * Null default = «provider не установлен» (no-provider signal).
+ */
+export declare const ModulesMapContext: Context<ModulesMapContextValue | null>;
+
+/**
+ * Значение ModulesMapContext. Единственная fn — cache-reader (D-05).
+ *
+ * @param id - числовой идентификатор фрагмента
+ * @returns ComponentType (cache hit) | throws Promise (pending) | throws FragmentsLoadError (missing)
+ */
+export declare interface ModulesMapContextValue {
+    read: (id: number) => ComponentType<any>;
+}
+
+/**
+ * React-компонент-обёртка для установки ModulesMapContext в дерево.
+ * Value identity stability — ответственность caller'а (FragmentsProvider обернёт
+ * `{read: (id) => client.$fragments.read(id)}` в useMemo, Plan 08).
+ *
+ * @param value - cache-reader объект (D-05)
+ * @param children - дочерние компоненты
+ */
+export declare function ModulesMapProvider({ value, children, }: ModulesMapProviderProps): ReactElement;
+
+/**
+ * Props для ModulesMapProvider.
+ * Caller (FragmentsProvider) передаёт useMemo'нутый объект value.
+ * Для unit-тестов: raw {read: mockFn} без useMemo (Req #9 standalone escape hatch).
+ */
+declare interface ModulesMapProviderProps {
+    value: ModulesMapContextValue;
+    children: ReactNode;
+}
+
+export declare const ProjectPropertiesContext: Context<Record<string, unknown> | null>;
+
+/**
+ * Payload для `reachGoal`. Phase 3 НЕ автоинъектит scope-поля
+ * (variantId / areaId / campaignId) — caller передаёт явно, типизация
+ * сообщает о доступных полях. Совпадает по shape с
+ * `client-core.metricsPlugin GoalInfo` (см. metrics/index.ts).
+ */
+export declare interface ReachGoalInfo {
+    goalId: number;
+    variantId?: number;
+    areaId?: number;
+    campaignId?: number;
+}
+
+export declare function useArea(areaCode: string, options?: UseAreaOptions): UseAreaResult;
+
+/**
+ * Опции хука. По дизайну API параллелен render-react useArea:
+ *   - `timeout` — fetch timeout (передаётся в `$area.resolve`).
+ *   - `ssr` — стартовать ли auto-resolve на сервере (default `true`, чтобы
+ *     Next.js getServerSideProps мог hydration'ить с прогретым кэшем).
+ *     В browser environment auto-resolve всегда включён.
+ */
+declare interface UseAreaOptions {
+    timeout?: number;
+    ssr?: boolean;
+}
+
+/**
+ * Result shape возвращаемый useArea — зеркалирует AreaResolveResult из client-core.
+ */
+declare interface UseAreaResult {
+    rootFragmentId: number;
+    /**
+     * Phase 73, B-02/B-06: значения props корневого артефакта, разрешённые сервером
+     * (`resolveVariantProps`) — привязки `$ref` сюда не доезжают, только готовые значения.
+     * `$area` уже нормализует отсутствие поля у backend'а в `{}`, поэтому поле
+     * обязательное — потребителю не нужна повторная optional-проверка.
+     */
+    props: Record<string, unknown>;
+    /**
+     * Phase 72 D-72-01/D-72-02: словарь project-переменных площадки, шейкнутый по
+     * факту использования — вход для `useProjectProperty` из `@fragmentsx/runtime-react`.
+     * `$area` уже нормализует отсутствие поля у backend'а в `{}` (план 72-05,
+     * редукция), поэтому поле обязательное — повторная optional-проверка
+     * потребителю не нужна.
+     */
+    projectProperties: Record<string, unknown>;
+    /**
+     * URL к глобальному baseline reset CSS ([data-key^="Text"], [data-key^="Fragment"]).
+     * `null` — backend не отдал global reset; baseline применяться не будет.
+     */
+    globalCssUrl: string | null;
+}
+
+/**
+ * useCssChunk — no-op stub для compiled fragments.
+ *
+ * @deprecated TODO(runtime-react): удалить вместе с compiler emission.
+ *
+ * Контекст: fragment-compiler (Phase 4 Plan 04-03) эмитит
+ * `import { useCssChunk } from "@fragmentsx/runtime-react"` + lifted calls
+ * `useCssChunk(<chunkId>);` в Fragment init body — отражая runtime-контракт
+ * interpreter'а (`packages/render-react/src/nodes/CssChunk/hooks/useCssChunk.ts`).
+ *
+ * В compiled production-pipeline CSS chunks инжектятся раньше — на уровне
+ * `$area.resolve → $cssChunks.populate → injectStylesheet` (см.
+ * `packages/client-core/src/compiled/$area/index.ts:186-187` и
+ * `packages/client-core/src/compiled/$cssChunks/index.ts:74-86`). К моменту mount
+ * fragment'а `<link rel="stylesheet">` уже в DOM (с ref-count dedup в injectStylesheet
+ * registry). Per-fragment hook не делает дополнительной работы.
+ *
+ * Будущая работа (удаление stub'а):
+ *   1. Compiler: убрать lifted `useCssChunk` emission из composeComponent.ts
+ *      (cssChunks discovery остаётся для $cssChunks.populate manifest gen на backend).
+ *   2. Runtime: удалить этот файл и его export из index.ts.
+ *   3. Альтернатива (если потребуется per-fragment ref-count cleanup) — заменить
+ *      stub на useEffect с ref-count в $cssChunks для proper unmount cleanup.
+ *
+ * Открыто как deferred item в `.planning/workstreams/fragment-compiler` —
+ * "runtime-react: убрать useCssChunk stub после compiler emission cleanup".
+ */
+export declare function useCssChunk(_chunkId: number): void;
+
+export declare function useFragmentComponent(fragmentId: number): ComponentType<any>;
+
+/**
+ * Возвращает обёртку над client.$metrics.reachGoal.
+ *
+ * - Без `<FragmentsClientProvider>` — reachGoal no-op (не бросает).
+ * - С provider — делегирует на `client.$metrics.reachGoal(info)`.
+ */
+export declare function useFragmentMetrics(): FragmentMetrics;
+
+export declare function useFragmentStylesheet(href: string, key: string): void;
+
+export declare function useProjectProperty(name: string): unknown;
+
+export { }

package/dist/index.es.js

@@ -0,0 +1,202 @@
+import { jsx as o, jsxs as M, Fragment as j } from "react/jsx-runtime";
+import { createContext as f, useContext as a, useMemo as g, useLayoutEffect as N, useEffect as S, version as I, Component as R, Suspense as C } from "react";
+import { createFragmentsClient as k } from "@fragmentsx/fragments-client";
+import { FragmentsApiVersionError as ne, FragmentsAreaError as oe, FragmentsLoadError as se } from "@fragmentsx/fragments-client";
+const c = f(
+  null
+);
+c.displayName = "FragmentsClientContext";
+function _(r) {
+  return /* @__PURE__ */ o(c.Provider, { value: r.value, children: r.children });
+}
+function b() {
+  return a(c);
+}
+const v = f(null);
+v.displayName = "InstanceIdContext";
+const h = f(
+  null
+);
+h.displayName = "ModulesMapContext";
+function B({
+  value: r,
+  children: e
+}) {
+  return /* @__PURE__ */ o(h.Provider, { value: r, children: e });
+}
+function H() {
+  const r = a(c);
+  return g(
+    () => ({
+      reachGoal: (e) => {
+        var n, t;
+        (t = (n = r == null ? void 0 : r.$metrics) == null ? void 0 : n.reachGoal) == null || t.call(n, e);
+      }
+    }),
+    [r]
+  );
+}
+function L(r) {
+  const e = a(h);
+  if (!e)
+    throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");
+  return e.read(r);
+}
+const U = typeof window < "u";
+function $(r, e) {
+  const n = a(c);
+  if (!n)
+    throw new Error("[useArea] No FragmentsClientProvider in tree");
+  const t = n.$area;
+  if (!(t != null && t.read))
+    throw new Error("[useArea] $area plugin not mounted");
+  if ((U || ((e == null ? void 0 : e.ssr) ?? !0)) && !t.has(r)) {
+    const i = (e == null ? void 0 : e.timeout) != null ? { timeout: e.timeout } : void 0;
+    t.resolve(r, i);
+  }
+  return t.read(r);
+}
+const E = typeof window < "u", D = () => {
+}, d = /* @__PURE__ */ new Map(), F = (r, e) => {
+  if (!E)
+    return D;
+  const n = d.get(e);
+  if (n)
+    return n.refCount += 1, () => {
+      n.refCount -= 1, n.refCount === 0 && (n.linkEl.remove(), d.delete(e));
+    };
+  const t = document.createElement("link");
+  t.rel = "stylesheet", t.href = r, t.setAttribute("data-fragment-key", e), document.head.appendChild(t);
+  const s = { refCount: 1, linkEl: t };
+  return d.set(e, s), () => {
+    s.refCount -= 1, s.refCount === 0 && (s.linkEl.remove(), d.delete(e));
+  };
+}, O = E ? N : S;
+function V(r, e) {
+  O(() => F(r, e), [r, e]);
+}
+const G = parseInt(I.split(".")[0], 10), K = G >= 19;
+function m({ href: r, fragmentKey: e }) {
+  return K ? /* @__PURE__ */ o(
+    "link",
+    {
+      rel: "stylesheet",
+      href: r,
+      precedence: "default",
+      "data-fragment-key": e
+    }
+  ) : (V(r, e), null);
+}
+function Q(r) {
+}
+const P = {}, p = f(null);
+p.displayName = "ProjectPropertiesContext";
+class y extends R {
+  constructor() {
+    super(...arguments), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  componentDidCatch(e, n) {
+    var t, s;
+    process.env.NODE_ENV !== "production" && console.error("[fragments] Area error:", e, n.componentStack), (s = (t = this.props).onError) == null || s.call(t, e);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+const x = ({
+  fragmentId: r,
+  props: e,
+  globalCssUrl: n = null,
+  projectProperties: t = P
+}) => {
+  const s = L(r), l = b().$fragments, u = l == null ? void 0 : l.getRef(r), w = l == null ? void 0 : l.getScopeClass(r), A = e ?? {};
+  return /* @__PURE__ */ M(j, { children: [
+    n != null && /* @__PURE__ */ o(
+      m,
+      {
+        href: n,
+        fragmentKey: "global"
+      }
+    ),
+    u && /* @__PURE__ */ o(
+      m,
+      {
+        href: u.cssUrl,
+        fragmentKey: `fragment:${r}:css`
+      }
+    ),
+    (u == null ? void 0 : u.fontsUrl) != null && /* @__PURE__ */ o(
+      m,
+      {
+        href: u.fontsUrl,
+        fragmentKey: `fragment:${r}:fonts`
+      }
+    ),
+    /* @__PURE__ */ o(p.Provider, { value: t, children: /* @__PURE__ */ o(v.Provider, { value: null, children: /* @__PURE__ */ o(
+      "div",
+      {
+        className: w,
+        style: { display: "contents" },
+        children: /* @__PURE__ */ o(s, { ...A })
+      }
+    ) }) })
+  ] });
+}, W = ({ onError: r, ...e }) => /* @__PURE__ */ o(C, { fallback: null, children: /* @__PURE__ */ o(y, { onError: r, children: /* @__PURE__ */ o(x, { ...e }) }) }), T = ({ areaCode: r, options: e }) => {
+  if ((e == null ? void 0 : e.pause) === !0)
+    return null;
+  const { rootFragmentId: n, props: t, projectProperties: s, globalCssUrl: i } = $(r, {
+    timeout: e == null ? void 0 : e.timeout,
+    ssr: e == null ? void 0 : e.ssr
+  });
+  return /* @__PURE__ */ o(
+    x,
+    {
+      fragmentId: n,
+      props: t,
+      globalCssUrl: i,
+      projectProperties: s
+    }
+  );
+}, X = ({ areaCode: r, options: e }) => /* @__PURE__ */ o(C, { fallback: null, children: /* @__PURE__ */ o(y, { children: /* @__PURE__ */ o(T, { areaCode: r, options: e }) }) });
+function Y({ client: r, children: e }) {
+  const n = g(
+    () => ({
+      read: (t) => r.$fragments.read(t)
+    }),
+    [r]
+  );
+  return /* @__PURE__ */ o(_, { value: r, children: /* @__PURE__ */ o(B, { value: n, children: e }) });
+}
+function Z(r) {
+  return (a(p) ?? P)[r];
+}
+function ee(r) {
+  return k({ ...r, inject: F });
+}
+export {
+  X as Area,
+  W as FragmentRenderer,
+  m as FragmentStylesheet,
+  ne as FragmentsApiVersionError,
+  oe as FragmentsAreaError,
+  c as FragmentsClientContext,
+  _ as FragmentsClientProvider,
+  se as FragmentsLoadError,
+  Y as FragmentsProvider,
+  v as InstanceIdContext,
+  h as ModulesMapContext,
+  B as ModulesMapProvider,
+  p as ProjectPropertiesContext,
+  ee as createBrowserClient,
+  P as defaultProjectProperties,
+  F as injectStylesheet,
+  $ as useArea,
+  Q as useCssChunk,
+  L as useFragmentComponent,
+  H as useFragmentMetrics,
+  V as useFragmentStylesheet,
+  Z as useProjectProperty
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@fragmentsx/fragments-client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@fragmentsx/fragments-client"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.FragmentsRuntimeReact={},t.jsxRuntime,t.React,t.fragmentsClient))})(this,function(t,n,u,d){"use strict";const a=u.createContext(null);a.displayName="FragmentsClientContext";function y(r){return n.jsx(a.Provider,{value:r.value,children:r.children})}function b(){return u.useContext(a)}const F=u.createContext(null);F.displayName="InstanceIdContext";const f=u.createContext(null);f.displayName="ModulesMapContext";function E({value:r,children:e}){return n.jsx(f.Provider,{value:r,children:e})}function x(){const r=u.useContext(a);return u.useMemo(()=>({reachGoal:e=>{var o,s;(s=(o=r==null?void 0:r.$metrics)==null?void 0:o.reachGoal)==null||s.call(o,e)}}),[r])}function p(r){const e=u.useContext(f);if(!e)throw new Error("[useFragmentComponent] No ModulesMapProvider in tree");return e.read(r)}const I=typeof window<"u";function M(r,e){const o=u.useContext(a);if(!o)throw new Error("[useArea] No FragmentsClientProvider in tree");const s=o.$area;if(!(s!=null&&s.read))throw new Error("[useArea] $area plugin not mounted");if((I||((e==null?void 0:e.ssr)??!0))&&!s.has(r)){const h=(e==null?void 0:e.timeout)!=null?{timeout:e.timeout}:void 0;s.resolve(r,h)}return s.read(r)}const j=typeof window<"u",N=()=>{},m=new Map,P=(r,e)=>{if(!j)return N;const o=m.get(e);if(o)return o.refCount+=1,()=>{o.refCount-=1,o.refCount===0&&(o.linkEl.remove(),m.delete(e))};const s=document.createElement("link");s.rel="stylesheet",s.href=r,s.setAttribute("data-fragment-key",e),document.head.appendChild(s);const l={refCount:1,linkEl:s};return m.set(e,l),()=>{l.refCount-=1,l.refCount===0&&(l.linkEl.remove(),m.delete(e))}},k=j?u.useLayoutEffect:u.useEffect;function A(r,e){k(()=>P(r,e),[r,e])}const O=parseInt(u.version.split(".")[0],10)>=19;function g({href:r,fragmentKey:e}){return O?n.jsx("link",{rel:"stylesheet",href:r,precedence:"default","data-fragment-key":e}):(A(r,e),null)}function _(r){}const v={},C=u.createContext(null);C.displayName="ProjectPropertiesContext";class w extends u.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,o){var s,l;process.env.NODE_ENV!=="production"&&console.error("[fragments] Area error:",e,o.componentStack),(l=(s=this.props).onError)==null||l.call(s,e)}render(){return this.state.hasError?null:this.props.children}}const S=({fragmentId:r,props:e,globalCssUrl:o=null,projectProperties:s=v})=>{const l=p(r),c=b().$fragments,i=c==null?void 0:c.getRef(r),q=c==null?void 0:c.getScopeClass(r),D=e??{};return n.jsxs(n.Fragment,{children:[o!=null&&n.jsx(g,{href:o,fragmentKey:"global"}),i&&n.jsx(g,{href:i.cssUrl,fragmentKey:`fragment:${r}:css`}),(i==null?void 0:i.fontsUrl)!=null&&n.jsx(g,{href:i.fontsUrl,fragmentKey:`fragment:${r}:fonts`}),n.jsx(C.Provider,{value:s,children:n.jsx(F.Provider,{value:null,children:n.jsx("div",{className:q,style:{display:"contents"},children:n.jsx(l,{...D})})})})]})},T=({onError:r,...e})=>n.jsx(u.Suspense,{fallback:null,children:n.jsx(w,{onError:r,children:n.jsx(S,{...e})})}),B=({areaCode:r,options:e})=>{if((e==null?void 0:e.pause)===!0)return null;const{rootFragmentId:o,props:s,projectProperties:l,globalCssUrl:h}=M(r,{timeout:e==null?void 0:e.timeout,ssr:e==null?void 0:e.ssr});return n.jsx(S,{fragmentId:o,props:s,globalCssUrl:h,projectProperties:l})},L=({areaCode:r,options:e})=>n.jsx(u.Suspense,{fallback:null,children:n.jsx(w,{children:n.jsx(B,{areaCode:r,options:e})})});function U({client:r,children:e}){const o=u.useMemo(()=>({read:s=>r.$fragments.read(s)}),[r]);return n.jsx(y,{value:r,children:n.jsx(E,{value:o,children:e})})}function V(r){return(u.useContext(C)??v)[r]}function $(r){return d.createFragmentsClient({...r,inject:P})}Object.defineProperty(t,"FragmentsApiVersionError",{enumerable:!0,get:()=>d.FragmentsApiVersionError}),Object.defineProperty(t,"FragmentsAreaError",{enumerable:!0,get:()=>d.FragmentsAreaError}),Object.defineProperty(t,"FragmentsLoadError",{enumerable:!0,get:()=>d.FragmentsLoadError}),t.Area=L,t.FragmentRenderer=T,t.FragmentStylesheet=g,t.FragmentsClientContext=a,t.FragmentsClientProvider=y,t.FragmentsProvider=U,t.InstanceIdContext=F,t.ModulesMapContext=f,t.ModulesMapProvider=E,t.ProjectPropertiesContext=C,t.createBrowserClient=$,t.defaultProjectProperties=v,t.injectStylesheet=P,t.useArea=M,t.useCssChunk=_,t.useFragmentComponent=p,t.useFragmentMetrics=x,t.useFragmentStylesheet=A,t.useProjectProperty=V,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@fragmentsx/runtime-react",
+  "private": false,
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FireworksX/fragments.git",
+    "directory": "packages/runtime-react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "source": "./src/index.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@graph-state/core": "^0.13.3",
+    "@fragmentsx/fragments-client": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^27.4.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.2.3",
+    "typescript": "^5.5.4",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.1.1"
+  },
+  "scripts": {
+    "clear": "rm -r -f ./dist",
+    "build": "vite build",
+    "dev": "vite build -w",
+    "test": "vitest run --config ./vitest.config.ts",
+    "test:watch": "vitest --config ./vitest.config.ts",
+    "lint": "eslint . --ext .ts,.tsx --fix"
+  }
+}