add hook(useBoundary)

README.md

@@ -207,6 +207,18 @@ import FallbackComponent, from './fallback.vue';
 You can view the examples used with suspend+vue-query in the
 [codesandbox](https://codesandbox.io/s/pcmg9e)
 
+## useBoundary
+
+It is not necessary to obtain reset and error through props,more convenient to use hook.
+
+```ts
+
+const {error, reset} = useBoundary();
+console.log(error?.message, error?.name);
+...
+
+```
+
 # Devtools
 
 Support Vue devtools.You can view the error information and other contents in the developer tool.

__tests__/capture.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-
+import { describe, test, beforeEach, expect } from 'vitest';
 import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import ErrorBoundary, { ErrorBoundaryProps } from '@src';

__tests__/components/capture.vue

@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <p id="error">{{ error.name }},{{ error.message }}</p>
-  <button @click="reset" id="reset">Reset</button>
+  <button id="reset" @click="reset">Reset</button>
 </template>
 
 <script lang="ts">

__tests__/components/click.vue

@@ -5,5 +5,11 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="throw">throw error</button>
+  <button id="throw" @click="throwError">throw error</button>
 </template>
+
+<script lang="ts">
+export default {
+  name: 'ClickTestComponent',
+};
+</script>

__tests__/components/hook.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useBoundary } from '@src';
+
+const { reset, error } = useBoundary();
+</script>
+
+<template>
+  <p id="error_info">{{ error?.message ?? '' }}</p>
+  <button id="reset_btn" @click="reset">reset</button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'HookTestComponent',
+};
+</script>

__tests__/components/network.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useQuery } from 'vue-query';
 import axios from 'axios';
+
 const props = defineProps<{ returnError: boolean }>();
 
 const { data, suspense } = useQuery(
@@ -17,9 +18,8 @@ const { data, suspense } = useQuery(
 
     if (data.status === 'success') {
       return data.data;
-    } else {
-      throw new Error(data.data);
     }
+    throw new Error(data.data);
   },
   { retry: false },
 );

__tests__/components/refError.vue

@@ -5,7 +5,7 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="ref_error">ref error</button>
+  <button id="ref_error" @click="throwError">ref error</button>
 </template>
 
 <script lang="ts">

__tests__/components/typeError.vue

@@ -5,7 +5,7 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="type_error">type error</button>
+  <button id="type_error" @click="throwError">type error</button>
 </template>
 
 <script lang="ts">

__tests__/define.test.ts

@@ -1,4 +1,5 @@
 import ErrorBoundary from '@src';
