cypress 10.3.1 → 10.4.0

package/react/dist/cypress-react.cjs.js

@@ -12,6 +12,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var ReactDOM = require('react-dom');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -31,7 +33,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -255,37 +257,21 @@ var injectStyles = function (options) {
         return injectStylesBeforeElement(options, document, el);
     };
 };
+exports.lastMountedReactDom = void 0;
 /**
- * Mount a React component in a blank document; register it as an alias
- * To access: use an alias or original component reference
- * @function   mount
- * @param      {React.ReactElement}  jsx - component to mount
- * @param      {MountOptions}  [options] - options, like alias, styles
- * @see https://github.com/bahmutov/@cypress/react
- * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
- * @example
- ```
-  import Hello from './hello.jsx'
-  import { mount } from '@cypress/react'
-  it('works', () => {
-    mount(<Hello onClick={cy.stub()} />)
-    // use Cypress commands
-    cy.contains('Hello').click()
-  })
- ```
- **/
-var mount = function (jsx, options) {
-    if (options === void 0) { options = {}; }
-    return _mount('mount', jsx, options);
-};
-var lastMountedReactDom;
-/**
- * @see `mount`
- * @param type The type of mount executed
- * @param rerenderKey If specified, use the provided key rather than generating a new one
+ * Create an `mount` function. Performs all the non-React-version specific
+ * behavior related to mounting. The React-version-specific code
+ * is injected. This helps us to maintain a consistent public API
+ * and handle breaking changes in React's rendering API.
+ *
+ * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
+ * or people writing adapters for third-party, custom adapters.
  */
