react-broadcast-sync 1.5.1 → 1.8.0

package/demo/react-broadcast-sync-demo/src/hooks/useCounterBroadcast.ts

@@ -1,96 +0,0 @@
-/**
- * Custom hook for managing counter state synchronization across browser tabs.
- *
- * This hook provides functionality for:
- * 1. Synchronizing a counter value across multiple browser tabs
- * 2. Broadcasting hover state for visual feedback
- * 3. Maintaining consistent state across all instances
- *
- * @returns {Object} Counter state and handlers
- * @property {number} count - Current counter value
- * @property {boolean} isHovered - Whether the counter is currently hovered
- * @property {Function} increment - Function to increment the counter
- * @property {Function} decrement - Function to decrement the counter
- * @property {Function} handleMouseEnter - Function to handle mouse enter event
- * @property {Function} handleMouseLeave - Function to handle mouse leave event
- */
-import { useState, useEffect, useRef } from 'react';
-import { useBroadcastChannel } from 'react-broadcast-sync';
-
-export const useCounterBroadcast = () => {
-  const { messages, postMessage } = useBroadcastChannel('counter', {
-    keepLatestMessage: true,
-    namespace: 'demo-app',
-  });
-
-  const [count, setCount] = useState<number>(0);
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [showCheckmark, setShowCheckmark] = useState(false);
-  const lastTimestampRef = useRef<number>(0);
-
-  const syncTimeoutRef = useRef<NodeJS.Timeout>();
-  const checkmarkTimeoutRef = useRef<NodeJS.Timeout>();
-
-  // Update count when new messages arrive
-  useEffect(() => {
-    const lastMessage = messages[messages.length - 1];
-    if (lastMessage?.message !== undefined && lastMessage.timestamp > lastTimestampRef.current) {
-      // Clear any existing timeouts
-      if (syncTimeoutRef.current) {
-        clearTimeout(syncTimeoutRef.current);
-      }
-      if (checkmarkTimeoutRef.current) {
-        clearTimeout(checkmarkTimeoutRef.current);
-      }
-
-      // Reset states
-      setIsSyncing(true);
-      setShowCheckmark(false);
-
-      // Update count and timestamp
-      setCount(lastMessage.message);
-      lastTimestampRef.current = lastMessage.timestamp;
-
-      // Show checkmark after a short delay
-      syncTimeoutRef.current = setTimeout(() => {
-        setIsSyncing(false);
-        setShowCheckmark(true);
-
-        // Hide checkmark after showing it
-        checkmarkTimeoutRef.current = setTimeout(() => {
-          setShowCheckmark(false);
-        }, 1000);
-      }, 500);
-    }
-
-    // Cleanup
-    return () => {
-      if (syncTimeoutRef.current) {
-        clearTimeout(syncTimeoutRef.current);
-      }
-      if (checkmarkTimeoutRef.current) {
-        clearTimeout(checkmarkTimeoutRef.current);
-      }
-    };
-  }, [messages]);
-
-  const increment = () => {
-    const newCount = count + 1;
-    setCount(newCount);
-    postMessage('counter', newCount);
-  };
-
-  const decrement = () => {
-    const newCount = count - 1;
-    setCount(newCount);
-    postMessage('counter', newCount);
-  };
-
-  return {
-    count,
-    increment,
-    decrement,
-    isSyncing,
-    showCheckmark,
-  };
-};

package/demo/react-broadcast-sync-demo/src/hooks/useTextBroadcast.ts

@@ -1,37 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useBroadcastChannel } from 'react-broadcast-sync';
-
-export const useTextBroadcast = () => {
-  const { messages, postMessage } = useBroadcastChannel('text', {
-    keepLatestMessage: true,
-    namespace: 'demo-app',
-  });
-
-  const lastMessage = messages[messages.length - 1];
-  const [localText, setLocalText] = useState<string>(lastMessage ? lastMessage.message : '');
-
-  // Update local state when new messages arrive
-  useEffect(() => {
-    if (lastMessage) {
-      setLocalText(lastMessage.message);
-    }
-  }, [lastMessage]);
-
-  // Initialize text if no messages exist
-  useEffect(() => {
-    if (messages.length === 0) {
-      postMessage('text', '');
-    }
-  }, []);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const newText = event.target.value;
-    setLocalText(newText); // Update local state immediately
-    postMessage('text', newText); // Broadcast to other tabs
-  };
-
-  return {
-    localText,
-    handleChange,
-  };
-};

