Add tests and a cleanup function

src/elements/play-pen/play-pen.ts

@@ -56,7 +56,7 @@ import {
   emptyAssetsState,
   PlayAssets
 } from '../play-assets/play-assets.js'
-import {debounce} from '../../utils/debounce.js'
+import {debounce, type DebounceCleanupFn} from '../../utils/debounce.js'
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -74,9 +74,7 @@ declare global {
 export class PlayPen extends LitElement {
   static override readonly styles: CSSResultGroup = css`
     ${cssReset}
-
     ${unsafeCSS(penVars)}
-
     :host {
       /* Light mode. */
       color: var(--color-foreground);
@@ -118,6 +116,7 @@ export class PlayPen extends LitElement {
     }
 
     /* Makes dropdowns appear over other content */
+
     play-pen-header,
     play-pen-footer {
       z-index: var(--z-menu);
@@ -181,6 +180,8 @@ export class PlayPen extends LitElement {
   private _src: string | undefined
   #template?: boolean
 
+  #cleanupDelayedSideEffects: DebounceCleanupFn = () => {}
+
   override connectedCallback(): void {
     super.connectedCallback()
 
@@ -218,6 +219,11 @@ export class PlayPen extends LitElement {
     this.#setName(pen.name, false)
   }
 
+  override disconnectedCallback() {
+    this.#cleanupDelayedSideEffects()
+    super.disconnectedCallback()
+  }
+
   protected override render(): TemplateResult {
     return html`
       <play-assets
@@ -440,10 +446,10 @@ export class PlayPen extends LitElement {
         appEntrypointFilename
       )
     }
-    this.#setSrcSideEffects(save)
+    this.#cleanupDelayedSideEffects = this.#setSrcSideEffects(save)
   }
 
-  /** Throttled changes after updating sources. */
+  /** Debounced changes after updating sources. */
   #setSrcSideEffects = debounce((save: boolean): void => {
     this.#version++
     this._bundle = link(

src/utils/debounce.test.ts

@@ -1,5 +1,5 @@
 import {debounce} from './debounce.js'
-import {expect, it, describe} from 'vitest'
+import {expect, it, describe, vi} from 'vitest'
 
 describe('debounce', () => {
   it('executes with a delay', async () => {
@@ -11,13 +11,18 @@ describe('debounce', () => {
     await new Promise(resolve => setTimeout(resolve, 100))
     expect(out.val).toBe(1)
   })
+
   it('executes the last call of a series', async () => {
     const out = {val: 0}
     const fn = debounce((val: number) => (out.val = val), 100)
     fn(1)
     await new Promise(resolve => setTimeout(resolve, 0))
+    expect(out.val).toBe(0)
+
     fn(2)
     await new Promise(resolve => setTimeout(resolve, 0))
+    expect(out.val).toBe(0)
+
     fn(3)
     await new Promise(resolve => setTimeout(resolve, 100))
     expect(out.val).toBe(3)
@@ -26,4 +31,15 @@ describe('debounce', () => {
     await new Promise(resolve => setTimeout(resolve, 100))
     expect(out.val).toBe(4)
   })
+
+  it('has a cleanup function that cancels the delayed execution', async () => {
+    const innerFn = vi.fn()
+    const debouncedFn = debounce(innerFn, 1000)
+    const cleanupFn = debouncedFn(1)
+    await new Promise(resolve => setTimeout(resolve, 0))
+    expect(innerFn).toBeCalledTimes(0)
+    cleanupFn()
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    expect(innerFn).toBeCalledTimes(0)
+  })
 })

src/utils/debounce.ts

@@ -1,13 +1,18 @@
 /** Delay function execution until after the invocations stopped. */
+export type DebounceCleanupFn = () => void
+
 export const debounce = <T extends unknown[]>(
   fn: (...args: T) => void,
   period: number
-): ((...args: T) => void) => {
+): ((...args: T) => DebounceCleanupFn) => {
   let timeout: ReturnType<typeof setTimeout> | undefined
   return (...args: T) => {
     clearTimeout(timeout)
     timeout = setTimeout(() => {
       fn(...args)
     }, period)
+    return () => {
+      clearTimeout(timeout)
+    }
   }
 }