react-confirm 0.4.0 → 0.5.0-1

package/README.md

@@ -123,11 +123,9 @@ const Confirmation2: ConfirmDialog<Props, Response> = (props) => (<Dialog />);
 - **React ≤17**: Use `react-confirm` version 0.1.x
 
 
-## More Examples
+## Examples
 
-- [TypeScript Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript)
-- [Context Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_context)
-- [Bootstrap Example](https://codesandbox.io/s/react-confirm-with-react-bootstrap-kjju1)
-- [Chakra UI Example](https://codesandbox.io/s/react-confirm-with-chakra-ui-oidpf1)
+- [Simple Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/1_typescript) - Complete TypeScript implementation.
+- [Context Example](https://stackblitz.com/fork/github/haradakunihiko/react-confirm-sample/tree/main/2_typescript_using_context) - Using React Context with themes and providers
 
-For additional reference examples, you can also check the [react-confirm-sample](https://github.com/haradakunihiko/react-confirm-sample/) repository, which contains archived historical examples and some alternative implementations. **Check the examples above first for the latest patterns.**
+Source code for these examples can be found in the [react-confirm-sample](https://github.com/haradakunihiko/react-confirm-sample/) repository, which also contains some archived older implementations.

package/dist/confirmable.d.ts

@@ -0,0 +1,3 @@
+import type { ConfirmDialog, ConfirmableDialog } from './types';
+declare const confirmable: <P, R>(Component: ConfirmDialog<P, R>) => ConfirmableDialog<P, R>;
+export default confirmable;

package/dist/confirmable.js

@@ -0,0 +1,46 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var confirmable = function (Component) {
+    return function (_a) {
+        var dispose = _a.dispose, reject = _a.reject, resolve = _a.resolve, other = __rest(_a, ["dispose", "reject", "resolve"]);
+        var _b = (0, react_1.useState)(true), show = _b[0], setShow = _b[1];
+        var dismiss = function () {
+            setShow(false);
+            dispose();
+        };
+        var cancel = function (value) {
+            setShow(false);
+            reject(value);
+        };
+        var proceed = function (value) {
+            setShow(false);
+            resolve(value);
+        };
+        return ((0, jsx_runtime_1.jsx)(Component, __assign({ cancel: cancel, dismiss: dismiss, proceed: proceed, show: show }, other)));
+    };
+};
+exports.default = confirmable;

package/dist/context.d.ts

@@ -0,0 +1,3 @@
+import type { ConfirmationContext } from './types';
+export declare function createConfirmationContext(mountNode?: Element | DocumentFragment | HTMLElement): ConfirmationContext;
+export declare const ContextAwareConfirmation: ConfirmationContext;

package/dist/context.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextAwareConfirmation = void 0;
+exports.createConfirmationContext = createConfirmationContext;
+var reactTree_1 = require("./mounter/reactTree");
+var createConfirmation_1 = require("./createConfirmation");
+function createConfirmationContext(mountNode) {
+    var mounter = (0, reactTree_1.createReactTreeMounter)(mountNode);
+    var createConfirmation = (0, createConfirmation_1.createConfirmationCreater)(mounter);
+    var ConfirmationRoot = (0, reactTree_1.createMountPoint)(mounter);
+    return {
+        createConfirmation: function (component, unmountDelay) {
+            return createConfirmation(component, unmountDelay);
+        },
+        ConfirmationRoot: ConfirmationRoot,
+    };
+}
+exports.ContextAwareConfirmation = createConfirmationContext();

package/dist/createConfirmation.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmableDialog, Mounter } from './types';
+export declare const createConfirmationCreater: (mounter: Mounter) => <P, R>(Component: ConfirmableDialog<P, R>, unmountDelay?: number, mountingNode?: HTMLElement) => (props: P) => Promise<R>;
+declare const _default: <P, R>(component: ConfirmableDialog<P, R>, unmountDelay?: number, mountingNode?: HTMLElement) => (props: P) => Promise<R>;
+export default _default;

package/dist/createConfirmation.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createConfirmationCreater = void 0;
+var domTree_1 = require("./mounter/domTree");
+var createConfirmationCreater = function (mounter) {
+    return function (Component, unmountDelay, mountingNode) {
+        if (unmountDelay === void 0) { unmountDelay = 1000; }
+        return function (props) {
+            var mountId;
+            var promise = new Promise(function (resolve, reject) {
+                try {
+                    mountId = mounter.mount(Component, __assign({ reject: reject, resolve: resolve, dispose: dispose }, props), mountingNode);
+                }
+                catch (e) {
+                    // keep behavior identical to JS version
+                    console.error(e);
+                    throw e;
+                }
+            });
+            function dispose() {
+                setTimeout(function () {
+                    mounter.unmount(mountId);
+                }, unmountDelay);
+            }
+            return promise.then(function (result) {
+                dispose();
+                return result;
+            }, function (result) {
+                dispose();
+                return Promise.reject(result);
+            });
+        };
+    };
+};
+exports.createConfirmationCreater = createConfirmationCreater;
+var defaultCreateConfirmation = (0, exports.createConfirmationCreater)((0, domTree_1.createDomTreeMounter)());
+exports.default = defaultCreateConfirmation;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import confirmable from './confirmable';
+import createConfirmation, { createConfirmationCreater } from './createConfirmation';
+import { createDomTreeMounter } from './mounter/domTree';
+import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
+import { createConfirmationContext, ContextAwareConfirmation } from './context';
+export type { ConfirmDialogProps, ConfirmDialog, ConfirmableDialog, Mounter, TreeMounter, ConfirmationContext, } from './types';
+export { confirmable, createConfirmation, createConfirmationCreater, createDomTreeMounter, createReactTreeMounter, createMountPoint, createConfirmationContext, ContextAwareConfirmation };

package/dist/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextAwareConfirmation = exports.createConfirmationContext = exports.createMountPoint = exports.createReactTreeMounter = exports.createDomTreeMounter = exports.createConfirmationCreater = exports.createConfirmation = exports.confirmable = void 0;
+var confirmable_1 = __importDefault(require("./confirmable"));
+exports.confirmable = confirmable_1.default;
+var createConfirmation_1 = __importStar(require("./createConfirmation"));
+exports.createConfirmation = createConfirmation_1.default;
+Object.defineProperty(exports, "createConfirmationCreater", { enumerable: true, get: function () { return createConfirmation_1.createConfirmationCreater; } });
+var domTree_1 = require("./mounter/domTree");
+Object.defineProperty(exports, "createDomTreeMounter", { enumerable: true, get: function () { return domTree_1.createDomTreeMounter; } });
+var reactTree_1 = require("./mounter/reactTree");
+Object.defineProperty(exports, "createReactTreeMounter", { enumerable: true, get: function () { return reactTree_1.createReactTreeMounter; } });
+Object.defineProperty(exports, "createMountPoint", { enumerable: true, get: function () { return reactTree_1.createMountPoint; } });
+var context_1 = require("./context");
+Object.defineProperty(exports, "createConfirmationContext", { enumerable: true, get: function () { return context_1.createConfirmationContext; } });
+Object.defineProperty(exports, "ContextAwareConfirmation", { enumerable: true, get: function () { return context_1.ContextAwareConfirmation; } });

package/dist/mounter/domTree.d.ts

@@ -0,0 +1,2 @@
+import type { Mounter } from '../types';
+export declare function createDomTreeMounter(defaultMountNode?: Element | DocumentFragment | HTMLElement): Mounter;

package/dist/mounter/domTree.js

@@ -0,0 +1,43 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDomTreeMounter = createDomTreeMounter;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var client_1 = require("react-dom/client");
+function createDomTreeMounter(defaultMountNode) {
+    var confirms = {};
+    var callbacks = {};
+    function mount(Component, props, mountNode) {
+        var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        var parent = (mountNode || defaultMountNode || document.body);
+        var wrapper = parent.appendChild(document.createElement('div'));
+        confirms[key] = wrapper;
+        var root = (0, client_1.createRoot)(wrapper);
+        root.render((0, jsx_runtime_1.jsx)(Component, __assign({}, props)));
+        callbacks.mounted && callbacks.mounted();
+        return key;
+    }
+    function unmount(key) {
+        var wrapper = confirms[key];
+        delete confirms[key];
+        if (wrapper && wrapper.parentNode) {
+            wrapper.parentNode.removeChild(wrapper);
+        }
+    }
+    return {
+        mount: mount,
+        unmount: unmount,
+        // keep runtime `options` for backward-compat; not part of public type
+        options: {},
+    };
+}

package/dist/mounter/reactTree.d.ts

@@ -0,0 +1,3 @@
+import type { TreeMounter } from '../types';
+export declare function createReactTreeMounter(mountNode?: Element | DocumentFragment | HTMLElement): TreeMounter;
+export declare function createMountPoint(reactTreeMounter: TreeMounter): () => import("react/jsx-runtime").JSX.Element;

package/dist/mounter/reactTree.js

@@ -0,0 +1,62 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReactTreeMounter = createReactTreeMounter;
+exports.createMountPoint = createMountPoint;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_dom_1 = require("react-dom");
+function createReactTreeMounter(mountNode) {
+    var confirms = {};
+    var callbacks = {};
+    function mount(Component, props, _mountNode) {
+        var key = Math.floor(Math.random() * (1 << 30)).toString(16);
+        confirms[key] = { Component: Component, props: props };
+        callbacks.mounted && callbacks.mounted(confirms);
+        return key;
+        // _mountNode is ignored - ReactTreeMounter uses options.mountNode instead
+    }
+    function unmount(key) {
+        delete confirms[key];
+        callbacks.mounted && callbacks.mounted(confirms);
+    }
+    function setMountedCallback(func) {
+        callbacks.mounted = func;
+    }
+    return {
+        mount: mount,
+        unmount: unmount,
+        options: {
+            setMountedCallback: setMountedCallback,
+            mountNode: mountNode,
+        },
+    };
+}
+function createMountPoint(reactTreeMounter) {
+    return function () {
+        var _a = (0, react_1.useState)({}), confirmComponents = _a[0], setConfirmComponents = _a[1];
+        (0, react_1.useEffect)(function () {
+            return reactTreeMounter.options.setMountedCallback(function (components) {
+                setConfirmComponents(__assign({}, components));
+            });
+        }, []);
+        var element = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.keys(confirmComponents).map(function (key) {
+                var _a = confirmComponents[key], Component = _a.Component, props = _a.props;
+                return (0, jsx_runtime_1.jsx)(Component, __assign({}, props), key);
+            }) }));
+        if (reactTreeMounter.options.mountNode) {
+            element = (0, react_dom_1.createPortal)(element, reactTreeMounter.options.mountNode);
+        }
+        return element;
+    };
+}

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export type ConfirmableProps<P, R> = {
+    dispose: () => void;
+    resolve: (value: R | PromiseLike<R>) => void;
+    reject: (reason?: any) => void;
+} & P;
+export type ConfirmDialogProps<P, R> = {
+    /** Dismiss dialog without resolving the promise. */
+    dismiss: () => void;
+    /** Resolve the promise with the given value. */
+    proceed: (value: R) => void;
+    /** Reject the promise with the given value. */
+    cancel: (value?: any) => void;
+    /** Indicates if the dialog should be shown aka. someone is waiting for a promise. */
+    show: boolean;
+} & P;
+export type ConfirmDialog<P, R> = React.ComponentType<ConfirmDialogProps<P, R>>;
+export type ConfirmableDialog<P, R> = React.ComponentType<ConfirmableProps<P, R>>;
+export type Mounter = {
+    mount: (component: React.ComponentType, props: any, mountNode?: HTMLElement) => string;
+    unmount: (key: string) => void;
+};
+export type TreeMounter = {
+    options: {
+        setMountedCallback: (callback: (components: any) => void) => void;
+        mountNode?: Element | DocumentFragment | HTMLElement;
+    };
+} & Mounter;
+export interface ConfirmationContext {
+    /**
+     * Creates a confirmation function for a given component
+     * @param component - The confirmable component
+     * @param unmountDelay - Delay before unmounting the component (default: 1000ms)
+     * @returns Confirmation function that returns a Promise
+     */
+    createConfirmation: <P, R>(component: ConfirmableDialog<P, R>, unmountDelay?: number) => (props: P) => Promise<R>;
+    /**
+     * React component that must be rendered in your app to display confirmations
+     * Place this component at the root level of your app or where you want confirmations to appear
+     */
+    ConfirmationRoot: React.ComponentType;
+}
+export declare const __types_marker: 0;

package/dist/types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.__types_marker = void 0;
+// Force declaration file emission for this module
+// This value is never imported by runtime code; it only ensures dist/types.d.ts exists.
+exports.__types_marker = 0;

package/package.json

@@ -1,8 +1,18 @@
 {
   "name": "react-confirm",
-  "version": "0.4.0",
-  "description": "Small library which makes your Dialog component callable",
-  "main": "lib/index.js",
+  "version": "0.5.0-1",
+  "description": "A lightweight React library that simplifies confirmation dialogs with a Promise-based API — like window.confirm(), but fully customizable.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/haradakunihiko/react-confirm.git"
@@ -13,39 +23,46 @@
   "keywords": [
     "react",
     "reactjs",
-    "confirm"
+    "confirm",
+    "confirmation",
+    "dialog",
+    "modal",
+    "promise",
+    "async",
+    "typescript",
+    "ui",
+    "component"
   ],
   "homepage": "https://github.com/haradakunihiko/react-confirm",
+  "sideEffects": false,
   "files": [
-    "lib",
+    "dist",
     "src",
-    "typescript"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
-    "clean": "rimraf lib",
-    "build": "babel src --out-dir lib",
-    "prepublish": "npm run clean && npm run build",
+    "pretest": "npm run build",
+    "clean": "rimraf dist lib",
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run clean && npm run build && npm test",
     "test": "jest",
     "test:types": "jest __tests__/typescript/",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "npm run build && tsc --noEmit",
+    "typecheck:tests": "npm run build && tsc -p tsconfig.tests.json"
   },
-  "author": "",
+  "author": "haradakunihiko",
   "license": "MIT",
   "peerDependencies": {
     "react": ">=18.x",
     "react-dom": ">=18.x"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.6",
-    "@babel/core": "^7.27.4",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-react": "^7.16.7",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "babel-jest": "^29.5.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "react": ">=18.2.0",
@@ -55,6 +72,5 @@
     "ts-jest": "^29.1.0",
     "typescript": "^5.0.0"
   },
-  "dependencies": {},
-  "typings": "typescript/index.d.ts"
+  "dependencies": {}
 }

package/src/confirmable.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import type { ConfirmableProps, ConfirmDialog, ConfirmableDialog } from './types';
+
+const confirmable: <P, R>(Component: ConfirmDialog<P, R>) => ConfirmableDialog<P, R> =
+<P, R>(Component: ConfirmDialog<P, R>) =>
+  ({ dispose, reject, resolve, ...other }: ConfirmableProps<P, R>) => {
+    const [show, setShow] = useState(true);
+
+    const dismiss = () => {
+      setShow(false);
+      dispose();
+    };
+
+    const cancel = (value?: any) => {
+      setShow(false);
+      reject(value);
+    };
+
+    const proceed = (value: R) => {
+      setShow(false);
+      resolve(value);
+    };
+
+    return (
+      <Component
+        cancel={cancel}
+        dismiss={dismiss}
+        proceed={proceed}
+        show={show}
+        {...(other as P)}
+      />
+    );
+  };
+
+export default confirmable;

package/src/context.ts

@@ -0,0 +1,17 @@
+import { createReactTreeMounter, createMountPoint } from './mounter/reactTree';
+import { createConfirmationCreater } from './createConfirmation';
+import type { ConfirmableDialog, ConfirmationContext } from './types';
+
+export function createConfirmationContext(mountNode?: Element | DocumentFragment | HTMLElement): ConfirmationContext {
+  const mounter = createReactTreeMounter(mountNode);
+  const createConfirmation = createConfirmationCreater(mounter);
+  const ConfirmationRoot = createMountPoint(mounter);
+
+  return {
+    createConfirmation: <P, R>(component: ConfirmableDialog<P, R>, unmountDelay?: number) =>
+      createConfirmation(component, unmountDelay),
+    ConfirmationRoot,
+  };
+}
+
+export const ContextAwareConfirmation: ConfirmationContext = createConfirmationContext();

package/src/createConfirmation.ts

@@ -0,0 +1,43 @@
+import type React from 'react';
+import { createDomTreeMounter } from './mounter/domTree';
+import type { ConfirmableDialog, Mounter } from './types';
+
+export const createConfirmationCreater = (mounter: Mounter) =>
+  <P, R>(Component: ConfirmableDialog<P, R>, unmountDelay: number = 1000, mountingNode?: HTMLElement) => {
+    return (props: P): Promise<R> => {
+      let mountId: string;
+      const promise = new Promise<R>((resolve, reject) => {
+        try {
+          mountId = mounter.mount(Component as React.ComponentType<any>, { reject, resolve, dispose, ...props }, mountingNode);
+        } catch (e) {
+          // keep behavior identical to JS version
+          console.error(e);
+          throw e;
+        }
+      });
+
+      function dispose() {
+        setTimeout(() => {
+          mounter.unmount(mountId);
+        }, unmountDelay);
+      }
+
+      return promise.then(
+        (result) => {
+          dispose();
+          return result;
+        },
+        (result) => {
+          dispose();
+          return Promise.reject(result);
+        }
+      );
+    };
+  };
+
+const defaultCreateConfirmation = createConfirmationCreater(createDomTreeMounter());
+export default defaultCreateConfirmation as <P, R>(
+  component: ConfirmableDialog<P, R>,
+  unmountDelay?: number,
+  mountingNode?: HTMLElement
+) => (props: P) => Promise<R>;

package/src/{index.js → index.ts}

@@ -7,6 +7,15 @@ import {
   ContextAwareConfirmation
 } from './context';
 
+export type {
+  ConfirmDialogProps,
+  ConfirmDialog,
+  ConfirmableDialog,
+  Mounter,
+  TreeMounter,
+  ConfirmationContext,
+} from './types';
+
 export { 
   confirmable, 
   createConfirmation, 

package/src/mounter/domTree.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import type { Mounter } from '../types';
+
+export function createDomTreeMounter(defaultMountNode?: Element | DocumentFragment | HTMLElement): Mounter {
+  const confirms: Record<string, HTMLElement> = {};
+  const callbacks: { mounted?: () => void } = {};
+
+  function mount(Component: React.ComponentType<any>, props: any, mountNode?: HTMLElement) {
+    const key = Math.floor(Math.random() * (1 << 30)).toString(16);
+    const parent = (mountNode || (defaultMountNode as Element | DocumentFragment) || document.body) as Element | DocumentFragment;
+    const wrapper = parent.appendChild(document.createElement('div'));
+    confirms[key] = wrapper;
+
+    const root = createRoot(wrapper);
+    root.render(<Component {...props} />);
+    callbacks.mounted && callbacks.mounted();
+    return key;
+  }
+
+  function unmount(key: string) {
+    const wrapper = confirms[key];
+    delete confirms[key];
+
+    if (wrapper && wrapper.parentNode) {
+      wrapper.parentNode.removeChild(wrapper);
+    }
+  }
+
+  return ({
+    mount,
+    unmount,
+    // keep runtime `options` for backward-compat; not part of public type
+    options: {},
+  } as unknown) as Mounter;
+}