zyzz 0.0.7 → 0.0.8

package/src/compiler/Graph.ts

@@ -38,6 +38,8 @@ export declare namespace compile {
 
   /** Source modules available for relative import resolution. */
   type Options = {
+    /** Host entrypoints emit owned stylesheet effects without packed contracts. */
+    readonly [Stylesheets.entry]?: string | undefined
     /** Host syntax from the same immutable source snapshot. */
     readonly [Syntax.cache]?:
       | ReadonlyMap<string, Parser.ParseResult>
@@ -71,6 +73,8 @@ export declare namespace compile {
 
   /** Compiled modules and their direct source dependencies. */
   type ReturnType = {
+    /** Packed resources deduplicated by the host across scoped source outputs. */
+    readonly [Stylesheets.packed]?: readonly Stylesheets.Resource[]
     /** Versioned compiler-only JSON per module; publish beside the compiled entrypoint as <entry>.zyzz.json. */
     readonly contracts: Readonly<Record<string, string>>
     /** Direct static runtime source and library-contract dependencies, keyed by module identity. */
@@ -88,7 +92,7 @@ export declare namespace compile {
   }
 }
 
-/** Creates an isolated compiler that retains only the last successful graph. */
+/** Creates an isolated compiler with bounded extraction reuse across source graphs. */
 export function create(): create.ReturnType {
   let previous: Cache | undefined
 
@@ -112,6 +116,26 @@ export declare namespace create {
   }
 }
 
+type Extraction = {
+  dependencies: readonly string[]
+  extracted: Source.extract.ReturnType
+  inputs: ReadonlyMap<
+    string,
+    Source.extract.ReturnType | ReturnType<typeof Contract.read>
+  >
+  resolution: string
+  source: string
+}
+
+type Transformed = {
+  classes: Readonly<Record<string, string | undefined>>
+  extracted: Source.extract.ReturnType
+  owners: string
+  output: Transform.compile.ReturnType
+  schemes: boolean
+  themes: Readonly<Record<string, Theme.Definition>>
+}
+
 type Cache = {
   compiler: boolean
   composition: Css.compile.Options['composition']
@@ -119,9 +143,12 @@ type Cache = {
 
   contracts: string
   development: boolean
+  entry: string | undefined
   extracted: ReadonlyMap<string, Source.extract.ReturnType>
   libraries: Readonly<Record<string, ReturnType<typeof Contract.read>>>
   reset: string | undefined
+  retained: ReadonlyMap<string, Extraction>
+  transformed: ReadonlyMap<string, Transformed>
   resolutions: Readonly<Record<string, string>>
   native: compile.Options['native']
   result: compile.ReturnType
@@ -195,14 +222,15 @@ function build(options: compile.Options, cache?: Cache): Cache {
       ]),
   )
 
-  // File-set changes can alter extensionless resolution even without source edits.
+  // Host resolutions remain explicit when generated modules enter or leave the graph.
   const previous = (() => {
     if (
       cache &&
       cache.contracts === contracts &&
       cache.development === !!options.development &&
-      ids.length === Object.keys(cache.sources).length &&
-      ids.every((id) => Object.hasOwn(cache.sources, id))
+      (options.imports !== undefined ||
+        (ids.length === Object.keys(cache.sources).length &&
+          ids.every((id) => Object.hasOwn(cache.sources, id))))
     ) {
       return cache
     }
@@ -211,6 +239,8 @@ function build(options: compile.Options, cache?: Cache): Cache {
   })()
   if (
     previous &&
+    previous.entry === options[Stylesheets.entry] &&
+    ids.length === Object.keys(previous.sources).length &&
     Object.keys(resolutions).length ===
       Object.keys(previous.resolutions).length &&
     Object.entries(resolutions).every(
@@ -224,6 +254,8 @@ function build(options: compile.Options, cache?: Cache): Cache {
   )
     return previous
 
+  const retained = new Map(previous?.retained)
+  const transformed = new Map(previous?.transformed)
   const dependencies: Record<string, readonly string[]> = Object.create(null)
   const extracted = new Map<string, Source.extract.ReturnType>()
   const identifiers = new Map<string, Set<string>>()
@@ -365,29 +397,6 @@ function build(options: compile.Options, cache?: Cache): Cache {
     let direct: Ast.Node | undefined
     const stars: string[] = []
     for (const statement of program.body) {
-      if (
-        statement.type === 'ImportDeclaration' &&
-        statement.importKind !== 'type'
-      ) {
-        const target = resolve(moduleId, statement.source.value, statement)
-        if (!target) continue
-        for (const specifier of statement.specifiers) {
-          if (
-            specifier.type === 'ImportNamespaceSpecifier' ||
-            (specifier.type === 'ImportSpecifier' &&
-              specifier.importKind === 'type')
-          )
-            continue
-          const imported =
-            specifier.type === 'ImportDefaultSpecifier'
-              ? 'default'
-              : specifier.imported.type === 'Identifier'
-                ? specifier.imported.name
-                : specifier.imported.value
-          const value = constant(target, imported, next)
-          if (value) imports[specifier.local.name] = relocate(value, specifier)
-        }
-      }
       if (statement.type === 'ExportDefaultDeclaration' && name === 'default') {
         direct = statement.declaration
         exported = true
@@ -436,7 +445,47 @@ function build(options: compile.Options, cache?: Cache): Cache {
             .filter((value) => value !== undefined),
         ),
       ]
-      return candidates.length === 1 ? candidates[0] : undefined
+      const value = candidates.length === 1 ? candidates[0] : undefined
+      if (value || !stars.length) constants.set(key, value)
+      return value
+    }
+    if (
+      direct &&
+      [
+        'FunctionDeclaration',
+        'FunctionExpression',
+        'ArrowFunctionExpression',
+        'ClassDeclaration',
+        'ClassExpression',
+      ].includes(direct.type)
+    ) {
+      constants.set(key, undefined)
+      return undefined
+    }
+    for (const statement of program.body) {
+      if (
+        statement.type === 'ImportDeclaration' &&
+        statement.importKind !== 'type'
+      ) {
+        const target = resolve(moduleId, statement.source.value, statement)
+        if (!target) continue
+        for (const specifier of statement.specifiers) {
+          if (
+            specifier.type === 'ImportNamespaceSpecifier' ||
+            (specifier.type === 'ImportSpecifier' &&
+              specifier.importKind === 'type')
+          )
+            continue
+          const imported =
+            specifier.type === 'ImportDefaultSpecifier'
+              ? 'default'
+              : specifier.imported.type === 'Identifier'
+                ? specifier.imported.name
+                : specifier.imported.value
+          const value = constant(target, imported, next)
+          if (value) imports[specifier.local.name] = relocate(value, specifier)
+        }
+      }
     }
     const scope = new Scope.Tracker({ preserveExitedScopes: true })
     Walker.walk(program, { scopeTracker: scope })
@@ -602,21 +651,34 @@ function build(options: compile.Options, cache?: Cache): Cache {
 
     const source = options.modules[moduleId]!
 
+    const snapshot =
+      previous?.retained.get(moduleId) ??
+      (previous && Object.hasOwn(previous.sources, moduleId)
+        ? {
+            dependencies: previous.result.dependencies[moduleId]!,
+            extracted: previous.extracted.get(moduleId)!,
+            inputs: new Map(
+              previous.result.dependencies[moduleId]!.map((target) => [
+                target,
+                previous.libraries[target] ?? previous.extracted.get(target)!,
+              ]),
+            ),
+            resolution: previous.resolutions[moduleId]!,
+            source: previous.sources[moduleId]!,
+          }
+        : undefined)
     if (
-      previous &&
-      source === previous.sources[moduleId] &&
-      resolutions[moduleId] === previous.resolutions[moduleId] &&
-      previous.result.dependencies[moduleId]!.every(
-        (target) =>
-          Object.hasOwn(libraries, target) ||
-          visit(target) === previous.extracted.get(target),
+      snapshot &&
+      source === snapshot.source &&
+      resolutions[moduleId] === snapshot.resolution &&
+      snapshot.dependencies.every((target) =>
+        Object.hasOwn(libraries, target)
+          ? libraries[target] === snapshot.inputs.get(target)
+          : Object.hasOwn(options.modules, target) &&
+            visit(target) === snapshot.inputs.get(target),
       )
     ) {
-      return retain(
-        moduleId,
-        previous.extracted.get(moduleId)!,
-        previous.result.dependencies[moduleId]!,
-      )
+      return retain(moduleId, snapshot.extracted, snapshot.dependencies)
     }
 
     // Validate identity and syntax through the public source boundary before linking.
@@ -957,6 +1019,20 @@ function build(options: compile.Options, cache?: Cache): Cache {
 
     extracted.set(moduleId, result)
     dependencies[moduleId] = imports
+    retained.delete(moduleId)
+    retained.set(moduleId, {
+      dependencies: imports,
+      extracted: result,
+      inputs: new Map(
+        imports.map((target) => [
+          target,
+          libraries[target] ?? extracted.get(target)!,
+        ]),
+      ),
+      resolution: resolutions[moduleId]!,
+      source: options.modules[moduleId]!,
+    })
+    if (retained.size > 256) retained.delete(retained.keys().next().value!)
 
     for (const call of result.themeCalls)
       for (const name of new Set([
@@ -1072,6 +1148,9 @@ function build(options: compile.Options, cache?: Cache): Cache {
         ...(options.native.units && { units: { ...options.native.units } }),
       },
       reset: options.reset,
+      entry: options[Stylesheets.entry],
+      retained,
+      transformed,
       resolutions: Object.freeze(resolutions),
       result: Object.freeze({
         contracts: Object.freeze(
@@ -1248,16 +1327,58 @@ function build(options: compile.Options, cache?: Cache): Cache {
   }
 
   const sharedVisited = new Set<string>()
+  const packed: Stylesheets.Resource[] = []
 
   const shared = (() => {
     try {
-      const sharedSections = ids.flatMap((id) => reachable(id, sharedVisited))
+      const entry = options[Stylesheets.entry]
+      const packedSections =
+        entry === undefined
+          ? []
+          : (dependencies[entry] ?? [])
+              .filter((id) => Object.hasOwn(libraries, id))
+              .flatMap((id) => reachable(id, sharedVisited))
+      const sharedSections =
+        entry === undefined
+          ? ids.flatMap((id) => reachable(id, sharedVisited))
+          : (sections.get(entry) ?? [])
+      if (packedSections.length) {
+        // Validate combined ownership and ordering before splitting independently loaded resources.
+        Stylesheets.render([...packedSections, ...sharedSections])
+        for (const section of packedSections) {
+          packed.push({
+            id: JSON.stringify([section.owner, section.source, section.key]),
+            ...Stylesheets.render([section]),
+          })
+        }
+      }
       const resetSource =
         (options.reset === undefined ? undefined : 'zyzz/reset.css') ??
         resetOwners[0] ??
         sharedSections.find((section) => section.key === 'optional-reset-order')
           ?.source
 
+      if (packed.length) {
+        const order = Stylesheets.render([
+          ...(resetSource === undefined
+            ? []
+            : [
+                {
+                  source: resetSource,
+                  css: '',
+                  layers: layerNames.length
+                    ? layerNames.map((name) => ['reset', name])
+                    : [['reset']],
+                },
+              ]),
+          ...[...packedSections, ...sharedSections].map((section) => ({
+            ...section,
+            css: '',
+          })),
+        ])
+        if (order.css) packed.unshift({ ...order, id: order.css })
+      }
+
       return Stylesheets.render([
         ...(resetSource === undefined
           ? []
@@ -1406,12 +1527,26 @@ function build(options: compile.Options, cache?: Cache): Cache {
     ),
   )
 
+  const ownerSignature = JSON.stringify(owners)
+
   // Extraction visits dependencies first; their emitted classes must precede consumers.
   for (const moduleId of extracted.keys()) {
-    modules[moduleId] =
-      sameThemes &&
-      previous!.schemes === schemes &&
-      extracted.get(moduleId) === previous!.extracted.get(moduleId)
+    const cached = transformed.get(moduleId)
+    const reusable =
+      cached &&
+      cached.extracted === extracted.get(moduleId) &&
+      cached.schemes === schemes &&
+      Object.keys(cached.themes).length === names.length &&
+      names.every((name) => cached.themes[name] === themes[name]) &&
+      Object.entries(cached.classes).every(
+        ([name, value]) => styleClasses[name] === value,
+      ) &&
+      cached.owners === ownerSignature
+    modules[moduleId] = reusable
+      ? cached.output
+      : sameThemes &&
+          previous!.schemes === schemes &&
+          extracted.get(moduleId) === previous!.extracted.get(moduleId)
         ? previous!.result.modules[moduleId]!
         : Transform.compile({
             compiler: options.compiler,
@@ -1422,6 +1557,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
             schemes,
             source: options.modules[moduleId]!,
             [Themes.context]: {
+              parsed: parse({ moduleId, source: options.modules[moduleId]! }),
               extracted: Object.freeze({
                 ...extracted.get(moduleId)!,
                 vars: sharedThemes,
@@ -1432,13 +1568,39 @@ function build(options: compile.Options, cache?: Cache): Cache {
               styleClasses,
             },
           })
+    transformed.delete(moduleId)
+    transformed.set(moduleId, {
+      classes: Object.fromEntries(
+        extracted
+          .get(moduleId)!
+          .calls.flatMap((call) =>
+            (call.runtimeComposition ?? []).map((input) => [
+              input.name,
+              styleClasses[input.name],
+            ]),
+          ),
+      ),
+      extracted: extracted.get(moduleId)!,
+      owners: ownerSignature,
+      output: modules[moduleId]!,
+      schemes,
+      themes: sharedThemes,
+    })
+    if (transformed.size > 256)
+      transformed.delete(transformed.keys().next().value!)
     // Module-local checks cannot detect truncated ownership hashes colliding across files.
+    const emitted = new Set(
+      Array.from(
+        modules[moduleId]!.css.matchAll(/\.(z-[\w-]+)\{/g),
+        (match) => match[1],
+      ),
+    )
     for (const value of Object.values(modules[moduleId]!.classes))
       for (const name of value.split(' ')) {
         if (
           options.compiler === false ||
           !name.startsWith('z-') ||
-          !modules[moduleId]!.css.includes(`.${name}{`)
+          !emitted.has(name)
         )
           continue
 
@@ -1531,8 +1693,12 @@ function build(options: compile.Options, cache?: Cache): Cache {
     libraries: Object.freeze(libraries),
     native: undefined,
     reset: options.reset,
+    entry: options[Stylesheets.entry],
+    retained,
+    transformed,
     resolutions: Object.freeze(resolutions),
     result: Object.freeze({
+      ...(packed.length ? { [Stylesheets.packed]: packed } : {}),
       ...(sharedCss
         ? {
             sharedCss,
@@ -1543,7 +1709,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
         : {}),
       contracts: Object.freeze(
         Object.fromEntries(
-          ids
+          (options[Stylesheets.entry] === undefined ? ids : [])
             .filter(
               (id) =>
                 Object.keys(extracted.get(id)!.themeExports ?? {}).length ||

package/src/compiler/Transform.ts

@@ -96,7 +96,8 @@ export function compile(options: compile.Options): compile.ReturnType {
   }
 
   const module = new MagicString(options.source)
-  const program = Syntax.parse(options).program
+  const program = (options[Themes.context]?.parsed ?? Syntax.parse(options))
+    .program
 
   for (const call of extracted.contributionCalls ?? [])
     module.overwrite(

package/src/compiler/internal/Stylesheets.ts

@@ -17,6 +17,15 @@ export class ConflictError extends Error {
   override name = 'Stylesheets.ConflictError'
 }
 
+/** Selects module-owned effects when the host loads source dependencies separately. */
+export const entry = Symbol('stylesheet entry')
+
+/** Independently shared packed sections for hosts that load source modules separately. */
+export const packed = Symbol('packed stylesheets')
+
+/** One packed resource with stable source ownership for development updates. */
+export type Resource = ReturnType<typeof render> & { readonly id: string }
+
 /** Ordered CSS owned by one portable source module. */
 export type Section = {
   /** Isolated selector namespaces belonging to the source owner. */

package/src/metro/Graph.ts

@@ -1,7 +1,7 @@
 /** Reads a closed local source graph for native authoring without evaluating modules. @module */
 import * as Fs from 'node:fs'
 import * as Path from 'node:path'
-import * as Parser from 'oxc-parser'
+import * as Snapshot from '../node/internal/Snapshot.js'
 import type * as Graph from '../compiler/Graph.js'
 
 /** Collects relative source imports; package and asset imports remain owned by Metro. */
@@ -10,6 +10,7 @@ export function read(
   source: string,
   platform: string,
   root: string,
+  snapshot = Snapshot.create(),
 ) {
   const files = new Set<string>()
   const modules: Record<string, string> = Object.create(null)
@@ -31,7 +32,8 @@ export function read(
     modules[id] = source
     const resolved: Record<string, string | null> = Object.create(null)
     imports[id] = resolved
-    for (const statement of Parser.parseSync(filename, source).program.body) {
+    for (const statement of snapshot.parse({ moduleId: id, source }).program
+      .body) {
       if (
         !('source' in statement) ||
         !statement.source ||
@@ -62,7 +64,7 @@ export function read(
       )
       if (!target || !/\.[cm]?[jt]sx?$/.test(target)) continue
       resolved[specifier] = identity(target)
-      visit(target, Fs.readFileSync(target, 'utf8'))
+      visit(target, snapshot.readSync(target))
     }
   }
   visit(filename, source)

package/src/metro/transformer.ts

@@ -1,4 +1,7 @@
 /** Chains native authoring compilation into the configured Metro Babel transformer. @module */
+import * as Compilation from '../babel/internal/Compilation.js'
+import * as Compiler from '../compiler/Graph.js'
+import * as Snapshot from '../node/internal/Snapshot.js'
 import type * as Babel from '@babel/core'
 import * as Crypto from 'node:crypto'
 import * as Fs from 'node:fs'
@@ -28,6 +31,8 @@ export function create(
     'platform' | 'target' | 'moduleId' | 'modules' | 'imports' | 'colorScheme'
   > & { readonly root: string },
 ) {
+  const compilers = new Map<string, ReturnType<typeof Compiler.create>>()
+  const snapshot = Snapshot.create()
   const upstream: Upstream = Module.createRequire(import.meta.url)(upstreamPath)
   return {
     getCacheKey(...args: readonly unknown[]) {
@@ -77,6 +82,21 @@ export function create(
         Path.relative(options.root, filename).startsWith(`..${Path.sep}`)
       )
         return upstream.transform(input)
+
+      const graph = Graph.read(
+        filename,
+        input.src,
+        platform,
+        options.root,
+        snapshot,
+      )
+      const key = `${platform}:${filename}`
+      let compiler = compilers.get(key)
+      if (!compiler) {
+        compiler = Compiler.create()
+        compilers.set(key, compiler)
+      }
+
       return upstream.transform({
         ...input,
         plugins: [
@@ -86,7 +106,12 @@ export function create(
               ...options,
               platform,
               target: 'native',
-              ...Graph.read(filename, input.src, platform, options.root),
+              ...graph,
+              [Compilation.key]: {
+                compile: compiler.compile,
+                parse: snapshot.parse,
+                programs: snapshot.programs(graph.modules),
+              },
             },
           ],
           ...(input.plugins ?? []),

package/src/next/index.ts

@@ -5,9 +5,9 @@ import * as Module from 'node:module'
 import * as Path from 'node:path'
 
 /**
- * Adds source transformation, CSS delivery, and project dependency watching to both bundlers.
- * Preserves existing configuration hooks and creates `.zyzz/next` beneath the working directory.
- * Throws file-system errors during setup; compilation errors are reported by the bundler.
+ * Adds source transformation, CSS delivery, and imported dependency watching to both bundlers.
+ * Preserves configuration hooks. Compilation emits stylesheets beneath `.zyzz/next`.
+ * Compilation and file-system errors are reported by the bundler.
  */
 export function zyzz(config: NextConfig, options?: zyzz.Options): NextConfig
 export function zyzz(config: zyzz.Factory, options?: zyzz.Options): zyzz.Factory
@@ -27,24 +27,32 @@ export function zyzz(
   const loader = Module.createRequire(import.meta.url).resolve(
     'zyzz/next/loader',
   )
-  const loaderOptions = { reset: options.reset ?? false, root: process.cwd() }
-  const shared = Path.join(loaderOptions.root, '.zyzz', 'next', 'shared.css')
-  Fs.mkdirSync(Path.dirname(shared), { recursive: true })
-  try {
-    Fs.writeFileSync(shared, '', { flag: 'wx' })
-  } catch (error) {
-    if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+  const loaderOptions = {
+    development: process.env.NODE_ENV === 'development',
+    reset: options.reset ?? false,
+    root: process.cwd(),
+  }
+  // Turbopack must observe the output directory before taking its filesystem snapshot.
+  const directory = Path.join(loaderOptions.root, '.zyzz', 'next')
+  Fs.mkdirSync(directory, { recursive: true })
+  for (const [name, source] of Object.entries({
+    'package.json': JSON.stringify({ sideEffects: true, type: 'module' }),
+    'style.css': '',
+  })) {
+    try {
+      Fs.writeFileSync(Path.join(directory, name), source, { flag: 'wx' })
+    } catch (error) {
+      if ((error as NodeJS.ErrnoException).code !== 'EEXIST') throw error
+    }
   }
   const pattern = '*.{ts,tsx,js,jsx,mts,cts,mjs,cjs}'
   const existing = config.turbopack?.rules?.[pattern]
   const rule = {
-    condition: {
-      all: [{ not: 'foreign' as const }, { not: { query: /zyzz-style/ } }],
-    },
+    condition: { not: 'foreign' as const },
     loaders: [
       {
         loader,
-        options: { ...loaderOptions, bundler: 'turbopack', mode: 'source' },
+        options: { ...loaderOptions, bundler: 'turbopack' },
       },
     ],
   }
@@ -70,29 +78,16 @@ export function zyzz(
         [pattern]: [
           ...(Array.isArray(existing) ? existing : existing ? [existing] : []),
           rule,
-          {
-            condition: { query: /zyzz-style/ },
-            loaders: [
-              {
-                loader,
-                options: {
-                  ...loaderOptions,
-                  bundler: 'turbopack',
-                  mode: 'style',
-                },
-              },
-            ],
-            as: '*.css',
-          },
         ],
-        '**/.zyzz/next/shared.css': {
+        '**/.zyzz/next/style.css': {
+          condition: { query: /zyzz=/ },
           loaders: [
             {
               loader,
               options: {
                 ...loaderOptions,
                 bundler: 'turbopack',
-                mode: 'shared',
+                mode: 'style',
               },
             },
           ],
@@ -111,7 +106,7 @@ export function zyzz(
         use: [
           {
             loader,
-            options: { ...loaderOptions, bundler: 'webpack', mode: 'source' },
+            options: { ...loaderOptions, bundler: 'webpack' },
           },
         ],
       })