package/demo/react-broadcast-sync-demo/src/hooks/useTodoBroadcast.ts

@@ -1,249 +0,0 @@
-/**
- * Custom hook for managing todo list synchronization across browser tabs.
- *
- * This hook provides functionality for:
- * 1. Synchronizing todo items across multiple browser tabs
- * 2. Broadcasting hover states for visual feedback
- * 3. Synchronizing scroll position across tabs
- * 4. Managing todo item completion status
- *
- * @returns {Object} Todo list state and handlers
- * @property {Todo[]} todos - Array of todo items
- * @property {string} newTodo - Current input value for new todo
- * @property {Function} setNewTodo - Function to update new todo input
- * @property {number|null} hoveredTodoId - ID of currently hovered todo
- * @property {boolean} isScrolling - Whether the list is currently scrolling
- * @property {boolean} isSyncing - Whether scroll sync is in progress
- * @property {boolean} showCheckmark - Whether to show sync completion indicator
- * @property {React.RefObject} scrollContainerRef - Ref for the scroll container
- * @property {Function} handleScroll - Function to handle scroll events
- * @property {Function} addTodo - Function to add a new todo
- * @property {Function} toggleTodo - Function to toggle todo completion
- * @property {Function} handleTodoMouseEnter - Function to handle todo hover
- * @property {Function} handleTodoMouseLeave - Function to handle todo unhover
- */
-import { useState, useEffect, useRef } from 'react';
-import { useBroadcastChannel } from 'react-broadcast-sync';
-
-interface Todo {
-  id: string;
-  text: string;
-  completed: boolean;
-}
-
-/**
- * Hook for managing todo list synchronization across browser tabs.
- * Provides real-time todo updates, completion status tracking, and scroll position sync.
- *
- * @returns {Object} Todo state and handlers
- * @property {Todo[]} todos - List of todos
- * @property {string} newTodo - New todo input value
- * @property {Function} handleNewTodoChange - Function to handle new todo input changes
- * @property {Function} handleAddTodo - Function to add a new todo
- * @property {Function} handleToggleTodo - Function to toggle todo completion
- * @property {Function} handleDeleteTodo - Function to delete a todo
- * @property {Function} handleScroll - Function to handle scroll position sync
- */
-export const useTodoBroadcast = () => {
-  const { messages, postMessage } = useBroadcastChannel('todos', {
-    keepLatestMessage: true,
-    namespace: 'demo-app',
-  });
-
-  // Add hover state broadcast channel
-  const { messages: hoverMessages, postMessage: postHoverMessage } = useBroadcastChannel(
-    'todos-hover',
-    {
-      keepLatestMessage: true,
-      namespace: 'demo-app',
-    }
-  );
-
-  // Add scroll position broadcast channel
-  const { messages: scrollMessages, postMessage: postScrollMessage } = useBroadcastChannel(
-    'todos-scroll',
-    {
-      keepLatestMessage: true,
-      namespace: 'demo-app',
-    }
-  );
-
-  const lastMessage = messages[messages.length - 1];
-  const lastHoverMessage = hoverMessages[hoverMessages.length - 1];
-  const lastScrollMessage = scrollMessages[scrollMessages.length - 1];
-
-  const [todos, setTodos] = useState<Todo[]>(lastMessage ? lastMessage.message : []);
-  const [newTodo, setNewTodo] = useState('');
-  const [hoveredTodoId, setHoveredTodoId] = useState<string | null>(
-    lastHoverMessage ? lastHoverMessage.message : null
-  );
-  const [isScrolling, setIsScrolling] = useState(false);
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [showCheckmark, setShowCheckmark] = useState(false);
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-  const checkmarkTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
-
-  // Update local state when new messages arrive
-  useEffect(() => {
-    if (lastMessage) {
-      setTodos(lastMessage.message);
-    }
-  }, [lastMessage]);
-
-  // Update hover state when new hover messages arrive
-  useEffect(() => {
-    if (lastHoverMessage) {
-      setHoveredTodoId(lastHoverMessage.message);
-    }
-  }, [lastHoverMessage]);
-
-  // Update scroll position when new scroll messages arrive
-  useEffect(() => {
-    if (lastScrollMessage && scrollContainerRef.current) {
-      // Clear any existing timeouts
-      if (syncTimeoutRef.current) {
-        clearTimeout(syncTimeoutRef.current);
-      }
-      if (checkmarkTimeoutRef.current) {
-        clearTimeout(checkmarkTimeoutRef.current);
-      }
-
-      // Reset states
-      setIsSyncing(true);
-      setShowCheckmark(false);
-      setIsScrolling(false);
-
-      // Perform scroll
-      scrollContainerRef.current.scrollTo({
-        top: lastScrollMessage.message,
-        behavior: 'smooth',
-      });
-
-      // Listen for scroll end
-      const handleScrollEnd = () => {
-        setIsSyncing(false);
-        setShowCheckmark(true);
-
-        // Hide indicator after showing checkmark
-        checkmarkTimeoutRef.current = setTimeout(() => {
-          setShowCheckmark(false);
-        }, 1000);
-
-        // Remove the event listener
-        scrollContainerRef.current?.removeEventListener('scrollend', handleScrollEnd);
-      };
-
-      // Add scroll end listener
-      scrollContainerRef.current.addEventListener('scrollend', handleScrollEnd);
-
-      // Fallback timeout in case scrollend event doesn't fire
-      syncTimeoutRef.current = setTimeout(() => {
-        handleScrollEnd();
-      }, 500);
-
-      // Cleanup
-      return () => {
-        scrollContainerRef.current?.removeEventListener('scrollend', handleScrollEnd);
-        if (syncTimeoutRef.current) {
-          clearTimeout(syncTimeoutRef.current);
-        }
-        if (checkmarkTimeoutRef.current) {
-          clearTimeout(checkmarkTimeoutRef.current);
-        }
-      };
-    }
-  }, [lastScrollMessage]);
-
-  // Initialize todos if no messages exist
-  useEffect(() => {
-    if (messages.length === 0) {
-      postMessage('todos', []);
-    }
-  }, []);
-
-  const handleScrollSync = (e: React.UIEvent<HTMLDivElement>) => {
-    const newScrollPosition = e.currentTarget.scrollTop;
-
-    // Clear any existing timeouts
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-    if (syncTimeoutRef.current) {
-      clearTimeout(syncTimeoutRef.current);
-    }
-    if (checkmarkTimeoutRef.current) {
-      clearTimeout(checkmarkTimeoutRef.current);
-    }
-
-    // Reset states
-    setIsScrolling(true);
-    setIsSyncing(true);
-    setShowCheckmark(false);
-
-    // Debounce the scroll message to avoid too many updates
-    scrollTimeoutRef.current = setTimeout(() => {
-      postScrollMessage('todos-scroll', newScrollPosition);
-    }, 100);
-  };
-
-  const handleNewTodoChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setNewTodo(event.target.value);
-  };
-
-  const handleAddTodo = (event: React.FormEvent) => {
-    event.preventDefault();
-    if (newTodo.trim()) {
-      const updated = [
-        ...todos,
-        { id: Date.now().toString(), text: newTodo.trim(), completed: false },
-      ];
-      setTodos(updated);
-      postMessage('todos', updated);
-      setNewTodo('');
-    }
-  };
-
-  const handleToggleTodo = (id: string) => {
-    const updated = todos.map(todo =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo
-    );
-    setTodos(updated);
-    postMessage('todos', updated);
-  };
-
-  const handleDeleteTodo = (id: string) => {
-    const updated = todos.filter(todo => todo.id !== id);
-    setTodos(updated);
-    postMessage('todos', updated);
-  };
-
-  const handleTodoMouseEnter = (id: string) => {
-    setHoveredTodoId(id);
-    postHoverMessage('todos-hover', id);
-  };
-
-  const handleTodoMouseLeave = () => {
-    setHoveredTodoId(null);
-    postHoverMessage('todos-hover', null);
-  };
-
-  return {
-    todos,
-    newTodo,
-    handleNewTodoChange,
-    handleAddTodo,
-    handleToggleTodo,
-    handleDeleteTodo,
-    handleScrollSync,
-    hoveredTodoId,
-    isScrolling,
-    isSyncing,
-    showCheckmark,
-    scrollContainerRef,
-    handleTodoMouseEnter,
-    handleTodoMouseLeave,
-  };
-};

