Install latest signals library, tweak playground sample

lit · Oct 7, 2024 · d42520b · d42520b
1 parent 309ac12
commit d42520b
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/lit-dev-content/package.json b/packages/lit-dev-content/package.json
@@ -187,7 +187,7 @@
     "@lit-labs/motion": "^1.0.1",
     "@lit-labs/react": "^1.0.8",
     "@lit-labs/task": "^3.0.2",
-    "@lit-labs/signals": "^0.1.0",
+    "@lit-labs/signals": "^0.1.1",
     "@lit/context": "^1.1.0",
     "@lit/localize": "^0.10.0",
     "@lit/react": "^1.0.0 || 1.0.0-pre.0",

diff --git a/packages/lit-dev-content/samples/examples/signals/index.html b/packages/lit-dev-content/samples/examples/signals/index.html
@@ -5,6 +5,6 @@
 <script type="module" src="./shared-counter.js"></script>
 
 <body>
-  <shared-counter></shared-counter>
-  <shared-counter></shared-counter>
+  <shared-counter><h2>Instance 1</h2></shared-counter>
+  <shared-counter><h2>Instance 2</h2></shared-counter>
 </body>
diff --git a/packages/lit-dev-content/samples/examples/signals/shared-counter.ts b/packages/lit-dev-content/samples/examples/signals/shared-counter.ts
@@ -12,12 +12,18 @@ export class SharedCounterComponent extends SignalWatcher(LitElement) {
       display: block;
       border: solid 1px lightgray;
       margin: 8px;
+      padding: 8px;
+    }
+
+    button {
+      background: lightgreen
     }
   `;
 
   render() {
     return html`
-      <p>The count is ${watch(count)}</p>
+      <slot></slot>
+      <p>count = ${watch(count)}</p>
       <button @click=${this.#onClick}>Increment</button>
     `;
   }