From bad9393df47696d7ce86a532a0bb216e16d616d2 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 30 Mar 2024 12:06:29 +0100 Subject: [PATCH 1/8] Added active element --- packages/runed/src/lib/functions/index.ts | 1 + .../lib/functions/withActiveElement.svelte.ts | 21 ++++++++++++ .../runed/src/lib/internal/utils/defined.ts | 3 ++ .../content/functions/with-active-element.md | 33 +++++++++++++++++++ sites/docs/src/lib/components/demos/index.ts | 1 + .../demos/with-active-element.svelte | 14 ++++++++ sites/docs/src/lib/config/navigation.ts | 5 +++ 7 files changed, 78 insertions(+) create mode 100644 packages/runed/src/lib/functions/withActiveElement.svelte.ts create mode 100644 packages/runed/src/lib/internal/utils/defined.ts create mode 100644 sites/docs/content/functions/with-active-element.md create mode 100644 sites/docs/src/lib/components/demos/with-active-element.svelte diff --git a/packages/runed/src/lib/functions/index.ts b/packages/runed/src/lib/functions/index.ts index f5272d6c..5ec64290 100644 --- a/packages/runed/src/lib/functions/index.ts +++ b/packages/runed/src/lib/functions/index.ts @@ -1,2 +1,3 @@ +export * from "./withActiveElement.svelte.js"; export * from "./withDebounce.svelte.js"; export * from "./withElementSize.svelte.js"; diff --git a/packages/runed/src/lib/functions/withActiveElement.svelte.ts b/packages/runed/src/lib/functions/withActiveElement.svelte.ts new file mode 100644 index 00000000..e8aead18 --- /dev/null +++ b/packages/runed/src/lib/functions/withActiveElement.svelte.ts @@ -0,0 +1,21 @@ +import { documentDefined } from "$lib/internal/utils/defined.js"; + +export function withActiveElement(): { value: Readonly } { + const activeElement = $state({ value: documentDefined() ? document.activeElement : null }); + + function onFocusChange() { + activeElement.value = document.activeElement; + } + + $effect(() => { + document.addEventListener("focusin", onFocusChange); + document.addEventListener("focusout", onFocusChange); + + return () => { + document.removeEventListener("focusin", onFocusChange); + document.removeEventListener("focusout", onFocusChange); + }; + }); + + return activeElement; +} diff --git a/packages/runed/src/lib/internal/utils/defined.ts b/packages/runed/src/lib/internal/utils/defined.ts new file mode 100644 index 00000000..606dbddb --- /dev/null +++ b/packages/runed/src/lib/internal/utils/defined.ts @@ -0,0 +1,3 @@ +export function documentDefined() { + return typeof document !== "undefined"; +} diff --git a/sites/docs/content/functions/with-active-element.md b/sites/docs/content/functions/with-active-element.md new file mode 100644 index 00000000..8cc88abf --- /dev/null +++ b/sites/docs/content/functions/with-active-element.md @@ -0,0 +1,33 @@ +--- +title: WithActiveElement +description: A function that returns the currently active element. +--- + + + +## Demo + + + +## Usage + +```svelte + + +
+

+ Currently active element: + + {activeElement.value !== null + ? activeElement.value.localName + : "No active element found"} + +

