Way-Provider ↯

Context Provider for webcomponents

⛏ No more prop drilling in webcomponents

This webcomponents will pass context as props in child webcomponents.
attachWayContext has one parameter, a referance to component you want context in.
Provider will append context as attributes.
For now it only support shallow object as context, so no object in context.

Docs at way-provider-docs.vercel.app

📝 Props:

• context: object

• all: boolean

⚡️ When using all prop you don't need attachWayContext, all the webcomponents in the tree will be initalized with those props

Step 1:

Wrap your components with provider

import 'way-provider';

<way-provider context="{'name': 'consumer'}">
  ...children components
</way-provider>

Step 2:

Initalize context in your webcomponent child

import { attachWayContext } from 'way-provider';

...
connectedCallback(){
  attachWayContext(this)
}

For Svelte Webcomponent

  thisCmp = get_current_component()

  onMount(() => attachWayContext(thisCmp))

Step 3:

Use the attribute

Vanilla

  this.getAttribute('name');

Lit

  @property()
  name: string

Svelte

  export let name

---

This library is not using default customElement decorator so don't worry if it's imported multiple times, the way-provider will not throw an error and will be defined just once.

---

Built using Lit and Vite