feat: create eagerComputed component

perf(useBooleanish): use eagerComputed instead since the resolved type usually can benefit from it

refactor(useFormCheck): strongly type some things, and remove weakly typed others

test: remove 'effect' test since it's now a shallowRef

Author: VividLemon

packages/bootstrap-vue-3/src/composables/eagerComputed.ts

@@ -0,0 +1,21 @@
+import {readonly, Ref, shallowRef, watchEffect, WatchOptionsBase} from 'vue'
+
+/**
+ * Eagerly loaded version of Vue computed. Code ported from Vueuse
+ *
+ * @link https://dev.to/linusborg/vue-when-a-computed-property-can-be-the-wrong-tool-195j
+ */
+export default <T>(fn: () => T, options?: WatchOptionsBase): Readonly<Ref<T>> => {
+  const result = shallowRef()
+  watchEffect(
+    () => {
+      result.value = fn()
+    },
+    {
+      ...options,
+      flush: options?.flush ?? 'sync',
+    }
+  )
+
+  return readonly(result)
+}

packages/bootstrap-vue-3/src/composables/index.ts

@@ -1,3 +1,4 @@
+import eagerComputed from './eagerComputed'
 import useAlignment from './useAlignment'
 import useBooleanish from './useBooleanish'
 import {createBreadcrumb, useBreadcrumb} from './useBreadcrumb'
@@ -17,6 +18,7 @@ import {normalizeOptions} from './useFormSelect'
 import useId from './useId'
 
 export {
+  eagerComputed,
   useAlignment,
   createBreadcrumb,
   useBreadcrumb,
@@ -37,6 +39,7 @@ export {
 }
 
 export default {
+  eagerComputed,
   useAlignment,
   createBreadcrumb,
   useBooleanish,

packages/bootstrap-vue-3/src/composables/useBooleanish.ts

@@ -1,15 +1,19 @@
 import type {Booleanish} from '../types'
-import {computed, ComputedRef, Ref} from 'vue'
+import {Ref} from 'vue'
 import {resolveBooleanish} from '../utils'
+import eagerComputed from './eagerComputed'
 
 // function useBooleanish<T>(el: Ref<Booleanish | T>): ComputedRef<boolean | T>
 // This may possibily be used in Vue 3.3 to include Booleanish and complex types ie Booleanish | string
-function useBooleanish(el: Ref<Booleanish>): ComputedRef<boolean>
-function useBooleanish(el: Ref<Booleanish | undefined>): ComputedRef<boolean | undefined>
+/**
+ * Resolves a Booleanish type reactively to type boolean
+ */
+function useBooleanish(el: Ref<Booleanish>): Readonly<Ref<boolean>>
+function useBooleanish(el: Ref<Booleanish | undefined>): Readonly<Ref<boolean | undefined>>
 function useBooleanish(
   el: Ref<Booleanish> | Ref<Booleanish | undefined>
-): ComputedRef<boolean> | ComputedRef<boolean | undefined> {
-  return computed(() => (el.value === undefined ? undefined : resolveBooleanish(el.value)))
+): Readonly<Ref<boolean>> | Readonly<Ref<boolean | undefined>> {
+  return eagerComputed(() => (el.value === undefined ? undefined : resolveBooleanish(el.value)))
 }
 
 export default useBooleanish

packages/bootstrap-vue-3/src/composables/useFormCheck.ts

@@ -12,28 +12,24 @@ const getClasses = (items: {
   inline?: boolean
   switch?: boolean
   size?: InputSize
-}): ComputedRef =>
+}) =>
   computed(() => ({
     'form-check': !items.plain && !items.button,
-    'form-check-inline': items.inline,
-    'form-switch': items.switch,
-    [`form-control-${items.size}`]: items.size && items.size !== 'md',
+    'form-check-inline': items.inline === true,
+    'form-switch': items.switch === true,
+    [`form-control-${items.size}`]: items.size !== undefined && items.size !== 'md',
   }))
 
 /**
  * @param items must be a reactive object ex: reactive({ plain: toRef(plainBoolean, 'value')})
  * @returns
  */
-const getInputClasses = (items: {
-  plain?: boolean
-  button?: boolean
-  state?: boolean
-}): ComputedRef =>
+const getInputClasses = (items: {plain?: boolean; button?: boolean; state?: boolean}) =>
   computed(() => ({
     'form-check-input': !items.plain && !items.button,
     'is-valid': items.state === true,
     'is-invalid': items.state === false,
-    'btn-check': items.button,
+    'btn-check': items.button === true,
   }))
 
 /**
@@ -45,26 +41,22 @@ const getLabelClasses = (items: {
   button?: boolean
   buttonVariant?: ButtonVariant
   size?: InputSize
-}): ComputedRef =>
+}) =>
   computed(() => ({
     'form-check-label': !items.plain && !items.button,
-    'btn': items.button,
-    [`btn-${items.buttonVariant}`]: items.button,
+    'btn': items.button === true,
+    [`btn-${items.buttonVariant}`]: items.button === true && items.buttonVariant !== undefined,
     [`btn-${items.size}`]: items.button && items.size && items.size !== 'md',
   }))
 
 /**
  * @param items must be a reactive object ex: reactive({ plain: toRef(plainBoolean, 'value')})
  * @returns
  */
-const getGroupAttr = (items: {
-  required?: boolean
-  ariaInvalid?: AriaInvalid
-  state?: boolean
-}): ComputedRef =>
+const getGroupAttr = (items: {required?: boolean; ariaInvalid?: AriaInvalid; state?: boolean}) =>
   computed(() => ({
     'aria-invalid': resolveAriaInvalid(items.ariaInvalid, items.state),
-    'aria-required': items.required?.toString() === 'true' ? 'true' : null,
+    'aria-required': items.required === true ? true : undefined,
   }))
 
 /**
@@ -76,12 +68,12 @@ const getGroupClasses = (items: {
   buttons?: boolean
   stacked?: boolean
   size?: InputSize
-}): ComputedRef =>
+}) =>
   computed(() => ({
-    'was-validated': items.validated,
-    'btn-group': items.buttons && !items.stacked,
-    'btn-group-vertical': items.stacked,
-    [`btn-group-${items.size}`]: items.size,
+    'was-validated': items.validated === true,
+    'btn-group': items.buttons === true && !items.stacked,
+    'btn-group-vertical': items.stacked === true,
+    [`btn-group-${items.size}`]: items.size !== undefined,
   }))
 
 // TODO this function is similarly used in BTabs and may be capable of being a util function
@@ -155,8 +147,8 @@ const bindGroupProps = (
   el: any,
   idx: number,
   props: any,
-  computedName: ComputedRef,
-  computedId: ComputedRef
+  computedName: ComputedRef<string>,
+  computedId: ComputedRef<string>
 ): any => ({
   ...el,
   props: {

packages/bootstrap-vue-3/tests/composables/useBooleanish.spec.ts

@@ -11,12 +11,6 @@ describe('useBooleanish blackbox test', () => {
     expect(value).toHaveProperty('value')
   })
 
-  it('value to contain property effect', () => {
-    const prop: {value: Booleanish} = {value: 'false'}
-    const value = useBooleanish(toRef(prop, 'value'))
-    expect(value).toHaveProperty('effect')
-  })
-
   it("value to return bool false, when 'false'", () => {
     const prop: {value: Booleanish} = {value: 'false'}
     const value = useBooleanish(toRef(prop, 'value'))