package/demo/react-broadcast-sync-demo/src/main.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
-import { CssBaseline } from '@mui/material';
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <CssBaseline />
-    <App />
-  </React.StrictMode>
-);

package/demo/react-broadcast-sync-demo/src/theme.ts

@@ -1,62 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-export const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#5EC13D',
-      dark: '#3FAD3A',
-      contrastText: '#fff',
-    },
-    secondary: {
-      main: '#3FAD3A',
-      contrastText: '#fff',
-    },
-    background: {
-      default: '#0D1117',
-      paper: '#161B22',
-    },
-    text: {
-      primary: '#fff',
-      secondary: '#bdbdbd',
-    },
-  },
-  typography: {
-    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
-    h1: {
-      fontWeight: 700,
-    },
-    h2: {
-      fontWeight: 600,
-    },
-    h3: {
-      fontWeight: 600,
-    },
-    h4: {
-      fontWeight: 600,
-    },
-    h5: {
-      fontWeight: 600,
-    },
-    h6: {
-      fontWeight: 600,
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          textTransform: 'none',
-          borderRadius: 8,
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          borderRadius: 12,
-          background: '#161B22',
-        },
-      },
-    },
-  },
-});

package/demo/react-broadcast-sync-demo/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "types": ["node"],
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/demo/react-broadcast-sync-demo/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/demo/react-broadcast-sync-demo/vite.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 4000,
-    strictPort: true,
-    open: true,
-  },
-});

