@violice/rmu 0.2.7 → 0.2.8

package/src/use-rmu-state.test.ts

@@ -0,0 +1,129 @@
+import React from 'react';
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useRMUState } from './use-rmu-state';
+
+describe('useRMUState', () => {
+  it('should initialize with empty outlets', () => {
+    const { result } = renderHook(() => useRMUState());
+    expect(result.current.outlets).toEqual({});
+  });
+
+  it('should add outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+    });
+
+    expect(result.current.outlets).toHaveProperty('test-outlet');
+    expect(result.current.outlets['test-outlet']).toEqual({});
+  });
+
+  it('should throw when adding duplicate outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+    });
+
+    expect(() => {
+      act(() => {
+        result.current.addOutlet('test-outlet');
+      });
+    }).toThrow('Outlet with id test-outlet already exists');
+  });
+
+  it('should remove outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+      result.current.removeOutlet('test-outlet');
+    });
+
+    expect(result.current.outlets).not.toHaveProperty('test-outlet');
+  });
+
+  it('should open modal in outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+    const mockComponent = React.createElement('div', null, 'Test');
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+      result.current.openModal({
+        modalId: 'modal-1',
+        modalComponent: mockComponent,
+        outletId: 'test-outlet',
+      });
+    });
+
+    expect(result.current.outlets['test-outlet']).toHaveProperty('modal-1');
+    expect(result.current.outlets['test-outlet']['modal-1']).toBe(mockComponent);
+  });
+
+  it('should throw when opening modal in non-existent outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    expect(() => {
+      act(() => {
+        result.current.openModal({
+          modalId: 'modal-1',
+          modalComponent: React.createElement('div', null, 'Test'),
+          outletId: 'non-existent',
+        });
+      });
+    }).toThrow('Outlet with id non-existent not found');
+  });
+
+  it('should close modal', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+      result.current.openModal({
+        modalId: 'modal-1',
+        modalComponent: React.createElement('div', null, 'Test'),
+        outletId: 'test-outlet',
+      });
+      result.current.closeModal({ modalId: 'modal-1', outletId: 'test-outlet' });
+    });
+
+    expect(result.current.outlets['test-outlet']).not.toHaveProperty('modal-1');
+  });
+
+  it('should throw when closing modal in non-existent outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    expect(() => {
+      act(() => {
+        result.current.closeModal({
+          modalId: 'modal-1',
+          outletId: 'non-existent',
+        });
+      });
+    }).toThrow('Outlet with id non-existent not found');
+  });
+
+  it('should handle multiple modals in same outlet', () => {
+    const { result } = renderHook(() => useRMUState());
+
+    act(() => {
+      result.current.addOutlet('test-outlet');
+      result.current.openModal({
+        modalId: 'modal-1',
+        modalComponent: React.createElement('div', null, 'Modal 1'),
+        outletId: 'test-outlet',
+      });
+      result.current.openModal({
+        modalId: 'modal-2',
+        modalComponent: React.createElement('div', null, 'Modal 2'),
+        outletId: 'test-outlet',
+      });
+    });
+
+    expect(Object.keys(result.current.outlets['test-outlet'])).toHaveLength(2);
+    expect(result.current.outlets['test-outlet']).toHaveProperty('modal-1');
+    expect(result.current.outlets['test-outlet']).toHaveProperty('modal-2');
+  });
+});

package/dist/index.d.ts

@@ -1,49 +0,0 @@
-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,231 +0,0 @@
-//#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));
-
-//#endregion
-let react = require("react");
-react = __toESM(react);
-
-//#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;