@wular/pnext 0.0.3 → 0.0.6

package/src/compat/css/chunking.ts

@@ -14,241 +14,238 @@
 // The output is per-route, which is invisible to the suite: it only checks each page's <link> count and
 // computed cascade order, never cross-page asset identity.
 
-import { statSync } from 'node:fs';
-import { getNextConfig } from '../next/config-loader';
+import { statSync } from 'node:fs'
+import { getNextConfig } from '../next/config-loader'
 
 // Merge chunks until they pass this size; avoid merging past MAX. Mirrors Next.
-const MIN_CSS_CHUNK_SIZE = 30 * 1024;
-const MAX_CSS_CHUNK_SIZE = 100 * 1024;
+const MIN_CSS_CHUNK_SIZE = 30 * 1024
+const MAX_CSS_CHUNK_SIZE = 100 * 1024
 
 interface RouteCss {
-  id: string;
-  cssImports: string[];
+  id: string
+  cssImports: string[]
 }
 
 function isGlobalCss(file: string) {
-  return !/\.module\.(?:css|scss|sass)$/.test(file);
+  return !/\.module\.(?:css|scss|sass)$/.test(file)
 }
 
 function moduleSize(file: string) {
   try {
-    return statSync(file).size;
+    return statSync(file).size
   } catch {
-    return 0;
+    return 0
   }
 }
 
 // Partition every route's ordered CSS imports into shared chunks, then project
 // the global grouping back onto each route as ordered contiguous slices.
 export function nextPlanRouteCssChunks(routes: RouteCss[]): Map<string, string[][]> {
-  if (nextCssChunkingMode() === 'loose') return loosePlanRouteCssChunks(routes);
+  if (nextCssChunkingMode() === 'loose') return loosePlanRouteCssChunks(routes)
 
-  const sizes = new Map<string, number>();
+  const sizes = new Map<string, number>()
   const size = (file: string) => {
-    let value = sizes.get(file);
+    let value = sizes.get(file)
     if (value === undefined) {
-      value = moduleSize(file);
-      sizes.set(file, value);
+      value = moduleSize(file)
+      sizes.set(file, value)
     }
-    return value;
-  };
+    return value
+  }
 
   interface ChunkState {
-    modules: string[];
-    requests: number;
+    modules: string[]
+    requests: number
   }
 
-  const chunkStates: ChunkState[] = [];
+  const chunkStates: ChunkState[] = []
   // file -> (chunkState -> index within that route's ordered import list)
-  const statesByModule = new Map<string, Map<ChunkState, number>>();
+  const statesByModule = new Map<string, Map<ChunkState, number>>()
   for (const route of routes) {
-    if (route.cssImports.length === 0) continue;
-    const state: ChunkState = { modules: route.cssImports, requests: route.cssImports.length };
-    chunkStates.push(state);
+    if (route.cssImports.length === 0) continue
+    const state: ChunkState = { modules: route.cssImports, requests: route.cssImports.length }
+    chunkStates.push(state)
     route.cssImports.forEach((file, index) => {
-      let byState = statesByModule.get(file);
+      let byState = statesByModule.get(file)
       if (!byState) {
-        byState = new Map();
-        statesByModule.set(file, byState);
+        byState = new Map()
+        statesByModule.set(file, byState)
       }
       // A file may repeat within a route; the last index wins (matches Next,
       // where a module maps to a single position per chunk group).
-      byState.set(state, index);
-    });
+      byState.set(state, index)
+    })
   }
 
   // Process modules by ascending index-sum so shared prefixes seed chunks first.
   const ordered = [...statesByModule.keys()].sort((a, b) => {
     const sum = (file: string) => {
-      let total = 0;
-      for (const index of statesByModule.get(file)!.values()) total += index;
-      return total;
-    };
-    return sum(a) - sum(b) || (a < b ? -1 : 1);
-  });
-  const remaining = new Set(ordered);
+      let total = 0
+      for (const index of statesByModule.get(file)!.values()) total += index
+      return total
+    }
+    return sum(a) - sum(b) || (a < b ? -1 : 1)
+  })
+  const remaining = new Set(ordered)
 
