@wular/pnext 0.0.4 → 0.0.7

package/src/api/client-navigation.ts

@@ -1,23 +1,23 @@
-import { useEffect, useState } from 'preact/hooks';
-import { ReadonlyURLSearchParams, type HrefOptions } from './navigation';
-import { blockJavascriptUrl, prefetchRoute, softNavigate } from './router';
-import { seedHistoryEntry } from './router/history';
+import { useEffect, useState } from 'preact/hooks'
+import { ReadonlyURLSearchParams, type HrefOptions } from './navigation'
+import { blockJavascriptUrl, prefetchRoute, softNavigate } from '../client/router'
+import { seedHistoryEntry } from '../client/router/history'
 import {
   emitLocationChange,
   locationListeners,
   scheduleNavigationScroll,
-} from './router/events';
-import { routeHref } from '../routing/href';
-import type { RouteParams, RouteParamValue, RoutePath } from '../types';
+} from '../client/router/events'
+import { routeHref } from '../routing/href'
+import type { RouteParams, RouteParamValue, RoutePath } from '../types'
 
 export type NavigateOptions<Route extends RoutePath> = HrefOptions<Route> & {
-  scroll?: boolean;
-};
+  scroll?: boolean
+}
 
 export type PrefetchOptions<Route extends RoutePath> = HrefOptions<Route> & {
-  kind?: 'auto' | 'full';
-  onInvalidate?: () => void;
-};
+  kind?: 'auto' | 'full'
+  onInvalidate?: () => void
+}
 
 export interface PNextRouter {
   push<Route extends RoutePath>(
@@ -25,42 +25,42 @@ export interface PNextRouter {
     ...options: RouteParams<Route> extends Record<string, never>
       ? [options?: NavigateOptions<Route>]
       : [options: NavigateOptions<Route>]
-  ): void;
+  ): void
   replace<Route extends RoutePath>(
     route: Route,
     ...options: RouteParams<Route> extends Record<string, never>
       ? [options?: NavigateOptions<Route>]
       : [options: NavigateOptions<Route>]
-  ): void;
+  ): void
   prefetch<Route extends RoutePath>(
     route: Route,
     ...options: RouteParams<Route> extends Record<string, never>
       ? [options?: PrefetchOptions<Route>]
       : [options: PrefetchOptions<Route>]
-  ): void;
-  refresh(): void;
-  back(): void;
-  forward(): void;
-  bfcacheId: string;
+  ): void
+  refresh(): void
+  back(): void
+  forward(): void
+  bfcacheId: string
 }
 
-export { ReadonlyURLSearchParams };
+export { ReadonlyURLSearchParams }
 
 export interface CurrentRoute<Route extends RoutePath = RoutePath> {
-  route: Route | null;
-  pathname: string;
-  params: RouteParams<Route>;
-  searchParams: ReadonlyURLSearchParams;
+  route: Route | null
+  pathname: string
+  params: RouteParams<Route>
+  searchParams: ReadonlyURLSearchParams
 }
 
 interface RouteState {
-  route?: string;
-  params?: Record<string, RouteParamValue>;
-  catchAllOptional?: boolean;
-  staticChildren?: string[];
-  bfcacheId?: string;
+  route?: string
+  params?: Record<string, RouteParamValue>
+  catchAllOptional?: boolean
+  staticChildren?: string[]
+  bfcacheId?: string
   /** `prefetch = 'allow-runtime'`: this route's shell is request-sampled. */
-  runtimePrefetch?: boolean;
+  runtimePrefetch?: boolean
 }
 
 /**
@@ -70,17 +70,17 @@ interface RouteState {
  * pattern (`/[teamSlug]/[...slug]`), so convert back at the API boundary.
  */
 function bracketRoutePattern(state: RouteState): string | null {
-  const route = state.route;
-  if (route == null) return null;
+  const route = state.route
+  if (route == null) return null
   return route
     .replace(/:([\w$]+)\*/g, state.catchAllOptional ? '[[...$1]]' : '[...$1]')
-    .replace(/:([\w$]+)/g, '[$1]');
+    .replace(/:([\w$]+)/g, '[$1]')
 }
 
 declare global {
   interface Window {
-    __PNEXT_ROUTE__?: RouteState;
-    __PNEXT_HISTORY_PATCHED__?: boolean;
+    __PNEXT_ROUTE__?: RouteState
+    __PNEXT_HISTORY_PATCHED__?: boolean
   }
 }
 
