diff --git a/.changeset/neat-chefs-provide.md b/.changeset/neat-chefs-provide.md
new file mode 100644
index 0000000..ff0d603
--- /dev/null
+++ b/.changeset/neat-chefs-provide.md
@@ -0,0 +1,5 @@
+---
+"simple-stack-query": minor
+---
+
+Change from a global `ready()` block from client scripts to a namespaced `$.ready()` block. Should be safer to avoid collisions with any local variables called `ready`.
diff --git a/packages/query/README.md b/packages/query/README.md
index d1b7338..5d728c6 100644
--- a/packages/query/README.md
+++ b/packages/query/README.md
@@ -6,7 +6,7 @@ A simple library to query the DOM from your Astro components.
```
-### `$.all` selector
+### `$.all()` selector
-You may want to select multiple targets with the same name. You can use `$.all` to query for an array of results:
+You may want to select multiple targets with the same name. You can use `$.all()` to query for an array of results:
```astro
---
@@ -87,13 +87,13 @@ ready(() => {
```
-## Global `ready()` function
+## Global `$.ready()` function
-All `$` queries must be nested in a `ready()` block. This opts in to using the global `$` from client scripts. `ready()` also ensures your code reruns on every page [when view transitions are enabled.](https://docs.astro.build/en/guides/view-transitions/)
+All `$` queries must be nested in a `$.ready()` block. This opts in to using the global `$` from client scripts. `$.ready()` also ensures your code reruns on every page [when view transitions are enabled.](https://docs.astro.build/en/guides/view-transitions/)
```astro
\ No newline at end of file
diff --git a/packages/query/src/index.ts b/packages/query/src/index.ts
index 857903e..ead544b 100644
--- a/packages/query/src/index.ts
+++ b/packages/query/src/index.ts
@@ -42,8 +42,7 @@ function vitePlugin(): VitePlugin {
import { scope as __scope } from 'simple:scope';
import * as __queryInternals from "simple-stack-query/internal";
- const $ = __queryInternals.create$(__scope);
- const ready = __queryInternals.createReady(__scope);\n${code}`;
+ const $ = __queryInternals.create$(__scope);\n${code}`;
},
};
}
diff --git a/packages/query/src/internal.ts b/packages/query/src/internal.ts
index cb4f127..1110827 100644
--- a/packages/query/src/internal.ts
+++ b/packages/query/src/internal.ts
@@ -2,6 +2,10 @@ import type { scope as scopeFn } from "simple:scope";
import { transitionEnabledOnThisPage } from "astro/virtual-modules/transitions-router.js";
export function create$(scope: typeof scopeFn) {
+ const anyMatchSelector = `[data-target$=${JSON.stringify(scope())}`;
+ function hasScopeElement() {
+ return Boolean(document.querySelector(anyMatchSelector));
+ }
function getSelector(scopeId: string) {
return `[data-target=${JSON.stringify(scope(scopeId))}]`;
}
@@ -20,33 +24,23 @@ export function create$(scope: typeof scopeFn) {
const selector = getSelector(scopeId);
return [...document.querySelectorAll(selector)];
},
+ ready(callback: () => MaybePromise void)>) {
+ if (transitionEnabledOnThisPage()) {
+ let cleanup: (() => void) | undefined;
+
+ document.addEventListener("astro:page-load", async () => {
+ if (cleanup) cleanup();
+ if (!hasScopeElement()) return;
+
+ cleanup = await callback();
+ });
+ } else {
+ if (!hasScopeElement()) return;
+ callback();
+ }
+ },
});
return $;
}
type MaybePromise = T | Promise;
-
-export function createReady(scope: typeof scopeFn) {
- const selector = `[data-target$=${JSON.stringify(scope())}`;
- function hasScopeElement() {
- return Boolean(document.querySelector(selector));
- }
-
- return function ready(
- callback: () => MaybePromise void)>,
- ) {
- if (transitionEnabledOnThisPage()) {
- let cleanup: (() => void) | undefined;
-
- document.addEventListener("astro:page-load", async () => {
- if (cleanup) cleanup();
- if (!hasScopeElement()) return;
-
- cleanup = await callback();
- });
- } else {
- if (!hasScopeElement()) return;
- callback();
- }
- };
-}
diff --git a/www/src/content/docs/query.md b/www/src/content/docs/query.md
index 403aef5..a935ff8 100644
--- a/www/src/content/docs/query.md
+++ b/www/src/content/docs/query.md
@@ -9,7 +9,7 @@ A simple library to query the DOM from your Astro components.
```
-### `$.all` selector
+### `$.all()` selector
-You may want to select multiple targets with the same name. You can use `$.all` to query for an array of results:
+You may want to select multiple targets with the same name. You can use `$.all()` to query for an array of results:
```astro
---
@@ -90,13 +90,13 @@ ready(() => {
```
-## Global `ready()` function
+## Global `$.ready()` function
-All `$` queries must be nested in a `ready()` block. This opts in to using the global `$` from client scripts. `ready()` also ensures your code reruns on every page [when view transitions are enabled.](https://docs.astro.build/en/guides/view-transitions/)
+All `$` queries must be nested in a `$.ready()` block. This opts in to using the global `$` from client scripts. `$.ready()` also ensures your code reruns on every page [when view transitions are enabled.](https://docs.astro.build/en/guides/view-transitions/)
```astro