lit · augustjk · Sep 1, 2023 · Aug 31, 2023 · Aug 31, 2023 · Sep 1, 2023
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
@@ -196,7 +196,7 @@
   "dependencies": {
     "@lit-labs/motion": "^1.0.1",
     "@lit-labs/react": "^1.0.8",
-    "@lit-labs/task": "^1.0.0",
+    "@lit-labs/task": "^3.0.2",
     "@lit/localize": "^0.10.0",
     "@material/mwc-button": "^0.27.0",
     "@material/mwc-checkbox": "^0.27.0",

diff --git a/packages/lit-dev-content/samples/examples/async-task/index.html b/packages/lit-dev-content/samples/examples/async-task/index.html
@@ -1,7 +1,9 @@
-<!doctype html>
-<head>
-  <script type="module" src="./index.js"></script>
-</head>
+<style>
+  body { font-family: sans-serif; }
+</style>
+
+<script type="module" src="./npm-info.js"></script>
+
 <body>
-  <demo-element></demo-element>
+  <npm-info></npm-info>
 </body>
diff --git a/packages/lit-dev-content/samples/examples/async-task/index.js b/packages/lit-dev-content/samples/examples/async-task/index.js
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm-info.js b/packages/lit-dev-content/samples/examples/async-task/npm-info.js
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm-info.ts b/packages/lit-dev-content/samples/examples/async-task/npm-info.ts
@@ -0,0 +1,77 @@
+import {LitElement, css, html} from 'lit';
+import {customElement, state} from 'lit/decorators.js';
+import {Task} from '@lit-labs/task';
+import {fetchPackageInfo} from './npm.js';
+
+@customElement('npm-info')
+export class NpmInfo extends LitElement {
+  @state()
+  private _package = 'lit';
+
+  private _fetchNpmInfoTask = new Task(this, {
+    task: async ([pkgName], {signal}) => {
+      if (pkgName === undefined || pkgName === '') {
+        throw new Error('Empty package name');
+      }
+      return await fetchPackageInfo(pkgName, signal);
+    },
+    args: () => [this._package],
+  });
+
+  render() {
+    return html`
+      <label>
+        Enter a package name:
+        <input .value=${this._package} @change=${this._onChange} />
+      </label>
+      <header>
+        <h1>${this._package}</h1>
+        <img
+          id="logo"
+          src="https://raw.githubusercontent.com/npm/logos/master/npm%20logo/npm-logo-red.svg"
+          alt="npm logo"
+        />
+      </header>
+      <div>
+        ${this._fetchNpmInfoTask.render({
+          pending: () => 'Loading...',
+          complete: (pkg) => html`
+            <h3>${pkg.description}</h3>
+            <h4>dist-tags:</h4>
+            <ul>
+              ${Array.from(Object.entries(pkg['dist-tags'])).map(
+                ([tag, version]) => html`<li><pre>${tag}: ${version}</pre></li>`
+              )}
+            </ul>
+          `,
+          error: (e) => `Error: ${(e as Error).message}`,
+        })}
+      </div>
+    `;
+  }
+
+  private _onChange(e: Event) {
+    this._package = (e.target as HTMLInputElement).value;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      min-width: 300px;
+      border-radius: 5px;
+      border: solid 1px #aaa;
+      padding: 20px;
+    }
+    header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+    #logo {
+      height: 38px;
+      width: auto;
+    }
+  `;
+}
+
diff --git a/packages/lit-dev-content/samples/examples/async-task/npm.ts b/packages/lit-dev-content/samples/examples/async-task/npm.ts
@@ -0,0 +1,20 @@
+export interface NpmPackage {
+  description: string;
+  ['dist-tags']: {[tag: string]: string};
+}
+
+export const fetchPackageInfo = async (
+  pkgName: string,
+  signal: AbortSignal
+): Promise<NpmPackage> => {
+  // Artifical delay for demo purposes
+  await new Promise((r) => setTimeout(r, 1000));
+  const response = await fetch(`https://registry.npmjs.org/${pkgName}`, {
+    signal,
+  });
+  if (response.status === 200) {
+    return response.json();
+  } else {
+    throw response.text();
+  }
+};
diff --git a/packages/lit-dev-content/samples/examples/async-task/project.json b/packages/lit-dev-content/samples/examples/async-task/project.json
@@ -1,13 +1,11 @@
 {
   "extends": "/samples/base.json",
-  "hide": true,
   "title": "Async Task / NPM Info element",
   "description": "Shows an example of an async Task controller. This one fetches npm package info and renders based on the state of the fetch.",
-  "section": "Specific Solutions",
+  "section": "Managing Data",
   "files": {
-    "index.js": {},
-    "npm-info.js": {},
-    "task.js": {},
+    "npm-info.ts": {},
+    "npm.ts": {},
     "index.html": {}
   }
 }
diff --git a/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts b/packages/lit-dev-content/samples/v2-docs/controllers/names/names-controller.ts
@@ -6,7 +6,7 @@ export class NamesController {
   host: ReactiveControllerHost;
   value?: string[];
   readonly kinds = Names.kinds;
-  private task!: Task;
+  private task!: Task<[Names.Kind], Names.Result>;
   private _kind: Names.Kind = '';
 
   constructor(host: ReactiveControllerHost) {

diff --git a/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts b/packages/lit-dev-content/samples/v3-docs/controllers/names/names-controller.ts
@@ -6,7 +6,7 @@ export class NamesController {
   host: ReactiveControllerHost;
   value?: string[];
   readonly kinds = Names.kinds;
-  private task!: Task;
+  private task!: Task<[Names.Kind], Names.Result>;
   private _kind: Names.Kind = '';
 
   constructor(host: ReactiveControllerHost) {

diff --git a/packages/lit-dev-content/site/_data/playground_examples.js b/packages/lit-dev-content/site/_data/playground_examples.js
@@ -12,6 +12,7 @@ const topSectionOrder = [
   'Reactive properties',
   'Template concepts',
   'Directives',
+  'Managing Data',
   '@lit-labs/react',
   '@lit-labs/motion'
 ];