@@ -88,104 +88,110 @@ declare global {
 // `bfcacheId` below reads them, and `patchHistory` carries them onto an app-level pushState. Seeding
 // here rather than in the hub's installRouter keeps a page whose client graph never touches router
 // state from paying for them.
-seedHistoryEntry();
+seedHistoryEntry()
 
 export function useRouter(): PNextRouter {
-  return router;
+  return router
 }
 
 const router: PNextRouter = {
   push(route, ...[options]) {
-    navigate(routerHref(route, options), 'push', options?.scroll);
+    navigate(routerHref(route, options), 'push', options?.scroll)
   },
   replace(route, ...[options]) {
-    navigate(routerHref(route, options), 'replace', options?.scroll);
+    navigate(routerHref(route, options), 'replace', options?.scroll)
   },
   prefetch(route, ...[options]) {
     void prefetchRoute(routerHref(route, options), {
       strict: true,
       full: options?.kind === 'full',
       onInvalidate: options?.onInvalidate,
-    });
+    })
   },
   refresh() {
-    void softNavigate(window.location.href, { replace: true, scroll: false });
+    void softNavigate(window.location.href, { replace: true, scroll: false })
   },
   back() {
-    window.history.back();
+    window.history.back()
   },
   forward() {
-    window.history.forward();
+    window.history.forward()
   },
   get bfcacheId() {
-    return routeState().bfcacheId ?? '';
+    return routeState().bfcacheId ?? ''
   },
-};
+}
 
-function routerHref<Route extends RoutePath>(route: Route, options: HrefOptions<Route> | undefined) {
-  return hasHrefParts(options) ? routeHref(route, options) : String(route);
+function routerHref<Route extends RoutePath>(
+  route: Route,
+  options: HrefOptions<Route> | undefined,
+) {
+  return hasHrefParts(options) ? routeHref(route, options) : String(route)
 }
 
 function hasHrefParts<Route extends RoutePath>(
   options: HrefOptions<Route> | undefined,
 ): options is HrefOptions<Route> {
-  return Boolean(options && ('params' in options || 'search' in options || 'hash' in options));
+  return Boolean(options && ('params' in options || 'search' in options || 'hash' in options))
 }
 
 export function usePathname() {
-  return useLocation().pathname;
+  return useLocation().pathname
 }
 
 export function useSearchParams(): ReadonlyURLSearchParams {
-  return new ReadonlyURLSearchParams(useLocation().search);
+  return new ReadonlyURLSearchParams(useLocation().search)
 }
 
 export function useParams<Route extends RoutePath = RoutePath>() {
-  useLocation();
-  return (routeState().params ?? {}) as RouteParams<Route>;
+  useLocation()
+  return (routeState().params ?? {}) as RouteParams<Route>
 }
 
 export function useRoute<Route extends RoutePath = RoutePath>(): CurrentRoute<Route> {
-  const location = useLocation();
+  const location = useLocation()
   return {
     route: bracketRoutePattern(routeState()) as Route | null,
     pathname: location.pathname,
     params: (routeState().params ?? {}) as RouteParams<Route>,
     searchParams: new ReadonlyURLSearchParams(location.search),
-  };
+  }
 }
 
 export function useLinkStatus() {
-  return { pending: false };
+  return { pending: false }
 }
 
 function useLocation() {
-  const [location, setLocation] = useState(() => currentLocation());
+  // Read the URL live each render so any render pairs the address bar with its params;
+  // state is only the re-render trigger (unchanged-URL broadcasts bail out).
+  const location = currentLocation()
+  const [, setLocationKey] = useState(() => locationSignature(location))
 
   useEffect(() => {
-    patchHistory();
+    patchHistory()
     const listener = () =>
-      setLocation(previous => {
-        const next = currentLocation();
-        return previous.pathname === next.pathname &&
-          previous.search === next.search &&
-          previous.hash === next.hash
-          ? previous
-          : next;
-      });
-    locationListeners().add(listener);
-    window.addEventListener('popstate', listener);
+      setLocationKey(previous => {
+        const next = locationSignature(currentLocation())
+        return previous === next ? previous : next
+      })
+    locationListeners().add(listener)
+    window.addEventListener('popstate', listener)
     // Re-read once the listener is attached: the URL can move between the
     // render that captured it and this effect (a history traversal landing
     // while a swapped-in tree mounts), and nothing was listening for that one.
-    listener();
+    listener()
     return () => {
-      locationListeners().delete(listener);
-      window.removeEventListener('popstate', listener);
-    };
-  }, []);
+      locationListeners().delete(listener)
+      window.removeEventListener('popstate', listener)
+    }
+  }, [])
 
