Context API? about glimmer-next HOT 2 CLOSED

// src/utils/context.ts
import { registerDestructor } from './glimmer/destroyable';
import { Component, RENDER_TREE } from './shared';

const CONTEXTS = new WeakMap<Component<any>, Map<symbol, any>>();

export function getContext<T>(ctx: Component<any>, key: symbol): T | undefined {
  let current = ctx;
  while (current) {
    const context = CONTEXTS.get(current);
    if (context?.has(key)) {
      return context.get(key);
    }

    const parent = findParentComponent(current);
    current = parent;
  }

  return undefined;
}

export function setContext<T>(ctx: Component<any>, key: symbol, value: T): void {
  if (!CONTEXTS.has(ctx)) {
    CONTEXTS.set(ctx, new Map());
  }

  CONTEXTS.get(ctx)!.set(key, value);

  registerDestructor(ctx, () => {
    CONTEXTS.get(ctx)!.delete(key);
  });
}

function findParentComponent(component: Component<any>): Component<any> | null {
  for (const [parent, children] of RENDER_TREE) {
    if (children.has(component)) {
      return parent;
    }
  }

  return null;
}

// src/tests/integration/context-test.gts
import { module, test } from 'qunit';
import { render } from '@lifeart/gxt/test-utils';
import { Component, getContext, provideContext } from '@lifeart/gxt';

const ThemeContext = Symbol('ThemeContext');

class ThemeProvider extends Component {
  <template>
    {{yield}}
  </template>

  constructor(args: any) {
    super(args);
    provideContext(this, ThemeContext, this.args.theme);
  }
}

class ThemedButton extends Component {
  <template>
    <button class={{this.theme.buttonClass}}>
      {{yield}}
    </button>
  </template>

  get theme() {
    return getContext(this, ThemeContext) || {};
  }
}

module('Integration | Context API', function () {
  test('provides and consumes context', async function (assert) {
    await render(
      <template>
        <ThemeProvider @theme={{hash buttonClass="bg-blue-500"}}>
          <ThemedButton data-test-button>Click me</ThemedButton>
        </ThemeProvider>
      </template>
    );

    assert.dom('[data-test-button]').hasClass('bg-blue-500', 'Button receives theme from context');
  });

  test('context is not available outside the provider', async function (assert) {
    await render(
      <template>
        <ThemeProvider @theme={{hash buttonClass="bg-blue-500"}} />
        <ThemedButton data-test-button>Click me</ThemedButton>
      </template>
    );

    assert.dom('[data-test-button]').doesNotHaveClass('bg-blue-500', 'Button does not receive theme outside the provider');
  });

  test('context lookup traverses the component tree', async function (assert) {
    class Layout extends Component {
      <template>
        {{yield}}
      </template>
    }

    await render(
      <template>
        <ThemeProvider @theme={{hash buttonClass="bg-blue-500"}}>
          <Layout>
            <ThemedButton data-test-button>Click me</ThemedButton>
          </Layout>
        </ThemeProvider>
      </template>
    );

    assert.dom('[data-test-button]').hasClass('bg-blue-500', 'Button receives theme from context through nested components');
  });
});