From 7ef416b743d5fb4f179928b0ecd85a9ebd1e203d Mon Sep 17 00:00:00 2001 From: Andrew Jakubowicz Date: Fri, 22 Sep 2023 10:14:31 -0700 Subject: [PATCH] [docs] Add basic context example (#1187) Co-authored-by: Peter Burns --- package-lock.json | 20 +++++++ packages/lit-dev-content/package.json | 1 + .../examples/context-basics/elements.ts | 55 +++++++++++++++++++ .../examples/context-basics/index.html | 34 ++++++++++++ .../examples/context-basics/project.json | 15 +++++ .../samples/examples/context-basics/styles.ts | 18 ++++++ 6 files changed, 143 insertions(+) create mode 100644 packages/lit-dev-content/samples/examples/context-basics/elements.ts create mode 100644 packages/lit-dev-content/samples/examples/context-basics/index.html create mode 100644 packages/lit-dev-content/samples/examples/context-basics/project.json create mode 100644 packages/lit-dev-content/samples/examples/context-basics/styles.ts diff --git a/package-lock.json b/package-lock.json index d3af9f27e..a8897feec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -611,6 +611,15 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "node_modules/@lit-labs/context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@lit-labs/context/-/context-0.4.1.tgz", + "integrity": "sha512-o+uKepgEPoYAVaPvSASoDiUWKdcf7neyhFcm9dvtiLgptKoINZD1vW7GbbH/2hPtxLxgcmVfZ9NDCXNDQeHTHQ==", + "dependencies": { + "@lit/reactive-element": "^1.5.0", + "lit": "^2.7.0" + } + }, "node_modules/@lit-labs/eleventy-plugin-lit": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@lit-labs/eleventy-plugin-lit/-/eleventy-plugin-lit-1.0.1.tgz", @@ -9141,6 +9150,7 @@ "version": "0.0.0", "license": "BSD-3-Clause", "dependencies": { + "@lit-labs/context": "^0.4.1", "@lit-labs/motion": "^1.0.1", "@lit-labs/react": "^1.0.8", "@lit-labs/task": "^3.0.2", @@ -9817,6 +9827,15 @@ "@jridgewell/sourcemap-codec": "^1.4.10" } }, + "@lit-labs/context": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@lit-labs/context/-/context-0.4.1.tgz", + "integrity": "sha512-o+uKepgEPoYAVaPvSASoDiUWKdcf7neyhFcm9dvtiLgptKoINZD1vW7GbbH/2hPtxLxgcmVfZ9NDCXNDQeHTHQ==", + "requires": { + "@lit/reactive-element": "^1.5.0", + "lit": "^2.7.0" + } + }, "@lit-labs/eleventy-plugin-lit": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@lit-labs/eleventy-plugin-lit/-/eleventy-plugin-lit-1.0.1.tgz", @@ -14360,6 +14379,7 @@ "@11ty/eleventy": "^2.0.1", "@11ty/eleventy-navigation": "^0.3.2", "@11ty/eleventy-plugin-rss": "^1.1.2", + "@lit-labs/context": "^0.4.1", "@lit-labs/eleventy-plugin-lit": "^1.0.1", "@lit-labs/motion": "^1.0.1", "@lit-labs/react": "^1.0.8", diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json index 0e3f7c177..9844da21e 100644 --- a/packages/lit-dev-content/package.json +++ b/packages/lit-dev-content/package.json @@ -194,6 +194,7 @@ "slugify": "^1.3.6" }, "dependencies": { + "@lit-labs/context": "^0.4.1", "@lit-labs/motion": "^1.0.1", "@lit-labs/react": "^1.0.8", "@lit-labs/task": "^3.0.2", diff --git a/packages/lit-dev-content/samples/examples/context-basics/elements.ts b/packages/lit-dev-content/samples/examples/context-basics/elements.ts new file mode 100644 index 000000000..b11b66777 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/elements.ts @@ -0,0 +1,55 @@ +import {html, LitElement} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; +import {provide, consume, createContext} from '@lit-labs/context'; + +import {providerStyles} from './styles.js'; + +const contextKey = Symbol('contextKey'); +// The values that will be provided and consumed in this demo will +// be strings. +type ContextValue = string; +// Context object, which acts like a key for the context. +// The context object acts as a key. A consumer will only receive +// values from a provider if their contexts match. A Symbol ensures +// that this context will be unique. +const context = createContext(Symbol()); + +@customElement('provider-el') +export class ProviderEl extends LitElement { + static styles = providerStyles; + + /** + * `data` will be provided to any consumer that is in the DOM tree below it. + */ + @provide({context}) + @property() + data = 'Initial'; + + render() { + return html` +

Provider's data: ${this.data}

+ + `; + } +} + +@customElement('consumer-el') +export class ConsumerEl extends LitElement { + /** + * `providedData` will be populated by the first ancestor element which + * provides a value for `context`. + */ + @consume({context}) + providedData = ''; + + render() { + return html`

Consumer data: ${this.providedData}

`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'provider-el': ProviderEl; + 'consumer-el': ConsumerEl; + } +} diff --git a/packages/lit-dev-content/samples/examples/context-basics/index.html b/packages/lit-dev-content/samples/examples/context-basics/index.html new file mode 100644 index 000000000..f67442dfe --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/index.html @@ -0,0 +1,34 @@ + + + + +

Basic Context Example

+

+ The <consumer-el> receives its data from + <provider-el> without property drilling. +

+
+ + + + +
+ + + + +
+ +

+ Checkout our + Context documentation! +

diff --git a/packages/lit-dev-content/samples/examples/context-basics/project.json b/packages/lit-dev-content/samples/examples/context-basics/project.json new file mode 100644 index 000000000..539f87982 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/project.json @@ -0,0 +1,15 @@ +{ + "extends": "/samples/base.json", + "title": "Context Basics", + "description": "Share data from a provider element with Context.", + "section": "Managing Data", + "files": { + "elements.ts": {}, + "index.html": {}, + "styles.ts": {} + }, + "package.json": { + "content": "{\n \"dependencies\": {\n \"lit\": \"^2\",\n \"@lit-labs/context\": \"^0.4\"\n}\n}", + "hidden": true + } +} diff --git a/packages/lit-dev-content/samples/examples/context-basics/styles.ts b/packages/lit-dev-content/samples/examples/context-basics/styles.ts new file mode 100644 index 000000000..98447a387 --- /dev/null +++ b/packages/lit-dev-content/samples/examples/context-basics/styles.ts @@ -0,0 +1,18 @@ +import {css} from 'lit'; +export const providerStyles = css` + slot { + display: block; + border: dashed 4px #dadada; + padding: 0px 10px; + } + + :host { + display: block; + border: solid 4px #adadad; + padding: 2px; + } + + h3 { + margin-top: 0; + } +`;