Feature/10 add usetimeout and useinterval hooks

package.json

@@ -41,7 +41,7 @@
     "plop": "plop"
   },
   "peerDependencies": {
-    "@muban/muban": "^1.0.0-alpha.28"
+    "@muban/muban": "^1.0.0-alpha.34"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

src/useInterval/useInterval.stories.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
 
 # useInterval
 
-The `useInterval` hook is a wrapper around the native `setInterval`, it allows you to easily create set
+The `useInterval` hook is a wrapper around the native `setInterval`, it allows you to easily set
 an interval within your component that will be auto cancelled when the component unmounts.
 
 ## Reference
@@ -25,14 +25,15 @@ function useInterval(
 * `startImmediate` - Whether or not you want to immediately start the interval.
 
 ### Returns
-* `{ startInterval, stopInterval }`
+* `{ startInterval, stopInterval, isIntervalRunning }`
   * `startInterval` – A function that starts the interval, any running intervals will automatically be stopped.
   * `stopInterval` – A function that will stop the current active interval.
+  * `isIntervalRunning` – A computed ref that keeps track whether or not the interval is running.
 
 ## Usage
 
 ```ts
-const { startInterval, stopInterval } = useInterval(() => {
+const { startInterval, stopInterval, isIntervalRunning } = useInterval(() => {
   console.log('The interval has run')
 }, 1000, false);
 ````
@@ -51,7 +52,7 @@ const Demo = defineComponent({
     }, 1000);
 
     // The interval doesn't start automatically, but requires a user action to start.
-    const { startInterval, stopInterval } = useInterval(() => {
+    const { startInterval, stopInterval, isIntervalRunning } = useInterval(() => {
       console.log('The user-action interval callback is triggered.')
     }, 1000, false);
 

src/useInterval/useInterval.stories.ts

@@ -25,9 +25,8 @@ export const Demo: Story<DemoStoryProps> = () => ({
     },
     setup({ refs, props }) {
       const [logBinding, log] = useStorybookLog(refs.label);
-      const isIntervalRunning = ref(false);
 
-      const { startInterval, stopInterval } = useInterval(
+      const { startInterval, stopInterval, isIntervalRunning } = useInterval(
         onInterval,
         props.interval,
         props.startImmediate,
@@ -44,7 +43,6 @@ export const Demo: Story<DemoStoryProps> = () => ({
             disabled: isIntervalRunning,
           },
           click() {
-            isIntervalRunning.value = true;
             startInterval();
           },
         }),
@@ -53,7 +51,6 @@ export const Demo: Story<DemoStoryProps> = () => ({
             disabled: computed(() => !isIntervalRunning.value),
           },
           click() {
-            isIntervalRunning.value = false;
             log('interval stopped');
             stopInterval();
           },

src/useInterval/useInterval.test.ts

@@ -65,13 +65,26 @@ describe('useInterval', () => {
     expect(mockHandler).toBeCalledTimes(0);
   });
 
-  it('should start a new interval before the old one was triggered and only complete once', async () => {
+  it('should know that the interval is running', async () => {
     const mockHandler = jest.fn();
 
     await runComponentSetup(
-      () => {
-        return useInterval(mockHandler, 100, false);
+      () => useInterval(mockHandler, 200, false),
+      async ({ startInterval, stopInterval, isIntervalRunning }) => {
+        startInterval();
+        await timeout(100);
+        expect(isIntervalRunning.value).toEqual(true);
+        stopInterval();
+        expect(isIntervalRunning.value).toEqual(false);
       },
+    );
+  });
+
+  it('should start a new interval before the old one was triggered and only complete once', async () => {
+    const mockHandler = jest.fn();
+
+    await runComponentSetup(
+      () => useInterval(mockHandler, 100, false),
       async ({ startInterval }) => {
         startInterval();
         await timeout(50);

src/useInterval/useInterval.ts

@@ -1,4 +1,6 @@
-import { onMounted, onUnmounted } from '@muban/muban';
+import type { ComputedRef } from '@muban/muban';
+import { computed, onMounted, onUnmounted } from '@muban/muban';
+import { ref } from '@muban/muban/dist/esm';
 
 /**
  *  A hook that can be used to call a function on a provided interval, by default the interval
@@ -12,15 +14,22 @@ export const useInterval = (
   callback: () => void,
   interval: number = 100,
   startImmediate: boolean = true,
-): { startInterval: () => void; stopInterval: () => void } => {
+): {
+  startInterval: () => void;
+  stopInterval: () => void;
+  isIntervalRunning: ComputedRef<boolean>;
+} => {
+  const isIntervalRunning = ref(false);
   let handle = -1;
 
   function start() {
     stop();
+    isIntervalRunning.value = true;
     handle = setInterval(callback, interval) as unknown as number;
   }
 
   function stop() {
+    isIntervalRunning.value = false;
     clearInterval(handle);
   }
 
@@ -32,5 +41,9 @@ export const useInterval = (
     if (startImmediate) start();
   });
 
-  return { startInterval: start, stopInterval: stop };
+  return {
+    startInterval: start,
+    stopInterval: stop,
+    isIntervalRunning: computed(() => isIntervalRunning.value),
+  };
 };