zudoku 0.16.3 → 0.18.0

package/src/lib/authentication/use-broadcast/shared.ts

@@ -0,0 +1,372 @@
+// https://github.com/Romainlg29/use-broadcast/
+
+import { StateCreator, StoreMutatorIdentifier } from "zustand";
+
+export type SharedOptions = {
+  /**
+   * The name of the broadcast channel
+   * It must be unique
+   */
+  name?: string;
+
+  /**
+   * Main timeout
+   * If the main tab / window doesn't respond in this time, this tab / window will become the main
+   * @default 100 ms
+   */
+  mainTimeout?: number;
+
+  /**
+   * If true, the store will only synchronize once with the main tab. After that, the store will be unsynchronized.
+   * @default false
+   */
+  unsync?: boolean;
+
+  /**
+   * Callback when this tab / window becomes the main tab / window
+   * Triggered only in the main tab / window
+   */
+  onBecomeMain?: (id: number) => void;
+
+  /**
+   * Callback when a new tab is opened / closed
+   * Triggered only in the main tab / window
+   */
+  onTabsChange?: (ids: number[]) => void;
+};
+
+/**
+ * The Shared type
+ */
+export type Shared = <
+  T,
+  Mps extends [StoreMutatorIdentifier, unknown][] = [],
+  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
+>(
+  f: StateCreator<T, Mps, Mcs>,
+  options?: SharedOptions,
+) => StateCreator<T, Mps, Mcs>;
+
+/**
+ * Type implementation of the Shared function
+ */
+type SharedImpl = <T>(
+  f: StateCreator<T, [], []>,
+  options?: SharedOptions,
+) => StateCreator<T, [], []>;
+
+/**
+ * Shared implementation
+ * @param f Zustand state creator
+ * @param options The options
+ */
+const sharedImpl: SharedImpl = (f, options) => (set, get, store) => {
+  /**
+   * The broadcast channel is not supported in SSR
+   */
+  if (
+    typeof window === "undefined" &&
+    !(
+      typeof WorkerGlobalScope !== "undefined" &&
+      self instanceof WorkerGlobalScope
+    )
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this environment. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * If BroadcastChannel is not supported, return the basic store
+   */
+  if (typeof BroadcastChannel === "undefined") {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "BroadcastChannel is not supported in this browser. The store will not be shared.",
+    );
+    return f(set, get, store);
+  }
+
+  /**
+   * Types
+   */
+  type Item = { [key: string]: unknown };
+  type Message =
+    | {
+        action: "sync";
+      }
+    | {
+        action: "change";
+        state: Item;
+      }
+    | {
+        action: "add_new_tab";
+        id: number;
+      }
+    | {
+        action: "close";
+        id: number;
+      }
+    | {
+        action: "change_main";
+        id: number;
+        tabs: number[];
+      };
+
+  /**
+   * Is the store synced with the other tabs
+   */
+  let isSynced = get() !== undefined;
+
+  /**
+   * Is this tab / window the main tab / window
+   * When a new tab / window is opened, it will be synced with the main
+   */
+  let isMain = false;
+
+  /**
+   * The broadcast channel name
+   */
+  const name = options?.name ?? f.toString();
+
+  /**
+   * The id of the tab / window
+   */
+  let id = 0;
+
+  /**
+   * Store a list of all the tabs / windows
+   * Only for the main tab / window
+   */
+  const tabs: number[] = [0];
+
+  /**
+   * Create the broadcast channel
+   */
+  const channel = new BroadcastChannel(name);
+
+  /**
+   * Handle the Zustand set function
+   * Trigger a postMessage to all the other tabs
+   */
+  const onSet: typeof set = (...args) => {
+    /**
+     * Get the previous states
+     */
+    const previous = get() as Item;
+
+    /**
+     * Update the states
+     */
+    set(...(args as Parameters<typeof set>));
+
+    /**
+     * If the stores should not be synced, return.
+     */
+    if (options?.unsync) {
+      return;
+    }
+
+    /**
+     * Get the fresh states
+     */
+    const updated = get() as Item;
+
+    /**
+     * Get the states that changed
+     */
+    const state = Object.entries(updated).reduce((obj, [key, val]) => {
+      if (previous[key] !== val) {
+        obj = { ...obj, [key]: val };
+      }
+      return obj;
+    }, {} as Item);
+
+    /**
+     * Send the states to all the other tabs
+     */
+    channel.postMessage({ action: "change", state } as Message);
+  };
+
+  /**
+   * Subscribe to the broadcast channel
+   */
+  channel.onmessage = (e) => {
+    if ((e.data as Message).action === "sync") {
+      /**
+       * If this tab / window is not the main, return
+       */
+      if (!isMain) {
+        return;
+      }
+
+      /**
+       * Remove all the functions and symbols from the store
+       */
+      const state = Object.entries(get() as Item).reduce((obj, [key, val]) => {
+        if (typeof val !== "function" && typeof val !== "symbol") {
+          obj = { ...obj, [key]: val };
+        }
+        return obj;
+      }, {});
+
+      /**
+       * Send the state to the other tabs
+       */
+      channel.postMessage({ action: "change", state } as Message);
+
+      /**
+       * Set the new tab / window id
+       */
+      const new_id = tabs[tabs.length - 1]! + 1;
+      tabs.push(new_id);
+
+      options?.onTabsChange?.(tabs);
+
+      channel.postMessage({ action: "add_new_tab", id: new_id } as Message);
+
+      return;
+    }
+
+    /**
+     * Set an id for the tab / window if it doesn't have one
+     */
+    if ((e.data as Message).action === "add_new_tab" && !isMain && id === 0) {
+      id = e.data.id;
+      return;
+    }
+
+    /**
+     * On receiving a new state, update the state
+     */
+    if ((e.data as Message).action === "change") {
+      /**
+       * Update the state
+       */
+      set(e.data.state);
+
+      /**
+       * Set the synced attribute
+       */
+      isSynced = true;
+    }
+
+    /**
+     * On receiving a close message, remove the tab / window id from the list
+     */
+    if ((e.data as Message).action === "close") {
+      if (!isMain) {
+        return;
+      }
+
+      const index = tabs.indexOf(e.data.id);
+      if (index !== -1) {
+        tabs.splice(index, 1);
+
+        options?.onTabsChange?.(tabs);
+      }
+    }
+
+    /**
+     * On receiving a change_main message, change the main tab / window
+     */
+    if ((e.data as Message).action === "change_main") {
+      if (e.data.id === id) {
+        isMain = true;
+        tabs.splice(0, tabs.length, ...e.data.tabs);
+
+        options?.onBecomeMain?.(id);
+      }
+    }
+  };
+
+  /**
+   * Synchronize with the main tab
+   */
+  const synchronize = (): void => {
+    channel.postMessage({ action: "sync" } as Message);
+
+    /**
+     * If isSynced is false after 100ms, this tab is the main tab
+     */
+    setTimeout(() => {
+      if (!isSynced) {
+        isMain = true;
+        isSynced = true;
+
+        options?.onBecomeMain?.(id);
+      }
+    }, options?.mainTimeout ?? 100);
+  };
+
+  /**
+   * Handle case when the tab / window is closed
+   */
+  const onClose = (): void => {
+    channel.postMessage({ action: "close", id } as Message);
+
+    /**
+     * If we're closing the main, make the second the new main
+     */
+    if (isMain) {
+      /**
+       * If there is only one tab left, close the channel and return
+       */
+      if (tabs.length === 1) {
+        /**
+         * Clean up
+         */
+        channel.close();
+        return;
+      }
+
+      const remaining_tabs = tabs.filter((tab) => tab !== id);
+      channel.postMessage({
+        action: "change_main",
+        id: remaining_tabs[0],
+        tabs: remaining_tabs,
+      } as Message);
+
+      return;
+    }
+  };
+
+  /**
+   * Add close event listener
+   */
+  if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", onClose);
+  }
+
+  /**
+   * Synchronize with the main tab
+   */
+  if (!isSynced) {
+    synchronize();
+  }
+
+  /**
+   * Modify and return the Zustand store
+   */
+  store.setState = onSet;
+
+  return f(onSet, get, store);
+};
+
+/**
+ * Shared middleware
+ *
+ * @example
+ * import { create } from 'zustand';
+ * import { shared } from 'use-broadcast-ts';
+ *
+ * const useStore = create(
+ *      shared(
+ *          (set) => ({ count: 0 }),
+ *          { name: 'my-store' }
+ *      )
+ * );
+ */
+export const shared = sharedImpl as Shared;

