@naptics/vue-collection 0.2.15 → 0.3.1

package/src/lib/components/__tests__/NButton.spec.tsx

@@ -0,0 +1,26 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NButton from '../NButton'
+
+describe('<NButton>', () => {
+    it('shows text', () => {
+        const button = mount(() => <NButton>Click me!</NButton>)
+        expect(button.text()).toMatch('Click me!')
+    })
+
+    it('calls onClick when clicked', async () => {
+        const onClick = vi.fn()
+        const button = mount(() => <NButton onClick={onClick} />).get('button')
+        await button.trigger('click')
+        expect(onClick).toHaveBeenCalledOnce()
+        await button.trigger('click')
+        expect(onClick).toHaveBeenCalledTimes(2)
+    })
+
+    it('does not call onClick when disabled', async () => {
+        const onClick = vi.fn()
+        const button = mount(() => <NButton onClick={onClick} disabled={true} />).get('button')
+        await button.trigger('click')
+        expect(onClick).not.toHaveBeenCalled()
+    })
+})

package/src/lib/components/__tests__/NCheckbox.spec.tsx

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, test, vi } from 'vitest'
+import NCheckbox from '../NCheckbox'
+
+describe('<NCheckbox>', () => {
+    test('handles value and calls onUpdateValue correctly', async () => {
+        const onUpdateValue = vi.fn()
+
+        let checkbox = mount(() => <NCheckbox value={false} onUpdateValue={onUpdateValue} />).get('input')
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(true)
+        expect(onUpdateValue).toHaveBeenCalledTimes(1)
+
+        // test twice (should not have changed because we did not change the value)
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(true)
+        expect(onUpdateValue).toHaveBeenCalledTimes(2)
+
+        onUpdateValue.mockReset()
+        checkbox = mount(() => <NCheckbox value={true} onUpdateValue={onUpdateValue} />).get('input')
+
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(false)
+        expect(onUpdateValue).toHaveBeenCalledTimes(1)
+
+        // test twice (should not have changed because we did not change the value)
+        await checkbox.trigger('click')
+        expect(onUpdateValue).toHaveBeenLastCalledWith(false)
+        expect(onUpdateValue).toHaveBeenCalledTimes(2)
+    })
+
+    test('does not call onUpdateValue when disabled', async () => {
+        const onUpdateValue = vi.fn()
+
+        const checkbox = mount(() => <NCheckbox disabled onUpdateValue={onUpdateValue} />).get('input')
+        await checkbox.trigger('click')
+        expect(onUpdateValue).not.toHaveBeenCalled()
+    })
+})

