refactor: improve build resolution for modules

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2021-07-06T05:25:10.503Z
+ * This file was generated on 2021-07-06T07:42:41.009Z
  */
 
 import { ChakraProps } from '@chakra-ui/vue-system'

packages/c-modal/examples/drawer-simple.vue

@@ -10,7 +10,6 @@
 </template>
 
 <script setup lang="ts">
-import { CDrawer } from '../src/c-drawer'
 import { useToggle } from '@vueuse/core'
 
 const [isOpen, toggleOpen] = useToggle(false)

packages/c-modal/examples/drawer-with-much-content.vue

@@ -117,7 +117,6 @@
 </template>
 
 <script setup lang="ts">
-import { CDrawer } from '../src/c-drawer'
 import { useToggle } from '@vueuse/core'
 
 const [isOpen, toggleOpen] = useToggle(false)

packages/c-modal/src/c-alert-dialog.tsx

@@ -1,5 +1,5 @@
 import { ComponentWithProps, DeepPartial } from '@chakra-ui/vue-system'
-import { defineComponent, PropType, h, ref, watch } from 'vue'
+import { defineComponent, PropType, h, computed } from 'vue'
 import {
   CModal,
   CModalContent,
@@ -23,37 +23,34 @@ export const CAlertDialog: ComponentWithProps<
   name: 'CAlertDialog',
   props: {
     ...modalProps,
-    leastDestructiveRef: [String, Object] as PropType<
+    leastDestructiveRef: [Function, String] as PropType<
       CModalProps['initialFocusRef']
     >,
   },
   emits: ['update:modelValue', 'close', 'escape'],
   setup(props, { attrs, slots, emit }) {
+    const isOpen = computed(() => props.modelValue!)
+
     const handleUpdateModelValue = (val: boolean) => {
       emit('update:modelValue', val)
     }
-    const closeDrawer = () => {
-      emit('update:modelValue', false)
-    }
-
-    const isOpen = ref(props.modelValue)
-
-    watch(isOpen, (newVal) => {
-      emit('update:modelValue', newVal)
-    })
 
-    return () => (
-      <CModal
-        {...props}
-        {...attrs}
-        label='alertdialog'
-        v-model={isOpen.value}
-        onClose={closeDrawer}
-        initialFocusRef={props.leastDestructiveRef}
-      >
-        {slots}
-      </CModal>
-    )
+    return () => {
+      const { modelValue, "onUpdate:modelValue": updateModelValue, ...rest } = props
+      return (
+        <CModal
+          {...rest}
+          {...attrs}
+          modelValue={isOpen.value}
+          /* eslint-disable-next-line */
+          onUpdate:modelValue={handleUpdateModelValue}
+          label="alertdialog"
+          initialFocusRef={props.leastDestructiveRef}
+        >
+          {slots}
+        </CModal>
+      )
+    }
   },
 })
 

packages/c-modal/src/c-drawer.tsx

@@ -8,6 +8,8 @@ import {
   withDirectives,
   watch,
   ref,
+  Ref,
+  watchEffect,
 } from 'vue'
 import {
   SlideDirection,
@@ -77,18 +79,11 @@ export const CDrawer: ComponentWithProps<
   },
   emits: ['update:modelValue', 'close', 'escape'],
   setup(props, { slots, attrs, emit }) {
+    const isOpen = computed(() => props.modelValue!)
+
     const handleUpdateModelValue = (val: boolean) => {
       emit('update:modelValue', val)
     }
-    const closeDrawer = () => {
-      emit('update:modelValue', false)
-    }
-
-    const isOpen = ref(props.modelValue)
-
-    watch(isOpen, (newVal) => {
-      emit('update:modelValue', newVal)
-    })
 
     const context: CDrawerContext = computed(() => ({
       placement: props.placement,
@@ -99,18 +94,23 @@ export const CDrawer: ComponentWithProps<
     const drawerStyleConfig = theme.components?.Drawer
 
     CDrawerContextProvider(context)
-    return () => (
-      <CModal
-        v-model={isOpen.value}
-        onClose={closeDrawer}
-        {...props}
-        {...attrs}
-        label='drawer'
-        styleConfig={drawerStyleConfig}
-      >
-        {slots}
-      </CModal>
-    )
+
+    return () => {
+      const { modelValue, "onUpdate:modelValue": updateModelValue, ...rest } = props
+      return (
+        <CModal
+          {...rest}
+          {...attrs}
+          modelValue={isOpen.value}
+          /* eslint-disable-next-line */
+          onUpdate:modelValue={handleUpdateModelValue}
+          label='drawer'
+          styleConfig={drawerStyleConfig}
+        >
+          {slots}
+        </CModal>
+      )
+    }
   },
 })
 
@@ -166,7 +166,7 @@ export const CDrawerContent: ComponentWithProps<
       })
     }
 