-  const chunkOfModule = new Map<string, number>();
-  let nextChunkId = 0;
+  const chunkOfModule = new Map<string, number>()
+  let nextChunkId = 0
 
   for (const startModule of remaining) {
-    let globalMode = isGlobalCss(startModule);
-    const claimed = new Map(statesByModule.get(startModule));
-    const chunkModules = new Set([startModule]);
-    let currentSize = size(startModule);
+    let globalMode = isGlobalCss(startModule)
+    const claimed = new Map(statesByModule.get(startModule))
+    const chunkModules = new Set([startModule])
+    let currentSize = size(startModule)
 
-    const potential = new Map<string, Map<ChunkState, number>>();
+    const potential = new Map<string, Map<ChunkState, number>>()
     const enqueueNext = (state: ChunkState, index: number) => {
-      const next = state.modules[index + 1];
+      const next = state.modules[index + 1]
       if (next && remaining.has(next) && !chunkModules.has(next)) {
-        potential.set(next, statesByModule.get(next)!);
+        potential.set(next, statesByModule.get(next)!)
       }
-    };
-    for (const [state, index] of claimed) enqueueNext(state, index);
+    }
+    for (const [state, index] of claimed) enqueueNext(state, index)
 
-    let progressed = true;
+    let progressed = true
     while (progressed) {
-      progressed = false;
+      progressed = false
 
       // Prefer the candidate that collapses the highest-request chunk group.
       const candidates = [...potential.entries()].map(([file, states]) => {
-        let maxRequests = 0;
+        let maxRequests = 0
         for (const state of states.keys()) {
-          if (claimed.has(state)) maxRequests = Math.max(maxRequests, state.requests);
+          if (claimed.has(state)) maxRequests = Math.max(maxRequests, state.requests)
         }
-        return { file, states, maxRequests };
-      });
-      candidates.sort((a, b) => b.maxRequests - a.maxRequests || (a.file < b.file ? -1 : 1));
+        return { file, states, maxRequests }
+      })
+      candidates.sort((a, b) => b.maxRequests - a.maxRequests || (a.file < b.file ? -1 : 1))
 
       for (const { file, states } of candidates) {
-        const fileSize = size(file);
-        if (currentSize + fileSize > MAX_CSS_CHUNK_SIZE) continue;
+        const fileSize = size(file)
+        if (currentSize + fileSize > MAX_CSS_CHUNK_SIZE) continue
 
         // Strict order preservation: in every route sharing this module its
         // position must be exactly one past what we've claimed there, otherwise
         // merging would reorder or interleave stylesheets.
-        let orderOk = true;
+        let orderOk = true
         for (const [state, index] of states) {
-          const claimedIndex = claimed.get(state);
+          const claimedIndex = claimed.get(state)
           if (claimedIndex === undefined) {
             // A route that doesn't yet overlap: only pull it in while the chunk
             // is still under the min-size target (Next's merge-up-to-MIN rule).
             if (currentSize >= MIN_CSS_CHUNK_SIZE) {
-              orderOk = false;
-              break;
+              orderOk = false
+              break
             }
           } else if (claimedIndex + 1 !== index) {
-            orderOk = false;
-            break;
+            orderOk = false
+            break
           }
         }
-        if (!orderOk) continue;
+        if (!orderOk) continue
 
         // A global stylesheet must never enter a route that doesn't import it,
         // and once the chunk carries a global it can't spread to new routes.
-        const nextIsGlobal = isGlobalCss(file);
+        const nextIsGlobal = isGlobalCss(file)
         if (globalMode) {
-          let leaks = false;
+          let leaks = false
           for (const state of states.keys()) {
             if (!claimed.has(state)) {
-              leaks = true;
-              break;
+              leaks = true
+              break
             }
           }
-          if (leaks) continue;
+          if (leaks) continue
         }
         if (nextIsGlobal) {
-          let leaks = false;
+          let leaks = false
           for (const state of claimed.keys()) {
             if (!states.has(state)) {
-              leaks = true;
-              break;
+              leaks = true
+              break
             }
           }
-          if (leaks) continue;
+          if (leaks) continue
         }
 
-        potential.delete(file);
-        currentSize += fileSize;
-        if (nextIsGlobal) globalMode = true;
+        potential.delete(file)
+        currentSize += fileSize
+        if (nextIsGlobal) globalMode = true
         for (const [state, index] of states) {
-          if (claimed.has(state)) state.requests--;
-          claimed.set(state, index);
-          enqueueNext(state, index);
+          if (claimed.has(state)) state.requests--
+          claimed.set(state, index)
+          enqueueNext(state, index)
         }
-        chunkModules.add(file);
-        progressed = true;
-        break;
+        chunkModules.add(file)
+        progressed = true
+        break
       }
     }
 
