refactor(useBreakpoints): remove reactive object

until we come up with a unified way to unwrap these in templates
I'd rather keep the API similar across composables

Author: johnleider

apps/docs/src/components/app/AppBanner.vue

@@ -18,7 +18,7 @@
     <AppIcon icon="alert" :size="14" />
 
     <div>
-      You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile">Some features may not work as expected.</span>
+      You are viewing Pre-Alpha documentation. <span v-if="!breakpoints.isMobile.value">Some features may not work as expected.</span>
     </div>
   </Atom>
 </template>

apps/docs/src/components/app/AppBar.vue

@@ -32,7 +32,7 @@
   <Atom
     :as
     class="app-header flex items-center justify-between h-[48px] fixed left-0 top-[24px] right-0 px-3 transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile && 'left-0'"
+    :class="breakpoints.isMobile.value && 'left-0'"
   >
     <div class="flex items-center gap-1">
       <img
@@ -44,7 +44,7 @@
       >
 
       <AppIcon
-        v-if="breakpoints.isMobile"
+        v-if="breakpoints.isMobile.value"
         class="pa-1 cursor-pointer"
         :icon="app.drawer ? 'close' : 'menu'"
         @click="app.drawer = !app.drawer"

apps/docs/src/components/app/AppFooter.vue

@@ -14,7 +14,7 @@
   <Atom
     :as
     class="app-footer flex items-center justify-between h-[24px] fixed bottom-0 left-[220px] right-0 px-3 text-xs bg-surface border-t"
-    :class="breakpoints.isMobile && 'left-0'"
+    :class="breakpoints.isMobile.value && 'left-0'"
   >
     <DocsLastCommit />
 

apps/docs/src/components/app/AppMain.vue

@@ -7,7 +7,7 @@
 <template>
   <div
     class="pa-4 pb-6 mt-[72px] transition-margin duration-200 ease-in-out"
-    :class="breakpoints.isMobile ? 'ml-0' : 'ml-[220px]'"
+    :class="breakpoints.isMobile.value ? 'ml-0' : 'ml-[220px]'"
   >
     <div class="max-w-[688px] mx-auto pb-4">
       <router-view />

apps/docs/src/components/app/AppNav.vue

@@ -23,8 +23,8 @@
     :as
     class="bg-4 app-nav flex flex-col fixed top-[72px] w-[220px] overflow-y-auto py-4 transition-transform duration-200 ease-in-out"
     :class="[
-      breakpoints.isMobile && !app.drawer ? 'translate-x-[-100%]' : 'translate-x-0',
-      breakpoints.isMobile ? 'top-[72px] bottom-[24px]' : 'top-[24px] bottom-0'
+      breakpoints.isMobile.value && !app.drawer ? 'translate-x-[-100%]' : 'translate-x-0',
+      breakpoints.isMobile.value ? 'top-[72px] bottom-[24px]' : 'top-[24px] bottom-0'
     ]"
   >
     <ul class="flex gap-2 flex-col">

packages/0/src/composables/useBreakpoints/index.test.ts

@@ -39,7 +39,7 @@ const mockWatch = vi.mocked(watch)
 const mockOnScopeDispose = vi.mocked(onScopeDispose)
 const mockUseHydration = vi.mocked(useHydration)
 
