feat(lit): add Context example for Lit (#211)

README.md

@@ -180,12 +180,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox

content/4-component-composition/5-context/lit/app-x.js

@@ -0,0 +1,35 @@
+import { LitElement, html } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { ContextProvider } from "@lit/context";
+
+import { userContext } from "./user-context";
+
+import "./user-profile";
+
+@customElement("x-app")
+export class XApp extends LitElement {
+  @state()
+  user = {
+    id: 1,
+    username: "unicorn42",
+    email: "[email protected]",
+  };
+
+  provider = new ContextProvider(this, {
+    context: userContext,
+    initialValue: this.user,
+  });
+
+  updateUsername(newUsername) {
+    this.user = { ...this.user, username: newUsername };
+    this.provider.setValue(this.user);
+  }
+
+  render() {
+    return html` <h1>Welcome back, ${this.user.username}</h1>
+      <user-profile
+        .user="${this.user}"
+        .updateUsername=${this.updateUsername.bind(this)}
+      ></user-profile>`;
+  }
+}

content/4-component-composition/5-context/lit/user-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const userContext = createContext("user");

content/4-component-composition/5-context/lit/user-profile.js

@@ -0,0 +1,32 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+
+import { userContext } from "./user-context";
+
+@customElement("user-profile")
+export class UserProfile extends LitElement {
+  @consume({ context: userContext })
+  @property({ type: Object, attribute: false })
+  user;
+
+  @property({ type: Function, attribute: false })
+  updateUsername;
+
+  handleUpdateUsername() {
+    this.updateUsername("Jane");
+  }
+
+  render() {
+    return html`
+      <div>
+        <h2>My Profile</h2>
+        <p>Username: ${this.user.username}</p>
+        <p>Email: ${this.user.email}</p>
+        <button @click="${this.handleUpdateUsername}">
+          Update username to Jane
+        </button>
+      </div>
+    `;
+  }
+}

package.json

@@ -17,6 +17,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@lit/context": "^1.1.0",
     "@veljs/svelte": "^0.1.11",
     "classnames": "^2.5.1",
     "eslint-plugin-svelte": "^2.35.1",