|
| 1 | +# @lit-labs/context |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +This module defines an implementation of controllers and decorators for using the [Context Protocol](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md) as defined by the Web Components Community Group. |
| 6 | + |
| 7 | +This protocol facilitates the communication between components lower in the DOM hierarchy with their ancestors, allowing data to be passed down the tree without having to be passed via 'prop drilling' where each element in the path passes on the data. |
| 8 | + |
| 9 | +For further explanation of the Context Protocol please see the [community protocol documentation](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md). |
| 10 | + |
| 11 | +## Usage |
| 12 | + |
| 13 | +There are several different usages of the Context API. |
| 14 | + |
| 15 | +### Creating a Context |
| 16 | + |
| 17 | +First lets define a context key we can use elsewhere in our examples: |
| 18 | + |
| 19 | +#### **`logger.ts`**: |
| 20 | + |
| 21 | +```ts |
| 22 | +import {createContext} from '@lit-labs/context'; |
| 23 | + |
| 24 | +export interface Logger { |
| 25 | + log: (msg: string) => void; |
| 26 | +} |
| 27 | + |
| 28 | +export const loggerContext = createContext<Logger>('logger'); |
| 29 | +``` |
| 30 | + |
| 31 | +### Consuming a Context |
| 32 | + |
| 33 | +Now we can define a consumer for this context - some component in our app needs the logger. |
| 34 | + |
| 35 | +Here we're using the `@contextRequest` property decorator to make a `ContextConsumer` controller |
| 36 | +and update its value when the context changes: |
| 37 | + |
| 38 | +#### **`my-element.ts`**: |
| 39 | + |
| 40 | +```ts |
| 41 | +import {contextRequest} from '@lit-labs/context'; |
| 42 | +import {LitElement, property} from 'lit'; |
| 43 | +import {Logger, loggerContext} from './logger.js'; |
| 44 | + |
| 45 | +export class MyElement extends LitElement { |
| 46 | + @contextRequest({context: loggerContext, subscribe: true}) |
| 47 | + @property({attribute: false}) |
| 48 | + public logger?: Logger; |
| 49 | + |
| 50 | + private doThing() { |
| 51 | + this.logger?.log('a thing was done'); |
| 52 | + } |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +Another way we can use a context in a component is via the `ContextConsumer` controller directly: |
| 57 | + |
| 58 | +#### **`my-element.ts`**: |
| 59 | + |
| 60 | +```ts |
| 61 | +import {ContextConsumer, property} from '@lit-labs/context'; |
| 62 | +import {LitElement} from 'lit'; |
| 63 | +import {Logger, loggerContext} from './logger.js'; |
| 64 | + |
| 65 | +export class MyElement extends LitElement { |
| 66 | + public logger = new ContextConsumer( |
| 67 | + this, |
| 68 | + loggerContext, |
| 69 | + undefined, // don't need to pass a callback |
| 70 | + true // pass true to get updates if the logger changes |
| 71 | + ); |
| 72 | + |
| 73 | + private doThing() { |
| 74 | + this.logger.value?.log('a thing was done'); |
| 75 | + } |
| 76 | +} |
| 77 | +``` |
| 78 | + |
| 79 | +### Providing a Context |
| 80 | + |
| 81 | +Finally we want to be able to provide this context from somewhere higher in the DOM. |
| 82 | + |
| 83 | +Here we're using a `@contextProvider` property decorator to make a `ContextProvider` |
| 84 | +controller and update its value when the property value changes. |
| 85 | + |
| 86 | +#### **`my-app.ts`**: |
| 87 | + |
| 88 | +```ts |
| 89 | +import {LitElement} from 'lit'; |
| 90 | +import {contextProvider} from '@lit-labs/context'; |
| 91 | +import {loggerContext, Logger} from './my-logger.js'; |
| 92 | + |
| 93 | +export class MyApp extends LitElement { |
| 94 | + @contextProvider({context: loggerContext}) |
| 95 | + @property({attribute: false}) |
| 96 | + public logger: Logger = { |
| 97 | + log: (msg) => { |
| 98 | + console.log(`[my-app] ${msg}`); |
| 99 | + }, |
| 100 | + }); |
| 101 | + |
| 102 | + protected render(): TemplateResult { |
| 103 | + return html`<my-thing></my-thing>`; |
| 104 | + } |
| 105 | +} |
| 106 | +``` |
| 107 | + |
| 108 | +We can also use the `ContextProvider` controller directly: |
| 109 | + |
| 110 | +#### **`my-app.ts`**: |
| 111 | + |
| 112 | +```ts |
| 113 | +import {LitElement} from 'lit'; |
| 114 | +import {ContextProvider} from '@lit-labs/context'; |
| 115 | +import {loggerContext, Logger} from './my-logger.js'; |
| 116 | + |
| 117 | +export class MyApp extends LitElement { |
| 118 | + // create a provider controller and a default logger |
| 119 | + private provider = new ContextProvider(this, loggerContext, { |
| 120 | + log: (msg) => { |
| 121 | + console.log(`[my-app] ${msg}`); |
| 122 | + }, |
| 123 | + }); |
| 124 | + |
| 125 | + protected render(): TemplateResult { |
| 126 | + return html`<my-thing></my-thing>`; |
| 127 | + } |
| 128 | + |
| 129 | + public setLogger(newLogger: Logger) { |
| 130 | + // update the provider with a new logger value |
| 131 | + this.provider.setValue(newLogger); |
| 132 | + } |
| 133 | +} |
| 134 | +``` |
| 135 | + |
| 136 | +## Known Issues |
| 137 | + |
| 138 | +### Late upgraded Context Providers |
| 139 | + |
| 140 | +In some cases you might have a context providing element that is upgraded late. LightDOM content below this provider may end up requesting a context that is currently not provided by any provider. |
| 141 | + |
| 142 | +To solve this case we provide a `ContextRoot` class which can intercept and track unsatisfied `context-request` events and then redispatch these requests when providers are updated. |
| 143 | + |
| 144 | +Example usage: |
| 145 | + |
| 146 | +#### **`index.ts`**: |
| 147 | + |
| 148 | +```ts |
| 149 | +import {ContextRoot} from '@lit-labs/context'; |
| 150 | +const root = new ContextRoot(); |
| 151 | +root.attach(document.body); |
| 152 | +``` |
| 153 | + |
| 154 | +The `ContextRoot` can be attached to any element and it will gather a list of any context requests which are received at the attached element. The `ContextProvider` controllers will emit `context-provider` events when they are connected to the DOM. These events act as triggers for the `ContextRoot` to redispatch these `context-request` events from their sources. |
| 155 | + |
| 156 | +This solution has a small overhead, in that if a provider is not within the DOM hierarchy of the unsatisfied requests we are unnecessarily refiring these requests, but this approach is safest and most correct in that it is very hard to manage stable DOM hierarchies with the semantics of slotting and reparenting that is common in web components implementations. |
| 157 | + |
| 158 | +## Contributing |
| 159 | + |
| 160 | +Please see [CONTRIBUTING.md](../../../CONTRIBUTING.md). |
0 commit comments