@pie-players/pie-context
v0.3.12
Published
Framework-agnostic Context Protocol helpers for PIE web components
Readme
@pie-players/pie-context
Framework-agnostic Context Protocol helpers for PIE web components.
This package implements the Web Components community context-request protocol
so orchestration/runtime dependencies can be shared without prop drilling.
Included APIs
createContext<T>(key)for typed context keysContextRequestEventandContextProviderEventContextProviderandprovideContext(...)ContextConsumer,consumeContext(...), andrequestContext(...)ContextRootfor late-provider replay of pending subscribing requests
Design notes
- Events are emitted with
bubbles: trueandcomposed: true. - Provider matching uses strict key identity (
===). ContextRequestEvent.subscribedefaults tofalse(one-shot request).- Providers call
stopPropagation()when they satisfy a matching request. - Providers re-dispatch existing subscriptions when a nested provider for the same context announces itself.
- Subscriptions are opt-in (
subscribe: true) and include unsubscribe callbacks. ContextRootonly tracks subscribing requests to avoid unnecessary retention.ContextRootdedupes pending replay by(requestor, callback)pair.
See LIT_PARITY_CHECKLIST.md for the parity checklist used to align semantics
with ../lit/packages/context core APIs.
Svelte usage pattern
Keep Svelte reactivity for internal state and use this package for ambient runtime dependencies between components:
import { onMount } from "svelte";
import { ContextConsumer, createContext } from "@pie-players/pie-context";
const toolkitContext = createContext<{ assessmentId: string }>(
Symbol("toolkit-runtime"),
);
let host: HTMLElement;
let assessmentId = "";
let consumer: ContextConsumer<typeof toolkitContext>;
onMount(() => {
consumer = new ContextConsumer(host, {
context: toolkitContext,
subscribe: true,
onValue: (value) => {
assessmentId = value.assessmentId;
},
});
consumer.connect();
return () => consumer.disconnect();
});