From 04f8f60c52aa52bb9e973ad69122550603c79ddd Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Fri, 26 Apr 2024 15:43:35 -0400 Subject: [PATCH 1/4] init --- packages/runed/src/lib/functions/useSupported/index.ts | 0 .../src/lib/functions/useSupported/useSupported.svelte.ts | 1 + sites/docs/content/functions/use-supported.md | 4 ++++ sites/docs/src/lib/components/demos/use-supported.svelte | 7 +++++++ 4 files changed, 12 insertions(+) create mode 100644 packages/runed/src/lib/functions/useSupported/index.ts create mode 100644 packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts create mode 100644 sites/docs/content/functions/use-supported.md create mode 100644 sites/docs/src/lib/components/demos/use-supported.svelte diff --git a/packages/runed/src/lib/functions/useSupported/index.ts b/packages/runed/src/lib/functions/useSupported/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts new file mode 100644 index 00000000..1635d65a --- /dev/null +++ b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts @@ -0,0 +1 @@ +export function useSupported(callback: () => unknown): boolean {} diff --git a/sites/docs/content/functions/use-supported.md b/sites/docs/content/functions/use-supported.md new file mode 100644 index 00000000..56dd2484 --- /dev/null +++ b/sites/docs/content/functions/use-supported.md @@ -0,0 +1,4 @@ +--- +title: useSupported +description: Determine if a feature is supported by the environment before using it. +--- diff --git a/sites/docs/src/lib/components/demos/use-supported.svelte b/sites/docs/src/lib/components/demos/use-supported.svelte new file mode 100644 index 00000000..0d23b70f --- /dev/null +++ b/sites/docs/src/lib/components/demos/use-supported.svelte @@ -0,0 +1,7 @@ + + +

{isMounted.value ? "mounted" : "not mounted"}

