Port library to Lit

packages/components/library/index.ts

@@ -0,0 +1 @@
+export * from "./src/user-library";

packages/components/library/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@echo/components-library",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@echo/components-shared-controllers": "^1.0.0",
+    "@echo/core-types": "^1.0.0",
+    "@echo/services-bootstrap-runtime": "^1.0.0",
+    "effect": "^3.6.5",
+    "lit": "^3.2.0",
+    "@lit/task": "^1.0.1"
+  }
+}

packages/components/library/src/user-library.ts

@@ -0,0 +1,44 @@
+import { StreamEffectController } from "@echo/components-shared-controllers";
+import { EffectFnController } from "@echo/components-shared-controllers/src/effect-fn.controller";
+import { Library, Player } from "@echo/core-types";
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { map } from "lit/directives/map.js";
+
+/**
+ * Component that displays the user's library of albums and allows them to
+ * play them.
+ */
+@customElement("user-library")
+export class UserLibrary extends LitElement {
+  private _library = new StreamEffectController(this, Library.observeAlbums);
+  private _playAlbum = new EffectFnController(this, Player.playAlbum);
+
+  render() {
+    return this._library.render({
+      initial: () => html`<h1>Loading...</h1>`,
+      item: (albums) => html`
+        <div>
+          <br />
+          ${map(
+            albums,
+            (album) => html`
+              <div key="{album.id}">
+                <h3>${album.name}</h3>
+                <p>${album.artist.name}</p>
+                <button @click=${() => this._playAlbum.run(album)}>Play</button>
+                <hr />
+              </div>
+            `,
+          )}
+        </div>
+      `,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    userLibrary: UserLibrary;
+  }
+}

packages/components/library/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/components/library/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "include": [
+    "src",
+    "index.ts"
+  ],
+  "extends": "../../../tsconfig.json"
+}

packages/components/shared-controllers/src/stream-effect.controller.ts

@@ -41,6 +41,12 @@ const isSubscriptionRef = <A, E>(
 ): streamOrRef is SubscriptionRef.SubscriptionRef<A> =>
   "changes" in streamOrRef;
 
+type OutputEffect<A, E> = Effect.Effect<
+  Stream.Stream<A, E> | SubscriptionRef.SubscriptionRef<A>,
+  never,
+  EchoRuntimeServices
+>;
+
 /**
  * Controller that takes an effect that produces a stream or a subscription ref
  * and exposes a render method that renders maps the different states of the
@@ -52,17 +58,20 @@ export class StreamEffectController<A, E> implements ReactiveController {
 
   constructor(
     host: ReactiveControllerHost,
-    private readonly _streamEffect: Effect.Effect<
-      Stream.Stream<A, E> | SubscriptionRef.SubscriptionRef<A>,
-      never,
-      EchoRuntimeServices
-    >,
+    private readonly _streamEffect:
+      | OutputEffect<A, E>
+      | (() => OutputEffect<A, E>),
   ) {
     (this.host = host).addController(this);
   }
 
   hostConnected(): void {
-    const consumer$ = this._streamEffect.pipe(
+    const streamEffect =
+      typeof this._streamEffect === "function"
+        ? this._streamEffect()
+        : this._streamEffect;
+
+    const consumer$ = streamEffect.pipe(
       Effect.flatMap((streamOrRef) => {
         const stream = isSubscriptionRef(streamOrRef)
           ? streamOrRef.changes

packages/services/bootstrap-runtime/package.json

@@ -13,6 +13,8 @@
     "@echo/services-add-provider-workflow": "^1.0.0",
     "@echo/services-app-init": "^1.0.0",
     "@echo/services-bootstrap": "^1.0.0",
+    "@echo/services-library": "^1.0.0",
+    "@echo/services-player": "^1.0.0",
     "effect": "^3.6.5"
   }
 }

packages/services/bootstrap-runtime/src/runtime.ts

@@ -1,6 +1,8 @@
 import { AddProviderWorkflowLive } from "@echo/services-add-provider-workflow";
 import { AppInitLive } from "@echo/services-app-init";
 import { MainLive } from "@echo/services-bootstrap";
+import { LibraryLive } from "@echo/services-library";
+import { PlayerLive } from "@echo/services-player";
 import { Layer, ManagedRuntime } from "effect";
 import { globalValue } from "effect/GlobalValue";
 
@@ -11,9 +13,12 @@ import { globalValue } from "effect/GlobalValue";
 export const getOrCreateRuntime = () =>
   globalValue("echo-runtime", () =>
     ManagedRuntime.make(
-      Layer.mergeAll(AppInitLive, AddProviderWorkflowLive).pipe(
-        Layer.provideMerge(MainLive),
-      ),
+      Layer.mergeAll(
+        AppInitLive,
+        AddProviderWorkflowLive,
+        LibraryLive,
+        PlayerLive,
+      ).pipe(Layer.provideMerge(MainLive)),
     ),
   );
 

packages/web/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@echo/components-add-provider": "^1.0.0",
+    "@echo/components-library": "^1.0.0",
     "@echo/components-shared-controllers": "^1.0.0",
     "@echo/core-types": "^1.0.0",
     "@echo/services-bootstrap-runtime": "^1.0.0",

packages/web/src/main.ts

@@ -4,6 +4,7 @@ import { initializeWorkers } from "@echo/services-bootstrap-workers";
 import { AppInit } from "@echo/core-types";
 import { EffectController } from "@echo/components-shared-controllers";
 import "@echo/components-add-provider";
+import "@echo/components-library";
 
 initializeWorkers();
 
@@ -20,8 +21,7 @@ export class MyElement extends LitElement {
       complete: () => html`
         <div>
           <add-provider></add-provider>
-          <!-- <user-library /> -->
-          <!-- <provider-status /> -->
+          <user-library></user-library>
         </div>
       `,
       error: () =>

tools/plop-templates/components/generator.cjs

@@ -17,6 +17,16 @@ module.exports = {
       path: "packages/components/{{dashCase name}}/index.ts",
       templateFile: `${__dirname}/template/index.ts.hbs`,
     },
+    {
+      type: "add",
+      path: "packages/components/{{dashCase name}}/src/{{dashCase name}}.ts",
+      templateFile: `${__dirname}/template/component.ts.hbs`,
+    },
+    {
+      type: "add",
+      path: "packages/components/{{dashCase name}}/src/vite-env.d.ts",
+      templateFile: `${__dirname}/template/vite-env.d.ts.hbs`,
+    },
     {
       type: "add",
       path: "packages/components/{{dashCase name}}/package.json",

tools/plop-templates/components/template/component.ts.hbs

@@ -0,0 +1,18 @@
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+/**
+ * Description of what the {{properCase name}} component does.
+ */
+@customElement("{{dashCase name}}")
+export class {{pascalCase name}} extends LitElement {
+  render() {
+    return html`<h1>{{pascalCase name}}</h1>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "{{dashCase name}}": {{pascalCase name}};
+  }
+}

tools/plop-templates/components/template/index.ts.hbs

@@ -1,18 +1 @@
-import { LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
-
-/**
- * Description of what the {{properCase name}} component does.
- */
-@customElement("{{dashCase name}}")
-export class {{pascalCase name}} extends LitElement {
-  render() {
-    return html`<h1>{{pascalCase name}}</h1>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "{{dashCase name}}": {{pascalCase name}};
-  }
-}
+export * from "./src/{{dashCase name}}";

tools/plop-templates/components/template/package.json.hbs

@@ -7,6 +7,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@echo/components-shared-controllers": "^1.0.0",
     "@echo/core-types": "^1.0.0",
     "@echo/services-bootstrap-runtime": "^1.0.0",
     "effect": "^3.6.5",

tools/plop-templates/components/template/vite-env.d.ts.hbs

@@ -0,0 +1 @@
+/// <reference types="vite/client" />