-    const chunkId = nextChunkId++;
+    const chunkId = nextChunkId++
     for (const file of chunkModules) {
-      remaining.delete(file);
-      chunkOfModule.set(file, chunkId);
+      remaining.delete(file)
+      chunkOfModule.set(file, chunkId)
     }
   }
 
   // Project the global grouping back to per-route ordered slices. A chunk's
   // modules are contiguous in every route (guaranteed by the strict merge), so
   // each route's imports break cleanly at chunk-id boundaries.
-  const plan = new Map<string, string[][]>();
+  const plan = new Map<string, string[][]>()
   for (const route of routes) {
-    if (route.cssImports.length < 2) continue;
-    const segments: string[][] = [];
-    let current: string[] = [];
-    let currentChunk = -1;
+    if (route.cssImports.length < 2) continue
+    const segments: string[][] = []
+    let current: string[] = []
+    let currentChunk = -1
     for (const file of route.cssImports) {
-      const chunkId = chunkOfModule.get(file) ?? -1;
+      const chunkId = chunkOfModule.get(file) ?? -1
       if (chunkId !== currentChunk && current.length > 0) {
-        segments.push(current);
-        current = [];
+        segments.push(current)
+        current = []
       }
-      current.push(file);
-      currentChunk = chunkId;
+      current.push(file)
+      currentChunk = chunkId
     }
-    if (current.length > 0) segments.push(current);
+    if (current.length > 0) segments.push(current)
     // Single segment means core's default single-chunk path already suffices.
-    if (segments.length > 1) plan.set(route.id, segments);
+    if (segments.length > 1) plan.set(route.id, segments)
   }