package/src/lib/i18n/de/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Ergebnisse werden geladen...",
+        "no-search-results": "Keine Ergebnisse für «{input}».",
+        "drag-n-drop-files": "Datei auswählen oder per Drag & Drop hinzufügen. | Bis zu {n} Dateien auswählen oder per Drag & Drop hinzufügen.",
+        "files-selected": "Keine Datei ausgewählt. | Eine Datei ausgewählt. | {n} Dateien ausgewählt."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Suchen",
+        "select": "Auswählen",
+        "remove": "Löschen",
+        "cancel": "Abbrechen",
+        "all-right": "Alles klar",
+        "proceed": "Fortfahren",
+        "save": "Speichern",
+        "clear-files": "Auswahl löschen."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "Eine Datei wurde nicht hinzugefügt, da sie im falschen Format ist. | {n} Dateien wurden nicht hinzugefügt, da sie im falschen Format sind.",
+        "file-size": "Eine Datei wurde nicht hinzugefügt, da sie zu gross ist. | {n} Dateien wurden nicht hinzugefügt, da sie zu gross sind.",
+        "too-many-files": "Es kann nur eine Datei hinzugefügt werden. | Es können nicht mehr als {n} Dateien hinzugefügt werden."
+    },
+    "validation": {
+        "rules": {
+            "email": "Dieses Feld muss eine gültige Email-Adresse sein.",
+            "integer": "Dieses Feld muss eine Ganzzahl sein.",
+            "length": {
+                "min": "Der Text darf nicht weniger als {min} Zeichen enthalten.",
+                "max": "Der Text darf nicht mehr als {max} Zeichen enthalten.",
+                "min-max": "Der Text muss zwischen {min} und {max} Zeichen enthalten."
+            },
+            "matches": "Die Felder stimmen nicht überein.",
+            "number-range": {
+                "nan": "Dieses Feld muss eine Zahl sein.",
+                "min": "Die Zahl darf nicht kleiner als {min} sein.",
+                "max": "Die Zahl darf nicht grösser als {max} sein.",
+                "min-max": "Die Zahl muss im Bereich von {min} bis {max} liegen."
+            },
+            "option": "Dieses Feld muss eine Option aus der Liste sein.",
+            "password": {
+                "to-short": "Das Passwort muss aus mindestens 8 Zeichen bestehen.",
+                "no-lowercase": "Das Passwort muss einen Kleinbuchstaben enthalten.",
+                "no-uppercase": "Das Passwort muss einen Grossbuchstaben enthalten.",
+                "no-digits": "Das Passwort muss eine Ziffer enthalten.",
+                "no-special-chars": "Das Passwort muss ein Sonderzeichen enthalten.",
+                "unknown": "Dieses Feld erfüllt nicht die Anforderungen für ein Passwort."
+            },
+            "phone": "Dieses Feld muss eine gültige Telefonnummer sein.",
+            "required": "Dieses Feld ist ein Pflichtfeld.",
+            "regex": "Dieses Feld entspricht nicht dem geforderten Format."
+        }
+    }
+}

package/src/lib/i18n/en/vue-collection.json

@@ -0,0 +1,58 @@
+{
+    "title": {},
+    "subtitle": {},
+    "text": {
+        "loading-search-results": "Loading results...",
+        "no-search-results": "No results found for «{input}».",
+        "drag-n-drop-files": "Select a file or add it by drag & drop. | Select up to {n} files or add them by drag & drop.",
+        "files-selected": "No file selected. | One file selected. | {n} files selected."
+    },
+    "property": {},
+    "term": {},
+    "action": {
+        "search": "Search",
+        "select": "Select",
+        "remove": "Delete",
+        "cancel": "Cancel",
+        "all-right": "All right",
+        "proceed": "Continue",
+        "save": "Save",
+        "clear-files": "Clear. | Clear all."
+    },
+    "enum": {},
+    "error": {
+        "file-type": "One file has not been added as it is in the wrong format. | {n} files have not been added as they are in the wrong format.",
+        "file-size": "One file has not been added as it exceeds the maximum file size. | {n} files have not been added as they exceed the maximum file size.",
+        "too-many-files": "Only one file can be added. | Can not add more than {max} files."
+    },
+    "validation": {
+        "rules": {
+            "email": "This field must be a valid email address.",
+            "integer": "This field must be an integer.",
+            "length": {
+                "min": "The text must not have less than {min} characters.",
+                "max": "The text must not have more than {max} characters.",
+                "min-max": "The text must have a length between {min} and {max} characters."
+            },
+            "matches": "The fields don't match.",
+            "number-range": {
+                "nan": "This filed must be a number.",
+                "min": "The number must not be smaller than {min}.",
+                "max": "The number must not be bigger than {max}.",
+                "min-max": "The number must be in the range from {min} to {max}."
+            },
+            "option": "This field has to be an option from the list.",
+            "password": {
+                "to-short": "The password must have at least 8 characters.",
+                "no-lowercase": "The password must contain a lowercase letter.",
+                "no-uppercase": "The password must contain an uppercase letter.",
+                "no-digits": "The password must contain a digit.",
+                "no-special-chars": "The password must contain a special character.",
+                "unknown": "This field does not match the required password format."
+            },
+            "phone": "This field must be a valid phone number.",
+            "required": "This field is required.",
+            "regex": "This field does not conform to the required format."
+        }
+    }
+}

package/src/lib/i18n/index.ts

