Context

import { createContext } from '@vertz/ui';

interface SettingsValue {
  theme: string;
  locale: string;
}

const SettingsContext = createContext<SettingsValue>();

function createContext<T>(defaultValue?: T): Context<T>;

import { useContext } from '@vertz/ui';

function SettingsPanel() {
  const settings = useContext(SettingsContext);
  return <div>Theme: {settings.theme}</div>;
}

function useContext<T>(ctx: Context<T>): T | undefined;

function App() {
  const settings = { theme: 'dark', locale: 'en' };

  return (
    <SettingsContext.Provider value={settings}>
      <SettingsPanel />
    </SettingsContext.Provider>
  );
}

SettingsContext.Provider({ theme: 'dark', locale: 'en' }, () => {
  // Everything rendered here sees the provided value
  renderApp();
});

import { createContext, useContext } from '@vertz/ui';

interface AuthValue {
  user: { id: string; name: string };
  logout: () => void;
}

const AuthContext = createContext<AuthValue>();

export function useAuth(): AuthValue {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be called within AuthContext.Provider');
  return ctx;
}

function UserMenu() {
  const { user, logout } = useAuth();
  return (
    <div>
      <span>{user.name}</span>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

interface Context<T> {
  Provider(value: T, fn: () => void): void;
  Provider(props: ProviderJsxProps<T>): HTMLElement;
}

interface ProviderJsxProps<T> {
  value: T;
  children: (() => unknown) | unknown;
}