+
+``` diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts index d927bddc..d9c9abb3 100644 --- a/sites/docs/src/lib/components/demos/index.ts +++ b/sites/docs/src/lib/components/demos/index.ts @@ -1,2 +1,3 @@ +export { default as WithActiveElementDemo } from "./with-active-element.svelte"; export { default as WithDebounceDemo } from "./with-debounce.svelte"; export { default as WithElementSizeDemo } from "./with-element-size.svelte"; diff --git a/sites/docs/src/lib/components/demos/with-active-element.svelte b/sites/docs/src/lib/components/demos/with-active-element.svelte new file mode 100644 index 00000000..35f010ea --- /dev/null +++ b/sites/docs/src/lib/components/demos/with-active-element.svelte @@ -0,0 +1,14 @@ + + +
+

+ Currently active element: + + {activeElement.value !== null ? activeElement.value.localName : "No active element found"} + +

+
diff --git a/sites/docs/src/lib/config/navigation.ts b/sites/docs/src/lib/config/navigation.ts index 2ce93cfa..92b48ea1 100644 --- a/sites/docs/src/lib/config/navigation.ts +++ b/sites/docs/src/lib/config/navigation.ts @@ -61,6 +61,11 @@ export const navigation: Navigation = { title: "Functions", collapsible: true, items: [ + { + title: "withActiveElement", + href: "/docs/functions/with-active-element", + items: [], + }, { title: "withDebounce", href: "/docs/functions/with-debounce", From d6ea3bd4521fcd05c926390865f2e291b70eeecf Mon Sep 17 00:00:00 2001 From: hugos68 Date: Fri, 12 Apr 2024 22:23:11 +0200 Subject: [PATCH 2/8] Solve conflicts --- packages/runed/src/lib/functions/index.ts | 1 + packages/runed/src/lib/functions/useActiveElement/index.ts | 1 + .../useActiveElement.svelte.ts} | 2 +- .../lib/functions/useActiveElement/useActiveElement.test.ts | 0 .../{with-active-element.md => use-active-element.md} | 4 ++-- sites/docs/src/lib/components/demos/index.ts | 1 + .../{with-active-element.svelte => use-active-element.svelte} | 4 +++- 7 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 packages/runed/src/lib/functions/useActiveElement/index.ts rename packages/runed/src/lib/functions/{withActiveElement.svelte.ts => useActiveElement/useActiveElement.svelte.ts} (89%) create mode 100644 packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts rename sites/docs/content/functions/{with-active-element.md => use-active-element.md} (84%) rename sites/docs/src/lib/components/demos/{with-active-element.svelte => use-active-element.svelte} (70%) diff --git a/packages/runed/src/lib/functions/index.ts b/packages/runed/src/lib/functions/index.ts index 5ca2aa37..fcd4a256 100644 --- a/packages/runed/src/lib/functions/index.ts +++ b/packages/runed/src/lib/functions/index.ts @@ -1,2 +1,3 @@ +export * from "./useActiveElement/index.js"; export * from "./useDebounce/index.js"; export * from "./useElementSize/index.js"; diff --git a/packages/runed/src/lib/functions/useActiveElement/index.ts b/packages/runed/src/lib/functions/useActiveElement/index.ts new file mode 100644 index 00000000..524386df --- /dev/null +++ b/packages/runed/src/lib/functions/useActiveElement/index.ts @@ -0,0 +1 @@ +export * from "./useActiveElement.svelte.js"; diff --git a/packages/runed/src/lib/functions/withActiveElement.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts similarity index 89% rename from packages/runed/src/lib/functions/withActiveElement.svelte.ts rename to packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts index e8aead18..bd09c4ad 100644 --- a/packages/runed/src/lib/functions/withActiveElement.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts @@ -1,4 +1,4 @@ -import { documentDefined } from "$lib/internal/utils/defined.js"; +import { documentDefined } from "../../internal/utils/defined.js"; export function withActiveElement(): { value: Readonly } { const activeElement = $state({ value: documentDefined() ? document.activeElement : null }); diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts new file mode 100644 index 00000000..e69de29b diff --git a/sites/docs/content/functions/with-active-element.md b/sites/docs/content/functions/use-active-element.md similarity index 84% rename from sites/docs/content/functions/with-active-element.md rename to sites/docs/content/functions/use-active-element.md index 8cc88abf..1511581c 100644 --- a/sites/docs/content/functions/with-active-element.md +++ b/sites/docs/content/functions/use-active-element.md @@ -4,12 +4,12 @@ description: A function that returns the currently active element. --- ## Demo - + ## Usage diff --git a/sites/docs/src/lib/components/demos/index.ts b/sites/docs/src/lib/components/demos/index.ts index a56b0c2e..7a673edf 100644 --- a/sites/docs/src/lib/components/demos/index.ts +++ b/sites/docs/src/lib/components/demos/index.ts @@ -1,2 +1,3 @@ +export { default as UseActiveElementDemo } from "./use-active-element.svelte"; export { default as UseDebounceDemo } from "./use-debounce.svelte"; export { default as UseElementSizeDemo } from "./use-element-size.svelte"; diff --git a/sites/docs/src/lib/components/demos/with-active-element.svelte b/sites/docs/src/lib/components/demos/use-active-element.svelte similarity index 70% rename from sites/docs/src/lib/components/demos/with-active-element.svelte rename to sites/docs/src/lib/components/demos/use-active-element.svelte index 35f010ea..4c7f4f65 100644 --- a/sites/docs/src/lib/components/demos/with-active-element.svelte +++ b/sites/docs/src/lib/components/demos/use-active-element.svelte @@ -8,7 +8,9 @@

Currently active element: - {activeElement.value !== null ? activeElement.value.localName : "No active element found"} + {activeElement.value !== null + ? activeElement.value.localName + : "No active element found"}

From 162f5de9d7d4b4c83fd4eec8c98bed994c43e355 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Fri, 12 Apr 2024 22:28:00 +0200 Subject: [PATCH 3/8] Updated with -> use --- sites/docs/content/functions/use-active-element.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/docs/content/functions/use-active-element.md b/sites/docs/content/functions/use-active-element.md index 1511581c..0c986d0c 100644 --- a/sites/docs/content/functions/use-active-element.md +++ b/sites/docs/content/functions/use-active-element.md @@ -1,5 +1,5 @@ --- -title: WithActiveElement +title: UseActiveElement description: A function that returns the currently active element. --- @@ -15,9 +15,9 @@ import { UseActiveElementDemo } from '$lib/components/demos'; ```svelte
From c1505b51bdf863a87812b1200d44d7a41aa95f14 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 13 Apr 2024 14:47:21 +0200 Subject: [PATCH 4/8] Added testing env + test cases for useActiveElement --- packages/runed/package.json | 6 +- .../useActiveElement.svelte.ts | 2 +- .../useActiveElement.test.svelte.ts | 25 ++ .../useActiveElement/useActiveElement.test.ts | 0 packages/runed/vite.config.ts | 3 +- pnpm-lock.yaml | 263 +++++++++++++++++- .../demos/use-active-element.svelte | 4 +- 7 files changed, 295 insertions(+), 8 deletions(-) create mode 100644 packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts delete mode 100644 packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts diff --git a/packages/runed/package.json b/packages/runed/package.json index f822a389..f28400b4 100644 --- a/packages/runed/package.json +++ b/packages/runed/package.json @@ -16,7 +16,10 @@ "url": "https://github.com/svecosystem/runed", "directory": "packages/runed" }, - "funding": ["https://github.com/sponsors/huntabyte", "https://github.com/sponsors/tglide"], + "funding": [ + "https://github.com/sponsors/huntabyte", + "https://github.com/sponsors/tglide" + ], "scripts": { "dev": "pnpm sync && pnpm watch", "build": "pnpm package", @@ -45,6 +48,7 @@ "@sveltejs/package": "^2.3.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", "@types/node": "^20.10.6", + "jsdom": "^24.0.0", "publint": "^0.1.9", "svelte": "^5.0.0-next.75", "svelte-check": "^3.6.0", diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts index bd09c4ad..a1038a18 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts @@ -1,6 +1,6 @@ import { documentDefined } from "../../internal/utils/defined.js"; -export function withActiveElement(): { value: Readonly } { +export function useActiveElement(): { value: Readonly } { const activeElement = $state({ value: documentDefined() ? document.activeElement : null }); function onFocusChange() { diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts new file mode 100644 index 00000000..5443a0bf --- /dev/null +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts @@ -0,0 +1,25 @@ +import { describe, expect, it } from "vitest"; +import { useActiveElement } from "./index.js"; + +describe("useActiveElement", () => { + it("initializes with `document.activeElement`", () => { + const cleanup = $effect.root(() => { + const activeElement = useActiveElement(); + expect(activeElement.value).toBe(document.activeElement); + }); + cleanup(); + }); + it("updates accordingly when `document.activeElement` element changes", () => { + const input = document.createElement("input"); + const cleanup = $effect.root(() => { + const activeElement = useActiveElement(); + expect(activeElement.value).toBe(document.activeElement); + input.focus(); + requestAnimationFrame(() => { + expect(document.activeElement).toBe(input); + expect(activeElement.value).toBe(input); + }); + }); + cleanup(); + }); +}); diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/packages/runed/vite.config.ts b/packages/runed/vite.config.ts index 08e3ed5c..2a29dcd3 100644 --- a/packages/runed/vite.config.ts +++ b/packages/runed/vite.config.ts @@ -4,6 +4,7 @@ import { defineConfig } from "vitest/config"; export default defineConfig({ plugins: [sveltekit()], test: { - include: ["src/**/*.{test,spec}.{js,ts}"], + include: ["src/**/*.{test,test.svelte,spec}.{js,ts}"], + environment: "jsdom", }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ab0f91d6..80bbc966 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -57,6 +57,9 @@ importers: '@types/node': specifier: ^20.10.6 version: 20.11.17 + jsdom: + specifier: ^24.0.0 + version: 24.0.0 publint: specifier: ^0.1.9 version: 0.1.16 @@ -77,7 +80,7 @@ importers: version: 5.1.3(@types/node@20.11.17) vitest: specifier: ^1.0.0 - version: 1.3.0(@types/node@20.11.17) + version: 1.3.0(@types/node@20.11.17)(jsdom@24.0.0) sites/docs: dependencies: @@ -189,7 +192,7 @@ importers: version: 5.1.3(@types/node@20.11.17) vitest: specifier: ^1.3.0 - version: 1.3.0(@types/node@20.11.17) + version: 1.3.0(@types/node@20.11.17)(jsdom@24.0.0) zod: specifier: ^3.22.4 version: 3.22.4 @@ -2514,6 +2517,15 @@ packages: engines: {node: '>=0.4.0'} hasBin: true + /agent-base@7.1.1: + resolution: {integrity: sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==} + engines: {node: '>= 14'} + dependencies: + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: true + /ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} dependencies: @@ -2653,6 +2665,10 @@ packages: hasBin: true dev: true + /asynckit@0.4.0: + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} + dev: true + /autoprefixer@10.4.17(postcss@8.4.35): resolution: {integrity: sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==} engines: {node: ^10 || ^12 || >=14} @@ -3011,6 +3027,13 @@ packages: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} dev: true + /combined-stream@1.0.8: + resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} + engines: {node: '>= 0.8'} + dependencies: + delayed-stream: 1.0.0 + dev: true + /comma-separated-tokens@2.0.3: resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==} dev: true @@ -3113,6 +3136,13 @@ packages: hasBin: true dev: true + /cssstyle@4.0.1: + resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} + engines: {node: '>=18'} + dependencies: + rrweb-cssom: 0.6.0 + dev: true + /csv-generate@3.4.3: resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==} dev: true @@ -3140,6 +3170,14 @@ packages: engines: {node: '>= 12'} dev: true + /data-urls@5.0.0: + resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} + engines: {node: '>=18'} + dependencies: + whatwg-mimetype: 4.0.0 + whatwg-url: 14.0.0 + dev: true + /dataloader@1.4.0: resolution: {integrity: sha512-68s5jYdlvasItOJnCuI2Q9s4q98g0pCyL3HrcKJu8KNugUl8ahgmZYg38ysLTgQjjXX3H8CJLkAvWrclWfcalw==} dev: true @@ -3187,6 +3225,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /decimal.js@10.4.3: + resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==} + dev: true + /decode-named-character-reference@1.0.2: resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==} dependencies: @@ -3238,6 +3280,11 @@ packages: object-keys: 1.1.1 dev: true + /delayed-stream@1.0.0: + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} + engines: {node: '>=0.4.0'} + dev: true + /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} @@ -4169,6 +4216,15 @@ packages: signal-exit: 4.1.0 dev: true + /form-data@4.0.0: + resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} + engines: {node: '>= 6'} + dependencies: + asynckit: 0.4.0 + combined-stream: 1.0.8 + mime-types: 2.1.35 + dev: true + /format@0.2.2: resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==} engines: {node: '>=0.4.x'} @@ -4659,6 +4715,13 @@ packages: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} dev: true + /html-encoding-sniffer@4.0.0: + resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} + engines: {node: '>=18'} + dependencies: + whatwg-encoding: 3.1.1 + dev: true + /html-void-elements@2.0.1: resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==} dev: true @@ -4667,6 +4730,26 @@ packages: resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==} dev: true + /http-proxy-agent@7.0.2: + resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} + engines: {node: '>= 14'} + dependencies: + agent-base: 7.1.1 + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: true + + /https-proxy-agent@7.0.4: + resolution: {integrity: sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==} + engines: {node: '>= 14'} + dependencies: + agent-base: 7.1.1 + debug: 4.3.4 + transitivePeerDependencies: + - supports-color + dev: true + /human-id@1.0.2: resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==} dev: true @@ -4683,6 +4766,13 @@ packages: safer-buffer: 2.1.2 dev: true + /iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + dependencies: + safer-buffer: 2.1.2 + dev: true + /ignore-walk@5.0.1: resolution: {integrity: sha512-yemi4pMf51WKT7khInJqAvsIGzoqYXblnsz0ql8tM+yi1EKYTY1evX4NAbJrLL/Aanr2HyZeluqU+Oi7MGHokw==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} @@ -4911,6 +5001,10 @@ packages: engines: {node: '>=12'} dev: true + /is-potential-custom-element-name@1.0.1: + resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} + dev: true + /is-reference@3.0.2: resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} dependencies: @@ -5028,6 +5122,42 @@ packages: engines: {node: '>=12.0.0'} dev: true + /jsdom@24.0.0: + resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==} + engines: {node: '>=18'} + peerDependencies: + canvas: ^2.11.2 + peerDependenciesMeta: + canvas: + optional: true + dependencies: + cssstyle: 4.0.1 + data-urls: 5.0.0 + decimal.js: 10.4.3 + form-data: 4.0.0 + html-encoding-sniffer: 4.0.0 + http-proxy-agent: 7.0.2 + https-proxy-agent: 7.0.4 + is-potential-custom-element-name: 1.0.1 + nwsapi: 2.2.7 + parse5: 7.1.2 + rrweb-cssom: 0.6.0 + saxes: 6.0.0 + symbol-tree: 3.2.4 + tough-cookie: 4.1.3 + w3c-xmlserializer: 5.0.0 + webidl-conversions: 7.0.0 + whatwg-encoding: 3.1.1 + whatwg-mimetype: 4.0.0 + whatwg-url: 14.0.0 + ws: 8.16.0 + xml-name-validator: 5.0.0 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + dev: true + /jsesc@0.5.0: resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==} hasBin: true @@ -6139,6 +6269,18 @@ packages: picomatch: 2.3.1 dev: true + /mime-db@1.52.0: + resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} + engines: {node: '>= 0.6'} + dev: true + + /mime-types@2.1.35: + resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} + engines: {node: '>= 0.6'} + dependencies: + mime-db: 1.52.0 + dev: true + /mimic-fn@4.0.0: resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} engines: {node: '>=12'} @@ -6350,6 +6492,10 @@ packages: boolbase: 1.0.0 dev: true + /nwsapi@2.2.7: + resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==} + dev: true + /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} @@ -6925,6 +7071,10 @@ packages: resolution: {integrity: sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==} dev: true + /psl@1.9.0: + resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} + dev: true + /publint@0.1.16: resolution: {integrity: sha512-wJgk7HnXDT5Ap0DjFYbGz78kPkN44iQvDiaq8P63IEEyNU9mYXvaMd2cAyIM6OgqXM/IA3CK6XWIsRq+wjNpgw==} engines: {node: '>=16'} @@ -6940,6 +7090,10 @@ packages: engines: {node: '>=6'} dev: true + /querystringify@2.2.0: + resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==} + dev: true + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true @@ -7186,6 +7340,10 @@ packages: resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==} dev: true + /requires-port@1.0.0: + resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} + dev: true + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -7251,6 +7409,10 @@ packages: fsevents: 2.3.3 dev: true + /rrweb-cssom@0.6.0: + resolution: {integrity: sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==} + dev: true + /run-parallel@1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} dependencies: @@ -7302,6 +7464,13 @@ packages: rimraf: 2.7.1 dev: true + /saxes@6.0.0: + resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} + engines: {node: '>=v12.22.7'} + dependencies: + xmlchars: 2.2.0 + dev: true + /section-matter@1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} @@ -7834,6 +8003,10 @@ packages: magic-string: 0.30.7 zimmerframe: 1.1.2 + /symbol-tree@3.2.4: + resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + dev: true + /synckit@0.6.2: resolution: {integrity: sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==} engines: {node: '>=12.20'} @@ -7970,10 +8143,27 @@ packages: engines: {node: '>=6'} dev: true + /tough-cookie@4.1.3: + resolution: {integrity: sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==} + engines: {node: '>=6'} + dependencies: + psl: 1.9.0 + punycode: 2.3.1 + universalify: 0.2.0 + url-parse: 1.5.10 + dev: true + /tr46@0.0.3: resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==} dev: true + /tr46@5.0.0: + resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} + engines: {node: '>=18'} + dependencies: + punycode: 2.3.1 + dev: true + /tree-kill@1.2.2: resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} hasBin: true @@ -8254,6 +8444,11 @@ packages: engines: {node: '>= 4.0.0'} dev: true + /universalify@0.2.0: + resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==} + engines: {node: '>= 4.0.0'} + dev: true + /update-browserslist-db@1.0.13(browserslist@4.22.3): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true @@ -8282,6 +8477,13 @@ packages: punycode: 2.3.1 dev: true + /url-parse@1.5.10: + resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} + dependencies: + querystringify: 2.2.0 + requires-port: 1.0.0 + dev: true + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true @@ -8431,7 +8633,7 @@ packages: vite: 5.1.3(@types/node@20.11.17) dev: true - /vitest@1.3.0(@types/node@20.11.17): + /vitest@1.3.0(@types/node@20.11.17)(jsdom@24.0.0): resolution: {integrity: sha512-V9qb276J1jjSx9xb75T2VoYXdO1UKi+qfflY7V7w93jzX7oA/+RtYE6TcifxksxsZvygSSMwu2Uw6di7yqDMwg==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -8466,6 +8668,7 @@ packages: chai: 4.4.1 debug: 4.3.4 execa: 8.0.1 + jsdom: 24.0.0 local-pkg: 0.5.0 magic-string: 0.30.7 pathe: 1.1.2 @@ -8505,6 +8708,13 @@ packages: - supports-color dev: true + /w3c-xmlserializer@5.0.0: + resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} + engines: {node: '>=18'} + dependencies: + xml-name-validator: 5.0.0 + dev: true + /wcwidth@1.0.1: resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==} dependencies: @@ -8524,6 +8734,31 @@ packages: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} dev: true + /webidl-conversions@7.0.0: + resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} + engines: {node: '>=12'} + dev: true + + /whatwg-encoding@3.1.1: + resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} + engines: {node: '>=18'} + dependencies: + iconv-lite: 0.6.3 + dev: true + + /whatwg-mimetype@4.0.0: + resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} + engines: {node: '>=18'} + dev: true + + /whatwg-url@14.0.0: + resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==} + engines: {node: '>=18'} + dependencies: + tr46: 5.0.0 + webidl-conversions: 7.0.0 + dev: true + /whatwg-url@5.0.0: resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==} dependencies: @@ -8627,11 +8862,33 @@ packages: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true + /ws@8.16.0: + resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + dev: true + /xml-name-validator@4.0.0: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} dev: true + /xml-name-validator@5.0.0: + resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} + engines: {node: '>=18'} + dev: true + + /xmlchars@2.2.0: + resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + dev: true + /y18n@4.0.3: resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==} dev: true diff --git a/sites/docs/src/lib/components/demos/use-active-element.svelte b/sites/docs/src/lib/components/demos/use-active-element.svelte index 4c7f4f65..469cf300 100644 --- a/sites/docs/src/lib/components/demos/use-active-element.svelte +++ b/sites/docs/src/lib/components/demos/use-active-element.svelte @@ -1,7 +1,7 @@
From 3a0cc450244900c218044a842a8cac0cb0645794 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 13 Apr 2024 14:48:27 +0200 Subject: [PATCH 5/8] Test more appropiately --- .../functions/useActiveElement/useActiveElement.test.svelte.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts index 5443a0bf..cd28b6db 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts @@ -13,7 +13,6 @@ describe("useActiveElement", () => { const input = document.createElement("input"); const cleanup = $effect.root(() => { const activeElement = useActiveElement(); - expect(activeElement.value).toBe(document.activeElement); input.focus(); requestAnimationFrame(() => { expect(document.activeElement).toBe(input); From 7be0682cae9c585ba6698848ad3187eb9649565a Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 13 Apr 2024 15:36:57 +0200 Subject: [PATCH 6/8] Added testWithEffect --- .../useActiveElement.test.svelte.ts | 34 +++++++++---------- packages/runed/src/lib/test/util.svelte.ts | 13 +++++++ 2 files changed, 30 insertions(+), 17 deletions(-) create mode 100644 packages/runed/src/lib/test/util.svelte.ts diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts index cd28b6db..86f31dfc 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts @@ -1,24 +1,24 @@ import { describe, expect, it } from "vitest"; +import { tick } from "svelte"; import { useActiveElement } from "./index.js"; +import { testWithEffect } from "$lib/test/util.svelte.js"; describe("useActiveElement", () => { - it("initializes with `document.activeElement`", () => { - const cleanup = $effect.root(() => { - const activeElement = useActiveElement(); - expect(activeElement.value).toBe(document.activeElement); - }); - cleanup(); + testWithEffect("initializes with `document.activeElement`", () => { + const activeElement = useActiveElement(); + expect(activeElement.value).toBe(document.activeElement); }); - it("updates accordingly when `document.activeElement` element changes", () => { - const input = document.createElement("input"); - const cleanup = $effect.root(() => { - const activeElement = useActiveElement(); + testWithEffect( + "updates accordingly when `document.activeElement` element changes", + async () => { + const input = document.createElement("input"); + document.body.appendChild(input); input.focus(); - requestAnimationFrame(() => { - expect(document.activeElement).toBe(input); - expect(activeElement.value).toBe(input); - }); - }); - cleanup(); - }); + + const activeElement = useActiveElement(); + await tick(); + expect(document.activeElement).toBe(input); + expect(activeElement.value).toBe(input); + } + ); }); diff --git a/packages/runed/src/lib/test/util.svelte.ts b/packages/runed/src/lib/test/util.svelte.ts new file mode 100644 index 00000000..37057d43 --- /dev/null +++ b/packages/runed/src/lib/test/util.svelte.ts @@ -0,0 +1,13 @@ +import { it } from "vitest"; + +export function testWithEffect(name: string, fn: () => void) { + it(name, async () => { + let promise: Promise | void; + const cleanup = $effect.root(() => (promise = fn())); + try { + await promise!; + } finally { + cleanup(); + } + }); +} From eb9ad7c0adc4555f75203d06c3b4af623371c690 Mon Sep 17 00:00:00 2001 From: hugos68 Date: Sat, 13 Apr 2024 17:15:18 +0200 Subject: [PATCH 7/8] ci --- .../functions/useActiveElement/useActiveElement.test.svelte.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts index 86f31dfc..5e540658 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.test.svelte.ts @@ -1,4 +1,4 @@ -import { describe, expect, it } from "vitest"; +import { describe, expect } from "vitest"; import { tick } from "svelte"; import { useActiveElement } from "./index.js"; import { testWithEffect } from "$lib/test/util.svelte.js"; From 0cc93a08f43bbe79eea453828fef9132d9f1edb6 Mon Sep 17 00:00:00 2001 From: "Thomas G. Lopes" <26071571+TGlide@users.noreply.github.com> Date: Sat, 13 Apr 2024 16:49:10 +0100 Subject: [PATCH 8/8] Create late-cameras-whisper.md --- .changeset/late-cameras-whisper.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/late-cameras-whisper.md diff --git a/.changeset/late-cameras-whisper.md b/.changeset/late-cameras-whisper.md new file mode 100644 index 00000000..530b9850 --- /dev/null +++ b/.changeset/late-cameras-whisper.md @@ -0,0 +1,5 @@ +--- +"runed": minor +--- + +add useActiveElement