@@ -0,0 +1,54 @@
+import type { Nullish } from '../utils/utils'
+
+/**
+ * @see {@link trsl}
+ */
+export type TranslationFunction = typeof trsl
+
+/**
+ * @see {@link trslc}
+ */
+export type TranslationCountFunction = typeof trslc
+
+/**
+ * A `TranslationProvider` has to implement the two functions `trsl` and `trslc`.
+ */
+export type TranslationProvider = {
+    trsl: TranslationFunction
+    trslc: TranslationCountFunction
+}
+
+let provider: TranslationProvider | undefined = undefined
+
+/**
+ * Registeres a new translation provider for vue-collection.
+ * The translation provider should contain all vue-collection
+ * texts located under `i18n/<lang>/vue-collection.json`.
+ * @param newProvider
+ */
+export function registerTranslationProvider(newProvider: TranslationProvider): void {
+    provider = newProvider
+}
+
+/**
+ * Translates the specified key with the according message.
+ * @param key the key to translate.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ */
+export function trsl(key: string, params?: Record<string, unknown>): string {
+    return provider?.trsl(key, params) ?? key
+}
+
+/**
+ * Translates the specified key using pluralization.
+ * The provided `count`is automatically passed as the parameter `n` to the translation library.
+ * @param key the key to translate.
+ * @param count the count used for the pluralization.
+ * @param params formatting parameters for the message.
+ * @returns the translated message.
+ * @see trsl
+ */
+export function trslc(key: string, count: Nullish<number>, params?: Record<string, unknown>): string {
+    return provider?.trslc(key, count, params) ?? key
+}

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+import { createComponent, createView } from './utils/component'
+export { createComponent, createView }

package/src/lib/jsx.d.ts

@@ -0,0 +1,13 @@
+import type { VNode } from 'vue'
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            [elem: string]: any
+        }
+        type Element = VNode
+    }
+}
+
+export {}

package/src/lib/utils/__tests__/identifiable.spec.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from 'vitest'
+import { Id } from '../identifiable'
+
+const one = { id: 'id1', label: 'one' }
+const two = { id: 'id2', label: 'two' }
+const three = { id: 'id3', label: 'three' }
+const four = { id: 'id4', label: 'four' }
+const all = [one, two, three, four]
+
+describe('identifiable', () => {
+    test('find', () => {
+        expect(Id.find(all, 'id1')).toMatchObject(one)
+        expect(Id.find(all, 'id3')).toMatchObject(three)
+        // check if the first is picked if multiple
+        expect(Id.find([...all, { id: 'id2', label: 'new' }], 'id2')).toMatchObject(two)
+        // check if undefined is returned if not found
+        expect(Id.find(all, 'id')).toBeUndefined()
+    })
+
+    test('contains', () => {
+        expect(Id.contains(all, 'id1')).toBe(true)
+        expect(Id.contains(all, 'id3')).toBe(true)
+        expect(Id.contains(all, 'id5')).toBe(false)
+        expect(Id.contains(all, 'id')).toBe(false)
+    })
+
+    test('insert', () => {
+        const before = [one, two, three]
+        let modify = [...before]
+
+        let after = Id.insert(modify, two, one)
+        // Check if array is still the same
+        expect(after).toMatchObject(before)
+        // Check if the reference is the same
+        expect(after).toBe(modify)
+
+        modify = [...before]
+        after = Id.insert(modify, four, three)
+        expect(after).toMatchObject([one, two, three, four])
+
+        modify = [...before]
+        const twoModified = { id: 'id2', label: 'twoooo' }
+        after = Id.insert(modify, twoModified)
+        expect(after).toMatchObject([one, twoModified, three])
+    })
+
+    test('remove', () => {
+        const before = [one, two, three]
+        let modify = [...before]
+
+        let after = Id.remove(modify, 'id')
+        // Check if array is still the same
+        expect(after).toMatchObject(before)
+        // Check if the reference is the same
+        expect(after).toBe(modify)
+
+        modify = [...before]
+        after = Id.remove(modify, 'id2')
+        expect(after).toMatchObject([one, three])
+
+        modify = [one, two, three, four]
+        after = Id.remove(modify, 'id1', 'id3')
+        expect(after).toMatchObject([two, four])
+    })
+
+    test('areSameArrays', () => {
+        const allDifferent = all.map(item => ({ ...item, label: 'different' }))
+        expect(Id.areSameArrays(all, allDifferent)).toBe(true)
+        expect(Id.areSameArrays(all, allDifferent.slice(1))).toBe(false)
+        expect(Id.areSameArrays(all, allDifferent.reverse())).toBe(false)
+    })
+})

