Add new context playground example

Author: augustjk

packages/lit-dev-content/samples/examples/context-consume-provide/index.html

@@ -0,0 +1,15 @@
+<script type="module" src="./my-app.js"></script>
+<style>
+  :root {
+    font-family: sans-serif;
+  }
+</style>
+<p>
+  Example taken from:
+  <a
+    href="https://react.dev/learn/passing-data-deeply-with-context"
+    target="_blank"
+    >https://react.dev/learn/passing-data-deeply-with-context</a
+  >
+</p>
+<my-app></my-app>

packages/lit-dev-content/samples/examples/context-consume-provide/level-context.ts

@@ -0,0 +1,3 @@
+import {createContext} from '@lit/context';
+
+export const levelContext = createContext<number>(Symbol('level'));

packages/lit-dev-content/samples/examples/context-consume-provide/my-app.ts

@@ -0,0 +1,37 @@
+import {html, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import './my-section.js';
+import './my-heading.js';
+
+@customElement('my-app')
+export class MyApp extends LitElement {
+  render() {
+    // <my-heading> adjusts what heading tag to use based on the level context
+    // provided to it.
+
+    // <my-section> serves as both context provider and consumer. It provides a
+    // level value that is 1 greater than what's provided to it. This allows
+    // nested <my-section> to provide a different value based on its depth.
+
+    return html`
+      <my-section>
+        <my-heading>This is h1</my-heading>
+        <my-section>
+          <my-heading>This is h2</my-heading>
+          <my-heading>This is h2</my-heading>
+          <my-heading>This is h2</my-heading>
+          <my-section>
+            <my-heading>This is h3</my-heading>
+            <my-heading>This is h3</my-heading>
+            <my-heading>This is h3</my-heading>
+            <my-section>
+              <my-heading>This is h4</my-heading>
+              <my-heading>This is h4</my-heading>
+              <my-heading>This is h4</my-heading>
+            </my-section>
+          </my-section>
+        </my-section>
+      </my-section>
+    `;
+  }
+}

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.js

@@ -0,0 +1,33 @@
+import {LitElement} from 'lit';
+import {html, literal} from 'lit/static-html.js';
+import {ContextConsumer} from '@lit/context';
+import {levelContext} from './level-context.js';
+
+export class MyHeading extends LitElement {
+  levelContext = new ContextConsumer(this, {context: levelContext});
+
+  get tag() {
+    switch (this.levelContext.value) {
+      case 1:
+        return literal`h1`;
+      case 2:
+        return literal`h2`;
+      case 3:
+        return literal`h3`;
+      case 4:
+        return literal`h4`;
+      case 5:
+        return literal`h5`;
+      case 6:
+        return literal`h6`;
+      default:
+        return literal`p`;
+    }
+  }
+
+  render() {
+    return html`<${this.tag}><slot></slot></${this.tag}>`;
+  }
+}
+
+customElements.define('my-heading', MyHeading);

packages/lit-dev-content/samples/examples/context-consume-provide/my-heading.ts

@@ -0,0 +1,34 @@
+import {LitElement} from 'lit';
+import {html, literal} from 'lit/static-html.js';
+import {customElement} from 'lit/decorators.js';
+import {consume} from '@lit/context';
+import {levelContext} from './level-context.js';
+
+@customElement('my-heading')
+export class MyHeading extends LitElement {
+  @consume({context: levelContext})
+  level: number | undefined;
+
+  get tag() {
+    switch (this.level) {
+      case 1:
+        return literal`h1`;
+      case 2:
+        return literal`h2`;
+      case 3:
+        return literal`h3`;
+      case 4:
+        return literal`h4`;
+      case 5:
+        return literal`h5`;
+      case 6:
+        return literal`h6`;
+      default:
+        return literal`p`;
+    }
+  }
+
+  render() {
+    return html`<${this.tag}><slot></slot></${this.tag}>`;
+  }
+}

packages/lit-dev-content/samples/examples/context-consume-provide/my-section.ts

@@ -0,0 +1,34 @@
+import {html, css, LitElement} from 'lit';
+import {customElement} from 'lit/decorators.js';
+import {ContextProvider, ContextConsumer} from '@lit/context';
+import {levelContext} from './level-context.js';
+
+@customElement('my-section')
+export class MySection extends LitElement {
+  // Serve as a context provider with an initial value of 1.
+  provider = new ContextProvider(this, {
+    context: levelContext,
+    initialValue: 1,
+  });
+
+  // Consumes from any parent provider. If a parent provider is found,
+  // update own provided value to be 1 greater than provided value.
+  consumer = new ContextConsumer(this, {
+    context: levelContext,
+    callback: (value) => {
+      this.provider.setValue(value + 1);
+    },
+  });
+
+  render() {
+    return html`<section><slot></slot></section>`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      border: 1px solid black;
+      padding: 1rem;
+    }
+  `;
+}

packages/lit-dev-content/samples/examples/context-consume-provide/project.json

@@ -0,0 +1,13 @@
+{
+  "extends": "/samples/base.json",
+  "title": "Context Consume and Provide",
+  "description": "Showcase an element both consuming and providing the same context.",
+  "section": "Managing Data",
+  "files": {
+    "my-app.ts": {},
+    "my-section.ts": {},
+    "my-heading.ts": {},
+    "level-context.ts": {},
+    "index.html": {}
+  }
+}