199d9bbec9
Plan 3 of the web embedding SDK: @zseven-w/op-web-sdk-react and -vue — thin read-only framework adapters over the TS core. Each: <DesignView> (canvas + viewer lifecycle), provider/inject of OpViewer, and read-only useDocument/useViewport/useActivePage. React via useSyncExternalStore (cache-invalidate-on-event); Vue via an async shallowRef provider so children inject the viewer after load. Self-contained (no pen-* deps; framework peer); React 5/5 + Vue 4/4 tests; both tsc clean.
17 lines
733 B
TypeScript
17 lines
733 B
TypeScript
import { createElement, useContext, type ReactNode } from 'react';
|
|
import type { OpViewer } from '@zseven-w/op-web-sdk';
|
|
import { ViewerContext } from './context.js';
|
|
|
|
// Provider component that injects an OpViewer into React context.
|
|
export function DesignProvider(props: { viewer: OpViewer; children: ReactNode }) {
|
|
return createElement(ViewerContext.Provider, { value: props.viewer }, props.children);
|
|
}
|
|
|
|
// Returns the OpViewer from the nearest DesignProvider/DesignView ancestor.
|
|
// Throws if called outside a provider tree.
|
|
export function useViewer(): OpViewer {
|
|
const v = useContext(ViewerContext);
|
|
if (!v) throw new Error('op-web-sdk-react: useViewer must be used inside <DesignProvider>/<DesignView>');
|
|
return v;
|
|
}
|