-  return plan;
+  return plan
 }
 
 function nextCssChunkingMode(): 'loose' | 'strict' {
-  const experimental = getNextConfig().experimental as { cssChunking?: unknown } | undefined;
+  const experimental = getNextConfig().experimental as { cssChunking?: unknown } | undefined
   return experimental?.cssChunking === 'loose' || experimental?.cssChunking === undefined
     ? 'loose'
-    : 'strict';
+    : 'strict'
 }
 
 // Loose mode minimizes each route's stylesheet requests independently. A
 // global stylesheet begins a fresh chunk so it cannot move ahead of styles
 // imported before it; subsequent modules may share that chunk.
 function loosePlanRouteCssChunks(routes: RouteCss[]): Map<string, string[][]> {
-  const plan = new Map<string, string[][]>();
+  const plan = new Map<string, string[][]>()
 
   for (const route of routes) {
-    if (route.cssImports.length < 2) continue;
+    if (route.cssImports.length < 2) continue
 
-    const segments: string[][] = [];
-    let current: string[] = [];
-    let currentSize = 0;
+    const segments: string[][] = []
+    let current: string[] = []
+    let currentSize = 0
     for (const file of route.cssImports) {
-      const size = moduleSize(file);
-      if (
-        current.length > 0 &&
-        (isGlobalCss(file) || currentSize + size > MAX_CSS_CHUNK_SIZE)
-      ) {
-        segments.push(current);
-        current = [];
-        currentSize = 0;
+      const size = moduleSize(file)
+      if (current.length > 0 && (isGlobalCss(file) || currentSize + size > MAX_CSS_CHUNK_SIZE)) {
+        segments.push(current)
+        current = []
+        currentSize = 0
       }
-      current.push(file);
-      currentSize += size;
+      current.push(file)
+      currentSize += size
     }
-    if (current.length > 0) segments.push(current);
-    if (segments.length > 1) plan.set(route.id, segments);
+    if (current.length > 0) segments.push(current)
+    if (segments.length > 1) plan.set(route.id, segments)
   }
 
-  return plan;
+  return plan
 }

package/src/compat/css/inline-css.ts

@@ -6,10 +6,10 @@
 // assembly is renderer territory: the renderer calls inlineCssEnabled(config) and, when true and not
 // dev, replaces each route/global stylesheet link with inlineCssTag(...).
 
-import { AsyncLocalStorage } from 'node:async_hooks';
-import { readFileSync } from 'node:fs';
-import type { ResolvedConfig } from '../../config';
-import { getNextConfig } from '../next/config-loader';
+import { AsyncLocalStorage } from 'node:async_hooks'
+import { readFileSync } from 'node:fs'
+import type { ResolvedConfig } from '../../config'
+import { getNextConfig } from '../next/config-loader'
 
 // Inlining is a DOCUMENT optimization: Next inlines a route's CSS into the HTML
 // it serves for a navigation to the URL, but a flight (`RSC: 1`) response for
@@ -20,20 +20,20 @@ import { getNextConfig } from '../next/config-loader';
 //
 // A scope (not a module flag) because renders are concurrent: a plain document
 // render running alongside a flight render must keep inlining.
-const INLINE_CSS_SUPPRESSED = Symbol.for('pnext.compat.inlineCssSuppressed');
+const INLINE_CSS_SUPPRESSED = Symbol.for('pnext.compat.inlineCssSuppressed')
 const suppressed = ((globalThis as Record<PropertyKey, unknown>)[INLINE_CSS_SUPPRESSED] ??=
-  new AsyncLocalStorage<true>()) as AsyncLocalStorage<true>;
+  new AsyncLocalStorage<true>()) as AsyncLocalStorage<true>
 
 /** Run `render` with CSS inlining disabled (flight responses — see above). */
 export function withoutInlineCss<T>(render: () => T): T {
-  return suppressed.run(true, render);
+  return suppressed.run(true, render)
 }
 
 /** True when `experimental.inlineCss` is set in next.config. */
 export function inlineCssEnabled(_config: ResolvedConfig): boolean {
-  const config = getNextConfig();
-  const experimental = config.experimental as { inlineCss?: unknown } | undefined;
-  return experimental?.inlineCss === true;
+  const config = getNextConfig()
+  const experimental = config.experimental as { inlineCss?: unknown } | undefined
+  return experimental?.inlineCss === true
 }
 
 /**
@@ -42,32 +42,32 @@ export function inlineCssEnabled(_config: ResolvedConfig): boolean {
  * Returns '' if the file can't be read (never fail the page over inlining).
  */
 export function inlineCssTag(assetFile: string, nonce?: string): string {
-  const css = readCss(assetFile);
-  return css === undefined ? '' : inlineStyleTag(css, nonce);
+  const css = readCss(assetFile)
+  return css === undefined ? '' : inlineStyleTag(css, nonce)
 }
 
 function readCss(assetFile: string): string | undefined {
   try {
-    return readFileSync(assetFile, 'utf8');
+    return readFileSync(assetFile, 'utf8')
   } catch {
-    return undefined;
+    return undefined
   }
 }
 
 function inlineStyleTag(css: string, nonce?: string): string {
-  const nonceAttr = nonce ? ` nonce="${nonce}"` : '';
-  return `<style data-pnext-inline-css${nonceAttr}>${css}</style>`;
+  const nonceAttr = nonce ? ` nonce="${nonce}"` : ''
+  return `<style data-pnext-inline-css${nonceAttr}>${css}</style>`
 }
 
 export function inlineCssStylesheets(
   config: ResolvedConfig,
   options: { assetNames: string[]; dev: boolean; nonce?: string; prependCss?: string },
 ): string[] | undefined {
-  if (options.dev || suppressed.getStore() === true || !inlineCssEnabled(config)) return undefined;
+  if (options.dev || suppressed.getStore() === true || !inlineCssEnabled(config)) return undefined
   const assets = options.assetNames.map(asset =>
     readCss(`${config.outPath}/public/assets/${asset}`),
-  );
-  if (assets.some(css => css === undefined)) return undefined;
-  const css = [options.prependCss, ...assets].filter(Boolean).join('\n');
-  return css ? [inlineStyleTag(css, options.nonce)] : [];
+  )
+  if (assets.some(css => css === undefined)) return undefined
+  const css = [options.prependCss, ...assets].filter(Boolean).join('\n')
+  return css ? [inlineStyleTag(css, options.nonce)] : []
 }

package/src/compat/css/lightningcss.ts

@@ -9,52 +9,52 @@
 //
 // Zero-cost when disabled or when the app has no lightningcss install: the source passes through.
 