+import { describe, test, expect } from 'vitest';
 
 describe('VueErrorBoundary is define', function () {
   test('VueErrorBoundary is define', function () {

__tests__/emits.test.ts

@@ -7,6 +7,7 @@ import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import { mount } from '@vue/test-utils';
 import { defineComponent, h } from 'vue';
+import { describe, test, expect } from 'vitest';
 
 const App = defineComponent({
   emits: ['captured'],

__tests__/hook.test.ts

@@ -0,0 +1,44 @@
+import { describe, test, beforeEach, expect } from 'vitest';
+import HookTest from './components/hook.vue';
+import ClickTest from './components/click.vue';
+import { h, defineComponent } from 'vue';
+import { mount } from '@vue/test-utils';
+import ErrorBoundary from '@src';
+
+let App: any;
+
+beforeEach(function () {
+  App = defineComponent({
+    setup() {
+      return function () {
+        return h(
+          ErrorBoundary,
+          {},
+          {
+            default: () => h(ClickTest),
+            fallback: () => h(HookTest),
+          },
+        );
+      };
+    },
+  });
+});
+
+describe('useBoundary hook', function () {
+  test('error info', async function () {
+    const app = mount(App);
+
+    let throwBtn = app.get('#throw');
+    await throwBtn.trigger('click');
+
+    const error = app.find('#error_info');
+    expect(error.exists()).toBe(true);
+    expect(error.text()).toBe('throwError');
+
+    const resetBtn = app.get('#reset_btn');
+    await resetBtn.trigger('click');
+
+    const throwBtn2 = app.find('#throw');
+    expect(throwBtn2.exists()).toBe(true);
+  });
+});

__tests__/includeAndExclude.test.ts

@@ -1,10 +1,12 @@
+/* eslint-disable vue/require-default-prop */
 import ErrorBoundary, { ErrorBoundaryProps, VueErrorBoundaryEmit } from '@src';
 import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import ClickTypeError from './components/typeError.vue';
 import ClickRefError from './components/refError.vue';
 import { mount } from '@vue/test-utils';
 import { defineComponent, h } from 'vue';
+import { describe, test, beforeEach, expect } from 'vitest';
 
 let App: any;
 

__tests__/propagation.test.ts

@@ -3,6 +3,7 @@ import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import { mount } from '@vue/test-utils';
 import { defineComponent, h, onErrorCaptured } from 'vue';
+import { describe, test, beforeEach, expect, vi } from 'vitest';
 
 const fn = vi.fn();
 
@@ -12,15 +13,16 @@ describe('onErrorCaptured propagation', function () {
   beforeEach(function () {
     fn.mockReset();
     App = defineComponent({
-      props: {
-        propagation: Boolean,
-        cb: Function,
-      },
       components: {
         ClickThrow,
         ErrorBoundary,
         Caputre,
       },
+      props: {
+        propagation: Boolean,
+        // eslint-disable-next-line vue/require-default-prop
+        cb: Function,
+      },
       setup(props) {
         onErrorCaptured(function (errors) {
           fn();

__tests__/reset.test.ts

@@ -3,6 +3,7 @@ import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import { mount } from '@vue/test-utils';
 import { defineComponent, h } from 'vue';
+import { describe, test, expect } from 'vitest';
 
 const App = defineComponent({
   setup() {

__tests__/suspense.test.ts

@@ -1,10 +1,10 @@
 import ErrorBoundary, { ErrorBoundaryProps } from '@src';
-import { mount, config, flushPromises } from '@vue/test-utils';
+import { mount, flushPromises } from '@vue/test-utils';
 import { defineComponent, h, ref, Suspense } from 'vue';
 import Caputre from './components/capture.vue';
 import NetworkCom from './components/network.vue';
 import { QueryClient } from 'vue-query';
-import { vi } from 'vitest';
+import { vi, describe, test, expect } from 'vitest';
 
 const client = new QueryClient();
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "veboundary",
   "description": "Simple and convenient Vue error boundary.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "scripts": {
     "build:ts": "vue-tsc --noEmit",
     "build:umd": "vite build --mode umd",

src/components/errorBoundary.ts

@@ -1,15 +1,14 @@
-import { registerDevtools, warn, refreshInspector, addTimeline } from '@utils';
+import { registerDevtools, warn, refreshInspector, addTimeline, VEBOUNDARY_HOOK_KEY } from '@utils';
 import {
   ComponentPublicInstance,
   defineComponent,
   getCurrentInstance,
   onErrorCaptured,
+  provide,
   ref,
   VNode,
 } from 'vue';
 
-const ids = new Set();
-
 export type VueErrorBoundaryProps = {
   propagation?: boolean;
   include?: string[] | RegExp;
@@ -27,6 +26,9 @@ export type VueErrorBoundaryEmitPayload = {
   info: string;
 };
 
+// record the ID used
+const ids = new Set();
+
 const ErrorBoundaryComponent = defineComponent({
   name: 'VeBoundary',
   inheritAttrs: false,
@@ -67,6 +69,19 @@ const ErrorBoundaryComponent = defineComponent({
 
     const error = ref<Error | null>(null);
     const errorInfo = ref('');
+    function reset() {
+      error.value = null;
+      errorInfo.value = '';
+
+      refreshInspector();
+      addTimeline(label);
+    }
+
+    // provide state for useBoundary
+    provide(VEBOUNDARY_HOOK_KEY, {
+      reset,
+      error,
+    });
 
     registerDevtools({ error, info: errorInfo });
 
@@ -110,14 +125,6 @@ const ErrorBoundaryComponent = defineComponent({
       return props.propagation;
     });
 
-    function reset() {
-      error.value = null;
-      errorInfo.value = '';
-
-      refreshInspector();
-      addTimeline(label);
-    }
-
     return function () {
       return error.value === null
         ? slots.default?.()

src/components/index.ts

@@ -1,3 +1,4 @@
+export * from '@hooks';
 export { default } from './errorBoundary';
 export type {
   ErrorBoundaryProps,

src/hooks/index.ts

@@ -0,0 +1,13 @@
+import { warn, VEBOUNDARY_HOOK_KEY } from '@utils';
+import { inject, Ref } from 'vue';
+
+type BoundaryState = {
+  error: Ref<Error | null>;
+  reset: () => void;
+};
+
+export function useBoundary() {
+  const info = inject<BoundaryState>(VEBOUNDARY_HOOK_KEY);
+  if (!info) warn('Please use useboundary in VeErrorBoundary');
+  return info as BoundaryState;
+}

src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './log';
+export * from './key';
 export * from './devtools';

src/utils/key.ts

@@ -0,0 +1 @@
+export const VEBOUNDARY_HOOK_KEY = Symbol('veboundary');

tsconfig.json

@@ -12,11 +12,11 @@
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
     "skipLibCheck": true,
-    "types": ["vitest/globals"],
     "baseUrl": "./src",
     "paths": {
       "@src": ["./index"],
       "@components": ["./components/index"],
+      "@hooks": ["./hooks/index"],
       "@utils": ["./utils/index"]
     }
   },

vite.config.ts

@@ -37,13 +37,13 @@ export default defineConfig(function ({ mode }) {
       },
       include: ['__tests__/*.test.ts'],
       environment: 'jsdom',
-      globals: true,
     },
     resolve: {
       alias: {
         '@src': resolve(__dirname, 'src'),
         '@components': resolve(__dirname, 'src/components'),
         '@utils': resolve(__dirname, 'src/utils'),
+        '@hooks': resolve(__dirname, 'src/hooks'),
       },
     },
     publicDir: false,