Component Context

Plugin Developer Agent Kit — documentation written for AI agents, readable by humans.

Context provides a way to share state between components without passing props through every level.

Context Markers

Create a typed marker to identify a context:

import { createContextMarker } from '@jay-framework/component';

interface CartContext {
  itemCount: () => number;
  addItem: (productId: string) => void;
}

const CART_CONTEXT = createContextMarker<CartContext>('CartContext');

provideContext

Provide a non-reactive context value to child components:

import { provideContext } from '@jay-framework/component';

provideContext(CART_CONTEXT, {
  itemCount: () => items().length,
  addItem: (id) => addToCartAction({ productId: id }),
});

provideReactiveContext

Provide a reactive context — the factory function has access to hooks:

import { provideReactiveContext, createSignal } from '@jay-framework/component';

const cartCtx = provideReactiveContext(CART_CONTEXT, () => {
  const [items, setItems] = createSignal<CartItem[]>([]);
  return {
    itemCount: () => items().length,
    addItem: (id) => setItems((prev) => [...prev, { productId: id }]),
  };
});

The returned value is the context instance, usable in the same component.

registerReactiveGlobalContext

Register a context globally during client initialization (in makeJayInit):

import { registerReactiveGlobalContext, createSignal } from '@jay-framework/component';

export const init = makeJayInit().withClient(() => {
  registerReactiveGlobalContext(CART_CONTEXT, () => {
    const [items, setItems] = createSignal<CartItem[]>([]);
    return {
      itemCount: () => items().length,
      addItem: (id) => setItems((prev) => [...prev, { productId: id }]),
    };
  });
});

Global contexts are available to all components without explicit providing.

Consuming Context

Components consume contexts via .withContexts() on the builder:

makeJayStackComponent<MyContract>()
  .withContexts(CART_CONTEXT)
  .withInteractive(function MyComp(props, refs, cartCtx) {
    refs.addToCart.onClick(() => {
      cartCtx.addItem(props.productId);
    });

    return {
      render: () => ({
        cartCount: cartCtx.itemCount(),
      }),
    };
  });

Listing in plugin.yaml

If your plugin provides contexts for other plugins to consume, list them in plugin.yaml:

contexts:
  - name: cart
    marker: CART_CONTEXT
    description: Client-side cart state (item count, add/remove items, totals)
    doc: ./docs/cart-context.md # optional — markdown documentation

This makes the context discoverable in plugins-index.yaml. If doc is provided, the file must exist and be exported from the package.

---

About this document

This page is part of the Jay Stack Agent Kit — documentation generated from the framework source and written primarily for AI agents. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation. Learn more about the Agent Kit →