@violice/rmu 0.2.5 → 0.2.7

package/README.md

@@ -5,14 +5,14 @@ RMU is a small, zero-dependency utility to control modals in React apps
 <!-- ## Installation
 
 ```bash
-npm install --save rmu
-yarn add rmu
+npm install --save @violice/rmu
+yarn add @violice/rmu
 ``` -->
 
 ## Usage
 
 ```js
-import { openModal, closeModal, RMUOutlet, RMUProvider } from 'rmu';
+import { openModal, closeModal, RMUOutlet, RMUProvider } from '@violice/rmu';
 
 const Example = () => {
   return (
@@ -45,7 +45,7 @@ const Example = () => {
 
 ## RoadMap
 - [x] Custom events, new API (0.2.0)
-- [ ] Connected modals (Context modals)
+- [ ] Connected modals
 - [ ] Auto-close 
 - [ ] Use for toasts example
 

package/dist/index.d.mts

@@ -0,0 +1,49 @@
+import React, { ReactNode } from "react";
+
+//#region src/rmu-provider.d.ts
+declare const RMUProvider: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => React.JSX.Element;
+//#endregion
+//#region src/rmu-outlet.d.ts
+declare const RMUOutlet: ({
+  outletId
+}: {
+  outletId?: string | undefined;
+}) => React.JSX.Element;
+//#endregion
+//#region src/types.d.ts
+type RMUContextState = {
+  outlets: Record<string, Record<string, ReactNode>>;
+  openModal: ({
+    modalId,
+    modalComponent,
+    outletId
+  }: {
+    modalId: string;
+    modalComponent: ReactNode;
+    outletId: string;
+  }) => void;
+  closeModal: ({
+    modalId,
+    outletId
+  }: {
+    modalId: string;
+    outletId: string;
+  }) => void;
+  addOutlet: (outletId: string) => void;
+  removeOutlet: (outletId: string) => void;
+};
+//#endregion
+//#region src/events.d.ts
+declare const openModal: (modalComponent: ReactNode, config?: {
+  outletId?: string;
+}) => {
+  modalId: string;
+  outletId: string;
+};
+declare const closeModal: RMUContextState['closeModal'];
+//#endregion
+export { RMUOutlet, RMUProvider, closeModal, openModal };

package/dist/index.d.ts

@@ -1,3 +1,49 @@
-export { RMUProvider } from './rmu-provider';
-export { RMUOutlet } from './rmu-outlet';
-export { openModal, closeModal } from './events';
+import React, { ReactNode } from "react";
+
+//#region src/rmu-provider.d.ts
+declare const RMUProvider: ({
+  children
+}: {
+  children: React.ReactNode;
+}) => React.JSX.Element;
+//#endregion
+//#region src/rmu-outlet.d.ts
+declare const RMUOutlet: ({
+  outletId
+}: {
+  outletId?: string | undefined;
+}) => React.JSX.Element;
+//#endregion
+//#region src/types.d.ts
+type RMUContextState = {
+  outlets: Record<string, Record<string, ReactNode>>;
+  openModal: ({
+    modalId,
+    modalComponent,
+    outletId
+  }: {
+    modalId: string;
+    modalComponent: ReactNode;
+    outletId: string;
+  }) => void;
+  closeModal: ({
+    modalId,
+    outletId
+  }: {
+    modalId: string;
+    outletId: string;
+  }) => void;
+  addOutlet: (outletId: string) => void;
+  removeOutlet: (outletId: string) => void;
+};
+//#endregion
+//#region src/events.d.ts
+declare const openModal: (modalComponent: ReactNode, config?: {
+  outletId?: string;
+}) => {
+  modalId: string;
+  outletId: string;
+};
+declare const closeModal: RMUContextState['closeModal'];
+//#endregion
+export { RMUOutlet, RMUProvider, closeModal, openModal };

package/dist/index.js

@@ -1,8 +1,231 @@
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 
-'use strict'
+//#endregion
+let react = require("react");
+react = __toESM(react);
 
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./rmu.cjs.production.min.js')
-} else {
-  module.exports = require('./rmu.cjs.development.js')
-}
+//#region src/rmu-context.ts
+const RMUContext = (0, react.createContext)(null);
+
+//#endregion
+//#region src/emitter.ts
+const listenersByType = {};
+const emitter = {
+	subscribe(type, handler) {
+		if (!listenersByType[type]) listenersByType[type] = /* @__PURE__ */ new Set();
+		listenersByType[type].add(handler);
+	},
+	unsubscribe(type, handler) {
+		const listeners = listenersByType[type];
+		if (listeners) {
+			listeners.delete(handler);
+			if (listeners.size === 0) delete listenersByType[type];
+		}
+	},
+	emit(type, payload) {
+		const listeners = listenersByType[type];
+		if (!listeners) return;
+		[...listeners].forEach((handler) => {
+			try {
+				handler(payload);
+			} catch {}
+		});
+	}
+};
+
+//#endregion
+//#region src/events.ts
+const RMU_EVENTS = {
+	open: "rmu:open-modal",
+	close: "rmu:close-modal"
+};
+const openModal = (modalComponent, config = {}) => {
+	const modalId = `rmu-modal-${(/* @__PURE__ */ new Date()).getTime().toString()}`;
+	const { outletId = "rmu-default-outlet" } = config;
+	emitter.emit(RMU_EVENTS.open, {
+		modalId,
+		modalComponent,
+		outletId
+	});
+	return {
+		modalId,
+		outletId
+	};
+};
+const closeModal = ({ modalId, outletId }) => {
+	emitter.emit(RMU_EVENTS.close, {
+		modalId,
+		outletId
+	});
+};
+
+//#endregion
+//#region src/use-rmu-events.ts
+const useRMUEvents = (ctx) => {
+	const events = {
+		open: (payload) => ctx.openModal(payload),
+		close: (payload) => ctx.closeModal(payload)
+	};
+	(0, react.useEffect)(() => {
+		Object.keys(events).forEach((event) => {
+			emitter.subscribe(RMU_EVENTS[event], events[event]);
+		});
+		return () => {
+			Object.keys(events).forEach((event) => {
+				emitter.unsubscribe(RMU_EVENTS[event], events[event]);
+			});
+		};
+	}, []);
+};
+
+//#endregion
+//#region src/use-rmu-state.ts
+const ACTIONS = {
+	openModal: "rmu:open-modal",
+	closeModal: "rmu:close-modal",
+	addOutlet: "rmu:add-modal",
+	removeOutlet: "rmu:remove-outlet"
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case ACTIONS.openModal: {
+			const { modalId, modalComponent, outletId } = action.payload;
+			const modalOutlet = state.outlets[outletId];
+			if (!modalOutlet) throw new Error(`Outlet with id ${outletId} not found`);
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: {
+						...modalOutlet,
+						[modalId]: modalComponent
+					}
+				}
+			};
+		}
+		case ACTIONS.closeModal: {
+			const { modalId, outletId } = action.payload;
+			const modalOutlet = state.outlets[outletId];
+			if (!modalOutlet) throw new Error(`Outlet with id ${outletId} not found`);
+			const { [modalId]: _removed,...restModals } = modalOutlet;
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: restModals
+				}
+			};
+		}
+		case ACTIONS.addOutlet: {
+			const { outletId } = action.payload;
+			if (!!state.outlets[outletId]) throw new Error(`Outlet with id ${outletId} already exists`);
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: {}
+				}
+			};
+		}
+		case ACTIONS.removeOutlet: {
+			const { outletId } = action.payload;
+			const { [outletId]: _removed,...restOutlets } = state.outlets;
+			return {
+				...state,
+				outlets: restOutlets
+			};
+		}
+		default: return state;
+	}
+};
+const useRMUState = () => {
+	const [state, dispatch] = (0, react.useReducer)(reducer, { outlets: {} });
+	const openModal$1 = ({ modalId, modalComponent, outletId }) => {
+		dispatch({
+			type: ACTIONS.openModal,
+			payload: {
+				modalId,
+				modalComponent,
+				outletId
+			}
+		});
+	};
+	const closeModal$1 = ({ modalId, outletId }) => {
+		dispatch({
+			type: ACTIONS.closeModal,
+			payload: {
+				modalId,
+				outletId
+			}
+		});
+	};
+	const addOutlet = (outletId) => {
+		dispatch({
+			type: ACTIONS.addOutlet,
+			payload: { outletId }
+		});
+	};
+	const removeOutlet = (outletId) => {
+		dispatch({
+			type: ACTIONS.removeOutlet,
+			payload: { outletId }
+		});
+	};
+	return {
+		...state,
+		openModal: openModal$1,
+		closeModal: closeModal$1,
+		addOutlet,
+		removeOutlet
+	};
+};
+
+//#endregion
+//#region src/rmu-provider.tsx
+const RMUProvider = ({ children }) => {
+	const state = useRMUState();
+	useRMUEvents(state);
+	return /* @__PURE__ */ react.default.createElement(RMUContext.Provider, { value: state }, children);
+};
+
+//#endregion
+//#region src/rmu-outlet.tsx
+const RMUOutlet = ({ outletId = "rmu-default-outlet" }) => {
+	const ctx = (0, react.useContext)(RMUContext);
+	if (!ctx) throw new Error("RMUProvider not found in component tree");
+	const { outlets, addOutlet, removeOutlet } = ctx;
+	(0, react.useEffect)(() => {
+		addOutlet(outletId);
+		return () => {
+			removeOutlet(outletId);
+		};
+	}, []);
+	const modals = outlets[outletId] ?? {};
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, Object.entries(modals).map(([modalId, modalComponent]) => /* @__PURE__ */ react.default.createElement(react.Fragment, { key: modalId }, modalComponent)));
+};
+
+//#endregion
+exports.RMUOutlet = RMUOutlet;
+exports.RMUProvider = RMUProvider;
+exports.closeModal = closeModal;
+exports.openModal = openModal;

package/dist/index.mjs

@@ -0,0 +1,204 @@
+import React, { Fragment, createContext, useContext, useEffect, useReducer } from "react";
+
+//#region src/rmu-context.ts
+const RMUContext = createContext(null);
+
+//#endregion
+//#region src/emitter.ts
+const listenersByType = {};
+const emitter = {
+	subscribe(type, handler) {
+		if (!listenersByType[type]) listenersByType[type] = /* @__PURE__ */ new Set();
+		listenersByType[type].add(handler);
+	},
+	unsubscribe(type, handler) {
+		const listeners = listenersByType[type];
+		if (listeners) {
+			listeners.delete(handler);
+			if (listeners.size === 0) delete listenersByType[type];
+		}
+	},
+	emit(type, payload) {
+		const listeners = listenersByType[type];
+		if (!listeners) return;
+		[...listeners].forEach((handler) => {
+			try {
+				handler(payload);
+			} catch {}
+		});
+	}
+};
+
+//#endregion
+//#region src/events.ts
+const RMU_EVENTS = {
+	open: "rmu:open-modal",
+	close: "rmu:close-modal"
+};
+const openModal = (modalComponent, config = {}) => {
+	const modalId = `rmu-modal-${(/* @__PURE__ */ new Date()).getTime().toString()}`;
+	const { outletId = "rmu-default-outlet" } = config;
+	emitter.emit(RMU_EVENTS.open, {
+		modalId,
+		modalComponent,
+		outletId
+	});
+	return {
+		modalId,
+		outletId
+	};
+};
+const closeModal = ({ modalId, outletId }) => {
+	emitter.emit(RMU_EVENTS.close, {
+		modalId,
+		outletId
+	});
+};
+
+//#endregion
+//#region src/use-rmu-events.ts
+const useRMUEvents = (ctx) => {
+	const events = {
+		open: (payload) => ctx.openModal(payload),
+		close: (payload) => ctx.closeModal(payload)
+	};
+	useEffect(() => {
+		Object.keys(events).forEach((event) => {
+			emitter.subscribe(RMU_EVENTS[event], events[event]);
+		});
+		return () => {
+			Object.keys(events).forEach((event) => {
+				emitter.unsubscribe(RMU_EVENTS[event], events[event]);
+			});
+		};
+	}, []);
+};
+
+//#endregion
+//#region src/use-rmu-state.ts
+const ACTIONS = {
+	openModal: "rmu:open-modal",
+	closeModal: "rmu:close-modal",
+	addOutlet: "rmu:add-modal",
+	removeOutlet: "rmu:remove-outlet"
+};
+const reducer = (state, action) => {
+	switch (action.type) {
+		case ACTIONS.openModal: {
+			const { modalId, modalComponent, outletId } = action.payload;
+			const modalOutlet = state.outlets[outletId];
+			if (!modalOutlet) throw new Error(`Outlet with id ${outletId} not found`);
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: {
+						...modalOutlet,
+						[modalId]: modalComponent
+					}
+				}
+			};
+		}
+		case ACTIONS.closeModal: {
+			const { modalId, outletId } = action.payload;
+			const modalOutlet = state.outlets[outletId];
+			if (!modalOutlet) throw new Error(`Outlet with id ${outletId} not found`);
+			const { [modalId]: _removed,...restModals } = modalOutlet;
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: restModals
+				}
+			};
+		}
+		case ACTIONS.addOutlet: {
+			const { outletId } = action.payload;
+			if (!!state.outlets[outletId]) throw new Error(`Outlet with id ${outletId} already exists`);
+			return {
+				...state,
+				outlets: {
+					...state.outlets,
+					[outletId]: {}
+				}
+			};
+		}
+		case ACTIONS.removeOutlet: {
+			const { outletId } = action.payload;
+			const { [outletId]: _removed,...restOutlets } = state.outlets;
+			return {
+				...state,
+				outlets: restOutlets
+			};
+		}
+		default: return state;
+	}
+};
+const useRMUState = () => {
+	const [state, dispatch] = useReducer(reducer, { outlets: {} });
+	const openModal$1 = ({ modalId, modalComponent, outletId }) => {
+		dispatch({
+			type: ACTIONS.openModal,
+			payload: {
+				modalId,
+				modalComponent,
+				outletId
+			}
+		});
+	};
+	const closeModal$1 = ({ modalId, outletId }) => {
+		dispatch({
+			type: ACTIONS.closeModal,
+			payload: {
+				modalId,
+				outletId
+			}
+		});
+	};
+	const addOutlet = (outletId) => {
+		dispatch({
+			type: ACTIONS.addOutlet,
+			payload: { outletId }
+		});
+	};
+	const removeOutlet = (outletId) => {
+		dispatch({
+			type: ACTIONS.removeOutlet,
+			payload: { outletId }
+		});
+	};
+	return {
+		...state,
+		openModal: openModal$1,
+		closeModal: closeModal$1,
+		addOutlet,
+		removeOutlet
+	};
+};
+
+//#endregion
+//#region src/rmu-provider.tsx
+const RMUProvider = ({ children }) => {
+	const state = useRMUState();
+	useRMUEvents(state);
+	return /* @__PURE__ */ React.createElement(RMUContext.Provider, { value: state }, children);
+};
+
+//#endregion
+//#region src/rmu-outlet.tsx
+const RMUOutlet = ({ outletId = "rmu-default-outlet" }) => {
+	const ctx = useContext(RMUContext);
+	if (!ctx) throw new Error("RMUProvider not found in component tree");
+	const { outlets, addOutlet, removeOutlet } = ctx;
+	useEffect(() => {
+		addOutlet(outletId);
+		return () => {
+			removeOutlet(outletId);
+		};
+	}, []);
+	const modals = outlets[outletId] ?? {};
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, Object.entries(modals).map(([modalId, modalComponent]) => /* @__PURE__ */ React.createElement(Fragment, { key: modalId }, modalComponent)));
+};
+
+//#endregion
+export { RMUOutlet, RMUProvider, closeModal, openModal };

package/package.json

@@ -1,30 +1,29 @@
 {
-  "version": "0.2.5",
+  "name": "@violice/rmu",
+  "version": "0.2.7",
+  "author": "Sergey Ivashko",
   "license": "MIT",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
   "files": [
     "dist",
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=20"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "start": "tsdown --watch",
+    "build": "tsdown",
+    "prepare": "tsdown",
     "size": "size-limit",
     "analyze": "size-limit --why"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16",
+    "react-native": ">=0.60"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
     }
   },
   "prettier": {
@@ -33,29 +32,37 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "name": "@violice/rmu",
-  "author": "Sergey Ivashko",
-  "module": "dist/rmu.esm.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
   "size-limit": [
     {
-      "path": "dist/rmu.cjs.production.min.js",
-      "limit": "10 KB"
+      "path": "dist/index.js",
+      "limit": "2 KB"
     },
     {
-      "path": "dist/rmu.esm.js",
-      "limit": "10 KB"
+      "path": "dist/index.mjs",
+      "limit": "2 KB"
     }
   ],
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
-    "husky": "^7.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "size-limit": "^7.0.8",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.6.2",
-    "typescript": "^4.9.5"
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@types/react": "^18.3.25",
+    "@types/react-dom": "^18.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "size-limit": "^11.2.0",
+    "tsdown": "^0.15.6",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
   }
 }

package/src/emitter.ts

@@ -0,0 +1,37 @@
+type EventHandler = (payload: any) => void;
+
+type EventListenersMap = Record<string, Set<EventHandler>>;
+
+const listenersByType: EventListenersMap = {};
+
+export const emitter = {
+  subscribe(type: string, handler: EventHandler) {
+    if (!listenersByType[type]) {
+      listenersByType[type] = new Set<EventHandler>();
+    }
+    listenersByType[type].add(handler);
+  },
+
+  unsubscribe(type: string, handler: EventHandler) {
+    const listeners = listenersByType[type];
+    if (listeners) {
+      listeners.delete(handler);
+      if (listeners.size === 0) {
+        delete listenersByType[type];
+      }
+    }
+  },
+
+  emit(type: string, payload: any) {
+    const listeners = listenersByType[type];
+    if (!listeners) return;
+    // Clone to avoid issues if handlers mutate subscription during emit
+    [...listeners].forEach(handler => {
+      try {
+        handler(payload);
+      } catch {
+        // Swallow to ensure one handler error does not break others
+      }
+    });
+  },
+};