-  return location;
+  return location
+}
+
+function locationSignature(location: { pathname: string; search: string; hash: string }) {
+  return `${location.pathname}${location.search}${location.hash}`
 }
 
 function currentLocation() {
@@ -194,56 +200,57 @@ function currentLocation() {
       pathname: '/',
       search: '',
       hash: '',
-    };
+    }
   }
   return {
     pathname: window.location.pathname,
     search: window.location.search,
     hash: window.location.hash,
-  };
+  }
 }
 
 function routeState() {
-  if (!process.browser && typeof window === 'undefined') return {};
-  const state = (history.state as Record<string, unknown> | null) ?? {};
-  const routeState = window.__PNEXT_ROUTE__ ?? {};
-  const bfcacheId = typeof state.__pnextBfcacheId === 'string' ? state.__pnextBfcacheId : undefined;
-  return bfcacheId ? ({ ...routeState, bfcacheId } as RouteState) : routeState;
+  if (!process.browser && typeof window === 'undefined') return {}
+  const state = (history.state as Record<string, unknown> | null) ?? {}
+  const routeState = window.__PNEXT_ROUTE__ ?? {}
+  const bfcacheId = typeof state.__pnextBfcacheId === 'string' ? state.__pnextBfcacheId : undefined
+  return bfcacheId ? ({ ...routeState, bfcacheId } as RouteState) : routeState
 }
 
 function navigate(url: string, mode: 'push' | 'replace', scroll = true) {
-  if (blockJavascriptUrl(url)) return;
-  const next = new URL(url, window.location.href);
+  if (blockJavascriptUrl(url)) return
+  const next = new URL(url, window.location.href)
   if (next.origin !== window.location.origin) {
-    const holder = globalThis as { __pnextMpaNavigation?: number };
-    holder.__pnextMpaNavigation = (holder.__pnextMpaNavigation ?? 0) + 1;
+    const holder = globalThis as { __pnextMpaNavigation?: number }
+    holder.__pnextMpaNavigation = (holder.__pnextMpaNavigation ?? 0) + 1
     requestAnimationFrame(() =>
       requestAnimationFrame(() => {
-        if (mode === 'replace') window.location.replace(next.href);
-        else window.location.assign(next.href);
+        if (mode === 'replace') window.location.replace(next.href)
+        else window.location.assign(next.href)
       }),
-    );
-    return;
+    )
+    return
   }
 
   if (next.pathname !== window.location.pathname || next.search !== window.location.search) {
-    void softNavigate(next.href, { replace: mode === 'replace', scroll });
-    return;
+    void softNavigate(next.href, { replace: mode === 'replace', scroll })
+    return
   }
 