-    watch(modelValue, (newVal) => {
+    watch(modelValue!, (newVal) => {
       if (!newVal) {
         leave(() => null)
       }
@@ -183,32 +183,31 @@ export const CDrawerContent: ComponentWithProps<
 
     const transitionVariant = computed(() => placementToVariant(placement!))
 
-    return () => (
-      <chakra.div
-        {...containerProps.value}
-        __label="modal__content-container"
-        __css={dialogContainerStyles.value}
-      >
-        {modelValue.value &&
-          (() =>
+    return () => {
+        return <chakra.div
+          {...containerProps.value}
+          __label="modal__content-container"
+          __css={dialogContainerStyles.value}
+        >
+          {modelValue!.value &&
             withDirectives(
               <chakra.section
                 {...dialogProps.value}
                 style={transitionStyles.value}
                 __css={dialogStyles.value}
                 {...attrs}
               >
-                {() => slots?.default?.()}
+                {slots}
               </chakra.section>,
               [
                 [
                   MotionDirective(TransitionVariants[transitionVariant.value]),
                   transitionId.value,
                 ],
               ]
-            ))}
-      </chakra.div>
-    )
+            )}
+        </chakra.div>
+    }
   },
 })
 

packages/c-modal/src/c-modal.ts

@@ -24,6 +24,7 @@ import {
   withDirectives,
   Component,
   onErrorCaptured,
+  Ref,
 } from 'vue'
 import {
   chakra,
@@ -70,7 +71,10 @@ export interface ModalOptions
 }
 
 export interface CModalProps