package/eslint.config.js

@@ -1,38 +0,0 @@
-import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import reactPlugin from 'eslint-plugin-react';
-import reactHooksPlugin from 'eslint-plugin-react-hooks';
-import prettierPlugin from 'eslint-plugin-prettier';
-
-export default [
-  eslint.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ['src/**/*.{ts,tsx}', 'demo/**/*.{ts,tsx}'],
-    plugins: {
-      react: reactPlugin,
-      'react-hooks': reactHooksPlugin,
-      prettier: prettierPlugin,
-    },
-    rules: {
-      'react/react-in-jsx-scope': 'off',
-      'react/prop-types': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/no-explicit-any': [
-        'warn',
-        {
-          ignoreRestArgs: true,
-          fixToUnknown: false,
-        },
-      ],
-      'prettier/prettier': 'error',
-    },
-  },
-  {
-    files: ['**/*.test.{ts,tsx}', '**/*.d.ts'],
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
-    },
-  },
-];

package/jest.config.cjs

@@ -1,9 +0,0 @@
-module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'jsdom',
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
-  },
-  testMatch: ['**/src/tests/**/*.test.(ts|tsx)'],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
-};

package/jest.setup.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/rollup.config.mjs

@@ -1,98 +0,0 @@
-import babel from '@rollup/plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import terser from '@rollup/plugin-terser';
-
-const external = [
-  'react',
-  'react-dom',
-  'react/jsx-runtime',
-  /^react\//,
-  /^react-dom\//,
-  'typescript',
-  'tslib',
-  '@babel/runtime',
-];
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: 'dist/index.esm.js',
-      format: 'es',
-      sourcemap: true,
-      globals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        typescript: 'ts',
-        tslib: 'tslib',
-        '@babel/runtime': 'babelRuntime',
-      },
-      exports: 'named',
-    },
-    {
-      file: 'dist/index.cjs.js',
-      format: 'cjs',
-      sourcemap: true,
-      globals: {
-        react: 'React',
-        'react-dom': 'ReactDOM',
-        typescript: 'ts',
-        tslib: 'tslib',
-        '@babel/runtime': 'babelRuntime',
-      },
-      exports: 'named',
-    },
-  ],
-  plugins: [
-    peerDepsExternal({
-      includeDependencies: false,
-    }),
-    resolve({
-      mainFields: ['module', 'main'],
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      preferBuiltins: true,
-      dedupe: ['react', 'react-dom'],
-    }),
-    commonjs({
-      include: /node_modules/,
-      transformMixedEsModules: true,
-      requireReturnsDefault: 'auto',
-    }),
-    typescript({
-      tsconfig: './tsconfig.json',
-      exclude: ['**/__tests__/**', '**/*.test.ts', '**/*.test.tsx'],
-      declaration: true,
-      declarationDir: './dist',
-      emitDeclarationOnly: false,
-      sourceMap: true,
-    }),
-    babel({
-      babelHelpers: 'runtime',
-      presets: [
-        [
-          '@babel/preset-react',
-          {
-            runtime: 'automatic',
-            development: process.env.NODE_ENV === 'development',
-          },
-        ],
-      ],
-      plugins: [
-        [
-          '@babel/plugin-transform-runtime',
-          {
-            regenerator: true,
-            useESModules: true,
-          },
-        ],
-      ],
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      exclude: 'node_modules/**',
-    }),
-    terser(),
-  ],
-  external,
-};