Dependency Injection and Providers

A classic example of tabs and a container:

import { inject, provide, onInit, defineProps } from '@li3/web';

// common token between components
export const Controller = Symbol();

// children can inject from parent components in the DOM tree
function tab() {
  const props = defineProps('tabid');
  const controller = inject(Controller);

  onInit(function () {
    controller.register(props.tabid);
  });
}

// parents can provide values via Symbols or unique references
function tabContainer() {
  const tabs = [];

  provide(Controller, {
    register(id) {
      tabs.push(id);
    },
  });
}

// NOTE: the order of registration is important: the parent
// must be registered first!
createComponent('x-tabcontainer', { setup: tabContainer });
createComponent('x-tab', { setup: tab });
Copy

<x-tabcontainer>
  <x-tab tabid="one"></x-tab>
  <x-tab tabid="two"></x-tab>
</x-tabcontainer>
Copy