From 40f039983c29d5355950a80c19a1a13f220a3d72 Mon Sep 17 00:00:00 2001
From: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:12:35 +0000
Subject: [PATCH] chore(deps-dev): bump tsx from 4.17.0 to 4.18.0 (#1377)

---
 docs/advanced/creating components.md |   11 ++++++-----
 1 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/docs/advanced/creating components.md b/docs/advanced/creating components.md
index 1496b15..628d5aa 100644
--- a/docs/advanced/creating components.md
+++ b/docs/advanced/creating components.md
@@ -129,11 +129,11 @@
     return <button id="btn">Click me</button>
   }
 
-  YourComponent.beforeDOM = `
+  YourComponent.beforeDOMLoaded = `
   console.log("hello from before the page loads!")
   `
 
-  YourComponent.afterDOM = `
+  YourComponent.afterDOMLoaded = `
   document.getElementById('btn').onclick = () => {
     alert('button clicked!')
   }
@@ -156,12 +156,13 @@
   // do page specific logic here
   // e.g. attach event listeners
   const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
-  toggleSwitch.removeEventListener("change", switchTheme)
   toggleSwitch.addEventListener("change", switchTheme)
+  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
 })
 ```
 
-It is best practice to also unmount any existing event handlers to prevent memory leaks.
+It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
+This will get called on page navigation.
 
 #### Importing Code
 
@@ -179,7 +180,7 @@
     return <button id="btn">Click me</button>
   }
 
-  YourComponent.afterDOM = script
+  YourComponent.afterDOMLoaded = script
   return YourComponent
 }) satisfies QuartzComponentConstructor
 ```

--
Gitblit v1.10.0