package/src/lib/authentication/use-broadcast/useBroadcast.ts

@@ -0,0 +1,146 @@
+// https://github.com/Romainlg29/use-broadcast/
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Our hook will return an object with three properties:
+ * - send: a function that will send a message to all other tabs
+ * - state: the current state of the broadcast
+ * - subscribe: a function that will subscribe to the broadcast (Only if options.subscribe is true)
+ */
+export type UseBroadcastReturn<T> = {
+  send: (val: T) => void;
+  state: T | undefined;
+  subscribe: (callback: (e: T) => void) => () => void;
+};
+
+/**
+ * The options for the useBroadcast hook
+ */
+export type UseBroadcastOptions = {
+  subscribe?: boolean;
+};
+
+/**
+ *
+ * @param name The name of the broadcast channel
+ * @param val The initial value of the broadcast
+ * @returns Returns an object with three properties: send, state and subscribe
+ */
+export const useBroadcast = <T>(
+  name: string,
+  val?: T,
+  options?: UseBroadcastOptions,
+): UseBroadcastReturn<T> => {
+  /**
+   * Store the state of the broadcast
+   */
+  const [state, setState] = useState<T | undefined>(val);
+
+  /**
+   * Store the BroadcastChannel instance
+   */
+  const channel = useRef<BroadcastChannel | null>(null);
+
+  /**
+   * Store the listeners
+   */
+  const listeners = useRef<((e: T) => void)[]>([]);
+
+  /**
+   * This function send the value to all the other tabs
+   * @param val The value to send
+   */
+  const send = (val: T) => {
+    if (!channel.current) {
+      return;
+    }
+
+    /**
+     * Send the value to all the other tabs
+     */
+    channel.current.postMessage(val);
+
+    if (!options?.subscribe) {
+      setState(val);
+    }
+
+    /**
+     * Dispatch the event to the listeners
+     */
+    listeners.current.forEach((listener) => listener(val));
+  };
+
+  /**
+   * This function subscribe to the broadcast
+   * @param callback The callback function
+   * @returns Returns a function that unsubscribe the callback
+   */
+  const subscribe = (callback: (e: T) => void) => {
+    /**
+     * Add the callback to the listeners
+     */
+    listeners.current.push(callback);
+
+    /**
+     * Return a function that unsubscribe the callback
+     */
+    return () =>
+      listeners.current.splice(listeners.current.indexOf(callback), 1);
+  };
+
+  useEffect(() => {
+    /**
+     * If BroadcastChannel is not supported, we log an error and return
+     */
+    if (typeof window === "undefined") {
+      // eslint-disable-next-line no-console
+      console.error("Window is undefined!");
+      return;
+    }
+
+    if (!window.BroadcastChannel) {
+      // eslint-disable-next-line no-console
+      console.error("BroadcastChannel is not supported!");
+      return;
+    }
+
+    /**
+     * If the channel is null, we create a new one
+     */
+    if (!channel.current) {
+      channel.current = new BroadcastChannel(name);
+    }
+
+    /**
+     * Subscribe to the message event
+     * @param e The message event
+     */
+    channel.current.onmessage = (e) => {
+      /**
+       * Update the state
+       */
+      if (!options?.subscribe) {
+        setState(e.data);
+      }
+
+      /**
+       * Dispatch an event to the listeners
+       */
+      listeners.current.forEach((listener) => listener(e.data));
+    };
+
+    /**
+     * Cleanup
+     */
+    return () => {
+      if (!channel.current) {
+        return;
+      }
+
+      channel.current.close();
+      channel.current = null;
+    };
+  }, [name, options]);
+
+  return { send, state, subscribe };
+};