-var _mount = function (type, jsx, options, rerenderKey) {
+var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
     if (options === void 0) { options = {}; }
+    if (!internalMountOptions) {
+        throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
+    }
     // Get the display name property via the component constructor
     // @ts-ignore FIXME
     var componentName = getDisplayName(jsx.type, options.alias);
@@ -298,8 +284,8 @@ var _mount = function (type, jsx, options, rerenderKey) {
         .then(injectStyles(options))
         .then(function () {
         var _a, _b, _c;
-        var reactDomToUse = options.ReactDom || ReactDOM__namespace;
-        lastMountedReactDom = reactDomToUse;
+        var reactDomToUse = internalMountOptions.reactDom;
+        exports.lastMountedReactDom = reactDomToUse;
         var el = getContainerEl();
         if (!el) {
             throw new Error([
@@ -316,7 +302,7 @@ var _mount = function (type, jsx, options, rerenderKey) {
         // since we always surround the component with a fragment
         // let's get back the original component
         var userComponent = reactComponent.props.children;
-        reactDomToUse.render(reactComponent, el);
+        internalMountOptions.render(reactComponent, el, reactDomToUse);
         if (options.log !== false) {
             Cypress.log({
                 name: type,
@@ -341,8 +327,8 @@ var _mount = function (type, jsx, options, rerenderKey) {
             .then(function () {
             return cy.wrap({
                 component: userComponent,
-                rerender: function (newComponent) { return _mount('rerender', newComponent, options, key); },
-                unmount: function () { return _unmount({ boundComponentMessage: jsxComponentName, log: true }); },
+                rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
+                unmount: internalMountOptions.unmount,
             }, { log: false });
         })
             // by waiting, we delaying test execution for the next tick of event loop
@@ -353,32 +339,19 @@ var _mount = function (type, jsx, options, rerenderKey) {
     });
 };
 /**
- * Removes the mounted component. Notice this command automatically
- * queues up the `unmount` into Cypress chain, thus you don't need `.then`
- * to call it.
- * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
- * @example
-  ```
-  import { mount, unmount } from '@cypress/react'
-  it('works', () => {
-    mount(...)
-    // interact with the component using Cypress commands
-    // whenever you want to unmount
-    unmount()
-  })
-  ```
+ * Create an `unmount` function. Performs all the non-React-version specific
+ * behavior related to unmounting.
+ *
+ * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
+ * or people writing adapters for third-party, custom adapters.
  */
-// @ts-ignore
-var unmount = function (options) {
-    if (options === void 0) { options = { log: true }; }
-    return _unmount(options);
-};
-var _unmount = function (options) {
+var makeUnmountFn = function (options, internalUnmountOptions) {
     return cy.then(function () {
         return cy.get(ROOT_SELECTOR, { log: false }).then(function ($el) {
             var _a;
-            if (lastMountedReactDom) {
-                var wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0]);
+            if (exports.lastMountedReactDom) {
+                internalUnmountOptions.unmount($el[0]);
+                var wasUnmounted = internalUnmountOptions.unmount($el[0]);
                 if (wasUnmounted && options.log) {
                     Cypress.log({
                         name: 'unmount',
@@ -402,32 +375,17 @@ var _unmount = function (options) {
 // we are not in the context of a test
 var preMountCleanup = function () {
     var el = getContainerEl();
-    if (el && lastMountedReactDom) {
-        lastMountedReactDom.unmountComponentAtNode(el);
+    if (el && exports.lastMountedReactDom) {
+        exports.lastMountedReactDom.unmountComponentAtNode(el);
     }
 };
-/**
- * Creates new instance of `mount` function with default options
- * @function   createMount
- * @param      {MountOptions}  [defaultOptions] - defaultOptions for returned `mount` function
- * @returns    new instance of `mount` with assigned options
- * @example
- * ```
- * import Hello from './hello.jsx'
- * import { createMount } from '@cypress/react'
- *
- * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
- *
- * it('works', () => {
- *   mount(<Hello />)
- *   // use Cypress commands
- *   cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
- * })
- ```
- **/
+var _mount = function (jsx, options) {
+    if (options === void 0) { options = {}; }
+    return makeMountFn('mount', jsx, options);
+};
 var createMount = function (defaultOptions) {
     return function (element, options) {
-        return mount(element, __assign(__assign({}, defaultOptions), options));
+        return _mount(element, __assign(__assign({}, defaultOptions), options));
     };
 };
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -443,6 +401,27 @@ var createMount = function (defaultOptions) {
 // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
 setupHooks(preMountCleanup);
 
+function mount(jsx, options, rerenderKey) {
+    if (options === void 0) { options = {}; }
+    var internalOptions = {
+        reactDom: ReactDOM__default["default"],
+        render: function (reactComponent, el, reactDomToUse) {
+            return (reactDomToUse || ReactDOM__default["default"]).render(reactComponent, el);
+        },
+        unmount: unmount,
+    };
+    return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM__default["default"] }, options), rerenderKey, internalOptions);
+}
+function unmount(options) {
+    if (options === void 0) { options = { log: true }; }
+    var internalOptions = {
+        unmount: function (el) {
+            return (exports.lastMountedReactDom || ReactDOM__default["default"]).unmountComponentAtNode(el);
+        },
+    };
+    return makeUnmountFn(options, internalOptions);
+}
+
 // mounting hooks inside a test component mostly copied from
 // https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
 function resultContainer() {
@@ -505,6 +484,8 @@ var mountHook = function (hookFn) {
 };
 
 exports.createMount = createMount;
+exports.makeMountFn = makeMountFn;
+exports.makeUnmountFn = makeUnmountFn;
 exports.mount = mount;
 exports.mountHook = mountHook;
 exports.unmount = unmount;

package/react/dist/cypress-react.esm-bundler.js

@@ -6,7 +6,7 @@
  */
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -230,37 +230,21 @@ var injectStyles = function (options) {
         return injectStylesBeforeElement(options, document, el);
     };
 };
-/**
- * Mount a React component in a blank document; register it as an alias
- * To access: use an alias or original component reference
- * @function   mount
- * @param      {React.ReactElement}  jsx - component to mount
- * @param      {MountOptions}  [options] - options, like alias, styles
- * @see https://github.com/bahmutov/@cypress/react
- * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
- * @example
- ```
-  import Hello from './hello.jsx'
-  import { mount } from '@cypress/react'
-  it('works', () => {
-    mount(<Hello onClick={cy.stub()} />)
-    // use Cypress commands
-    cy.contains('Hello').click()
-  })
- ```
- **/
-var mount = function (jsx, options) {
-    if (options === void 0) { options = {}; }
-    return _mount('mount', jsx, options);
-};
 var lastMountedReactDom;
 /**
- * @see `mount`
- * @param type The type of mount executed
- * @param rerenderKey If specified, use the provided key rather than generating a new one
+ * Create an `mount` function. Performs all the non-React-version specific
+ * behavior related to mounting. The React-version-specific code
+ * is injected. This helps us to maintain a consistent public API
+ * and handle breaking changes in React's rendering API.
+ *
+ * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
+ * or people writing adapters for third-party, custom adapters.
  */
-var _mount = function (type, jsx, options, rerenderKey) {
+var makeMountFn = function (type, jsx, options, rerenderKey, internalMountOptions) {
     if (options === void 0) { options = {}; }
+    if (!internalMountOptions) {
+        throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters');
+    }
     // Get the display name property via the component constructor
     // @ts-ignore FIXME
     var componentName = getDisplayName(jsx.type, options.alias);
@@ -273,7 +257,7 @@ var _mount = function (type, jsx, options, rerenderKey) {
         .then(injectStyles(options))
         .then(function () {
         var _a, _b, _c;
-        var reactDomToUse = options.ReactDom || ReactDOM;
+        var reactDomToUse = internalMountOptions.reactDom;
         lastMountedReactDom = reactDomToUse;
         var el = getContainerEl();
         if (!el) {
@@ -291,7 +275,7 @@ var _mount = function (type, jsx, options, rerenderKey) {
         // since we always surround the component with a fragment
         // let's get back the original component
         var userComponent = reactComponent.props.children;
-        reactDomToUse.render(reactComponent, el);
+        internalMountOptions.render(reactComponent, el, reactDomToUse);
         if (options.log !== false) {
             Cypress.log({
                 name: type,
@@ -316,8 +300,8 @@ var _mount = function (type, jsx, options, rerenderKey) {
             .then(function () {
             return cy.wrap({
                 component: userComponent,
-                rerender: function (newComponent) { return _mount('rerender', newComponent, options, key); },
-                unmount: function () { return _unmount({ boundComponentMessage: jsxComponentName, log: true }); },
+                rerender: function (newComponent) { return makeMountFn('rerender', newComponent, options, key, internalMountOptions); },
+                unmount: internalMountOptions.unmount,
             }, { log: false });
         })
             // by waiting, we delaying test execution for the next tick of event loop
@@ -328,32 +312,19 @@ var _mount = function (type, jsx, options, rerenderKey) {
     });
 };
 /**
- * Removes the mounted component. Notice this command automatically
- * queues up the `unmount` into Cypress chain, thus you don't need `.then`
- * to call it.
- * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
- * @example
-  ```
-  import { mount, unmount } from '@cypress/react'
-  it('works', () => {
-    mount(...)
-    // interact with the component using Cypress commands
-    // whenever you want to unmount
-    unmount()
-  })
-  ```
+ * Create an `unmount` function. Performs all the non-React-version specific
+ * behavior related to unmounting.
+ *
+ * This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters,
+ * or people writing adapters for third-party, custom adapters.
  */
-// @ts-ignore
-var unmount = function (options) {
-    if (options === void 0) { options = { log: true }; }
-    return _unmount(options);
-};
-var _unmount = function (options) {
+var makeUnmountFn = function (options, internalUnmountOptions) {
     return cy.then(function () {
         return cy.get(ROOT_SELECTOR, { log: false }).then(function ($el) {
             var _a;
             if (lastMountedReactDom) {
-                var wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0]);
+                internalUnmountOptions.unmount($el[0]);
+                var wasUnmounted = internalUnmountOptions.unmount($el[0]);
                 if (wasUnmounted && options.log) {
                     Cypress.log({
                         name: 'unmount',
@@ -381,28 +352,13 @@ var preMountCleanup = function () {
         lastMountedReactDom.unmountComponentAtNode(el);
     }
 };
-/**
- * Creates new instance of `mount` function with default options
- * @function   createMount
- * @param      {MountOptions}  [defaultOptions] - defaultOptions for returned `mount` function
- * @returns    new instance of `mount` with assigned options
- * @example
- * ```
- * import Hello from './hello.jsx'
- * import { createMount } from '@cypress/react'
- *
- * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
- *
- * it('works', () => {
- *   mount(<Hello />)
- *   // use Cypress commands
- *   cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
- * })
- ```
- **/
+var _mount = function (jsx, options) {
+    if (options === void 0) { options = {}; }
+    return makeMountFn('mount', jsx, options);
+};
 var createMount = function (defaultOptions) {
     return function (element, options) {
-        return mount(element, __assign(__assign({}, defaultOptions), options));
+        return _mount(element, __assign(__assign({}, defaultOptions), options));
     };
 };
 // Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this
@@ -418,6 +374,27 @@ var createMount = function (defaultOptions) {
 // @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
 setupHooks(preMountCleanup);
 
+function mount(jsx, options, rerenderKey) {
+    if (options === void 0) { options = {}; }
+    var internalOptions = {
+        reactDom: ReactDOM,
+        render: function (reactComponent, el, reactDomToUse) {
+            return (reactDomToUse || ReactDOM).render(reactComponent, el);
+        },
+        unmount: unmount,
+    };
+    return makeMountFn('mount', jsx, __assign({ ReactDom: ReactDOM }, options), rerenderKey, internalOptions);
+}
+function unmount(options) {
+    if (options === void 0) { options = { log: true }; }
+    var internalOptions = {
+        unmount: function (el) {
+            return (lastMountedReactDom || ReactDOM).unmountComponentAtNode(el);
+        },
+    };
+    return makeUnmountFn(options, internalOptions);
+}
+
 // mounting hooks inside a test component mostly copied from
 // https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js
 function resultContainer() {
@@ -479,4 +456,4 @@ var mountHook = function (hookFn) {
     return mount(componentTest).then(function () { return result; });
 };
 
-export { createMount, mount, mountHook, unmount };
+export { createMount, lastMountedReactDom, makeMountFn, makeUnmountFn, mount, mountHook, unmount };

package/react/dist/getDisplayName.d.ts

@@ -1,4 +1,4 @@
-import { JSX } from './mount';
+import { JSX } from './createMount';
 /**
  * Gets the display name of the component when possible.
  * @param type {JSX} The type object returned from creating the react element.

package/react/dist/index.d.ts

@@ -1,2 +1,4 @@
+export * from './createMount';
 export * from './mount';
 export * from './mountHook';
+export * from './types';

package/react/dist/mount.d.ts

@@ -1,143 +1,7 @@
 /// <reference types="cypress" />
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { StyleOptions } from '@cypress/mount-utils';
-/**
- * Mount a React component in a blank document; register it as an alias
- * To access: use an alias or original component reference
- * @function   mount
- * @param      {React.ReactElement}  jsx - component to mount
- * @param      {MountOptions}  [options] - options, like alias, styles
- * @see https://github.com/bahmutov/@cypress/react
- * @see https://glebbahmutov.com/blog/my-vision-for-component-tests/
- * @example
- ```
-  import Hello from './hello.jsx'
-  import { mount } from '@cypress/react'
-  it('works', () => {
-    mount(<Hello onClick={cy.stub()} />)
-    // use Cypress commands
-    cy.contains('Hello').click()
-  })
- ```
- **/
-export declare const mount: (jsx: React.ReactNode, options?: MountOptions) => globalThis.Cypress.Chainable<MountReturn>;
-/**
- * Removes the mounted component. Notice this command automatically
- * queues up the `unmount` into Cypress chain, thus you don't need `.then`
- * to call it.
- * @see https://github.com/cypress-io/cypress/tree/develop/npm/react/cypress/component/basic/unmount
- * @example
-  ```
-  import { mount, unmount } from '@cypress/react'
-  it('works', () => {
-    mount(...)
-    // interact with the component using Cypress commands
-    // whenever you want to unmount
-    unmount()
-  })
-  ```
- */
-export declare const unmount: (options?: {
+import React from 'react';
+import type { MountOptions } from './types';
+export declare function mount(jsx: React.ReactNode, options?: MountOptions, rerenderKey?: string): Cypress.Chainable<import("./types").MountReturn>;
+export declare function unmount(options?: {
     log: boolean;
-}) => globalThis.Cypress.Chainable<JQuery<HTMLElement>>;
-/**
- * Creates new instance of `mount` function with default options
- * @function   createMount
- * @param      {MountOptions}  [defaultOptions] - defaultOptions for returned `mount` function
- * @returns    new instance of `mount` with assigned options
- * @example
- * ```
- * import Hello from './hello.jsx'
- * import { createMount } from '@cypress/react'
- *
- * const mount = createMount({ strict: true, cssFile: 'path/to/any/css/file.css' })
- *
- * it('works', () => {
- *   mount(<Hello />)
- *   // use Cypress commands
- *   cy.get('button').should('have.css', 'color', 'rgb(124, 12, 109)')
- * })
- ```
- **/
-export declare const createMount: (defaultOptions: MountOptions) => (element: React.ReactElement, options?: Partial<StyleOptions & MountReactComponentOptions> | undefined) => globalThis.Cypress.Chainable<MountReturn>;
-/** @deprecated Should be removed in the next major version */
-export default mount;
-export interface ReactModule {
-    name: string;
-    type: string;
-    location: string;
-    source: string;
-}
-export interface MountReactComponentOptions {
-    alias: string;
-    ReactDom: typeof ReactDOM;
-    /**
-     * Log the mounting command into Cypress Command Log,
-     * true by default.
-     */
-    log: boolean;
-    /**
-     * Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
-     * It activates additional checks and warnings for child components.
-     */
-    strict: boolean;
-}
-export declare type MountOptions = Partial<StyleOptions & MountReactComponentOptions>;
-export interface MountReturn {
-    /**
-     * The component that was rendered.
-     */
-    component: React.ReactNode;
-    /**
-     * Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
-     * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
-     */
-    rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
-    /**
-     * Removes the mounted component.
-     * @see `unmount`
-     */
-    unmount: () => globalThis.Cypress.Chainable<JQuery<HTMLElement>>;
-}
-/**
- * The `type` property from the transpiled JSX object.
- * @example
- * const { type } = React.createElement('div', null, 'Hello')
- * const { type } = <div>Hello</div>
- */
-export interface JSX extends Function {
-    displayName: string;
-}
-export declare namespace Cypress {
-    interface Cypress {
-        stylesCache: any;
-        React: string;
-        ReactDOM: string;
-        Styles: string;
-        modules: ReactModule[];
-    }
-    interface Chainable<Subject> {
-        state: (key: string) => any;
-        /**
-         * Mount a React component in a blank document; register it as an alias
-         * To access: use an alias or original component reference
-         *  @function   cy.mount
-         *  @param      {Object}  jsx - component to mount
-         *  @param      {string}  [Component] - alias to use later
-         *  @example
-        ```
-        import Hello from './hello.jsx'
-        // mount and access by alias
-        cy.mount(<Hello />, 'Hello')
-        // using default alias
-        cy.get('@Component')
-        // using specified alias
-        cy.get('@Hello').its('state').should(...)
-        // using original component
-        cy.get(Hello)
-        ```
-        **/
-        get<S = any>(alias: string | symbol | Function, options?: Partial<any>): Chainable<any>;
-    }
-}
+}): Cypress.Chainable<JQuery<HTMLElement>>;

package/react/dist/types.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+import type React from 'react';
+import type { StyleOptions } from '@cypress/mount-utils';
+export interface UnmountArgs {
+    log: boolean;
+    boundComponentMessage?: string;
+}
+export interface InternalUnmountOptionsReact {
+    unmount: (el: HTMLElement) => boolean;
+}
+export interface InternalUnmountOptionsReact18 {
+    unmount: () => boolean;
+}
+export declare type InternalUnmountOptions = InternalUnmountOptionsReact | InternalUnmountOptionsReact18;
+export declare type MountOptions = Partial<StyleOptions & MountReactComponentOptions>;
+export interface MountReactComponentOptions {
+    alias: string;
+    ReactDom: typeof import('react-dom');
+    /**
+     * Log the mounting command into Cypress Command Log,
+     * true by default.
+     */
+    log: boolean;
+    /**
+     * Render component in React [strict mode](https://reactjs.org/docs/strict-mode.html)
+     * It activates additional checks and warnings for child components.
+     */
+    strict: boolean;
+}
+export interface InternalMountOptions {
+    reactDom: typeof import('react-dom');
+    render: (reactComponent: ReturnType<typeof React.createElement>, el: HTMLElement, reactDomToUse: typeof import('react-dom')) => void;
+    unmount: (options: UnmountArgs) => void;
+}
+export interface MountReturn {
+    /**
+     * The component that was rendered.
+     */
+    component: React.ReactNode;
+    /**
+     * Rerenders the specified component with new props. This allows testing of components that store state (`setState`)
+     * or have asynchronous updates (`useEffect`, `useLayoutEffect`).
+     */
+    rerender: (component: React.ReactNode) => globalThis.Cypress.Chainable<MountReturn>;
+    /**
+     * Removes the mounted component.
+     * @see `unmount`
+     */
+    unmount: (payload: UnmountArgs) => void;
+}

package/react/package.json

@@ -14,9 +14,6 @@
     "test": "yarn cy:run",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
-  "dependencies": {
-    "debug": "^4.3.2"
-  },
   "devDependencies": {
     "@cypress/mount-utils": "0.0.0-development",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -24,7 +21,6 @@
     "@vitejs/plugin-react": "1.3.1",
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
-    "cypress-plugin-snapshots": "1.4.4",
     "prop-types": "15.7.2",
     "react": "16.8.6",
     "react-dom": "16.8.6",
@@ -33,7 +29,7 @@
     "rollup": "^2.38.5",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "^4.2.3",
-    "vite": "2.9.5",
+    "vite": "3.0.3",
     "vite-plugin-require-transform": "1.0.3"
   },
   "peerDependencies": {