@wular/pnext 0.0.4 → 0.0.7

package/src/compat/next/client-script.tsx

@@ -1,17 +1,17 @@
-import type { JSX } from 'preact';
-import { useEffect } from 'preact/compat';
-import { registerResourceHint } from '../../render/resource-hints';
+import type { JSX } from 'preact'
+import { useEffect } from 'preact/compat'
+import { registerResourceHint } from '../../render/resource-hints'
 
-export type ScriptStrategy = 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker';
+export type ScriptStrategy = 'beforeInteractive' | 'afterInteractive' | 'lazyOnload' | 'worker'
 
 export type ScriptProps = Omit<JSX.ScriptHTMLAttributes<HTMLScriptElement>, 'src'> & {
-  src?: string;
-  strategy?: ScriptStrategy;
-  onLoad?: (event: Event) => void;
-  onReady?: () => void;
-  onError?: (event: Event) => void;
-  children?: string;
-};
+  src?: string
+  strategy?: ScriptStrategy
+  onLoad?: (event: Event) => void
+  onReady?: () => void
+  onError?: (event: Event) => void
+  children?: string
+}
 
 /**
  * Client runtime for next/script. Mirrors Next's imperative loader: scripts are created and appended to
@@ -22,8 +22,8 @@ export type ScriptProps = Omit<JSX.ScriptHTMLAttributes<HTMLScriptElement>, 'src
  * underlying script exactly once, and the cache survives soft navigations so the same src/id is never
  * re-run.
  */
-const LoadCache = new Set<string>();
-const ScriptCache = new Map<string, Promise<void>>();
+const LoadCache = new Set<string>()
+const ScriptCache = new Map<string, Promise<void>>()
 
 const SKIP_PROPS = new Set([
   'src',
@@ -33,22 +33,22 @@ const SKIP_PROPS = new Set([
   'onError',
   'children',
   'dangerouslySetInnerHTML',
-]);
+])
 
 function applyAttrs(el: HTMLScriptElement, props: ScriptProps) {
   for (const [key, value] of Object.entries(props)) {
-    if (SKIP_PROPS.has(key) || key.startsWith('on')) continue;
-    if (value == null || value === false || typeof value === 'function') continue;
-    const name = key === 'className' ? 'class' : key === 'htmlFor' ? 'for' : key.toLowerCase();
-    el.setAttribute(name, value === true ? '' : String(value));
+    if (SKIP_PROPS.has(key) || key.startsWith('on')) continue
+    if (value == null || value === false || typeof value === 'function') continue
+    const name = key === 'className' ? 'class' : key === 'htmlFor' ? 'for' : key.toLowerCase()
+    el.setAttribute(name, value === true ? '' : String(value))
   }
 }
 
 function inlineHtml(props: ScriptProps): string | undefined {
-  if (typeof props.children === 'string') return props.children;
-  const dangerous = props.dangerouslySetInnerHTML as { __html?: unknown } | undefined;
-  if (dangerous && typeof dangerous.__html === 'string') return dangerous.__html;
-  return undefined;
+  if (typeof props.children === 'string') return props.children
+  const dangerous = props.dangerouslySetInnerHTML as { __html?: unknown } | undefined
+  if (dangerous && typeof dangerous.__html === 'string') return dangerous.__html
+  return undefined
 }
 
 /**
@@ -57,35 +57,35 @@ function inlineHtml(props: ScriptProps): string | undefined {
  * script without re-running it, matching Next.
  */
 function loadScript(props: ScriptProps): void {
-  const { src, id, onLoad, onReady, onError } = props;
-  const cacheKey = (typeof id === 'string' && id) || src;
+  const { src, id, onLoad, onReady, onError } = props
+  const cacheKey = (typeof id === 'string' && id) || src
 
   if (cacheKey && LoadCache.has(cacheKey)) {
-    const pending = ScriptCache.get(cacheKey);
-    if (pending) pending.then(() => onReady?.()).catch(() => undefined);
-    else onReady?.();
-    return;
+    const pending = ScriptCache.get(cacheKey)
+    if (pending) pending.then(() => onReady?.()).catch(() => undefined)
+    else onReady?.()
+    return
   }
-  if (cacheKey) LoadCache.add(cacheKey);
+  if (cacheKey) LoadCache.add(cacheKey)
 
-  const el = document.createElement('script');
-  applyAttrs(el, props);
-  if (typeof id === 'string') el.id = id;
+  const el = document.createElement('script')
+  applyAttrs(el, props)
+  if (typeof id === 'string') el.id = id
 
   if (src) {
     const promise = new Promise<void>((resolve, reject) => {
       el.addEventListener('load', event => {
-        onLoad?.(event);
-        resolve();
-      });
+        onLoad?.(event)
+        resolve()
+      })
       el.addEventListener('error', event => {
-        onError?.(event);
-        reject(event instanceof Error ? event : new Error('next/script failed to load'));
-      });
-    });
-    if (cacheKey) ScriptCache.set(cacheKey, promise);
-    promise.then(() => onReady?.()).catch(() => undefined);
-    el.src = src;
+        onError?.(event)
+        reject(event instanceof Error ? event : new Error('next/script failed to load'))
+      })
+    })
+    if (cacheKey) ScriptCache.set(cacheKey, promise)
+    promise.then(() => onReady?.()).catch(() => undefined)
+    el.src = src
     // Append the executing tag only once the resource is warm (Next appends from its mount effect AFTER
     // ReactDOM.preload has resolved the src). Then the tag's own fetch is a cache hit and it executes
     // within a tick of entering the DOM, so a consumer that reads the script's side effects right after
