arcway 0.1.25 → 0.1.26

package/client/hooks/swr-compat.js

@@ -0,0 +1,25 @@
+import * as SWR from 'swr';
+import * as SWRMutation from 'swr/mutation';
+
+function resolveHook(mod) {
+  if (typeof mod === 'function') return mod;
+  if (typeof mod?.default === 'function') return mod.default;
+  if (typeof mod?.default?.default === 'function') return mod.default.default;
+  return null;
+}
+
+function resolveNamed(mod, key) {
+  if (typeof mod?.[key] === 'function') return mod[key];
+  if (typeof mod?.default?.[key] === 'function') return mod.default[key];
+  return null;
+}
+
+const useSWR = resolveHook(SWR);
+const useSWRConfig = resolveNamed(SWR, 'useSWRConfig');
+const useSWRMutation = resolveHook(SWRMutation);
+
+if (!useSWR || !useSWRConfig || !useSWRMutation) {
+  throw new Error('Arcway failed to resolve SWR hooks');
+}
+
+export { useSWR, useSWRConfig, useSWRMutation };

package/client/hooks/use-api.js

@@ -1,11 +1,8 @@
 import { useEffect, useCallback, useRef } from 'react';
-import * as SWR from 'swr';
 import { useApiContext, useWsManager } from '../provider.js';
 import { soloFetch, ApiError } from '../fetcher.js';
 import { stringifyQuery } from '../query.js';
