@geee-be/react-utils 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @geee-be/react-utils
 
+## 1.0.4
+
+### Patch Changes
+
+- b1b11e7: use client
+
+## 1.0.3
+
+### Patch Changes
+
+- ffa9af4: fix: missing output
+
 ## 1.0.2
 
 ### Patch Changes

package/dist/hooks/index.js

@@ -0,0 +1,3 @@
+export * from './use-broadcast-channel.js';
+export * from './use-history-state.js';
+export * from './use-local-state.js';

package/dist/hooks/state.util.js

@@ -0,0 +1,19 @@
+export const deserialize = (serialized, fromSerializable) => {
+    if (!serialized || typeof serialized !== 'string')
+        return undefined;
+    try {
+        return fromSerializable ? fromSerializable(JSON.parse(serialized)) : JSON.parse(serialized);
+    }
+    catch {
+        return undefined;
+    }
+};
+export const serialize = (value, toSerializable) => {
+    try {
+        return JSON.stringify(toSerializable ? toSerializable(value) : value);
+    }
+    catch {
+        return '';
+    }
+};
+export const getInitialValue = (initialValue) => initialValue instanceof Function ? initialValue() : initialValue;

package/dist/hooks/use-broadcast-channel.js

@@ -0,0 +1,43 @@
+'use client';
+import { useCallback, useEffect, useMemo } from 'react';
+/**
+ * React hook to create and manage a Broadcast Channel across multiple browser windows.
+ *
+ * @param channelName Static name of channel used across the browser windows.
+ * @param handleMessage Callback to handle the event generated when `message` is received.
+ * @param handleMessageError [optional] Callback to handle the event generated when `error` is received.
+ * @returns A function to send/post message on the channel.
+ * @example
+ * ```tsx
+ * import {useBroadcastChannel} from 'react-broadcast-channel';
+ *
+ * function App () {
+ *   const postUserIdMessage = useBroadcastChannel('userId', (e) => alert(e.data));
+ *   return (<button onClick={() => postUserIdMessage('ABC123')}>Send UserId</button>);
+ * }
+ * ```
+ * ---
+ * Works in browser that support Broadcast Channel API natively. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API#browser_compatibility).
+ * To support other browsers, install and use [broadcastchannel-polyfill](https://www.npmjs.com/package/broadcastchannel-polyfill).
+ */
+export const useBroadcastChannel = (channelName, handleMessage, handleMessageError) => {
+    const channel = useMemo(() => typeof window !== 'undefined' && 'BroadcastChannel' in window
+        ? new BroadcastChannel(channelName + '-channel')
+        : null, [channelName]);
+    useChannelEventListener(channel, 'message', handleMessage);
+    useChannelEventListener(channel, 'messageerror', handleMessageError);
+    useEffect(() => () => channel?.close(), [channel]);
+    return useCallback((data) => {
+        channel?.postMessage(data);
+    }, [channel]);
+};
+// Helpers
+/** Hook to subscribe/unsubscribe from channel events. */
+const useChannelEventListener = (channel, event, handler = () => { }) => {
+    useEffect(() => {
+        if (!channel)
+            return;
+        channel.addEventListener(event, handler);
+        return () => channel.removeEventListener(event, handler);
+    }, [channel, event, handler]);
+};

package/dist/hooks/use-history-state.js

@@ -0,0 +1,17 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { deserialize, getInitialValue, serialize } from './state.util.js';
+export const useHistoryState = (key, initialValue, replace = true, options) => {
+    const [value, setValue] = useState(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    () => deserialize(history.state?.[key], options?.fromSerializable) ?? getInitialValue(initialValue));
+    useEffect(() => {
+        if (replace) {
+            history.replaceState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
+        }
+        else {
+            history.pushState({ ...history.state, [key]: serialize(value, options?.toSerializable) }, '');
+        }
+    }, [key, value]);
+    return [value, setValue];
+};

package/dist/hooks/use-local-state.js

@@ -0,0 +1,27 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+import { deserialize, getInitialValue, serialize } from './state.util.js';
+// Provides hook that persist the state with local storage with sync'd updates
+// NOTE: this only syncs between different window contexts, it doesn't sync between components in the same window
+export const useLocalState = (key, initialValue, options) => {
+    const readValue = useCallback(() => {
+        const item = localStorage.getItem(key);
+        return deserialize(item, options?.fromSerializable) ?? getInitialValue(initialValue);
+    }, [key, options?.fromSerializable, initialValue]);
+    const [storedValue, setStoredValue] = useState(readValue);
+    const setValue = useCallback((value) => {
+        const newValue = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(newValue);
+        localStorage.setItem(key, serialize(newValue, options?.toSerializable));
+    }, [key, options?.toSerializable, storedValue]);
+    const storageValueChanged = useCallback((ev) => {
+        if (ev.storageArea !== localStorage || ev.key !== key)
+            return;
+        setStoredValue(deserialize(ev.newValue, options?.fromSerializable) ?? getInitialValue(initialValue));
+    }, [key, options?.fromSerializable, initialValue]);
+    useEffect(() => {
+        window.addEventListener('storage', storageValueChanged);
+        return () => window.removeEventListener('storage', storageValueChanged);
+    }, [storageValueChanged]);
+    return [storedValue, setValue];
+};

package/dist/hooks/use-local-state.stories.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocalState } from './use-local-state.js';
+const meta = {
+    title: 'hooks/useLocalState',
+};
+export default meta;
+export const Primary = {
+    render: () => {
+        const [value, setValue] = useLocalState('story-use-local-state', { val: 1 });
+        console.log('render', value);
+        return (_jsxs("div", { children: [JSON.stringify(value), _jsx("button", { onClick: () => setValue((prev) => ({ val: prev.val + 1 ?? -2 })), children: "Inc" })] }));
+    },
+};

package/dist/index.js

@@ -0,0 +1 @@
+export * from './hooks/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geee-be/react-utils",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "",
   "keywords": [],
   "license": "MIT",

package/src/hooks/use-broadcast-channel.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useMemo } from 'react';
 
 /**

package/src/hooks/use-history-state.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import type { InitialValue, SerializationOptions } from './state.util.js';

package/src/hooks/use-local-state.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import type { Dispatch, SetStateAction } from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import type { InitialValue, SerializationOptions } from './state.util.js';

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../create/tsconfig.web.json",
   "compilerOptions": {
+    "noEmit": false,
     "outDir": "./dist"
   },
   "include": ["./src"]