-describe.skip('useBreakpoints', () => {
+describe('useBreakpoints', () => {
   let originalWindow: any
   let mockWindow: any
 
@@ -101,16 +101,16 @@ describe.skip('useBreakpoints', () => {
 
       const context = createBreakpoints()
 
-      expect(context.name).toBe('xs')
-      expect(context.width).toBe(0)
-      expect(context.height).toBe(0)
-      expect(context.isMobile).toBe(true)
-      expect(context.xs).toBe(true)
-      expect(context.sm).toBe(false)
-      expect(context.md).toBe(false)
-      expect(context.lg).toBe(false)
-      expect(context.xl).toBe(false)
-      expect(context.xxl).toBe(false)
+      expect(context.name.value).toBe('xs')
+      expect(context.width.value).toBe(0)
+      expect(context.height.value).toBe(0)
+      expect(context.isMobile.value).toBe(true)
+      expect(context.xs.value).toBe(true)
+      expect(context.sm.value).toBe(false)
+      expect(context.md.value).toBe(false)
+      expect(context.lg.value).toBe(false)
+      expect(context.xl.value).toBe(false)
+      expect(context.xxl.value).toBe(false)
     })
 
     it('should accept custom breakpoint options', () => {
@@ -134,7 +134,7 @@ describe.skip('useBreakpoints', () => {
 
       const context = createBreakpoints(customOptions)
 
-      expect(context.isMobile).toBeDefined()
+      expect(context.isMobile.value).toBeDefined()
     })
 
     it('should register onMounted callback when in component context', () => {
@@ -200,8 +200,8 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.width).toBe(1200)
-      expect(context.height).toBe(800)
+      expect(context.width.value).toBe(1200)
+      expect(context.height.value).toBe(800)
     })
   })
 
@@ -217,12 +217,12 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xs')
-      expect(context.xs).toBe(true)
-      expect(context.sm).toBe(false)
-      expect(context.isMobile).toBe(true)
-      expect(context.smAndUp).toBe(false)
-      expect(context.smAndDown).toBe(true)
+      expect(context.name.value).toBe('xs')
+      expect(context.xs.value).toBe(true)
+      expect(context.sm.value).toBe(false)
+      expect(context.isMobile.value).toBe(true)
+      expect(context.smAndUp.value).toBe(false)
+      expect(context.smAndDown.value).toBe(true)
     })
 
     it('should detect sm breakpoint correctly', () => {
@@ -236,14 +236,14 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('sm')
-      expect(context.xs).toBe(false)
-      expect(context.sm).toBe(true)
-      expect(context.md).toBe(false)
-      expect(context.isMobile).toBe(true)
-      expect(context.smAndUp).toBe(true)
-      expect(context.smAndDown).toBe(true)
-      expect(context.mdAndUp).toBe(false)
+      expect(context.name.value).toBe('sm')
+      expect(context.xs.value).toBe(false)
+      expect(context.sm.value).toBe(true)
+      expect(context.md.value).toBe(false)
+      expect(context.isMobile.value).toBe(true)
+      expect(context.smAndUp.value).toBe(true)
+      expect(context.smAndDown.value).toBe(true)
+      expect(context.mdAndUp.value).toBe(false)
     })
 
     it('should detect md breakpoint correctly', () => {
@@ -257,11 +257,11 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('md')
-      expect(context.md).toBe(true)
-      expect(context.isMobile).toBe(false) // md is default mobile breakpoint
-      expect(context.mdAndUp).toBe(true)
-      expect(context.mdAndDown).toBe(true)
+      expect(context.name.value).toBe('md')
+      expect(context.md.value).toBe(true)
+      expect(context.isMobile.value).toBe(false) // md is default mobile breakpoint
+      expect(context.mdAndUp.value).toBe(true)
+      expect(context.mdAndDown.value).toBe(true)
     })
 
     it('should detect lg breakpoint correctly', () => {
@@ -275,12 +275,12 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('lg')
-      expect(context.lg).toBe(true)
-      expect(context.isMobile).toBe(false)
-      expect(context.lgAndUp).toBe(true)
-      expect(context.lgAndDown).toBe(true)
-      expect(context.xlAndUp).toBe(false)
+      expect(context.name.value).toBe('lg')
+      expect(context.lg.value).toBe(true)
+      expect(context.isMobile.value).toBe(false)
+      expect(context.lgAndUp.value).toBe(true)
+      expect(context.lgAndDown.value).toBe(true)
+      expect(context.xlAndUp.value).toBe(false)
     })
 
     it('should detect xl breakpoint correctly', () => {
@@ -294,12 +294,12 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xl')
-      expect(context.xl).toBe(true)
-      expect(context.isMobile).toBe(false)
-      expect(context.xlAndUp).toBe(true)
-      expect(context.xlAndDown).toBe(true)
-      expect(context.xxlAndUp).toBe(false)
+      expect(context.name.value).toBe('xl')
+      expect(context.xl.value).toBe(true)
+      expect(context.isMobile.value).toBe(false)
+      expect(context.xlAndUp.value).toBe(true)
+      expect(context.xlAndDown.value).toBe(true)
+      expect(context.xxlAndUp.value).toBe(false)
     })
 
     it('should detect xxl breakpoint correctly', () => {
@@ -313,11 +313,11 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xxl')
-      expect(context.xxl).toBe(true)
-      expect(context.isMobile).toBe(false)
-      expect(context.xxlAndUp).toBe(true)
-      expect(context.xxlAndDown).toBe(true)
+      expect(context.name.value).toBe('xxl')
+      expect(context.xxl.value).toBe(true)
+      expect(context.isMobile.value).toBe(false)
+      expect(context.xxlAndUp.value).toBe(true)
+      expect(context.xxlAndDown.value).toBe(true)
     })
   })
 