@@ -93,17 +93,17 @@ function loadScript(props: ScriptProps): void {
     // script is still downloading, so that read races ahead of execution. The document already carries an
     // SSR preload link for this src, so the download is already in flight regardless of when hydration
     // runs - this warm-up link just yields a load event to gate on and dedupes onto that same fetch.
-    warmThenAppend(el, src, props);
-    return;
+    warmThenAppend(el, src, props)
+    return
   }
 
-  const html = inlineHtml(props);
+  const html = inlineHtml(props)
   if (html !== undefined) {
-    el.innerHTML = html;
+    el.innerHTML = html
     // A script element created via createElement + appended to the document
     // executes synchronously here, so onReady is safe to fire immediately after.
-    document.body.appendChild(el);
-    onReady?.();
+    document.body.appendChild(el)
+    onReady?.()
   }
 }
 
@@ -117,35 +117,35 @@ function loadScript(props: ScriptProps): void {
  */
 function warmThenAppend(el: HTMLScriptElement, src: string, props: ScriptProps): void {
   const append = () => {
-    if (el.isConnected) return;
-    document.body.appendChild(el);
-  };
-  let warm: HTMLLinkElement;
+    if (el.isConnected) return
+    document.body.appendChild(el)
+  }
+  let warm: HTMLLinkElement
   try {
-    warm = document.createElement('link');
-    warm.rel = 'preload';
-    warm.as = 'script';
-    warm.href = src;
-    if (typeof props.crossOrigin === 'string') warm.crossOrigin = props.crossOrigin;
-    if (typeof props.nonce === 'string') warm.nonce = props.nonce;
+    warm = document.createElement('link')
+    warm.rel = 'preload'
+    warm.as = 'script'
+    warm.href = src
+    if (typeof props.crossOrigin === 'string') warm.crossOrigin = props.crossOrigin
+    if (typeof props.nonce === 'string') warm.nonce = props.nonce
   } catch {
-    append();
-    return;
+    append()
+    return
   }
   const done = () => {
-    warm.remove();
-    append();
-  };
-  warm.addEventListener('load', done, { once: true });
-  warm.addEventListener('error', done, { once: true });
-  document.head.appendChild(warm);
+    warm.remove()
+    append()
+  }
+  warm.addEventListener('load', done, { once: true })
+  warm.addEventListener('error', done, { once: true })
+  document.head.appendChild(warm)
   // Safety net: never leave the script unappended if the link never settles
   // (some browsers do not fire load for an already-cached preload).
