Vielzeug

Appearance

Context Provider and Consumer ​

Problem ​

Implement context provider and consumer in a production-friendly way with @vielzeug/craftit while keeping setup and cleanup explicit.

Runnable Example ​

The snippet below is copy-paste runnable in a TypeScript project with @vielzeug/craftit installed.

ts
import { component, createContext, define, html, inject, provide, signal } from '@vielzeug/craftit';

const THEME_CTX = createContext<ReturnType<typeof signal<'light' | 'dark'>>>('theme');

define(
  'theme-provider',
  component({
    setup() {
      const theme = signal<'light' | 'dark'>('light');

      provide(THEME_CTX, theme);

      return html`
        <button @click=${() => (theme.value = theme.value === 'light' ? 'dark' : 'light')}>Toggle theme</button>
        <slot></slot>
      `;
    },
  }),
);

define(
  'theme-label',
  component({
    setup() {
      const theme = inject(THEME_CTX, signal<'light' | 'dark'>('light'));

      return html`<p>Theme: ${theme}</p>`;
    },
  }),
);

Expected Output ​

  • The example runs without type errors in a standard TypeScript setup.
  • The main flow produces the behavior described in the recipe title.

Common Pitfalls ​

  • Forgetting cleanup/dispose calls can leak listeners or stale state.
  • Skipping explicit typing can hide integration issues until runtime.
  • Not handling error branches makes examples harder to adapt safely.