@@ -332,15 +332,15 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xs')
+      expect(context.name.value).toBe('xs')
 
       // Simulate window resize to 1400 (which should be lg: 1280-1919)
       mockWindow.innerWidth = 1400
       const resizeListener = mockWindow.addEventListener.mock.calls[0][1]
       resizeListener()
 
-      expect(context.name).toBe('lg')
-      expect(context.width).toBe(1400)
+      expect(context.name.value).toBe('lg')
+      expect(context.width.value).toBe(1400)
     })
 
     it('should clean up resize listener on scope dispose', () => {
@@ -379,8 +379,8 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.width).toBe(1000)
-      expect(context.height).toBe(600)
+      expect(context.width.value).toBe(1000)
+      expect(context.height.value).toBe(600)
     })
   })
 
@@ -419,6 +419,7 @@ describe.skip('useBreakpoints', () => {
       const mockApp = {
         runWithContext: vi.fn((callback: () => void) => callback()),
         provide: vi.fn(),
+        mixin: vi.fn(),
       }
 
       plugin.install(mockApp as any)
@@ -432,6 +433,7 @@ describe.skip('useBreakpoints', () => {
       const mockApp = {
         runWithContext: vi.fn((callback: () => void) => callback()),
         provide: vi.fn(),
+        mixin: vi.fn(),
       }
 
       expect(() => plugin.install(mockApp as any)).not.toThrow()
@@ -468,7 +470,7 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.isMobile).toBe(true) // 1200 < 1280 (lg breakpoint)
+      expect(context.isMobile.value).toBe(true) // 1200 < 1280 (lg breakpoint)
     })
 
     it('should handle custom mobile breakpoint as number', () => {
@@ -483,7 +485,7 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.isMobile).toBe(true) // 1000 < 1200
+      expect(context.isMobile.value).toBe(true) // 1000 < 1200
     })
 
     it('should fallback to md breakpoint when custom mobile breakpoint is not found', () => {
@@ -498,7 +500,7 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.isMobile).toBe(false) // 1000 >= 960 (md breakpoint)
+      expect(context.isMobile.value).toBe(false) // 1000 >= 960 (md breakpoint)
     })
   })
 
@@ -514,9 +516,9 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xs')
-      expect(context.width).toBe(0)
-      expect(context.height).toBe(0)
+      expect(context.name.value).toBe('xs')
+      expect(context.width.value).toBe(0)
+      expect(context.height.value).toBe(0)
     })
 
     it('should handle very large window width', () => {
@@ -530,9 +532,9 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('xxl')
-      expect(context.width).toBe(5000)
-      expect(context.height).toBe(3000)
+      expect(context.name.value).toBe('xxl')
+      expect(context.width.value).toBe(5000)
+      expect(context.height.value).toBe(3000)
     })
 
     it('should handle breakpoint exactly at threshold', () => {
@@ -545,8 +547,8 @@ describe.skip('useBreakpoints', () => {
       const mountedCallback = mockOnMounted.mock.calls[0]![0]
       mountedCallback()
 
-      expect(context.name).toBe('md')
-      expect(context.md).toBe(true)
+      expect(context.name.value).toBe('md')
+      expect(context.md.value).toBe(true)
     })
   })
 })