Merge pull request #18 from microcipcip/feature/useWindowSize

feat(useWindowSize): Adding useWindowSize feature

Author: microcipcip

README.md

@@ -33,9 +33,9 @@ npm install @vue/composition-api
 ## Setup
 
 ```js
-import Vue from 'vue';
-import VueCompositionAPI from '@vue/composition-api';
-Vue.use(VueCompositionAPI);
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+Vue.use(VueCompositionAPI)
 ```
 
 ## Usage
@@ -46,17 +46,17 @@ Vue.use(VueCompositionAPI);
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
-import { useMedia } from 'vue-use-kit'
-
-export default Vue.extend({
-  name: 'UseMedia',
-  setup() {
-    const query = '(min-width: 1024px)'
-    const isDesktop = useMedia(query)
-    return { isDesktop }
-  }
-})
+  import Vue from 'vue'
+  import { useMedia } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseMedia',
+    setup() {
+      const query = '(min-width: 1024px)'
+      const isDesktop = useMedia(query)
+      return { isDesktop }
+    }
+  })
 </script>
 ```
 
@@ -94,6 +94,8 @@ export default Vue.extend({
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usescroll--demo)
   - [`useSearchParams`](./src/functions/useSearchParams/stories/useSearchParams.md) &mdash; tracks browser's location search params.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usesearchparams--demo)
+  - [`useWindowSize`](./src/functions/useWindowSize/stories/useWindowSize.md) &mdash; tracks `Window` scroll position.
+    [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usewindowsize--demo)
 - Animations
   - [`useInterval`](./src/functions/useInterval/stories/useInterval.md) &mdash; updates `counter` value repeatedly on a fixed time delay.
     [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useinterval--demo)

src/functions/useSize/stories/UseSizeDemo.vue

@@ -1,13 +1,5 @@
 <template>
   <div>
-    <div class="box-actions">
-      <button class="button is-primary" @click="start" v-if="!isTracking">
-        Start tracking resize
-      </button>
-      <button class="button is-danger" @click="stop" v-else>
-        Stop tracking resize
-      </button>
-    </div>
     <div class="box" ref="elRef">
       <div class="box__feedback">
         {{ Math.ceil(width) }}px - {{ Math.ceil(height) }}px
@@ -16,6 +8,14 @@
         <div class="box__message">Resize me!</div>
       </div>
     </div>
+    <div class="box-actions">
+      <button class="button is-primary" @click="start" v-if="!isTracking">
+        Start tracking resize
+      </button>
+      <button class="button is-danger" @click="stop" v-else>
+        Stop tracking resize
+      </button>
+    </div>
   </div>
 </template>
 

src/functions/useSize/stories/useSize.story.ts

@@ -19,7 +19,8 @@ const basicDemo = () => ({
         <template v-slot:title></template>
         <template v-slot:intro>
           <p>
-            <strong>Try to resize the box below by dragging the handle</strong> in the bottom right hand corner.
+            <strong>Try to resize the box below by dragging the handle</strong> in the bottom right hand corner 
+            and observe how the <strong>width</strong> and <strong>height</strong> values change on the fly.
           </p>
         </template>
       </story-title>

src/functions/useSize/useSize.spec.ts

@@ -1,12 +1,53 @@
-// import { mount } from '@src/helpers/test'
-// import { useSize } from '@src/vue-use-kit'
+import { ref } from '@src/api'
+import { mount } from '@src/helpers/test'
+import { useSize } from '@src/vue-use-kit'
 
 afterEach(() => {
   jest.clearAllMocks()
 })
 
+let observe: any
+let unobserve: any
+let disconnect: any
+beforeEach(() => {
+  observe = jest.fn()
+  unobserve = jest.fn()
+  disconnect = jest.fn()
+  ;(window as any).ResizeObserver = jest.fn(() => ({
+    observe,
+    unobserve,
+    disconnect
+  }))
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div ref="elRef">
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const elRef = ref(null)
+    const { start, stop } = useSize(elRef, {}, onMount)
+    return { start, stop, elRef }
+  }
+})
+
 describe('useSize', () => {
-  it('should do something', () => {
-    // Add test here
+  it('should call ResizeObserver on mounted', () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+  })
+
+  it('should call ResizeObserver again when start is called', async () => {
+    expect(observe).toHaveBeenCalledTimes(0)
+    const wrapper = mount(testComponent())
+    expect(observe).toHaveBeenCalledTimes(1)
+    wrapper.find('#stop').trigger('click')
+    wrapper.find('#start').trigger('click')
+    await wrapper.vm.$nextTick()
+    expect(observe).toHaveBeenCalledTimes(2)
   })
 })

src/functions/useWindowSize/index.ts

@@ -0,0 +1 @@
+export * from './useWindowSize'

src/functions/useWindowSize/stories/UseWindowSizeDemo.vue

@@ -0,0 +1,39 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>width, height</td>
+        <td>{{ width }}px - {{ height }}px</td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="start" v-if="!isTracking">
+            Start tracking window resize
+          </button>
+          <button class="button is-danger" @click="stop" v-else>
+            Stop tracking window resize
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { useWindowSize } from '@src/vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseWindowSizeDemo',
+  setup() {
+    const { width, height, isTracking, start, stop } = useWindowSize()
+    return { width, height, isTracking, start, stop }
+  }
+})
+</script>

src/functions/useWindowSize/stories/useWindowSize.md

@@ -0,0 +1,58 @@
+# useWindowSize
+
+Vue function that tracks `Window` scroll position.
+
+## Reference
+
+```typescript
+function useWindowSize(
+  runOnMount?: boolean
+): {
+  width: Ref<number>
+  height: Ref<number>
+  isTracking: Ref<boolean>
+  start: () => void
+  stop: () => void
+}
+```
+
+### Parameters
+
+- `runOnMount: boolean` whether to track the window resize event on mount, `true` by default
+
+### Returns
+
+- `width: Ref<number>` the current window's `width`
+- `height: Ref<number>` the current window's `height`
+- `isTracking: Ref<boolean>` whether this function observer is running or not
+- `start: Function` the function used for start tracking window's resize event
+- `stop: Function` the function used for stop tracking window's resize event
+
+## Usage
+
+```html
+<template>
+  <div>
+    <div>
+      Window width and height: {{ width }}px {{ height }}px
+    </div>
+    <button @click="start" v-if="!isTracking">
+      Start tracking window resize
+    </button>
+    <button @click="stop" v-else>Stop tracking window resize</button>
+  </div>
+</template>
+
+<script lang="ts">
+  import Vue from 'vue'
+  import { useWindowSize } from 'vue-use-kit'
+
+  export default Vue.extend({
+    name: 'UseWindowSizeDemo',
+    setup() {
+      const { width, height, isTracking, start, stop } = useWindowSize()
+      return { width, height, isTracking, start, stop }
+    }
+  })
+</script>
+```

src/functions/useWindowSize/stories/useWindowSize.story.ts

@@ -0,0 +1,32 @@
+import { storiesOf } from '@storybook/vue'
+import path from 'path'
+import StoryTitle from '@src/helpers/StoryTitle.vue'
+import UseWindowSizeDemo from './UseWindowSizeDemo.vue'
+
+const functionName = 'useWindowSize'
+const functionPath = path.resolve(__dirname, '..')
+const notes = require(`./${functionName}.md`).default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseWindowSizeDemo },
+  template: `
+    <div class="container">
+      <story-title 
+        function-path="${functionPath}" 
+        source-name="${functionName}" 
+        demo-name="UseWindowSizeDemo.vue"
+      >
+        <template v-slot:title></template>
+        <template v-slot:intro>
+          <p>
+            <strong>Try to resize the window</strong> to see the <strong>width</strong> and <strong>height</strong> values change on the fly.
+          </p>
+        </template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('sensors|useWindowSize', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/functions/useWindowSize/useWindowSize.spec.ts

@@ -0,0 +1,59 @@
+import { useWindowSize } from '@src/vue-use-kit'
+import {
+  checkElementExistenceOnMount,
+  checkOnMountAndUnmountEvents,
+  checkOnStartEvents,
+  checkOnStopEvents,
+  mount
+} from '@src/helpers/test'
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+const testComponent = (onMount = true) => ({
+  template: `
+    <div>
+      <div id="isTracking" v-if="isTracking"></div>
+      <div id="width" v-if="width">{{width}}</div>
+      <div id="height" v-if="height">{{height}}</div>
+      <button id="start" @click="start"></button>
+      <button id="stop" @click="stop"></button>
+    </div>
+  `,
+  setup() {
+    const { width, height, isTracking, start, stop } = useWindowSize(onMount)
+    return { width, height, isTracking, start, stop }
+  }
+})
+
+describe('useWindowSize', () => {
+  const events = ['resize']
+
+  it('should add events on mounted and remove them on unmounted', async () => {
+    await checkOnMountAndUnmountEvents(window, events, testComponent)
+  })
+
+  it('should add events again when start is called', async () => {
+    await checkOnStartEvents(window, events, testComponent)
+  })
+
+  it('should remove events when stop is called', async () => {
+    await checkOnStopEvents(window, events, testComponent)
+  })
+
+  it('should show #isTracking when runOnMount is true', async () => {
+    await checkElementExistenceOnMount(true, testComponent(true))
+  })
+
+  it('should not show #isTracking when runOnMount is false', async () => {
+    await checkElementExistenceOnMount(false, testComponent(false))
+  })
+
+  it('should display the width and height values', async () => {
+    const wrapper = mount(testComponent(true))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('#width').text()).toEqual(`${window.innerWidth}`)
+    expect(wrapper.find('#height').text()).toEqual(`${window.innerHeight}`)
+  })
+})

src/functions/useWindowSize/useWindowSize.ts

@@ -0,0 +1,31 @@
+import { ref, onMounted, onUnmounted, Ref } from '@src/api'
+import { isClient } from '@src/shared/utils'
+
+export function useWindowSize(runOnMount = true) {
+  const width = ref(isClient ? window.innerWidth : Infinity)
+  const height = ref(isClient ? window.innerHeight : Infinity)
+  const isTracking = ref(false)
+
+  const handleWindowResize = () => {
+    width.value = window.innerWidth
+    height.value = window.innerHeight
+  }
+
+  const start = () => {
+    if (isTracking.value) return
+    window.addEventListener('resize', handleWindowResize)
+    handleWindowResize()
+    isTracking.value = true
+  }
+
+  const stop = () => {
+    if (!isTracking.value) return
+    window.removeEventListener('resize', handleWindowResize)
+    isTracking.value = false
+  }
+
+  onMounted(() => runOnMount && start())
+  onUnmounted(stop)
+
+  return { width, height, isTracking, start, stop }
+}