Class LifecycleContractConsumer

examples/lit/basic/src/lifecycle-contract.ts:72–127

}

class LifecycleContractConsumer extends LitElement {
  private readonly instanceId = ++contractConsumerInstanceCount

  private readonly query = createQueryController<ContractProbeData, Error>(
    this,
    {
      queryKey: contractQueryKey,
      queryFn: () => {
        throw new Error(
          'Lifecycle contract fixture unexpectedly fetched from queryFn.',
        )
      },
      retry: false,
      staleTime: Number.POSITIVE_INFINITY,
    },
  )

  protected override createRenderRoot(): HTMLElement | DocumentFragment {
    return this
  }

  private renderQueryState() {
    try {
      const query = this.query()

      return html`
        <div data-testid="contract-query-status">query: ${query.status}</div>
        <div data-testid="contract-provider-value">
          provider: ${query.data?.provider ?? 'none'}
        </div>
        <div data-testid="contract-payload">
          payload: ${query.data?.payload ?? 'none'}
        </div>
        <div data-testid="contract-error">
          error: ${query.error ? String(query.error) : 'none'}
        </div>
      `
    } catch (error) {
      const message = error instanceof Error ? error.message : String(error)

      return html`
        <div data-testid="contract-query-status">query: missing-client</div>
        <div data-testid="contract-provider-value">provider: none</div>
        <div data-testid="contract-payload">payload: none</div>
        <div data-testid="contract-error">error: ${message}</div>
      `
    }
  }

  render() {
    return html`
      <div data-testid="contract-instance-id">instance: ${this.instanceId}</div>
      ${this.renderQueryState()}
    `
  }
}

if (!customElements.get('lifecycle-contract-consumer')) {