-  setTimeout(append, 1500);
+  setTimeout(append, 1500)
 }
 
 export default function Script(props: ScriptProps) {
-  const strategy = props.strategy ?? 'afterInteractive';
+  const strategy = props.strategy ?? 'afterInteractive'
 
   // Next's app-router Script preloads an EXTERNAL before/afterInteractive script while the document
   // renders (ReactDOM.preload) and only appends the executing tag from its mount effect. Without the
@@ -154,7 +154,8 @@ export default function Script(props: ScriptProps) {
   // the SSR-side half of Next's behavior; the mount effect below still owns execution and dedup.
   // lazyOnload is deliberately excluded - Next does not preload something fetched minutes later either.
   if (
-    (!process.browser && typeof window === 'undefined') &&
+    !process.browser &&
+    typeof window === 'undefined' &&
     props.src &&
     (strategy === 'afterInteractive' || strategy === 'beforeInteractive')
   ) {
@@ -170,46 +171,51 @@ export default function Script(props: ScriptProps) {
             },
           }
         : {}),
-    });
+    })
   }
 
   useEffect(() => {
-    if (strategy === 'worker') return;
+    if (strategy === 'worker') return
 
     if (strategy === 'lazyOnload') {
-      let cancelled = false;
+      let cancelled = false
       const run = () => {
-        if (!cancelled) loadScript(props);
-      };
+        if (!cancelled) loadScript(props)
+      }
       if (typeof requestIdleCallback === 'function') {
-        const handle = requestIdleCallback(run);
+        const handle = requestIdleCallback(run)
         return () => {
-          cancelled = true;
-          if (typeof cancelIdleCallback === 'function') cancelIdleCallback(handle);
-        };
+          cancelled = true
+          if (typeof cancelIdleCallback === 'function') cancelIdleCallback(handle)
+        }
       }
-      const timer = setTimeout(run, 1);
+      const timer = setTimeout(run, 1)
       return () => {
-        cancelled = true;
-        clearTimeout(timer);
-      };
+        cancelled = true
+        clearTimeout(timer)
+      }
     }
 
     // afterInteractive + beforeInteractive: load as soon as the island mounts.
-    loadScript(props);
-    return undefined;
-  }, [strategy, props.src, props.id]);
+    loadScript(props)
+    return undefined
+  }, [strategy, props.src, props.id])
 
   if (strategy === 'worker') {
-    const { onLoad: _onLoad, onReady: _onReady, onError: _onError, children, strategy: _s, ...rest } =
-      props;
-    const html = typeof children === 'string' ? children : inlineHtml(props);
-    const inline =
-      html !== undefined ? { dangerouslySetInnerHTML: { __html: html } } : {};
-    return <script {...rest} type="text/partytown" data-nscript="worker" {...inline} />;
+    const {
+      onLoad: _onLoad,
+      onReady: _onReady,
+      onError: _onError,
+      children,
+      strategy: _s,
+      ...rest
+    } = props
+    const html = typeof children === 'string' ? children : inlineHtml(props)
+    const inline = html !== undefined ? { dangerouslySetInnerHTML: { __html: html } } : {}
+    return <script {...rest} type="text/partytown" data-nscript="worker" {...inline} />
   }
 
-  return null;
+  return null
 }
 
-export { Script };
+export { Script }

package/src/compat/next/client-server.ts

@@ -7,25 +7,25 @@
 // client-side they degrade to inert stubs, since the real dynamic-marking happens during SSR and
 // control-flow like redirect/notFound is driven by the client error runtime after hydration.
 
-export { NextRequest, NextResponse } from '../../api/server';
-export type { NextRequestGeo } from '../../api/server';
-export type { NextFetchEvent } from '../../types';
-export type { ProxyConfig } from '../../proxy';
-export { URLPattern, userAgent, userAgentFromString } from './user-agent';
-export type { UserAgent } from './user-agent';
+export { NextRequest, NextResponse } from '../../api/server'
+export type { NextRequestGeo } from '../../api/server'
+export type { NextFetchEvent } from '../../types'
+export type { ProxyConfig } from '../../routing/proxy'
+export { URLPattern, userAgent, userAgentFromString } from './user-agent'
+export type { UserAgent } from './user-agent'
 
 /** Browser-safe placeholder; OG rendering only runs on the server. */
 export class ImageResponse extends Response {
   constructor(_element: unknown, options: ResponseInit = {}) {
-    super(null, options);
+    super(null, options)
   }
 }
 
-type AfterTask<T> = Promise<T> | (() => T | Promise<T>);
+type AfterTask<T> = Promise<T> | (() => T | Promise<T>)
 
 /** Client stub: dynamic marking is a server concern; resolve immediately. */
 export function connection(): Promise<Record<never, never>> {
-  return Promise.resolve({});
+  return Promise.resolve({})
 }
 
 /** Client stub: `after()` callbacks only run server-side; no-op in the browser. */
@@ -35,5 +35,5 @@ export function after<T>(_task: AfterTask<T>): void {
 
 /** Client stub: IO postpone only fires during a server prerender. */
 export function io(): Promise<void> {
-  return Promise.resolve();
+  return Promise.resolve()
 }