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