-import { createRequire } from 'node:module';
-import path from 'node:path';
-import { loadNative } from '../../utils/native-require';
-import { getNextConfig } from '../next/config-loader';
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { loadNative } from '../../utils/native-require'
+import { getNextConfig } from '../next/config-loader'
 
 interface LightningModule {
   transform(options: {
-    filename: string;
-    code: Uint8Array;
-    include?: number;
-    exclude?: number;
-    errorRecovery?: boolean;
-  }): { code: Uint8Array };
-  Features: Record<string, number>;
+    filename: string
+    code: Uint8Array
+    include?: number
+    exclude?: number
+    errorRecovery?: boolean
+  }): { code: Uint8Array }
+  Features: Record<string, number>
 }
 
 interface LightningFeaturesConfig {
-  include?: string[];
-  exclude?: string[];
+  include?: string[]
+  exclude?: string[]
 }
 
-const moduleCache = new Map<string, LightningModule | null>();
+const moduleCache = new Map<string, LightningModule | null>()
 
 function loadLightningcss(root: string): LightningModule | null {
-  const cached = moduleCache.get(root);
-  if (cached !== undefined) return cached;
-  let loaded: LightningModule | null = null;
+  const cached = moduleCache.get(root)
+  if (cached !== undefined) return cached
+  let loaded: LightningModule | null = null
   try {
-    const require = createRequire(path.join(root, 'package.json'));
-    loaded = loadNative(() => require('lightningcss') as LightningModule);
+    const require = createRequire(path.join(root, 'package.json'))
+    loaded = loadNative(() => require('lightningcss') as LightningModule)
   } catch {
-    loaded = null;
+    loaded = null
   }
-  moduleCache.set(root, loaded);
-  return loaded;
+  moduleCache.set(root, loaded)
+  return loaded
 }
 
 /** `'light-dark'` -> `LightDark` (lightningcss `Features` enum key). */
 function featureKey(name: string): string {
-  return name.replace(/(?:^|-)([a-z0-9])/g, (_match, char: string) => char.toUpperCase());
+  return name.replace(/(?:^|-)([a-z0-9])/g, (_match, char: string) => char.toUpperCase())
 }
 
 function featureMask(features: Record<string, number>, names: string[] | undefined): number {
-  let mask = 0;
-  for (const name of names ?? []) mask |= features[featureKey(name)] ?? 0;
-  return mask;
+  let mask = 0
+  for (const name of names ?? []) mask |= features[featureKey(name)] ?? 0
+  return mask
 }
 
 /**
@@ -64,17 +64,16 @@ function featureMask(features: Record<string, number>, names: string[] | undefin
  */
 export function maybeLightningcssTransform(css: string, file: string, root: string): string {
   const experimental = getNextConfig().experimental as
-    | { useLightningcss?: boolean; lightningCssFeatures?: LightningFeaturesConfig }
-    | undefined;
-  if (experimental?.useLightningcss !== true) return css;
-  const lightning = loadLightningcss(root);
-  if (!lightning) return css;
+    { useLightningcss?: boolean; lightningCssFeatures?: LightningFeaturesConfig } | undefined
+  if (experimental?.useLightningcss !== true) return css
+  const lightning = loadLightningcss(root)
+  if (!lightning) return css
 
-  const features = experimental.lightningCssFeatures;
-  const userInclude = featureMask(lightning.Features, features?.include);
-  const userExclude = featureMask(lightning.Features, features?.exclude);
+  const features = experimental.lightningCssFeatures
+  const userInclude = featureMask(lightning.Features, features?.include)
+  const userExclude = featureMask(lightning.Features, features?.exclude)
   // Nesting always transpiles (Next hardcodes it), user excludes win.
-  const include = ((lightning.Features.Nesting ?? 1) | userInclude) & ~userExclude;
+  const include = ((lightning.Features.Nesting ?? 1) | userInclude) & ~userExclude
 
   try {
     const result = lightning.transform({
@@ -83,9 +82,9 @@ export function maybeLightningcssTransform(css: string, file: string, root: stri
       include,
       exclude: userExclude,
       errorRecovery: true,
-    });
-    return new TextDecoder().decode(result.code);
+    })
+    return new TextDecoder().decode(result.code)
   } catch {
-    return css;
+    return css
   }
 }