package/src/lib/utils/__tests__/validation.spec.ts

@@ -0,0 +1,92 @@
+import { trsl } from '../../i18n'
+import { describe, expect, test } from 'vitest'
+import { email, external, matches, option, password, regex, required } from '../validation'
+
+const expectValid = (test: unknown) => expect(test).toMatchObject({ isValid: true })
+const expectInvalid = (test: unknown, errKey: string) =>
+    expect(test).toMatchObject({ isValid: false, errorMessage: trsl(`vue-collection.validation.rules.${errKey}`) })
+
+describe('validation', () => {
+    test('required', () => {
+        expectValid(required('_'))
+        expectValid(required(' i '))
+        expectValid(required('hellooh'))
+        expectValid(required('`'))
+
+        expectInvalid(required(undefined), 'required')
+        expectInvalid(required(null), 'required')
+        expectInvalid(required(''), 'required')
+        expectInvalid(required(' '), 'required')
+    })
+
+    test('email', () => {
+        expectValid(email(''))
+        expectValid(email('_@_.ch'))
+        expectValid(email('dfadfasd.dfad.fdak@_.ch'))
+        expectValid(email('dfadfasd.dfad.fdak@dfdaf.chdl.ch'))
+        expectValid(email('deslek-djsl@dfdaf-cas.ch'))
+
+        expectInvalid(email('a'), 'email')
+        expectInvalid(email('a@'), 'email')
+        expectInvalid(email('a@d'), 'email')
+        expectInvalid(email('a@d.c'), 'email')
+        expectInvalid(email('a.ch'), 'email')
+    })
+
+    test('password', () => {
+        expectValid(password(''))
+        expectValid(password('Password1+'))
+        expectValid(password('+Password1'))
+        expectValid(password('1+Password'))
+        expectValid(password('assword1+P'))
+        expectValid(password('12p+D678'))
+
+        expectInvalid(password('p'), 'password.to-short')
+        expectInvalid(password('Pword1+'), 'password.to-short')
+        expectInvalid(password('PASSWORD1+'), 'password.no-lowercase')
+        expectInvalid(password('password1+'), 'password.no-uppercase')
+        expectInvalid(password('Password+'), 'password.no-digits')
+        expectInvalid(password('Password1'), 'password.no-special-chars')
+    })
+
+    test('matches', () => {
+        const testValid = [undefined, null, '', '1', 'hello', 'So cooool']
+        testValid.forEach(value => {
+            expectValid(matches(value)(value))
+        })
+
+        // This rule does not allow the input to be falsy, always has to match.
+        const testInvalid = ['', '1', 'hi', 'noice', 'not-null', 'not-null', 'not-null']
+        const checkInvalid = ['ho', '11', 'HI', 'noices', '', null, undefined]
+
+        testInvalid.forEach((value, index) => {
+            expectInvalid(matches(value)(checkInvalid[index]), 'matches')
+        })
+    })
+
+    test('regex', () => {
+        expectValid(regex(/\d+/)('123'))
+        expectValid(regex(/\d*/)(null))
+        expectValid(regex(/\d+/)(null))
+
+        expectInvalid(regex(/\d+/)('abc'), 'regex')
+    })
+
+    test('option', () => {
+        const options1 = ['a', 'b', 'ab', 'ac', 'a']
+        expectValid(option(options1)(null))
+        expectValid(option(options1)('a'))
+        expectValid(option(options1)('b'))
+        expectValid(option(options1)('ab'))
+
+        expectInvalid(option(options1)('c'), 'option')
+        expectInvalid(option(options1)('A'), 'option')
+        expectInvalid(option(options1)('aB'), 'option')
+    })
+
+    test('external', () => {
+        expectValid(external(true, trsl('vue-collection.validation.rules.phone'))('hi'))
+        expectValid(external(false, trsl('vue-collection.validation.rules.phone'))(null))
+        expectInvalid(external(false, trsl('vue-collection.validation.rules.phone'))('hi'), 'phone')
+    })
+})