-  extends Omit<UnwrapRef<UseModalOptions>, 'closeModal' | 'handleEscape'>,
+  extends Omit<
+      UnwrapRef<UseModalOptions>,
+      'closeModal' | 'handleEscape' | 'modelValue'
+    >,
     Pick<CPortalProps, 'label'>,
     ModalOptions {
   /**
@@ -146,13 +150,15 @@ type IUseModalOptions = ToRefs<
     | 'allowPinchZoom'
     | 'trapFocus'
     | 'autoFocus'
+    | 'modelValue'
   >
 >
 
 interface CModalContext extends IUseModalOptions, UseModalReturn {
   dialogRef: (el: TemplateRef) => void
   overlayRef: (el: TemplateRef) => void
   closeModal: () => void
+  modelValue: Ref<boolean>
 }
 
 type CModalReactiveContext = ComputedRef<CModalContext>
@@ -310,7 +316,7 @@ export const CModalContent: ComponentWithProps<
       })
     }
 
-    watch(modelValue, (newVal) => {
+    watch(modelValue!, (newVal) => {
       if (!newVal) {
         leave(() => null)
       }
@@ -343,7 +349,7 @@ export const CModalContent: ComponentWithProps<
         }),
         dialogContainerProps.value({ emit }),
         () => [
-          modelValue.value &&
+          modelValue!.value &&
             withDirectives(
               h(
                 chakra('section', {

packages/c-modal/src/use-modal.ts

@@ -137,7 +137,7 @@ export function useModal(options: UseModalOptions) {
         initialFocus = resolvedInitialFocusRef?.$el || resolvedInitialFocusRef
       }
     }
-    console.log({ initialFocus })
+
     return initialFocus
   })
 

packages/c-modal/tests/alertdialog.cy.tsx

@@ -90,15 +90,15 @@ describe('AlertDialog', () => {
 
   /**
    * Why are we skipping this test for now?
-   * 
+   *
    * There seems to be a bug in Cypress that was
    * introduced with the latest upgrade to Vue 3.0.11
    * with regards to forming focus traps.
-   * 
+   *
    * The actual implementation in the browser works,
    * but this test fails for a reason that I am yet
    * to discover.
-   * 
+   *
    * This should be treated as important however.
    */
   it.skip('should trap focus while open', () => {

packages/c-modal/tests/modal.cy.tsx

@@ -88,15 +88,15 @@ describe('Modal', () => {
 
   /**
    * Why are we skipping this test for now?
-   * 
+   *
    * There seems to be a bug in Cypress that was
    * introduced with the latest upgrade to Vue 3.0.11
    * with regards to forming focus traps.
-   * 
+   *
    * The actual implementation in the browser works,
    * but this test fails for a reason that I am yet
    * to discover.
-   * 
+   *
    * This should be treated as important however.
    */
   it.skip('should set initial focus ref', () => {
@@ -128,21 +128,20 @@ describe('Modal', () => {
       )
     )
 
-    cy.get('[data-testid="initial-focus"]')
-      .should('have.focus')
+    cy.get('[data-testid="initial-focus"]').should('have.focus')
   })
 
   /**
    * Why are we skipping this test for now?
-   * 
+   *
    * There seems to be a bug in Cypress that was
    * introduced with the latest upgrade to Vue 3.0.11
    * with regards to forming focus traps.
-   * 
+   *
    * The actual implementation in the browser works,
    * but this test fails for a reason that I am yet
    * to discover.
-   * 
+   *
    * This should be treated as important however.
    */
   it.skip('should trap focus while open', () => {
@@ -166,17 +165,17 @@ describe('Modal', () => {
       ))
     )
 
-    cy
-      .wait(1000)
-      .get('[data-testid="close-button"]').should('have.focus')
+    cy.wait(1000)
+      .get('[data-testid="close-button"]')
+      .should('have.focus')
       .log('Trigger tab() 20 times')
-        new Array(20).forEach(() => {
-          // @ts-expect-error Tab action
-          cy.focused().tab()
-        })
-      cy.get('[data-testid="dialog"]').then((el) => {
-        expect(el[0].contains(document.activeElement)).to.be.true
-      })
+    new Array(20).forEach(() => {
+      // @ts-expect-error Tab action
+      cy.focused().tab()
+    })
+    cy.get('[data-testid="dialog"]').then((el) => {
+      expect(el[0].contains(document.activeElement)).to.be.true
+    })
   })
 
   it('should return focus on close', () => {

vite.config.ts

@@ -21,6 +21,7 @@ const resolver = {
   CModalBody: 'c-modal',
   CModalFooter: 'c-modal',
   CModalCloseButton: 'c-modal',
+  CDrawer: 'c-modal',
   CDrawerOverlay: 'c-modal',
   CDrawerFocusScope: 'c-modal',
   CDrawerContent: 'c-modal',
@@ -116,7 +117,9 @@ export default defineConfig({
                   importName: name,
                   path: path.join(
                     path.resolve(__dirname, './packages'),
-                    `${resolver[name] || kebabCase(name)}/src`
+                    !(process.env.NODE_ENV === 'production')
+                      ? `${resolver[name] || kebabCase(name)}/src`
+                      : '@chakra-ui/vue-next'
                   ),
                 }
             },