chore: simplify function name; improve example IDs; use backwards-com…

…patible subscription cleanup
analogjs · Sep 13, 2023 · 4323d72 · 4323d72
1 parent fb8302b
commit 4323d72
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 19 deletions.
diff --git a/apps/astro-app-e2e-playwright/tests/app.spec.ts b/apps/astro-app-e2e-playwright/tests/app.spec.ts
@@ -50,13 +50,14 @@ describe('AstroApp', () => {
     test('Then client side rendered CardComponent should emit an event on click', async () => {
       const console = waitForConsole();
       const componentLocator = page.locator(
-        'astro-island[component-export="CardComponent"]'
-        // '[data-analog-id=card-1]'
+        '[data-analog-id=card-component-1]'
       );
       const elementLocator = componentLocator.locator('li');
       await elementLocator.click();
 
-      await expect(await console).toBe('event received from card-1: clicked');
+      await expect(await console).toBe(
+        'event received from card-component-1: clicked'
+      );
     });
   });
 });

diff --git a/apps/astro-app/src/pages/index.astro b/apps/astro-app/src/pages/index.astro
@@ -35,7 +35,7 @@ const serverSideTitle = 'Angular (server side binding)';
 			/>
 			<CardComponent
         client:visible
-        data-analog-id="card-1"
+        data-analog-id="card-component-1"
         href="https://angular.io/"
         title="Angular (Client Side)"
         body="Build with Angular. ❤️"
@@ -112,10 +112,10 @@ const serverSideTitle = 'Angular (server side binding)';
 </style>
 
 <script>
-  import { addAnalogOutputListener } from '@analogjs/astro-angular/utils';
+  import { addOutputListener } from '@analogjs/astro-angular/utils';
   console.log('Hello Astro');
 
-  addAnalogOutputListener('card-1', 'output', (event) => {
-    console.log('event received from card-1:', event.detail);
+  addOutputListener('card-component-1', 'output', (event) => {
+    console.log('event received from card-component-1:', event.detail);
   });
 </script>
diff --git a/packages/astro-angular/README.md b/packages/astro-angular/README.md
@@ -201,29 +201,29 @@ Find more information about [Client Directives](https://docs.astro.build/en/refe
 ### Listening to Component Outputs
 
 Outputs can be emitted by the Angular component are forwarded as HTML events to the Astro island.
-To enable this feature, add a client directive and a `[data-analog-id]` property to the Angular component:
+To enable this feature, add a client directive and a unique `[data-analog-id]` property to each Angular component:
 
 ```tsx
 ---
 import { HelloComponent } from '../components/hello.component';
 ---
 
-<HelloComponent client:visible data-analog-id="hello-1" />
+<HelloComponent client:visible data-analog-id="hello-component-1" />
 ```
 
-Then, listen to the event in the Astro component using the `addAnalogOutputListener` function:
+Then, listen to the event in the Astro component using the `addOutputListener` function:
 
 ```tsx
 ---
 import { HelloComponent } from '../components/hello.component';
 ---
 
-<HelloComponent client:visible data-analog-id="hello-1" />
+<HelloComponent client:visible data-analog-id="hello-component-1" />
 
 <script>
-  import { addAnalogOutputListener } from '@analogjs/astro-angular/utils';
+  import { addOutputListener } from '@analogjs/astro-angular/utils';
 
-  addAnalogOutputListener('hello-1', 'outputName', (event) => {
+  addOutputListener('hello-component-1', 'outputName', (event) => {
     console.log(event.detail);
   });
 </script>

diff --git a/packages/astro-angular/src/client.ts b/packages/astro-angular/src/client.ts
@@ -1,15 +1,13 @@
 import 'zone.js/dist/zone.js';
 import {
-  DestroyRef,
   EnvironmentProviders,
   Provider,
   reflectComponentType,
   ɵComponentType as ComponentType,
 } from '@angular/core';
 import { ApplicationRef, NgZone, createComponent } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createApplication } from '@angular/platform-browser';
-import { Observable } from 'rxjs';
+import { Observable, Subject, takeUntil } from 'rxjs';
 
 export default (element: HTMLElement) => {
   return (
@@ -44,7 +42,7 @@ export default (element: HTMLElement) => {
         }
 
         if (mirror?.outputs.length && props?.['data-analog-id']) {
-          const destroyRef = appRef.injector.get(DestroyRef);
+          const destroySubject = new Subject<void>();
           element.setAttribute(
             'data-analog-id',
             props['data-analog-id'] as string
@@ -57,7 +55,7 @@ export default (element: HTMLElement) => {
               Observable<unknown>
             >;
             component[outputName]
-              .pipe(takeUntilDestroyed(destroyRef))
+              .pipe(takeUntil(destroySubject))
               .subscribe((detail) => {
                 const event = new CustomEvent(outputName, {
                   bubbles: true,
@@ -68,6 +66,11 @@ export default (element: HTMLElement) => {
                 element.dispatchEvent(event);
               });
           });
+
+          appRef.onDestroy(() => {
+            destroySubject.next();
+            destroySubject.complete();
+          });
         }
 
         appRef.attachView(componentRef.hostView);

diff --git a/packages/astro-angular/src/utils.ts b/packages/astro-angular/src/utils.ts
@@ -1,4 +1,4 @@
-export function addAnalogOutputListener(
+export function addOutputListener(
   analogId: string,
   outputName: string,
   callback: (...args: any[]) => unknown,