package/src/lib/utils/breakpoints.ts

@@ -0,0 +1,47 @@
+import { computed, ref, type ComputedRef } from 'vue'
+
+export type TWBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+export const breakpoints: Readonly<Record<TWBreakpoint, number>> = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    '2xl': 1536,
+}
+
+export const bodyWidth = ref(document.body.clientWidth)
+
+/**
+ * This function has to be called once in the app two ensure that the breakpoint utilities actually update.
+ * It sets a `window.onresize` listener.
+ */
+export function addDocumentResizeEventListener(): void {
+    window.onresize = () => {
+        bodyWidth.value = document.body.clientWidth
+    }
+}
+
+/**
+ * Returns a ref whose value is `true` as long as the `document.body.clientWitdh` is above the specified breakpoint.
+ */
+export function isWidthBreakpoint(breakpoint: TWBreakpoint): ComputedRef<boolean> {
+    switch (breakpoint) {
+        case 'sm':
+            return isWidthSm
+        case 'md':
+            return isWidthMd
+        case 'lg':
+            return isWidthLg
+        case 'xl':
+            return isWidthXl
+        case '2xl':
+            return isWidth2xl
+    }
+}
+
+export const isWidth2xl = computed(() => bodyWidth.value > breakpoints['2xl'])
+export const isWidthXl = computed(() => bodyWidth.value > breakpoints.xl)
+export const isWidthLg = computed(() => bodyWidth.value > breakpoints.lg)
+export const isWidthMd = computed(() => bodyWidth.value > breakpoints.md)
+export const isWidthSm = computed(() => bodyWidth.value > breakpoints.sm)

package/src/lib/utils/component.tsx