package/src/lib/components/Bootstrap.tsx

@@ -1,5 +1,10 @@
+import {
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
 import { type HelmetData, HelmetProvider } from "@zudoku/react-helmet-async";
-import { StrictMode } from "react";
+import { StrictMode, useState } from "react";
 import { type createBrowserRouter, RouterProvider } from "react-router-dom";
 import {
   type createStaticRouter,
@@ -15,13 +20,31 @@ const Bootstrap = ({
   hydrate?: boolean;
   router: ReturnType<typeof createBrowserRouter>;
 }) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 1000 * 60 * 5,
+          },
+        },
+      }),
+  );
+
   return (
     <StrictMode>
-      <HelmetProvider>
-        <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-          <RouterProvider router={router} />
-        </StaggeredRenderContext.Provider>
-      </HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider
+                router={router}
+                future={{ v7_startTransition: true }}
+              />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </HydrationBoundary>
+      </QueryClientProvider>
     </StrictMode>
   );
 };
@@ -29,16 +52,20 @@ const Bootstrap = ({
 const BootstrapStatic = ({
   router,
   context,
+  queryClient,
   helmetContext,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
+  queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
 }) => (
   <StrictMode>
-    <HelmetProvider context={helmetContext}>
-      <StaticRouterProvider router={router} context={context} />
-    </HelmetProvider>
+    <QueryClientProvider client={queryClient}>
+      <HelmetProvider context={helmetContext}>
+        <StaticRouterProvider router={router} context={context} />
+      </HelmetProvider>
+    </QueryClientProvider>
   </StrictMode>
 );
 

package/src/lib/components/ClientOnly.tsx

@@ -1,13 +1,16 @@
-import { useSyncExternalStore } from "react";
+import { type ReactNode, useSyncExternalStore } from "react";
 
 const noop = () => () => {};
 
-export const ClientOnly = (props: { children: React.ReactNode }) => {
+export const ClientOnly = (props: {
+  children: ReactNode;
+  fallback?: ReactNode;
+}) => {
   const value = useSyncExternalStore(
     noop,
     () => "client",
     () => "server",
   );
 
-  return value === "client" ? props.children : null;
+  return value === "client" ? props.children : props.fallback;
 };

package/src/lib/components/DeveloperHint.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { Callout } from "../ui/Callout.js";
+import { Markdown } from "./Markdown.js";
 
 export const DeveloperHint = ({
   children,
@@ -13,7 +14,11 @@ export const DeveloperHint = ({
   return (
     <Callout type="caution" title="Developer hint" className={className}>
       <div className="flex flex-col gap-2">
-        <div>{children}</div>
+        {typeof children === "string" ? (
+          <Markdown content={children} />
+        ) : (
+          <div>{children}</div>
+        )}
         <small className="italic">
           Note: This hint is only shown in development mode.
         </small>