-  if (mode === 'replace') window.history.replaceState(history.state, '', next);
-  else window.history.pushState(history.state, '', next);
-  scheduleNavigationScroll(next, { scroll });
+  if (mode === 'replace') window.history.replaceState(history.state, '', next)
+  else window.history.pushState(history.state, '', next)
+  scheduleNavigationScroll(next, { scroll })
 }
 
 // Exported so compat's link-status can guarantee raw history.pushState /
 // replaceState calls broadcast a location change (ending a link's pending
 // state) even when no useLocation-based hook has mounted yet.
 export function patchHistory() {
-  if ((!process.browser && typeof window === 'undefined') || window.__PNEXT_HISTORY_PATCHED__) return;
-  window.__PNEXT_HISTORY_PATCHED__ = true;
-  const pushState = window.history.pushState.bind(window.history);
-  const replaceState = window.history.replaceState.bind(window.history);
+  if ((!process.browser && typeof window === 'undefined') || window.__PNEXT_HISTORY_PATCHED__)
+    return
+  window.__PNEXT_HISTORY_PATCHED__ = true
+  const pushState = window.history.pushState.bind(window.history)
+  const replaceState = window.history.replaceState.bind(window.history)
 
   // Broadcast only when the URL actually changes. The router itself calls replaceState with the
   // CURRENT href for bookkeeping - including at the start of every soft navigation - and emitting for
@@ -254,26 +261,26 @@ export function patchHistory() {
   // document, so a later traversal is a location broadcast rather than a fetch-and-swap of a URL that
   // may not even exist on the server. Router-initiated calls already carry the keys.
   function copyInternalState(data: unknown): unknown {
-    const current = (window.history.state as Record<string, unknown> | null) ?? {};
-    const carried: Record<string, unknown> = {};
+    const current = (window.history.state as Record<string, unknown> | null) ?? {}
+    const carried: Record<string, unknown> = {}
     for (const key of Object.keys(current)) {
-      if (key.startsWith('__pnext')) carried[key] = current[key];
+      if (key.startsWith('__pnext')) carried[key] = current[key]
     }
-    if (Object.keys(carried).length === 0) return data;
-    const own = (data as Record<string, unknown> | null) ?? {};
-    if (Object.keys(own).some(key => key.startsWith('__pnext'))) return data;
-    return { ...own, ...carried };
+    if (Object.keys(carried).length === 0) return data
+    const own = (data as Record<string, unknown> | null) ?? {}
+    if (Object.keys(own).some(key => key.startsWith('__pnext'))) return data
+    return { ...own, ...carried }
   }
   window.history.pushState = function patchedPushState(data, unused, url) {
-    const before = window.location.href;
-    const result = pushState(copyInternalState(data), unused, url);
-    if (window.location.href !== before) emitLocationChange();
-    return result;
-  };
+    const before = window.location.href
+    const result = pushState(copyInternalState(data), unused, url)
+    if (window.location.href !== before) emitLocationChange()
+    return result
+  }
   window.history.replaceState = function patchedReplaceState(data, unused, url) {
-    const before = window.location.href;
-    const result = replaceState(copyInternalState(data), unused, url);
-    if (window.location.href !== before) emitLocationChange();
-    return result;
-  };
+    const before = window.location.href
+    const result = replaceState(copyInternalState(data), unused, url)
+    if (window.location.href !== before) emitLocationChange()
+    return result
+  }
 }

package/src/api/dynamic.tsx

@@ -1,26 +1,26 @@
-import { h, type ComponentType } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { h, type ComponentType } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
 