-
-const useSWR = typeof SWR.default === 'function' ? SWR.default : SWR;
-const { useSWRConfig } = SWR;
+import { useSWR, useSWRConfig } from './swr-compat.js';
 
 function buildUrl(base, query) {
   if (!query) return base;

package/client/hooks/use-graphql.js

@@ -1,7 +1,6 @@
-import useSWR from 'swr';
-import useSWRMutation from 'swr/mutation';
 import { useApiContext } from '../provider.js';
 import { graphqlFetch } from '../graphql.js';
+import { useSWR, useSWRMutation } from './swr-compat.js';
 
 function useGraphQL(query, variables, options) {
   const { pathPrefix, headers } = useApiContext();

package/client/hooks/use-mutation.js

@@ -1,4 +1,4 @@
-import useSWRMutation from 'swr/mutation';
+import { useSWRMutation } from './swr-compat.js';
 import { useApiContext } from '../provider.js';
 import { soloFetch } from '../fetcher.js';
 

package/client/hooks/web/use-local-storage.js

@@ -1,39 +1,77 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+const LOCAL_STORAGE_EVENT = 'arcway-local-storage';
 
 export default function useLocalStorage(key, initialValue) {
   const [storedValue, setStoredValue] = useState(initialValue);
+  const storedValueRef = useRef(initialValue);
+  const initialValueRef = useRef(initialValue);
+  const instanceIdRef = useRef(`ls:${Math.random().toString(36).slice(2)}`);
 
   useEffect(() => {
-    try {
-      const item = window.localStorage.getItem(key);
-      if (item !== null) {
-        setStoredValue(JSON.parse(item));
+    storedValueRef.current = storedValue;
+  }, [storedValue]);
+
+  useEffect(() => {
+    initialValueRef.current = initialValue;
+  }, [key, initialValue]);
+
+  useEffect(() => {
+    const readValue = () => {
+      try {
+        const item = window.localStorage.getItem(key);
+        return item !== null ? JSON.parse(item) : initialValueRef.current;
+      } catch {
+        return initialValueRef.current;
       }
+    };
+
+    try {
+      setStoredValue(readValue());
     } catch {}
 
     const handleStorage = (e) => {
       if (e.key === key) {
         try {
-          setStoredValue(e.newValue !== null ? JSON.parse(e.newValue) : initialValue);
+          setStoredValue(e.newValue !== null ? JSON.parse(e.newValue) : initialValueRef.current);
         } catch {
-          setStoredValue(initialValue);
+          setStoredValue(initialValueRef.current);
         }
       }
     };
 
+    const handleLocalUpdate = (e) => {
+      if (e.detail?.key !== key) return;
+      if (e.detail?.source === instanceIdRef.current) return;
+      if ('value' in (e.detail ?? {})) {
+        setStoredValue(e.detail.value);
+        return;
+      }
+      setStoredValue(readValue());
+    };
+
     window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
-  }, [key, initialValue]);
+    window.addEventListener(LOCAL_STORAGE_EVENT, handleLocalUpdate);
+    return () => {
+      window.removeEventListener('storage', handleStorage);
+      window.removeEventListener(LOCAL_STORAGE_EVENT, handleLocalUpdate);
+    };
+  }, [key]);
 
   const setValue = useCallback(
     (value) => {
-      setStoredValue((prev) => {
-        const nextValue = value instanceof Function ? value(prev) : value;
-        try {
-          window.localStorage.setItem(key, JSON.stringify(nextValue));
-        } catch {}
-        return nextValue;
-      });
+      const prev = storedValueRef.current;
+      const nextValue = value instanceof Function ? value(prev) : value;
+      storedValueRef.current = nextValue;
+      setStoredValue(nextValue);
+      try {
+        window.localStorage.setItem(key, JSON.stringify(nextValue));
+        window.dispatchEvent(
+          new CustomEvent(LOCAL_STORAGE_EVENT, {
+            detail: { key, value: nextValue, source: instanceIdRef.current },
+          }),
+        );
+      } catch {}
     },
     [key],
   );

package/client/index.js

@@ -1,62 +1,22 @@
-import {
-  ApiProvider,
-  Provider,
-  SoloProvider,
-  useApiContext,
-  useSoloContext,
-  useWsManager,
-} from './provider.js';
-import useApi from './hooks/use-api.js';
-import useQuery from './hooks/use-query.js';
-import useMutation from './hooks/use-mutation.js';
-import useDebounce from './hooks/use-debounce.js';
-import useForm from './hooks/use-form.js';
-import useInterval from './hooks/use-interval.js';
-import { ApiError, soloFetch } from './fetcher.js';
-import { GraphQLError, graphqlFetch } from './graphql.js';
-import { useGraphQL, useGraphQLMutation } from './hooks/use-graphql.js';
-import { WsManager } from './ws.js';
-import useLocalStorage from './hooks/web/use-local-storage.js';
-import useClickOutside from './hooks/web/use-click-outside.js';
-import { Link, Router, SoloRouter, useRouter, usePathname, useParams, useSearchParams } from './router.js';
-import { Head, setSSRHeadData, clearSSRHeadData, renderHeadToString } from './head.js';
-import { useEnv, env, collectPublicEnv, buildEnvScriptTag } from './env.js';
-
 export {
-  ApiError,
   ApiProvider,
-  GraphQLError,
-  Head,
-  Link,
   Provider,
-  Router,
   SoloProvider,
-  SoloRouter,
-  WsManager,
-  buildEnvScriptTag,
-  clearSSRHeadData,
-  collectPublicEnv,
-  env,
-  graphqlFetch,
-  renderHeadToString,
-  setSSRHeadData,
-  soloFetch,
-  useApi,
   useApiContext,
-  useClickOutside,
-  useDebounce,
-  useEnv,
-  useForm,
-  useGraphQL,
-  useGraphQLMutation,
-  useInterval,
-  useLocalStorage,
-  useMutation,
-  useParams,
-  usePathname,
-  useQuery,
-  useRouter,
-  useSearchParams,
   useSoloContext,
   useWsManager,
-};
+} from './provider.js';
+export { default as useApi } from './hooks/use-api.js';
+export { default as useQuery } from './hooks/use-query.js';
+export { default as useMutation } from './hooks/use-mutation.js';
+export { default as useDebounce } from './hooks/use-debounce.js';
+export { default as useInterval } from './hooks/use-interval.js';
+export { ApiError, soloFetch } from './fetcher.js';
+export { GraphQLError, graphqlFetch } from './graphql.js';
+export { useGraphQL, useGraphQLMutation } from './hooks/use-graphql.js';
+export { WsManager } from './ws.js';
+export { default as useLocalStorage } from './hooks/web/use-local-storage.js';
+export { default as useClickOutside } from './hooks/web/use-click-outside.js';
+export { Link, Router, SoloRouter, useRouter } from './router.js';
+export { Head, setSSRHeadData, clearSSRHeadData, renderHeadToString } from './head.js';
+export { useEnv, env, collectPublicEnv, buildEnvScriptTag } from './env.js';

package/client/router.js

@@ -8,6 +8,7 @@ import {
   useRef,
   useTransition,
   createElement,
+  forwardRef,
 } from 'react';
 import {
   readClientManifest,
@@ -17,7 +18,7 @@ import {
   prefetchRoute,
   syncStylesForPath,
 } from './page-loader.js';
-import { parseQuery } from './query.js';
+import { parseQuery, stringifyQuery } from './query.js';
 
 const ROUTER_CTX_KEY = '__router_context__';
 const RouterContext = (globalThis[ROUTER_CTX_KEY] ??= createContext(null));
@@ -29,6 +30,21 @@ function wrapInLayouts(element, layouts) {
   return element;
 }
 
+function normalizeNavigateTarget(to) {
+  if (typeof to === 'string') return to;
+  if (!to || typeof to !== 'object') {
+    throw new Error('router.push/replace expects a string URL or { pathname, query }');
+  }
+  const pathname =
+    typeof to.pathname === 'string'
+      ? to.pathname
+      : typeof window !== 'undefined'
+        ? window.location.pathname
+        : '/';
+  const qs = stringifyQuery(to.query || {});
+  return qs ? `${pathname}?${qs}` : pathname;
+}
+
 function useRouter() {
   const ctx = useContext(RouterContext);
   if (!ctx) {
@@ -40,8 +56,8 @@ function useRouter() {
       pathname: ctx.pathname,
       params: ctx.params,
       query: typeof window !== 'undefined' ? parseQuery(window.location.search) : {},
-      push: (to, options) => ctx.navigate(to, { ...options, replace: false }),
-      replace: (to, options) => ctx.navigate(to, { ...options, replace: true }),
+      push: (to, options) => ctx.navigate(normalizeNavigateTarget(to), { ...options, replace: false }),
+      replace: (to, options) => ctx.navigate(normalizeNavigateTarget(to), { ...options, replace: true }),
       back: () => {
         if (typeof window !== 'undefined') window.history.back();
       },
@@ -53,23 +69,11 @@ function useRouter() {
       },
     }),
     // queryVersion bumps on every query-only navigation or same-path popstate,
-    // so memoised consumers (notably `useSearchParams`) re-read the URL.
+    // so memoised consumers re-read the URL.
     [ctx.pathname, ctx.params, ctx.navigate, ctx.queryVersion],
   );
 }
 
-function usePathname() {
-  return useRouter().pathname;
-}
-
-function useParams() {
-  return useRouter().params;
-}
-
-function useSearchParams() {
-  return useRouter().query;
-}
-
 function Router({
   initialPath,
   initialParams,
@@ -92,7 +96,7 @@ function Router({
   const [isNavigating, setIsNavigating] = useState(false);
   const [isPending, startTransition] = useTransition();
   // Bumped on query-only navigations (both push/replace and popstate) so that
-  // `useRouter`/`useSearchParams` consumers re-render even though pathname and
+  // `useRouter` consumers re-render even though pathname and
   // params are unchanged.
   const [queryVersion, setQueryVersion] = useState(0);
   const manifestRef = useRef(null);
@@ -123,7 +127,7 @@ function Router({
   // so React commits the new `pathname` and the re-read of
   // `window.location.search` (triggered by `queryVersion`) in one go. Keeping
   // the bump outside the transition raced at default priority and produced
-  // an interim render where `pathname` was stale but `useSearchParams` had
+  // an interim render where `pathname` was stale but `useRouter().query` had
   // already moved to the new query string — see the
   // `query-version-outside-navigation-transition` bug report for the
   // downstream data-corruption pattern that unlocked.
@@ -305,17 +309,29 @@ function Router({
   );
 }
 
-function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ...rest }) {
+const Link = forwardRef(function Link(
+  { href, children, onClick, scroll, replace, prefetch = 'hover', ...rest },
+  forwardedRef,
+) {
   const router = useContext(RouterContext);
   const linkRef = useRef(null);
+  const resolvedHref = normalizeNavigateTarget(href);
+  const setLinkRef = useCallback(
+    (node) => {
+      linkRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef],
+  );
 
   const handleMouseEnter = useCallback(() => {
     if (prefetch !== 'hover') return;
     const manifest = readClientManifest();
     if (manifest) {
-      prefetchRoute(manifest, href);
+      prefetchRoute(manifest, resolvedHref);
     }
-  }, [href, prefetch]);
+  }, [resolvedHref, prefetch]);
 
   useEffect(() => {
     if (prefetch !== 'viewport') return;
@@ -328,7 +344,7 @@ function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ..
           if (entry.isIntersecting) {
             const manifest = readClientManifest();
             if (manifest) {
-              prefetchRoute(manifest, href);
+              prefetchRoute(manifest, resolvedHref);
             }
             observer.unobserve(el);
             break;
@@ -340,7 +356,7 @@ function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ..
 
     observer.observe(el);
     return () => observer.disconnect();
-  }, [href, prefetch]);
+  }, [resolvedHref, prefetch]);
 
   function handleClick(e) {
     if (onClick) onClick(e);
@@ -350,7 +366,7 @@ function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ..
     if (rest.target === '_blank' || rest.download !== undefined) return;
 
     try {
-      const url = new URL(href, window.location.origin);
+      const url = new URL(resolvedHref, window.location.origin);
       if (url.origin !== window.location.origin) return;
     } catch {
       return;
@@ -358,19 +374,25 @@ function Link({ href, children, onClick, scroll, replace, prefetch = 'hover', ..
 
     e.preventDefault();
     if (router) {
-      router.navigate(href, { scroll, replace });
+      router.navigate(resolvedHref, { scroll, replace });
     } else {
-      window.history.pushState(null, '', href);
+      window.history.pushState(null, '', resolvedHref);
       window.dispatchEvent(new PopStateEvent('popstate'));
     }
   }
 
   return createElement(
     'a',
-    { ref: linkRef, href, onClick: handleClick, onMouseEnter: handleMouseEnter, ...rest },
+    {
+      ref: setLinkRef,
+      href: resolvedHref,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      ...rest,
+    },
     children,
   );
-}
+});
 
 const SoloRouter = Router;
-export { Link, Router, SoloRouter, useParams, usePathname, useRouter, useSearchParams };
+export { Link, Router, SoloRouter, useRouter };