zyzz 0.0.7 → 0.0.9

package/src/next/loader.ts

@@ -3,16 +3,19 @@ import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
+import * as Stylesheets from '../compiler/internal/Stylesheets.js'
 import * as Project from './internal/Project.js'
 
 type Context = Project.Context & {
   async(): (error: Error | null, code?: string, map?: object) => void
   getOptions(): {
     bundler: string
-    mode: 'shared' | 'source' | 'style'
+    development?: boolean | undefined
+    mode?: 'style' | undefined
     reset?: boolean | undefined
     root: string
   }
+  resourceQuery?: string | undefined
 }
 
 // Next owns loader worker lifetimes. Each project retains only its latest graph in that worker.
@@ -32,6 +35,15 @@ async function compile(context: Context, source: string) {
   const options = context.getOptions()
   const root = options.root
   const directory = Path.resolve(root, '.zyzz', 'next')
+  if (options.mode) {
+    const hash = new URLSearchParams(context.resourceQuery).get('zyzz')
+    if (!hash || !/^[a-f0-9]{64}$/.test(hash))
+      throw new Error('Invalid generated stylesheet request.')
+    const file = Path.join(directory, `${hash}.css`)
+    context.addDependency(file)
+    return { code: await Fs.readFile(file, 'utf8'), map: undefined }
+  }
+
   const eligible = (file: string) =>
     /\.[cm]?[jt]sx?$/.test(file) &&
     !/\.(?:d|test|test-d|bench|bench-d)\.[cm]?[jt]sx?$/.test(file) &&
@@ -50,97 +62,25 @@ async function compile(context: Context, source: string) {
   )
     return { code: source, map: undefined }
 
-  if (options.mode !== 'shared' && !eligible(context.resourcePath))
-    return { code: source, map: undefined }
+  if (!eligible(context.resourcePath)) return { code: source, map: undefined }
 
-  const key = JSON.stringify([root, options.bundler, options.reset ?? false])
+  const key = JSON.stringify([
+    root,
+    options.bundler,
+    options.reset ?? false,
+    options.development ?? false,
+  ])
   let project = projects.get(key)
   if (!project) {
     project = Project.create(options)
     projects.set(key, project)
   }
-  const graph = await project.compile(
-    context,
-    options.mode === 'shared' ? undefined : source,
-  )
+  const graph = await project.compile(context, source)
   const output =
     graph.modules[
       `app/${Path.relative(root, context.resourcePath).split(Path.sep).join('/')}`
     ]
 
-  const assets = new Map<string, string>()
-  for (const [placeholder, target] of Object.entries(
-    graph.sharedAssets ?? {},
-  )) {
-    const raw = target.split(/[?#]/)[0]!
-    const file = await Fs.realpath(
-      target.startsWith('app/')
-        ? Path.join(root, decodeURIComponent(raw.slice(4)))
-        : decodeURIComponent(raw),
-    )
-    const identity = graph.sharedAssetOwners?.[placeholder]
-    let owner = root
-    if (identity && Path.isAbsolute(identity)) {
-      owner = Path.dirname(identity)
-      for (;;) {
-        try {
-          await Fs.access(Path.join(owner, 'package.json'))
-          break
-        } catch (error) {
-          if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error
-          const parent = Path.dirname(owner)
-          if (parent === owner)
-            throw new Error('Packed assets require an owning package.json.')
-          owner = parent
-        }
-      }
-    }
-
-    const relative = Path.relative(await Fs.realpath(owner), file)
-    if (
-      !identity ||
-      relative === '..' ||
-      relative.startsWith(`..${Path.sep}`) ||
-      Path.isAbsolute(relative)
-    )
-      throw new Error('Asset path escapes its owning package.')
-
-    context.addDependency(file)
-    assets.set(
-      placeholder,
-      Path.relative(
-        options.bundler === 'turbopack'
-          ? Path.dirname(context.resourcePath)
-          : directory,
-        file,
-      )
-        .split(Path.sep)
-        .map(encodeURIComponent)
-        .join('/') + target.slice(raw.length),
-    )
-  }
-
-  const shared = graph.sharedCss
-    ? AtRules.transform({
-        code: Buffer.from(graph.sharedCss),
-        filename: 'shared.css',
-        inputSourceMap: JSON.stringify(graph.sharedCssMap),
-        sourceMap: true,
-        visitor: {
-          Url: (url) =>
-            assets.has(url.url)
-              ? { ...url, url: assets.get(url.url)! }
-              : undefined,
-        },
-      })
-    : undefined
-  if (options.mode === 'shared')
-    return {
-      code: shared?.code.toString() ?? '',
-      map: shared?.map
-        ? (JSON.parse(shared.map.toString()) as object)
-        : undefined,
-    }
   if (!output) throw new Error('Missing Next.js source compilation.')
   // Bundlers resolve map sources relative to the loader resource, not graph identities.
   const sources = (names: readonly (string | null)[]) =>
@@ -153,63 +93,180 @@ async function compile(context: Context, source: string) {
     sources: sources(output.map.sources),
   }
   const cssMap = { ...output.cssMap, sources: sources(output.cssMap.sources) }
-  if (options.mode === 'style') return { code: output.css, map: cssMap }
 
-  if (options.bundler === 'turbopack') {
-    const sharedFile = Path.relative(
-      Path.dirname(context.resourcePath),
-      Path.join(directory, 'shared.css'),
-    )
-      .split(Path.sep)
-      .join('/')
-    // Turbopack appends the output extension to loader-transformed resource paths.
-    const resource = await Fs.stat(context.resourcePath).then(
-      () => context.resourcePath,
-      async (error: NodeJS.ErrnoException) => {
-        if (error.code !== 'ENOENT') throw error
-        const original = context.resourcePath.slice(
-          0,
-          -Path.extname(context.resourcePath).length,
-        )
-        await Fs.access(original)
-        return original
-      },
-    )
-    const requests = [
-      ...(graph.sharedCss
-        ? [
-            `import ${JSON.stringify(sharedFile.startsWith('../') ? sharedFile : `./${sharedFile}`)};`,
-          ]
-        : []),
-      ...(output.css
-        ? [
-            `import ${JSON.stringify(`./${Path.basename(resource)}?zyzz-style`)};`,
-          ]
-        : []),
-    ]
-    return { code: `${output.code}\n${requests.join('\n')}`, map }
+  if (
+    output.code === source &&
+    !output.css &&
+    !/(?:^|[/\\])(?:layout|_app)\.[cm]?[jt]sx?$/.test(context.resourcePath) &&
+    !graph.sharedCssMap?.sources.some((name) => name !== 'zyzz/reset.css') &&
+    !graph[Stylesheets.packed]?.length
+  )
+    return { code: source, map }
+
+  const shared = await compileShared({
+    css: graph.sharedCss ?? '',
+    map: graph.sharedCssMap!,
+    assets: graph.sharedAssets ?? {},
+    owners: graph.sharedAssetOwners ?? {},
+  })
+
+  async function compileShared(
+    stylesheet: ReturnType<typeof Stylesheets.render>,
+  ) {
+    const assets = new Map<string, string>()
+    for (const [placeholder, target] of Object.entries(stylesheet.assets)) {
+      const raw = target.split(/[?#]/)[0]!
+      const file = await Fs.realpath(
+        target.startsWith('app/')
+          ? Path.join(root, decodeURIComponent(raw.slice(4)))
+          : decodeURIComponent(raw),
+      )
+      const identity = stylesheet.owners[placeholder]
+      let owner = root
+      if (identity && Path.isAbsolute(identity)) {
+        owner = Path.dirname(identity)
+        for (;;) {
+          try {
+            await Fs.access(Path.join(owner, 'package.json'))
+            break
+          } catch (error) {
+            if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error
+            const parent = Path.dirname(owner)
+            if (parent === owner)
+              throw new Error('Packed assets require an owning package.json.')
+            owner = parent
+          }
+        }
+      }
+
+      const relative = Path.relative(await Fs.realpath(owner), file)
+      if (
+        !identity ||
+        relative === '..' ||
+        relative.startsWith(`..${Path.sep}`) ||
+        Path.isAbsolute(relative)
+      )
+        throw new Error('Asset path escapes its owning package.')
+
+      context.addDependency(file)
+      assets.set(
+        placeholder,
+        Path.relative(directory, file)
+          .split(Path.sep)
+          .map(encodeURIComponent)
+          .join('/') + target.slice(raw.length),
+      )
+    }
+
+    return stylesheet.css
+      ? AtRules.transform({
+          code: Buffer.from(stylesheet.css),
+          filename: 'shared.css',
+          inputSourceMap: JSON.stringify({
+            ...stylesheet.map,
+            sources: sources(stylesheet.map.sources),
+          }),
+          sourceMap: true,
+          visitor: {
+            Url: (url) =>
+              assets.has(url.url)
+                ? { ...url, url: assets.get(url.url)! }
+                : undefined,
+          },
+        })
+      : undefined
   }
+
   const styles = [
-    { css: shared?.code.toString(), map: shared?.map?.toString() },
-    { css: output.css, map: JSON.stringify(cssMap) },
+    ...(await Promise.all(
+      (graph[Stylesheets.packed] ?? []).map(async (resource) => {
+        const output = await compileShared(resource)
+        return {
+          css: output?.code.toString(),
+          map: output?.map?.toString(),
+          id: resource.id,
+        }
+      }),
+    )),
+    {
+      id: undefined,
+      css: shared?.code.toString(),
+      map: shared?.map?.toString(),
+    },
+    { id: undefined, css: output.css, map: JSON.stringify(cssMap) },
   ]
   const requests: string[] = []
   await Fs.mkdir(directory, { recursive: true })
-  for (const stylesheet of styles) {
+  try {
+    await Fs.writeFile(
+      Path.join(directory, 'package.json'),
+      JSON.stringify({ sideEffects: true, type: 'module' }),
+      { flag: 'wx' },
+    )
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+  }
+  for (const [index, stylesheet] of styles.entries()) {
     if (!stylesheet.css) continue
     const css =
       stylesheet.css +
       (stylesheet.map
         ? `\n/*# sourceMappingURL=data:application/json;base64,${Buffer.from(stylesheet.map).toString('base64')} */`
         : '')
-    const hash = Crypto.createHash('sha256').update(css).digest('hex')
+    const hash = Crypto.createHash('sha256')
+      .update(
+        options.development &&
+          !(
+            index === (graph[Stylesheets.packed]?.length ?? 0) &&
+            graph.sharedCssMap?.sources.every(
+              (name) => name === 'zyzz/reset.css',
+            )
+          )
+          ? (stylesheet.id ??
+              JSON.stringify([context.resourcePath, index, graph.dependencies]))
+          : css,
+      )
+      .digest('hex')
     const file = Path.join(directory, `${hash}.css`)
-    try {
-      await Fs.writeFile(file, css, { flag: 'wx' })
-    } catch (error) {
-      if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+    if (options.development) {
+      const previous = await Fs.readFile(file, 'utf8').catch(
+        (error: NodeJS.ErrnoException) => {
+          if (error.code !== 'ENOENT') throw error
+          return undefined
+        },
+      )
+      if (previous !== css) {
+        const temporary = `${file}.${Crypto.randomUUID()}.tmp`
+        await Fs.writeFile(temporary, css)
+        await Fs.rename(temporary, file)
+      }
+    } else {
+      try {
+        await Fs.writeFile(file, css, { flag: 'wx' })
+      } catch (error) {
+        if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+      }
+    }
+    let request = file
+    if (options.development) {
+      // Server-component CSS needs a client graph edge for Next's native CSS HMR.
+      request = `${file}.js`
+      const stylesheet =
+        options.bundler === 'turbopack'
+          ? `./style.css?zyzz=${hash}`
+          : `./${hash}.css`
+      const code = `'use client';import ${JSON.stringify(stylesheet)};`
+      const existing = await Fs.readFile(request, 'utf8').catch(
+        (error: NodeJS.ErrnoException) => {
+          if (error.code !== 'ENOENT') throw error
+          return undefined
+        },
+      )
+      if (existing !== code) await Fs.writeFile(request, code)
+    } else if (options.bundler === 'turbopack') {
+      request = Path.join(directory, 'style.css') + `?zyzz=${hash}`
     }
-    const relative = Path.relative(Path.dirname(context.resourcePath), file)
+    const relative = Path.relative(Path.dirname(context.resourcePath), request)
       .split(Path.sep)
       .join('/')
     requests.push(

package/src/node/Host.ts

@@ -13,6 +13,7 @@ import * as Graph from '../compiler/Graph.js'
 import * as AtRules from '../compiler/internal/AtRules.js'
 import * as Catalogs from '../compiler/internal/Catalogs.js'
 import * as Relative from '../compiler/internal/Relative.js'
+import * as Snapshot from './internal/Snapshot.js'
 import * as Syntax from '../compiler/internal/Syntax.js'
 import * as Source from '../compiler/Source.js'
 import * as Transform from '../compiler/Transform.js'
@@ -124,6 +125,7 @@ export async function create(options: create.Options): Promise<Runtime> {
   const manifestPath = Path.join(outDir, '.zyzz.json')
 
   const compiler = Graph.create()
+  const snapshot = Snapshot.create()
   const stylesheets = new WeakMap<Transform.compile.ReturnType, Stylesheet>()
   let closed = false
   let closing: Promise<void> | undefined
@@ -250,7 +252,7 @@ export async function create(options: create.Options): Promise<Runtime> {
           `Source path conflicts with host control files: ${name}`,
         )
 
-      sources[name] = await Fs.readFile(input, 'utf8')
+      sources[name] = await snapshot.read(input)
     }
 
     const modules = Object.fromEntries(
@@ -306,7 +308,7 @@ export async function create(options: create.Options): Promise<Runtime> {
 
       observe(`${file}.zyzz.json`)
       try {
-        contracts[file] = await Fs.readFile(`${file}.zyzz.json`, 'utf8')
+        contracts[file] = await snapshot.read(`${file}.zyzz.json`)
       } catch (error) {
         if (
           !required &&
@@ -363,7 +365,7 @@ export async function create(options: create.Options): Promise<Runtime> {
       const file = Path.join(root, name)
       const resolutions = (imports[moduleId] = Object.create(null))
 
-      for (const node of Syntax.parse({ moduleId, source }).program.body) {
+      for (const node of snapshot.parse({ moduleId, source }).program.body) {
         if (
           (node.type !== 'ImportDeclaration' &&
             node.type !== 'ExportNamedDeclaration' &&
@@ -439,6 +441,7 @@ export async function create(options: create.Options): Promise<Runtime> {
     }
 
     const graph = compiler.compile({
+      [Syntax.cache]: snapshot.programs(modules),
       compiler: options.compiler,
       native,
       modules,
@@ -446,6 +449,14 @@ export async function create(options: create.Options): Promise<Runtime> {
       imports,
     })
 
+    snapshot.retain(
+      new Set([
+        ...inputs,
+        ...Object.keys(contracts).map((file) => `${file}.zyzz.json`),
+      ]),
+      modules,
+    )
+
     const artifactNames = [
       'zyzz.css',
       'zyzz.css.map',
@@ -818,6 +829,7 @@ export async function create(options: create.Options): Promise<Runtime> {
 
     closing = (async () => {
       await tail
+      snapshot.clear()
       await lock.close()
       await Fs.rm(lockPath)
     })()

package/src/node/internal/Snapshot.ts

@@ -0,0 +1,79 @@
+/** Retains unchanged source text and syntax within an adapter instance. @module */
+import * as Fs from 'node:fs'
+import * as Syntax from '../../compiler/internal/Syntax.js'
+
+/** Creates a source cache; resolution and directory discovery remain owned by the host. */
+export function create() {
+  const files = new Map<string, { source: string; version: string }>()
+  const syntax = new Map<
+    string,
+    { parsed: ReturnType<typeof Syntax.parse>; source: string }
+  >()
+
+  function parse(options: Syntax.parse.Options) {
+    let entry = syntax.get(options.moduleId)
+    if (entry?.source !== options.source) {
+      entry = { parsed: Syntax.parse(options), source: options.source }
+      syntax.set(options.moduleId, entry)
+    }
+    return entry.parsed
+  }
+
+  return {
+    clear() {
+      files.clear()
+      syntax.clear()
+    },
+    delete(file: string, moduleId: string) {
+      files.delete(file)
+      syntax.delete(moduleId)
+    },
+    parse,
+    programs(modules: Readonly<Record<string, string>>) {
+      return new Map(
+        Object.entries(modules).map(([moduleId, source]) => [
+          moduleId,
+          parse({ moduleId, source }),
+        ]),
+      )
+    },
+    async read(file: string) {
+      try {
+        const stat = await Fs.promises.stat(file, { bigint: true })
+        const version = `${stat.dev}:${stat.ino}:${stat.size}:${stat.mtimeNs}:${stat.ctimeNs}`
+        let entry = files.get(file)
+        if (entry?.version !== version) {
+          entry = { source: await Fs.promises.readFile(file, 'utf8'), version }
+          files.set(file, entry)
+        }
+        return entry.source
+      } catch (error) {
+        files.delete(file)
+        throw error
+      }
+    },
+    readSync(file: string) {
+      try {
+        const stat = Fs.statSync(file, { bigint: true })
+        const version = `${stat.dev}:${stat.ino}:${stat.size}:${stat.mtimeNs}:${stat.ctimeNs}`
+        let entry = files.get(file)
+        if (entry?.version !== version) {
+          entry = { source: Fs.readFileSync(file, 'utf8'), version }
+          files.set(file, entry)
+        }
+        return entry.source
+      } catch (error) {
+        files.delete(file)
+        throw error
+      }
+    },
+    retain(
+      paths: ReadonlySet<string>,
+      modules: Readonly<Record<string, string>>,
+    ) {
+      for (const file of files.keys()) if (!paths.has(file)) files.delete(file)
+      for (const id of syntax.keys())
+        if (!Object.hasOwn(modules, id)) syntax.delete(id)
+    },
+  }
+}

package/src/unplugin/index.ts

@@ -4,7 +4,8 @@ import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs/promises'
 import * as Path from 'node:path'
 import * as Reset from '../node/Reset.js'
-import * as Parser from 'oxc-parser'
+import * as Snapshot from '../node/internal/Snapshot.js'
+import * as Syntax from '../compiler/internal/Syntax.js'
 import { createUnplugin } from 'unplugin'
 import type { UnpluginBuildContext } from 'unplugin'
 import * as Graph from '../compiler/Graph.js'
@@ -30,6 +31,7 @@ const portable = createUnplugin<Options | undefined, false>(
   (options = {}, meta) => {
     const root = Path.resolve(options.root ?? process.cwd())
     const compiler = Graph.create()
+    const snapshot = Snapshot.create()
     let graph: Graph.compile.ReturnType | undefined
     let pending: Promise<void> | undefined
     let files = new Set<string>()
@@ -138,7 +140,7 @@ const portable = createUnplugin<Options | undefined, false>(
                 sourcePattern.test(file) &&
                 !excludedPattern.test(file)
               ) {
-                const source = await Fs.readFile(file, 'utf8')
+                const source = await snapshot.read(file)
 
                 files.add(file)
                 sources.set(file, source)
@@ -205,7 +207,7 @@ const portable = createUnplugin<Options | undefined, false>(
 
             files.add(sidecar)
             try {
-              contracts[file] = await Fs.readFile(sidecar, 'utf8')
+              contracts[file] = await snapshot.read(sidecar)
             } catch (error) {
               if (
                 !required &&
@@ -235,8 +237,9 @@ const portable = createUnplugin<Options | undefined, false>(
           await scan(root)
           for (const [file, source] of sources) {
             const links = (imports[identity(file)] = Object.create(null))
-            for (const node of Parser.parseSync(file, source, {
-              sourceType: 'module',
+            for (const node of snapshot.parse({
+              moduleId: identity(file),
+              source,
             }).program.body) {
               if (
                 (node.type !== 'ImportDeclaration' &&
@@ -282,6 +285,7 @@ const portable = createUnplugin<Options | undefined, false>(
           }
 
           const result = compiler.compile({
+            [Syntax.cache]: snapshot.programs(modules),
             compiler: options.compiler,
             reset: options.reset ? Reset.read() : undefined,
             contracts,
@@ -500,6 +504,7 @@ const portable = createUnplugin<Options | undefined, false>(
               Catalogs.read,
             ),
           ).join('\n')
+          snapshot.retain(files, modules)
           graph = result
           if (meta.framework === 'webpack') emit(this)
           if (meta.framework === 'rollup')
@@ -572,9 +577,8 @@ const portable = createUnplugin<Options | undefined, false>(
       },
       webpack(compiler) {
         compiler.hooks.watchRun.tap('zyzz', () => {
-          // Directory invalidations must also discard cached source reads before the graph and loaders rebuild.
-          for (const file of compiler.modifiedFiles ?? [])
-            if (directories.has(file)) compiler.inputFileSystem?.purge?.(file)
+          // The graph rereads every source, including files absent from Webpack's invalidation batch.
+          for (const file of files) compiler.inputFileSystem?.purge?.(file)
         })
       },
     }