From 92c51e32172ca5fc41c7107a04ecbbd102609cc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mi=C5=82osz=20Mandowski?= Date: Fri, 30 Aug 2024 00:08:34 +0200 Subject: [PATCH] feat: add dynamic root to useQuerySelector --- docs/guide/built-in/use-element-ref.md | 2 +- docs/guide/built-in/use-query-selector.md | 10 +- .../src/composables/utils/useAttribute.ts | 25 ++-- .../ovee/src/composables/utils/useDataAttr.ts | 25 ++-- .../src/composables/utils/useElementRef.ts | 10 +- .../ovee/src/composables/utils/useProp.ts | 20 +-- .../composables/utils/useQueryComponent.ts | 37 ++---- .../src/composables/utils/useQuerySelector.ts | 115 +++++++++++++----- packages/ovee/src/utils/types.ts | 10 +- .../unit/composables/hooks/useProp.spec.ts | 4 +- .../composables/utils/useAttribute.spec.ts | 13 +- .../composables/utils/useDataAttr.spec.ts | 13 +- .../unit/composables/utils/useProp.spec.ts | 4 +- .../utils/useQueryComponent.spec.ts | 15 ++- .../utils/useQuerySelector.spec.ts | 14 +-- 15 files changed, 178 insertions(+), 139 deletions(-) diff --git a/docs/guide/built-in/use-element-ref.md b/docs/guide/built-in/use-element-ref.md index def01e3..89e9d32 100644 --- a/docs/guide/built-in/use-element-ref.md +++ b/docs/guide/built-in/use-element-ref.md @@ -1,6 +1,6 @@ # Use Element Ref -Returns `OveeRef` with elements instance, matching `ref="..."` value. +Returns `OveeRef` with elements instance, matching `ref="..."` value. It only will search for refs inside a component. ::: code-group ```ts [MyComponent.ts] diff --git a/docs/guide/built-in/use-query-selector.md b/docs/guide/built-in/use-query-selector.md index 1472159..c30568f 100644 --- a/docs/guide/built-in/use-query-selector.md +++ b/docs/guide/built-in/use-query-selector.md @@ -1,13 +1,17 @@ # Use Query Selector -Returns an Ovee Ref, which reactively tracks an element, that matches the used selector. If an element is modified, those changes will be reflected. +# Single Element + +Returns an Ovee Ref, which reactively tracks an element, that matches the used selector. If an element is modified, those changes will be reflected. It optionally accepts a dynamic root, against which the query will be run. Root can be a plain value, a getter function or a computed. ```ts import { useQuerySelector } from 'ovee.js' export const MyComponent = defineComponent(() => { + const header = document.querySelector('header') const submitButton = useQuerySelector('.my-component__submit') const audio = useQuerySelector('audio') + const burger = useQuerySelector('.heading__burger', header) onMounted(() => { audio.value?.play() @@ -17,14 +21,16 @@ export const MyComponent = defineComponent(() => { ## Multiple Elements -If you want to match the selector against multiple components. +If you want to match the selector against multiple elements. It also accepts optional a dynamic root. ```ts import { useQuerySelectorAll } from 'ovee.js' export const MyComponent = defineComponent((_, { on }) => { + const header = () => document.querySelector('header') const inputs = useQuerySelectorAll('input') const headings = useQuerySelectorAll('h2') + const links = useQuerySelectorAll('.header__link', header) watchEffect(() => { console.log(`headings amount: ${headings.value.length}`) diff --git a/packages/ovee/src/composables/utils/useAttribute.ts b/packages/ovee/src/composables/utils/useAttribute.ts index 0e663e7..472e493 100644 --- a/packages/ovee/src/composables/utils/useAttribute.ts +++ b/packages/ovee/src/composables/utils/useAttribute.ts @@ -1,4 +1,4 @@ -import { ref } from '@vue/reactivity'; +import { computed, Ref, ref } from '@vue/reactivity'; import { injectComponentContext } from '@/core'; import { Logger } from '@/errors'; @@ -12,7 +12,6 @@ import { isNil, isString, ObjectNotationMapValues, - OveeRef, } from '@/utils'; import { onMounted, onUnmounted } from '../hooks'; @@ -24,7 +23,7 @@ const logger = new Logger('useAttribute'); export function useAttribute>( keys: Keys ): { - [Key in keyof Keys]: OveeRef< + [Key in keyof Keys]: Ref< Keys[Key] extends AttributeMap ? ReturnType : Keys[Key] extends AttributeMapType @@ -35,26 +34,26 @@ export function useAttribute( keys: [...Keys] -): { [Key in keyof Keys]: OveeRef }; +): { [Key in keyof Keys]: Ref }; -export function useAttribute(key: string): OveeRef; +export function useAttribute(key: string): Ref; -export function useAttribute(key: string, map: AttributeMap): OveeRef; +export function useAttribute(key: string, map: AttributeMap): Ref; export function useAttribute( key: string, map: MapType -): OveeRef>; +): Ref>; export function useAttribute( key: string | string[] | Record, _map?: AttributeMap | AttributeMapType -): OveeRef | OveeRef[] | Record> { +): Ref | Ref[] | Record> { const instance = injectComponentContext(true); if (!instance) { logger.warn(getNoContextWarning('useAttribute')); - return { value: null }; + return ref(null); } if (Array.isArray(key)) { @@ -76,14 +75,14 @@ export function useAttribute( // TODO: log warning that there is no map const map = typeof _map === 'string' ? attributeMaps[_map] : _map; const cachedValue = ref(); - const attributeRef: OveeRef = { - get value() { + const attributeRef = computed({ + get() { updateAttributeValue(); return cachedValue.value; }, - set value(v: string | null) { + set(v) { const value = map ? map.set(v) : v; if (isNil(value)) { @@ -92,7 +91,7 @@ export function useAttribute( instance.element.setAttribute(key, value); } }, - }; + }); const { observe, disconnect } = attachAttributeObserver(key, () => { updateAttributeValue(); diff --git a/packages/ovee/src/composables/utils/useDataAttr.ts b/packages/ovee/src/composables/utils/useDataAttr.ts index 062ef31..8e17a20 100644 --- a/packages/ovee/src/composables/utils/useDataAttr.ts +++ b/packages/ovee/src/composables/utils/useDataAttr.ts @@ -1,4 +1,4 @@ -import { ref } from '@vue/reactivity'; +import { computed, Ref, ref } from '@vue/reactivity'; import { injectComponentContext } from '@/core'; import { Logger } from '@/errors'; @@ -12,7 +12,6 @@ import { isNil, isString, ObjectNotationMapValues, - OveeRef, toKebabCase, } from '@/utils'; @@ -23,7 +22,7 @@ const logger = new Logger('useDataAttr'); export function useDataAttr>( keys: Keys ): { - [Key in keyof Keys]: OveeRef< + [Key in keyof Keys]: Ref< Keys[Key] extends AttributeMap ? ReturnType : Keys[Key] extends AttributeMapType @@ -34,26 +33,26 @@ export function useDataAttr export function useDataAttr( keys: [...Keys] -): { [Key in keyof Keys]: OveeRef }; +): { [Key in keyof Keys]: Ref }; -export function useDataAttr(key: string): OveeRef; +export function useDataAttr(key: string): Ref; -export function useDataAttr(key: string, map: AttributeMap): OveeRef; +export function useDataAttr(key: string, map: AttributeMap): Ref; export function useDataAttr( key: string, map: MapType -): OveeRef>; +): Ref>; export function useDataAttr( key: string | string[] | Record, _map?: AttributeMap | AttributeMapType -): OveeRef | OveeRef[] | Record> { +): Ref | Ref[] | Record> { const instance = injectComponentContext(true); if (!instance) { logger.warn(getNoContextWarning('useDataAttr')); - return { value: undefined }; + return ref(null); } if (Array.isArray(key)) { @@ -76,14 +75,14 @@ export function useDataAttr( const map = typeof _map === 'string' ? attributeMaps[_map] : _map; const domKey = `data-${toKebabCase(key)}`; - const dataRef: OveeRef = { - get value() { + const dataRef = computed({ + get() { updateDatasetValue(); return cachedValue.value; }, - set value(v: string | undefined) { + set(v) { const dataValue = map ? map.set(v) : v; if (isNil(dataValue)) { @@ -92,7 +91,7 @@ export function useDataAttr( instance.element.dataset[key] = dataValue; } }, - }; + }); const { observe, disconnect } = attachAttributeObserver(domKey, () => updateDatasetValue()); diff --git a/packages/ovee/src/composables/utils/useElementRef.ts b/packages/ovee/src/composables/utils/useElementRef.ts index 3592685..e5574e2 100644 --- a/packages/ovee/src/composables/utils/useElementRef.ts +++ b/packages/ovee/src/composables/utils/useElementRef.ts @@ -1,9 +1,11 @@ +import { computed, ComputedRef } from '@vue/reactivity'; + import { useQuerySelector, useQuerySelectorAll } from '@/composables'; import { injectComponentContext } from '@/core'; import { Logger } from '@/errors'; -import { getNoContextWarning, OveeReadonlyRef } from '@/utils'; +import { getNoContextWarning } from '@/utils'; -export type ElementRef = OveeReadonlyRef; +export type ElementRef = ComputedRef; const logger = new Logger('useElementRef'); const loggerMultiple = new Logger('useElementRefs'); @@ -16,7 +18,7 @@ export function useElementRef( if (!instance) { logger.warn(getNoContextWarning('useElementRef')); - return { value: null }; + return computed(() => null); } return useQuerySelector(`[ref="${name}"]`); @@ -28,7 +30,7 @@ export function useElementRefs(name: string if (!instance) { loggerMultiple.warn(getNoContextWarning('useElementRefs')); - return { value: [] }; + return computed(() => []); } return useQuerySelectorAll(`[ref="${name}"]`); diff --git a/packages/ovee/src/composables/utils/useProp.ts b/packages/ovee/src/composables/utils/useProp.ts index 2c8e0a7..e075c62 100644 --- a/packages/ovee/src/composables/utils/useProp.ts +++ b/packages/ovee/src/composables/utils/useProp.ts @@ -1,17 +1,19 @@ +import { computed, Ref } from '@vue/reactivity'; + import { injectComponentContext } from '@/core'; import { Logger } from '@/errors'; -import { ClassConstructor, getNoContextWarning, OveeRef } from '@/utils'; +import { ClassConstructor, getNoContextWarning } from '@/utils'; const logger = new Logger('useProp'); export function useProp( propName: Key, base: ClassConstructor | El -): OveeRef; -export function useProp(propName: Key): OveeRef; -export function useProp(propName: string): OveeRef; +): Ref; +export function useProp(propName: Key): Ref; +export function useProp(propName: string): Ref; -export function useProp(propName: string): OveeRef { +export function useProp(propName: string): Ref { const instance = injectComponentContext(true); if (!instance) { @@ -20,15 +22,15 @@ export function useProp(propName: string): OveeRef { return { value: undefined } as any; } - const propRef: OveeRef = { - get value() { + const propRef = computed({ + get() { return Reflect.get(instance.element, propName); }, - set value(v) { + set(v) { Reflect.set(instance.element, propName, v); }, - }; + }); return propRef; } diff --git a/packages/ovee/src/composables/utils/useQueryComponent.ts b/packages/ovee/src/composables/utils/useQueryComponent.ts index f9bbd5c..d586881 100644 --- a/packages/ovee/src/composables/utils/useQueryComponent.ts +++ b/packages/ovee/src/composables/utils/useQueryComponent.ts @@ -3,7 +3,7 @@ import { watch } from '@vue/runtime-core'; import { AnyComponent, Component, GetComponentInstance, HTMLOveeElement, useApp } from '@/core'; import { Logger } from '@/errors'; -import { getNoContextWarning, isDefined, isString, OveeReadonlyRef, toKebabCase } from '@/utils'; +import { getNoContextWarning, isDefined, isString, toKebabCase } from '@/utils'; import { extractComponent } from '@/utils/extractComponent'; import { extractComponentInternalInstance } from '@/utils/extractComponentInternalInstance'; @@ -22,13 +22,13 @@ const loggerAll = new Logger('useQueryComponentAll'); export function useQueryComponent( component: C | string, target?: ParentNode -): OveeReadonlyRef | undefined> { +): ComputedRef | undefined> { const app = useApp(true); if (!app) { logger.warn(getNoContextWarning('useQueryComponent')); - return { value: undefined }; + return computed(() => undefined); } let componentName: string; @@ -54,10 +54,9 @@ export function useQueryComponent( if (target) { const element = target.querySelector(selector); + const outputComponent = element ? extractComponent(element, componentName) : undefined; - return { - value: element ? extractComponent(element, componentName) : undefined, - }; + return computed(() => outputComponent); } const element = useQuerySelector(selector); @@ -67,11 +66,6 @@ export function useQueryComponent( const publicInstance: ComputedRef | undefined> = computed( () => internalInstance.value?.instance ); - const instanceRef: OveeReadonlyRef | undefined> = { - get value() { - return publicInstance.value; - }, - }; watch( internalInstance, @@ -86,7 +80,7 @@ export function useQueryComponent( internalInstance.effect.scheduler?.(); } - return instanceRef; + return publicInstance; } /** @@ -99,13 +93,13 @@ export function useQueryComponent( export function useQueryComponentAll( component: C | string, target?: ParentNode -): OveeReadonlyRef[]> { +): ComputedRef[]> { const app = useApp(true); if (!app) { loggerAll.warn(getNoContextWarning('useQueryComponent')); - return { value: [] }; + return computed(() => []); } let componentName: string; @@ -133,9 +127,7 @@ export function useQueryComponentAll( const elements = Array.from(target.querySelectorAll(selector)); const instances = elements.map(e => extractComponent(e, componentName)).filter(isDefined); - return { - value: instances, - }; + return computed(() => instances); } const elements = useQuerySelectorAll(selector); @@ -145,11 +137,6 @@ export function useQueryComponentAll( const publicInstance: ComputedRef | undefined> = computed(() => internalInstances.value.map(i => i.instance).filter(isDefined) ); - const instanceRef: OveeReadonlyRef | undefined> = { - get value() { - return publicInstance.value; - }, - }; watch( internalInstances, @@ -164,13 +151,13 @@ export function useQueryComponentAll( internalInstances.effect.scheduler?.(); } - return instanceRef; + return publicInstance; } -function warnAboutNotExistingComponent(logger: Logger, defaultValue: D): OveeReadonlyRef { +function warnAboutNotExistingComponent(logger: Logger, defaultValue: D): ComputedRef { logger.warn( 'Component passed as any argument is not registered in the app yet. Consider registering it yourself, or pass a name that this component will have' ); - return { value: defaultValue }; + return computed(() => defaultValue); } diff --git a/packages/ovee/src/composables/utils/useQuerySelector.ts b/packages/ovee/src/composables/utils/useQuerySelector.ts index 6ec612d..acc6722 100644 --- a/packages/ovee/src/composables/utils/useQuerySelector.ts +++ b/packages/ovee/src/composables/utils/useQuerySelector.ts @@ -1,75 +1,126 @@ -import { Ref, ref } from '@vue/reactivity'; +import { computed, ComputedRef, MaybeRefOrGetter, Ref, ref, toRef } from '@vue/reactivity'; +import { watch } from '@vue/runtime-core'; import { ComponentInstance, injectComponentContext } from '@/core'; import { Logger } from '@/errors'; -import { getNoContextWarning, MutationObserverManager, OveeReadonlyRef } from '@/utils'; +import { getNoContextWarning, MutationObserverManager, nil } from '@/utils'; import { onMounted, onUnmounted } from '../hooks'; const logger = new Logger('useQuerySelector'); const loggerAll = new Logger('useQuerySelectorAll'); +const observerOptions: MutationObserverInit = { subtree: true, childList: true }; + +/** + * Add potentialy dynamic target as a 2nd argument + * + * when passed, query is resolved around it and connects/disconnects, when ref changes + * it uses seperate mutation observer that is created/destroyed accordingly + */ /** * Reactively get child element that matches a given selector * @param selector element's selector + * @param root dynamic root relative to which, the query is resolved * @returns reactive ref with found element */ export function useQuerySelector( - selector: string -): OveeReadonlyRef { + selector: string, + root?: MaybeRefOrGetter +): ComputedRef { const instance = injectComponentContext(true); if (!instance) { logger.warn(getNoContextWarning('useQuerySelector')); - return { value: null }; + return computed(() => null); } - const storedQuery: Ref = ref(null); - const queryRef: OveeReadonlyRef = { - get value() { - return storedQuery.value; - }, - }; - - useQuerySelectorManager(instance, () => { - storedQuery.value = instance.element.querySelector(selector); - }); + if (root) return useCustomRootQuerySelector(selector, root); - return queryRef; + return useQuerySelectorManager(instance, selector); } /** * Reactively get all children elements that matches a given selector - * @argument selector children selector + * @param selector children selector + * @param root dynamic root relative to which, the query is resolved * @returns reactive ref with found elements */ export function useQuerySelectorAll( - selector: string -): OveeReadonlyRef { + selector: string, + root?: MaybeRefOrGetter +): ComputedRef { const instance = injectComponentContext(true); if (!instance) { loggerAll.warn(getNoContextWarning('useQuerySelector')); - return { value: [] }; + return computed(() => []); } - const storedQuery: Ref = ref([]); - const queryRef: OveeReadonlyRef = { - get value() { - return [...storedQuery.value]; - }, - }; + if (root) return useCustomRootQuerySelector(selector, root, true); - useQuerySelectorManager(instance, () => { - storedQuery.value = Array.from(instance.element.querySelectorAll(selector)); + return useQuerySelectorManager(instance, selector, true); +} + +function useCustomRootQuerySelector( + selector: string, + root: MaybeRefOrGetter +): ComputedRef; +function useCustomRootQuerySelector( + selector: string, + root: MaybeRefOrGetter, + all: true +): ComputedRef; +function useCustomRootQuerySelector( + selector: string, + root: MaybeRefOrGetter, + all?: boolean +): ComputedRef { + const rootRef = toRef(root); + const storedQuery: Ref = ref(all ? [] : null); + const getValue = all + ? (): El[] => Array.from(rootRef.value?.querySelectorAll(selector) ?? []) + : (): El | null => rootRef.value?.querySelector(selector) ?? null; + const observer = new MutationObserver(() => { + storedQuery.value = getValue(); }); - return queryRef; + watch( + rootRef, + (curr, prev) => { + if (prev) observer.disconnect(); + if (curr) observer.observe(curr, observerOptions); + }, + { immediate: true } + ); + + return computed(() => storedQuery.value); } -function useQuerySelectorManager(instance: ComponentInstance, updateValue: () => void) { +function useQuerySelectorManager( + instance: ComponentInstance, + selector: string +): ComputedRef; +function useQuerySelectorManager( + instance: ComponentInstance, + selector: string, + all: true +): ComputedRef; +function useQuerySelectorManager( + instance: ComponentInstance, + selector: string, + all?: boolean +): ComputedRef { + const root = instance.element; + const storedQuery: Ref = ref(all ? [] : null); + const getValue = all + ? (): El[] => Array.from(root.querySelectorAll(selector)) + : (): El | null => root.querySelector(selector); + const updateValue = () => { + storedQuery.value = getValue(); + }; const manager = QuerySelectorManager.getInstance(instance); manager.register(updateValue); @@ -82,6 +133,8 @@ function useQuerySelectorManager(instance: ComponentInstance, updateValue: () => onUnmounted(() => { manager.disconnect(); }); + + return computed(() => storedQuery.value); } const queryManagersMap = new Map(); @@ -90,7 +143,7 @@ class QuerySelectorManager extends MutationObserverManager { connected = false; observer: MutationObserver; callbacks: Array<() => void> = []; - observeOptions: MutationObserverInit = { childList: true, subtree: true }; + observeOptions = observerOptions; private constructor(element: HTMLElement) { super(element); diff --git a/packages/ovee/src/utils/types.ts b/packages/ovee/src/utils/types.ts index cfe80ce..6c004f1 100644 --- a/packages/ovee/src/utils/types.ts +++ b/packages/ovee/src/utils/types.ts @@ -1,3 +1,5 @@ +export type nil = null | undefined; + export interface ClassConstructor extends Function { new (...args: any[]): T; } @@ -24,11 +26,3 @@ export type OmitConstructorKeys = { }[keyof T]; export type OmitConstructor = Pick>; - -export interface OveeRef { - value: V; -} - -export interface OveeReadonlyRef { - readonly value: V; -} diff --git a/packages/ovee/tests/unit/composables/hooks/useProp.spec.ts b/packages/ovee/tests/unit/composables/hooks/useProp.spec.ts index 0f8235d..8f181a5 100644 --- a/packages/ovee/tests/unit/composables/hooks/useProp.spec.ts +++ b/packages/ovee/tests/unit/composables/hooks/useProp.spec.ts @@ -1,8 +1,8 @@ +import { Ref } from '@vue/reactivity'; import { assertType, describe, expect, it } from 'vitest'; import { onMounted, useProp } from '@/composables'; import { defineComponent } from '@/core'; -import { OveeRef } from '@/utils'; import { createComponent, createLoggerRegExp, spyConsole } from '#/helpers'; const loggerRegExp = createLoggerRegExp('useProp'); @@ -18,7 +18,7 @@ describe('useProp', () => { }); it('returns ovee ref with current value of a property', () => { - let innerTextRef: OveeRef; + let innerTextRef: Ref; const testText = 'hi from the inside'; const component = defineComponent(() => { innerTextRef = useProp('innerText'); diff --git a/packages/ovee/tests/unit/composables/utils/useAttribute.spec.ts b/packages/ovee/tests/unit/composables/utils/useAttribute.spec.ts index 92e67ca..6a83133 100644 --- a/packages/ovee/tests/unit/composables/utils/useAttribute.spec.ts +++ b/packages/ovee/tests/unit/composables/utils/useAttribute.spec.ts @@ -1,9 +1,8 @@ -import { watchEffect } from '@vue/runtime-core'; +import { Ref, watchEffect } from '@vue/runtime-core'; import { describe, expect, it, vi } from 'vitest'; import { onMounted, useAttribute } from '@/composables'; import { defineComponent } from '@/core'; -import { OveeRef } from '@/utils'; import { createComponent, createLoggerRegExp, spyConsole } from '#/helpers'; const loggerRegExp = createLoggerRegExp('useAttribute'); @@ -19,7 +18,7 @@ describe('useAttribute', () => { }); it('returns attribute value', () => { - let attr: OveeRef; + let attr: Ref; const attrName = 'disabled'; const attrValue = ''; const c = defineComponent(() => { @@ -54,8 +53,8 @@ describe('useAttribute', () => { }); it('maps attribute values with prebuilt mappers', () => { - let a1: OveeRef; - let a2: OveeRef; + let a1: Ref; + let a2: Ref; const a1Name = 'amount'; const a2Name = 'enabled'; const c = defineComponent(() => { @@ -85,8 +84,8 @@ describe('useAttribute', () => { }); it('maps attribute values with custom mappers', () => { - let a1: OveeRef; - let a2: OveeRef; + let a1: Ref; + let a2: Ref; const a1Name = 'index'; const a2Name = 'upper'; const c = defineComponent(() => { diff --git a/packages/ovee/tests/unit/composables/utils/useDataAttr.spec.ts b/packages/ovee/tests/unit/composables/utils/useDataAttr.spec.ts index b532cb5..e1d5c5c 100644 --- a/packages/ovee/tests/unit/composables/utils/useDataAttr.spec.ts +++ b/packages/ovee/tests/unit/composables/utils/useDataAttr.spec.ts @@ -1,9 +1,8 @@ -import { watchEffect } from '@vue/runtime-core'; +import { Ref, watchEffect } from '@vue/runtime-core'; import { describe, expect, it, vi } from 'vitest'; import { onMounted, useDataAttr } from '@/composables'; import { defineComponent } from '@/core'; -import { OveeRef } from '@/utils'; import { createComponent, createLoggerRegExp, spyConsole } from '#/helpers'; const loggerRegExp = createLoggerRegExp('useDataAttr'); @@ -19,7 +18,7 @@ describe('useDataAttr', () => { }); it('returns data param value', () => { - let data: OveeRef; + let data: Ref; const attrName = 'disabled'; const attrValue = ''; const c = defineComponent(() => { @@ -54,8 +53,8 @@ describe('useDataAttr', () => { }); it('maps attribute values with prebuilt mappers', () => { - let d1: OveeRef; - let d2: OveeRef; + let d1: Ref; + let d2: Ref; const d1Name = 'amount'; const d2Name = 'enabled'; const c = defineComponent(() => { @@ -85,8 +84,8 @@ describe('useDataAttr', () => { }); it('maps attribute values with custom mappers', () => { - let d1: OveeRef; - let d2: OveeRef; + let d1: Ref; + let d2: Ref; const d1Name = 'index'; const d2Name = 'upper'; const c = defineComponent(() => { diff --git a/packages/ovee/tests/unit/composables/utils/useProp.spec.ts b/packages/ovee/tests/unit/composables/utils/useProp.spec.ts index a391117..1de9cc0 100644 --- a/packages/ovee/tests/unit/composables/utils/useProp.spec.ts +++ b/packages/ovee/tests/unit/composables/utils/useProp.spec.ts @@ -1,8 +1,8 @@ +import { Ref } from '@vue/reactivity'; import { describe, expect, it } from 'vitest'; import { onMounted, useProp } from '@/composables'; import { defineComponent } from '@/core'; -import { OveeRef } from '@/utils'; import { createComponent, createLoggerRegExp, spyConsole } from '#/helpers'; const loggerRegExp = createLoggerRegExp('useProp'); @@ -18,7 +18,7 @@ describe('useProp', () => { }); it('returns elements property value', () => { - let title: OveeRef; + let title: Ref; const propName = 'title'; const c = defineComponent(() => { title = useProp(propName); diff --git a/packages/ovee/tests/unit/composables/utils/useQueryComponent.spec.ts b/packages/ovee/tests/unit/composables/utils/useQueryComponent.spec.ts index 79905eb..6cb4c24 100644 --- a/packages/ovee/tests/unit/composables/utils/useQueryComponent.spec.ts +++ b/packages/ovee/tests/unit/composables/utils/useQueryComponent.spec.ts @@ -1,9 +1,8 @@ -import { nextTick, watch } from '@vue/runtime-core'; +import { ComputedRef, nextTick, watch } from '@vue/runtime-core'; import { describe, expect, it, vi } from 'vitest'; import { useQueryComponent, useQueryComponentAll } from '@/composables'; import { defineComponent, HTMLOveeElement } from '@/core'; -import { OveeReadonlyRef } from '@/utils'; import { createComponent, createLoggerRegExp, @@ -34,7 +33,7 @@ describe('useQueryComponent', () => { }); it('logs warning, if passed component is not yet registered', () => { - let missingRef: OveeReadonlyRef, testRef: OveeReadonlyRef; + let missingRef: ComputedRef, testRef: ComputedRef; const testComp = defineComponent(() => {}); const component = defineComponent(() => { missingRef = useQueryComponent('missing'); @@ -50,7 +49,7 @@ describe('useQueryComponent', () => { }); it("returns dynamic ref with current value of a nested component's instance and is reactive", async () => { - let stringRef: OveeReadonlyRef, componentRef: OveeReadonlyRef; + let stringRef: ComputedRef, componentRef: ComputedRef; const watchFn = vi.fn(); const component = defineComponent(() => { @@ -97,7 +96,7 @@ describe('useQueryComponent', () => { }); it('serves as a one time helper when target is passed as an additional argument', () => { - let stringRef: OveeReadonlyRef, componentRef: OveeReadonlyRef; + let stringRef: ComputedRef, componentRef: ComputedRef; const component = defineComponent(() => { stringRef = useQueryComponent('component-1', document.documentElement); @@ -138,7 +137,7 @@ describe('useQueryComponent', () => { }); it('logs warning, if passed component is not yet registered', () => { - let missingRef: OveeReadonlyRef, testRef: OveeReadonlyRef; + let missingRef: ComputedRef, testRef: ComputedRef; const testComp = defineComponent(() => {}); const component = defineComponent(() => { missingRef = useQueryComponentAll('missing'); @@ -154,7 +153,7 @@ describe('useQueryComponent', () => { }); it("returns dynamic ref array with all current values of a nested component's instances and is reactive", async () => { - let stringRef: OveeReadonlyRef, componentRef: OveeReadonlyRef; + let stringRef: ComputedRef, componentRef: ComputedRef; const watchFn = vi.fn(); const component = defineComponent(() => { @@ -207,7 +206,7 @@ describe('useQueryComponent', () => { }); it('serves as a one time helper when target is passed as an additional argument', () => { - let stringRef: OveeReadonlyRef, componentRef: OveeReadonlyRef; + let stringRef: ComputedRef, componentRef: ComputedRef; const component = defineComponent(() => { stringRef = useQueryComponentAll('component-1', document.documentElement); diff --git a/packages/ovee/tests/unit/composables/utils/useQuerySelector.spec.ts b/packages/ovee/tests/unit/composables/utils/useQuerySelector.spec.ts index cc9a96e..d02f7b2 100644 --- a/packages/ovee/tests/unit/composables/utils/useQuerySelector.spec.ts +++ b/packages/ovee/tests/unit/composables/utils/useQuerySelector.spec.ts @@ -1,8 +1,8 @@ +import { ComputedRef } from '@vue/reactivity'; import { describe, expect, it, vi } from 'vitest'; import { useQuerySelector, useQuerySelectorAll } from '@/composables'; import { defineComponent } from '@/core'; -import { OveeReadonlyRef } from '@/utils'; import { createComponent, createLoggerRegExp, spyConsole } from '#/helpers'; describe('useQuerySelector', () => { @@ -24,7 +24,7 @@ describe('useQuerySelector', () => {

`; - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelector('#not-existing'); }); @@ -44,7 +44,7 @@ describe('useQuerySelector', () => { `; const element = document.querySelector('#test-1')!; const parahraph = document.querySelector(`.${className}`); - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelector(`.${className}`); }); @@ -62,7 +62,7 @@ describe('useQuerySelector', () => { `; const element = document.querySelector('#test-1')!; - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelector(`.${className}`); }); @@ -120,7 +120,7 @@ describe('useQuerySelector', () => {

`; - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelectorAll('.not-existing'); }); @@ -142,7 +142,7 @@ describe('useQuerySelector', () => { `; const element = document.querySelector('#test-1')!; const paragraphs = Array.from(document.querySelectorAll('p')); - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelectorAll(`.${itemClass}`); }); @@ -163,7 +163,7 @@ describe('useQuerySelector', () => {
`; const element = document.querySelector('#test-1')!; - let elRef: OveeReadonlyRef; + let elRef: ComputedRef; const component = defineComponent(() => { elRef = useQuerySelectorAll(`.${itemClass}`); });