-export type DynamicModule<Props> = ComponentType<Props> | { default: ComponentType<Props> };
-export type DynamicLoader<Props> = string | (() => Promise<DynamicModule<Props>>);
-export const dynamicReferenceSymbol = Symbol.for('pnext.dynamic');
+export type DynamicModule<Props> = ComponentType<Props> | { default: ComponentType<Props> }
+export type DynamicLoader<Props> = string | (() => Promise<DynamicModule<Props>>)
+export const dynamicReferenceSymbol = Symbol.for('pnext.dynamic')
 
 export interface DynamicTarget {
-  file: string;
-  exportName: string;
+  file: string
+  exportName: string
 }
 
 export interface DynamicReference<Props extends object = object> {
-  load: () => Promise<ComponentType<Props>>;
-  target?: DynamicTarget;
+  load: () => Promise<ComponentType<Props>>
+  target?: DynamicTarget
 }
 
 export interface DynamicOptions<Props> {
-  loading?: ComponentType<Props>;
-  load?: 'render' | 'visible';
-  rootMargin?: string;
-  ssr?: boolean;
-  threshold?: number | number[];
+  loading?: ComponentType<Props>
+  load?: 'render' | 'visible'
+  rootMargin?: string
+  ssr?: boolean
+  threshold?: number | number[]
 }
 
 export function dynamic<Props extends object = object>(
@@ -30,73 +30,76 @@ export function dynamic<Props extends object = object>(
   // never passes this.
   target?: DynamicTarget,
 ) {
-  let loaded: ComponentType<Props> | null = null;
-  let pending: Promise<ComponentType<Props>> | null = null;
-  const loadModule = typeof loader === 'string'
-    ? () => {
-        throw new Error(`dynamic(${JSON.stringify(loader)}) was not compiled by PNext.`);
-      }
-    : loader;
+  let loaded: ComponentType<Props> | null = null
+  let pending: Promise<ComponentType<Props>> | null = null
+  const loadModule =
+    typeof loader === 'string'
+      ? () => {
+          throw new Error(`dynamic(${JSON.stringify(loader)}) was not compiled by PNext.`)
+        }
+      : loader
 
   const load = () => {
     pending ??= Promise.resolve(loadModule()).then(module => {
-      loaded = typeof module === 'function' ? module : module.default;
-      return loaded;
-    });
-    return pending;
-  };
+      loaded = typeof module === 'function' ? module : module.default
+      return loaded
+    })
+    return pending
+  }
 
   function DynamicComponent(props: Props) {
-    const [Component, setComponent] = useState<ComponentType<Props> | null>(() => loaded);
-    const [shouldLoad, setShouldLoad] = useState(() => options.load !== 'visible');
-    const visibleRef = useRef<HTMLDivElement>(null);
+    const [Component, setComponent] = useState<ComponentType<Props> | null>(() => loaded)
+    const [shouldLoad, setShouldLoad] = useState(() => options.load !== 'visible')
+    const visibleRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
-      if (Component || shouldLoad) return;
-      const node = visibleRef.current;
+      if (Component || shouldLoad) return
+      const node = visibleRef.current
       if (!node || typeof IntersectionObserver === 'undefined') {
-        setShouldLoad(true);
-        return;
+        setShouldLoad(true)
+        return
       }
 
       const observer = new IntersectionObserver(
         entries => {
-          if (!entries.some(entry => entry.isIntersecting)) return;
-          observer.disconnect();
-          setShouldLoad(true);
+          if (!entries.some(entry => entry.isIntersecting)) return
+          observer.disconnect()
+          setShouldLoad(true)
         },
         {
           rootMargin: options.rootMargin,
           threshold: options.threshold,
         },
-      );
+      )
 
-      observer.observe(node);
-      return () => observer.disconnect();
-    }, [Component, shouldLoad]);
+      observer.observe(node)
+      return () => observer.disconnect()
+    }, [Component, shouldLoad])
 
     useEffect(() => {
-      if (Component || !shouldLoad) return;
-      let cancelled = false;
+      if (Component || !shouldLoad) return
+      let cancelled = false
       void load().then(next => {
-        if (!cancelled) setComponent(() => next);
-      });
+        if (!cancelled) setComponent(() => next)
+      })
       return () => {
-        cancelled = true;
-      };
-    }, [Component, shouldLoad]);
+        cancelled = true
+      }
+    }, [Component, shouldLoad])
 
-    if (Component) return h(Component, props);
-    const Loading = options.loading;
+    if (Component) return h(Component, props)
+    const Loading = options.loading
     if (options.load === 'visible') {
-      return h('div', { ref: visibleRef }, Loading ? h(Loading, props) : null);
+      return h('div', { ref: visibleRef }, Loading ? h(Loading, props) : null)
     }
-    return Loading ? h(Loading, props) : null;
+    return Loading ? h(Loading, props) : null
   }
 
-  (DynamicComponent as typeof DynamicComponent & {
-    [dynamicReferenceSymbol]: DynamicReference<Props>;
-  })[dynamicReferenceSymbol] = { load, target };
+  ;(
+    DynamicComponent as typeof DynamicComponent & {
+      [dynamicReferenceSymbol]: DynamicReference<Props>
+    }
+  )[dynamicReferenceSymbol] = { load, target }
 
-  return DynamicComponent;
+  return DynamicComponent
 }