@@ -0,0 +1,131 @@
+// eslint-disable @typescript-eslint/explicit-module-boundary-types
+// eslint-disable-next-line vue/prefer-import-from-vue
+import type { LooseRequired } from '@vue/shared'
+import {
+    defineComponent,
+    reactive,
+    toRef,
+    type ComponentObjectPropsOptions,
+    type ExtractPropTypes,
+    type RenderFunction,
+    type SetupContext,
+    type ToRefs,
+    type UnwrapNestedRefs,
+    type Slots,
+    toRefs,
+    ref,
+} from 'vue'
+import type { AnyObject } from './utils'
+
+type Data = Record<string, unknown>
+export type Props<T extends Data = Data> = ComponentObjectPropsOptions<T>
+
+/**
+ * `ExtractedProps` maps a prop object to the props, which are received in the `setup` function of a components.
+ */
+export type ExtractedProps<T extends Props> = Readonly<LooseRequired<Readonly<ExtractPropTypes<T>>>>
+
+/**
+ * Components should be created using this helper function.
+ * It only takes three arguments, the name and the props of the component and the setup function.
+ * All other arguments which the {@link defineComponent} method of vue may provide,
+ * should not be used for a better consistency across all components.
+ * @param name the name of the component, should be more than one word.
+ * @param props the props of the component.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createComponent<T extends Props>(
+    name: string,
+    props: T,
+    setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>
+) {
+    // Vue 3.5's defineComponent has strict type requirements that don't align with our simplified API.
+    // The type assertion is necessary because the generic setup function signature doesn't match
+    // Vue's complex overloaded defineComponent types, even though the runtime behavior is correct.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return defineComponent({ name, props, emits: [], setup } as any)
+}
+
+/**
+ * When using this function, the created component will make available all props
+ * specifiedin `slotPropKeys` as slot. In this way, they can be used by either setting
+ * the prop directly or by using a slot with the same name. This is useful for older
+ * components (in `.vue` files), because they are dependent on slots.
+ * @see {@link createComponent}
+ */
+export function createComponentWithSlots<T extends Props>(
+    name: string,
+    props: T,
+    slotPropKeys: SlotPropsKeys<ExtractedProps<T>>,
+    setup: (props: ExtractedProps<T>, context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>
+) {
+    const newSetup: typeof setup = (props, context) => {
+        const slottedProps = createSlotProps(props, context.slots, ...slotPropKeys)
+        return setup(slottedProps, context)
+    }
+    return createComponent(name, props, newSetup)
+}
+
+/**
+ * Views should be created using this helper function. Views are special components, which don't have props.
+ * They are often the parent objects in a view hierarchy and contain many components.
+ * This function is syntactic sugar to create views and just calls {@link createComponent}.
+ * @param name the name of the component, should be more than one word.
+ * @param setup the setup function, which will be called when the component is mounted.
+ * @returns the created vue-component.
+ */
+export function createView(
+    name: string,
+    setup: (context: SetupContext<never[]>) => RenderFunction | Promise<RenderFunction>
+) {
+    return defineComponent({ name, emits: [], setup: (props, context) => setup(context) })
+}
+
+/**
+ * Extracts props from another prop object and returns a reactive object with the specified props.
+ * @param props the props to extract from
+ * @param keys the keys to extract from the props
+ * @returns the new object with the specified props
+ * @example
+ * const parentProps = { title: 'hi', text: 'ho' }
+ * const childProps = extractProps(parentProps, 'title')
+ * console.log(childProps) // { title: 'hi' }
+ */
+export function extractProps<T extends Record<string, unknown>>(
+    props: T,
+    ...keys: (keyof T)[]
+): UnwrapNestedRefs<Partial<ToRefs<T>>> {
+    const partial: Partial<ToRefs<T>> = {}
+    for (const key of keys) partial[key] = toRef(props, key)
+    return reactive(partial)
+}
+
+/*
+ * ---------- Slot Helpers ----------
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type SlotFunction<Args extends any[] = any[]> = (...args: Args) => JSX.Element
+
+/**
+ * Filters object T to only have properties of type K.
+ */
+type FilterObject<T, K> = {
+    [P in keyof T as T[P] extends K ? P : never]: T[P]
+}
+
+type SlotPropsKeys<T extends AnyObject> = (keyof FilterObject<T, SlotFunction | undefined>)[]
+
+function createSlotProps<T extends AnyObject, U extends SlotPropsKeys<T>>(props: T, slots: Slots, ...keys: U): T {
+    // create refs, don't touch all props which are not slots
+    const newProps = toRefs(props)
+    keys.forEach(key => {
+        // if a slot is set once, it is basically always set. The changing content is not a problem as it is inside the function.
+        const slot = slots[key as string]
+        // if the slot is set, overwrite the props
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (slot) newProps[key] = ((...args: any) => <>{slot?.(...args)}</>) as any
+    })
+    return ref(newProps).value
+}

package/src/lib/utils/deferred.ts

@@ -0,0 +1,28 @@
+type PromiseResolve<T> = (value: T | PromiseLike<T>) => void
+type PromiseReject = (reason?: unknown) => void
+
+export type DeferredPromise<T> = {
+    promise: Promise<T>
+    resolve: PromiseResolve<T>
+    reject: PromiseReject
+}
+
+/**
+ * Utlitity to return a deferred promise, which can be resolved from outside.
+ * @returns promise, resolve and reject
+ */
+export function deferred<T>(): DeferredPromise<T> {
+    let resolve!: PromiseResolve<T>
+    let reject!: PromiseReject
+
+    const promise = new Promise<T>((_resolve, _reject) => {
+        resolve = _resolve
+        reject = _reject
+    })
+
+    return {
+        promise,
+        resolve,
+        reject,
+    }
+}