From e3e6318eedd5f6ce624e9ebc0adfd5c66eb0f60e Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Fri, 26 Apr 2024 16:24:42 -0400 Subject: [PATCH 2/4] feat: useSupported --- packages/runed/src/lib/functions/index.ts | 1 + .../useActiveElement.svelte.ts | 11 ++++++----- .../useElementSize/useElementSize.svelte.ts | 4 ++-- .../functions/useMounted/useMounted.svelte.ts | 4 ++++ .../src/lib/functions/useSupported/index.ts | 1 + .../useSupported/useSupported.svelte.ts | 18 +++++++++++++++++- sites/docs/content/functions/use-supported.md | 14 ++++++++++++++ sites/docs/mdsx.config.js | 18 +++++++++++++++++- .../lib/components/demos/use-supported.svelte | 7 ------- sites/docs/src/lib/config/navigation.ts | 5 +++++ 10 files changed, 67 insertions(+), 16 deletions(-) delete mode 100644 sites/docs/src/lib/components/demos/use-supported.svelte diff --git a/packages/runed/src/lib/functions/index.ts b/packages/runed/src/lib/functions/index.ts index b9550f29..79a35ccb 100644 --- a/packages/runed/src/lib/functions/index.ts +++ b/packages/runed/src/lib/functions/index.ts @@ -4,3 +4,4 @@ export * from "./useDebounce/index.js"; export * from "./useElementSize/index.js"; export * from "./useEventListener/index.js"; export * from "./useMounted/index.js"; +export * from "./useSupported/index.js"; diff --git a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts index 703cf39d..600b86d6 100644 --- a/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts +++ b/packages/runed/src/lib/functions/useActiveElement/useActiveElement.svelte.ts @@ -1,14 +1,15 @@ +import { type ReadableBox, box } from "../box/box.svelte.js"; import { isBrowser } from "$lib/internal/utils/browser.js"; /** * Returns a reactive value that is equal to `document.activeElement`. * It automatically listens for changes, keeping the reference up to date. * - * @returns an object with a reactive value `value` that is equal to `document.activeElement`, or `null` - * if there's no active element. + * @returns an object with a reactive value `value` that is equal to `document.activeElement`, + * or `null` if there's no active element. */ -export function useActiveElement(): { value: Readonly } { - const activeElement = $state({ value: isBrowser() ? document.activeElement : null }); +export function useActiveElement(): ReadableBox { + const activeElement = box(isBrowser() ? document.activeElement : null); function onFocusChange() { activeElement.value = document.activeElement; @@ -24,5 +25,5 @@ export function useActiveElement(): { value: Readonly } { }; }); - return activeElement; + return box.readonly(activeElement); } diff --git a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts index 30d97567..16c293ce 100644 --- a/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts +++ b/packages/runed/src/lib/functions/useElementSize/useElementSize.svelte.ts @@ -1,7 +1,7 @@ import { box } from "../box/box.svelte.js"; import type { MaybeBoxOrGetter } from "$lib/internal/types.js"; -type Options = { +export type UseElementSizeOptions = { initialSize?: { width: number; height: number; @@ -20,7 +20,7 @@ type Options = { */ export function useElementSize( _node: MaybeBoxOrGetter, - options: Options = { + options: UseElementSizeOptions = { box: "border-box", } ): { width: number; height: number } { diff --git a/packages/runed/src/lib/functions/useMounted/useMounted.svelte.ts b/packages/runed/src/lib/functions/useMounted/useMounted.svelte.ts index 6d7d7f54..f090ee16 100644 --- a/packages/runed/src/lib/functions/useMounted/useMounted.svelte.ts +++ b/packages/runed/src/lib/functions/useMounted/useMounted.svelte.ts @@ -10,6 +10,10 @@ export function useMounted(): ReadableBox { $effect(() => { untrack(() => (isMounted.value = true)); + + return () => { + isMounted.value = false; + }; }); return box.readonly(isMounted); diff --git a/packages/runed/src/lib/functions/useSupported/index.ts b/packages/runed/src/lib/functions/useSupported/index.ts index e69de29b..c3421e3f 100644 --- a/packages/runed/src/lib/functions/useSupported/index.ts +++ b/packages/runed/src/lib/functions/useSupported/index.ts @@ -0,0 +1 @@ +export * from "./useSupported.svelte.js"; diff --git a/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts index 1635d65a..48f5f76f 100644 --- a/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts +++ b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts @@ -1 +1,17 @@ -export function useSupported(callback: () => unknown): boolean {} +import { type ReadableBox, box } from "../box/box.svelte.js"; + +/** + * A hook that takes a callback and returns a boolean indicating whether the + * callback is supported by the current environment. + * + * Useful for checking if a browser API is supported before attempting to use it. + */ +export function useSupported(callback: () => unknown): ReadableBox { + const isSupported = box(false); + + $effect(() => { + isSupported.value = Boolean(callback()); + }); + + return box.readonly(isSupported); +} diff --git a/sites/docs/content/functions/use-supported.md b/sites/docs/content/functions/use-supported.md index 56dd2484..a12c2eba 100644 --- a/sites/docs/content/functions/use-supported.md +++ b/sites/docs/content/functions/use-supported.md @@ -2,3 +2,17 @@ title: useSupported description: Determine if a feature is supported by the environment before using it. --- + +## Usage + +```svelte + +``` diff --git a/sites/docs/mdsx.config.js b/sites/docs/mdsx.config.js index 49c45cac..742e2679 100644 --- a/sites/docs/mdsx.config.js +++ b/sites/docs/mdsx.config.js @@ -64,7 +64,7 @@ const prettyCodeOptions = { export const mdsxConfig = defineConfig({ extensions: [".md"], - remarkPlugins: [remarkGfm, remarkRemovePrettierIgnore], + remarkPlugins: [remarkGfm, remarkRemovePrettierIgnore, remarkTabsToSpaces], rehypePlugins: [[rehypePrettyCode, prettyCodeOptions], rehypeHandleMetadata, rehypeSlug], blueprints: { default: { @@ -100,6 +100,22 @@ function remarkRemovePrettierIgnore() { }; } +/** + * Converts tabs to spaces in code blocks to fit more into the viewport. + * + * @returns {MdastTransformer} - A unified transformer + * + */ +function remarkTabsToSpaces() { + return async (tree) => { + visit(tree, "code", (node) => { + node.value = node.value + // @ts-expect-error - not dealing with this rn + .replaceAll("\t", " "); + }); + }; +} + /** * Adds `data-metadata` to `
` elements that contain a `
`. * We use this to style elements within the `
` differently if a `
` diff --git a/sites/docs/src/lib/components/demos/use-supported.svelte b/sites/docs/src/lib/components/demos/use-supported.svelte deleted file mode 100644 index 0d23b70f..00000000 --- a/sites/docs/src/lib/components/demos/use-supported.svelte +++ /dev/null @@ -1,7 +0,0 @@ - - -

{isMounted.value ? "mounted" : "not mounted"}

diff --git a/sites/docs/src/lib/config/navigation.ts b/sites/docs/src/lib/config/navigation.ts index 73f3fc4e..4a94194b 100644 --- a/sites/docs/src/lib/config/navigation.ts +++ b/sites/docs/src/lib/config/navigation.ts @@ -91,6 +91,11 @@ export const navigation: Navigation = { href: "/docs/functions/use-mounted", items: [], }, + { + title: "useSupported", + href: "/docs/functions/use-supported", + items: [], + }, ], }, ], From 612a9359d2860ba4112bbb8e35eda60be33c40f2 Mon Sep 17 00:00:00 2001 From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com> Date: Fri, 26 Apr 2024 16:27:06 -0400 Subject: [PATCH 3/4] add changeset --- .changeset/tricky-suns-occur.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tricky-suns-occur.md diff --git a/.changeset/tricky-suns-occur.md b/.changeset/tricky-suns-occur.md new file mode 100644 index 00000000..5e13aa41 --- /dev/null +++ b/.changeset/tricky-suns-occur.md @@ -0,0 +1,5 @@ +--- +"runed": minor +--- + +feat: `useSupported` From d1abfa6c27919b88a56298d4c94c366ee592cc79 Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Fri, 26 Apr 2024 18:11:03 -0400 Subject: [PATCH 4/4] cleanup --- .../useSupported/useSupported.svelte.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts index 48f5f76f..019688e2 100644 --- a/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts +++ b/packages/runed/src/lib/functions/useSupported/useSupported.svelte.ts @@ -1,16 +1,24 @@ import { type ReadableBox, box } from "../box/box.svelte.js"; /** - * A hook that takes a callback and returns a boolean indicating whether the - * callback is supported by the current environment. + * A hook that takes a predicate determine if a browser API is supported. * * Useful for checking if a browser API is supported before attempting to use it. + * + * @example + * ```ts + * const isSupported = useSupported(() => navigator); + * + * if (isSupported) { + * // do something with navigator + * } + * ``` */ -export function useSupported(callback: () => unknown): ReadableBox { +export function useSupported(predicate: () => unknown): ReadableBox { const isSupported = box(false); $effect(() => { - isSupported.value = Boolean(callback()); + isSupported.value = Boolean(predicate()); }); return box.readonly(isSupported);