Spice up example a bit

Author: augustjk

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

@@ -5,7 +5,7 @@
   }
 </style>
 <p>
-  Example taken from:
+  Example inspired by:
   <a
     href="https://react.dev/learn/passing-data-deeply-with-context"
     target="_blank"

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

@@ -1,3 +1,5 @@
 import {createContext} from '@lit/context';
 
-export const levelContext = createContext<number>(Symbol('level'));
+export type Level = {level: number; prefix: string};
+
+export const levelContext = createContext<Level>(Symbol('prefix'));

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

@@ -7,27 +7,59 @@ import './my-heading.js';
 export class MyApp extends LitElement {
   render() {
     // <my-heading> adjusts what heading tag to use based on the level context
-    // provided to it.
+    // provided to it and prefixes with a provided numbering.
 
     // <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-heading>Heading level 1</my-heading>
+        <my-section>
+          <my-heading>Heading level 2</my-heading>
+        </my-section>
+        <my-section>
+          <my-heading>Heading level 2</my-heading>
+          <my-section>
+            <my-heading>Heading level 3</my-heading>
+          </my-section>
+          <my-section>
+            <my-heading>Heading level 3</my-heading>
+            <my-section>
+              <my-heading>Heading level 4</my-heading>
+            </my-section>
+          </my-section>
+        </my-section>
+        <my-section>
+          <my-heading>Heading level 2</my-heading>
+          <my-section>
+            <my-heading>Heading level 3</my-heading>
+            <my-section>
+              <my-heading>Heading level 4</my-heading>
+            </my-section>
+            <my-section>
+              <my-heading>Heading level 4</my-heading>
+            </my-section>
+          </my-section>
+        </my-section>
+      </my-section>
+      <my-section>
+        <my-heading>Heading level 1</my-heading>
+        <my-section>
+          <my-heading>Heading level 2</my-heading>
+          <my-section>
+            <my-heading>Heading level 3</my-heading>
+            <my-section>
+              <my-heading>Heading level 4</my-heading>
+            </my-section>
+          </my-section>
+        </my-section>
         <my-section>
-          <my-heading>This is h2</my-heading>
-          <my-heading>This is h2</my-heading>
-          <my-heading>This is h2</my-heading>
+          <my-heading>Heading level 2</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-heading>Heading level 3</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-heading>Heading level 4</my-heading>
             </my-section>
           </my-section>
         </my-section>

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

@@ -7,7 +7,7 @@ export class MyHeading extends LitElement {
   _levelContext = new ContextConsumer(this, {context: levelContext});
 
   get _tag() {
-    switch (this._levelContext.value) {
+    switch (this._levelContext.value.level) {
       case 1:
         return literal`h1`;
       case 2:
@@ -29,5 +29,4 @@ export class MyHeading extends LitElement {
     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

@@ -2,15 +2,15 @@ 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';
+import {levelContext, type Level} from './level-context.js';
 
 @customElement('my-heading')
 export class MyHeading extends LitElement {
   @consume({context: levelContext})
-  private _level: number | undefined;
+  private _level?: Level;
 
   private get _tag() {
-    switch (this._level) {
+    switch (this._level?.level) {
       case 1:
         return literal`h1`;
       case 2:
@@ -29,6 +29,6 @@ export class MyHeading extends LitElement {
   }
 
   render() {
-    return html`<${this._tag}><slot></slot></${this._tag}>`;
+    return html`<${this._tag}>${this._level?.prefix} <slot></slot></${this._tag}>`;
   }
 }

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

@@ -5,30 +5,45 @@ 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.
+  // Serve as a context provider with an initial level 1 and numbering prefix
+  // based on its numbering among siblings.
   private _provider = new ContextProvider(this, {
     context: levelContext,
-    initialValue: 1,
+    initialValue: {
+      level: 1,
+      prefix: String(this._siblingNumber) + '.',
+    },
   });
 
   // Consumes level context from a parent provider. If a parent provider is
-  // found, update own provider value to be 1 greater than provided value.
+  // found, update own provider level to be 1 greater than provided value and
+  // append its sibling number.
   private _consumer = new ContextConsumer(this, {
     context: levelContext,
-    callback: (value) => {
-      this._provider.setValue(value + 1);
+    callback: ({level, prefix}) => {
+      this._provider.setValue({
+        level: level + 1,
+        prefix: prefix + String(this._siblingNumber) + '.',
+      });
     },
   });
 
+  private get _siblingNumber() {
+    return (
+      Array.from(this.parentNode!.children)
+        .filter((el) => el instanceof MySection)
+        .indexOf(this) + 1
+    );
+  }
+
   render() {
     return html`<section><slot></slot></section>`;
   }
 
   static styles = css`
     :host {
       display: block;
-      border: 1px solid black;
-      padding: 1rem;
+      margin-left: 1rem;
     }
   `;
 }