zyzz 0.0.28 → 0.0.30

package/dist/vite/index.js

@@ -5,6 +5,7 @@
 import * as Namespaces from '../compiler/internal/Namespaces.js';
 import * as AtRules from '../compiler/internal/AtRules.js';
 import * as Catalogs from '../compiler/internal/Catalogs.js';
+import * as Results from '../compiler/internal/Results.js';
 import * as Contracts from '../node/internal/Contracts.js';
 import * as Mapping from '@jridgewell/gen-mapping';
 import * as Lightning from 'lightningcss';
@@ -13,11 +14,11 @@ import { existsSync } from 'node:fs';
 import * as Fs from 'node:fs/promises';
 import * as Path from 'node:path';
 import * as Reset from '../node/Reset.js';
+import * as Vlq from '../internal/Vlq.js';
 import { createRequire, isBuiltin } from 'node:module';
 import * as Parser from 'oxc-parser';
 import * as Walker from 'oxc-walker';
 import * as Snapshot from '../node/internal/Snapshot.js';
-import * as Syntax from '../compiler/internal/Syntax.js';
 import * as Scope from '../compiler/internal/Scope.js';
 import * as Graph from '../compiler/Graph.js';
 import * as Source from '../compiler/Source.js';
@@ -46,6 +47,21 @@ export function zyzz(options = {}) {
     const reads = new WeakMap();
     const lookups = new WeakMap();
     const compilers = new WeakMap();
+    const projects = new WeakMap();
+    // The shared stylesheet each environment last loaded, which an edit compares against.
+    const servedShared = new WeakMap();
+    // Watcher events advance an environment's generation, which scopes memoized whole-project work.
+    const generations = new WeakMap();
+    let devServer;
+    const watching = new Set();
+    // Chokidar matches its ignore patterns on every add, and each compile watches its whole closure.
+    const watched = new Set();
+    // Each compile reads the catalogs of every contract it saw, which rarely changes text.
+    const catalogReads = new Map();
+    const dependencyChains = new Map();
+    const edgeMemos = new WeakMap();
+    // A development entry's last output, reused until a watcher event or a recompiled graph.
+    const outputs = new WeakMap();
     const packages = Contracts.create();
     function compiler(environment) {
         let value = compilers.get(environment);
@@ -55,6 +71,144 @@ export function zyzz(options = {}) {
         }
         return value;
     }
+    /**
+     * Watches a compile input from a hook. Vite checks the filesystem each time a file outside its
+     * root is watched, and every compile reads the same package files, so development watches
+     * each of those once.
+     */
+    function watcher(context) {
+        return (file) => {
+            if (devServer && !file.startsWith(`${devServer.config.root}/`)) {
+                if (watching.has(file))
+                    return;
+                watching.add(file);
+            }
+            context.addWatchFile(file);
+        };
+    }
+    /**
+     * The packed stylesheet dependency chains of a library contract. Every compile reads each
+     * contract it reaches, and design system contracts are large, so each text parses once.
+     */
+    function stylesheetDependencies(id, contract) {
+        let value = dependencyChains.get(contract);
+        if (value)
+            return value;
+        const metadata = (() => {
+            try {
+                return JSON.parse(contract);
+            }
+            catch (error) {
+                Graph.compile({ modules: {}, contracts: { [id]: contract } });
+                throw error;
+            }
+        })();
+        value = Array.isArray(metadata?.stylesheets)
+            ? metadata.stylesheets
+                .map((section) => section?.dependency)
+                .filter((dependency) => Array.isArray(dependency))
+            : [];
+        // Rebuilt libraries leave their earlier texts behind, so the cache stays bounded.
+        if (dependencyChains.size > 256)
+            dependencyChains.clear();
+        dependencyChains.set(contract, value);
+        return value;
+    }
+    /**
+     * Each module's import edges in an environment, shared by every entry compile that walks the
+     * module. Added and removed files and dependency optimization change resolutions, so either
+     * starts over.
+     */
+    function importEdges(environment) {
+        const metadata = environment.mode === 'dev'
+            ? environment.depsOptimizer?.metadata
+            : undefined;
+        const key = `${metadata?.browserHash}:${Object.keys(metadata?.discovered ?? {}).length}`;
+        let value = edgeMemos.get(environment);
+        if (value?.key !== key) {
+            value = { files: new Map(), key };
+            edgeMemos.set(environment, value);
+        }
+        return value.files;
+    }
+    /** Adds a compile input to the development watcher once. */
+    function watch(server, file) {
+        if (watched.has(file))
+            return;
+        watched.add(file);
+        server.watcher.add(file);
+    }
+    function read(contract) {
+        let value = catalogReads.get(contract);
+        if (!value) {
+            if (catalogReads.size > 256)
+                catalogReads.clear();
+            value = Catalogs.read(contract);
+            catalogReads.set(contract, value);
+        }
+        return value;
+    }
+    function project(environment) {
+        let value = projects.get(environment);
+        if (!value) {
+            value = {
+                compiler: Graph.create(),
+                contracts: Object.create(null),
+                fallback: Graph.create(),
+                imports: Object.create(null),
+                modules: Object.create(null),
+                outcome: undefined,
+            };
+            projects.set(environment, value);
+        }
+        return value;
+    }
+    /**
+     * Development merges every module a transform reaches into one graph per environment, so
+     * modules compile once per change instead of once per importer. A module's output depends only
+     * on its own import closure, so the merged graph returns the output a closure compile would.
+     * While some other module fails, the requested closure compiles alone and reports only its own
+     * errors, as before.
+     */
+    function compileProject(environment, input, id) {
+        const value = project(environment);
+        let changed = value.outcome === undefined;
+        for (const [module, source] of Object.entries(input.modules))
+            if (value.modules[module] !== source) {
+                value.modules[module] = source;
+                changed = true;
+            }
+        for (const [module, resolutions] of Object.entries(input.imports ?? {}))
+            if (!same(value.imports[module], resolutions)) {
+                value.imports[module] = resolutions;
+                changed = true;
+            }
+        for (const [module, contract] of Object.entries(input.contracts ?? {}))
+            if (value.contracts[module] !== contract) {
+                value.contracts[module] = contract;
+                changed = true;
+            }
+        if (changed)
+            value.outcome = (() => {
+                try {
+                    return {
+                        result: value.compiler.compile({
+                            ...input,
+                            contracts: value.contracts,
+                            imports: value.imports,
+                            modules: value.modules,
+                        }),
+                    };
+                }
+                catch (error) {
+                    return { error };
+                }
+            })();
+        const outcome = value.outcome;
+        if ('result' in outcome && Object.hasOwn(outcome.result.modules, id))
+            return outcome.result;
+        return value.fallback.compile(input);
+    }
     const discoveries = new WeakMap();
     const contributionFiles = new WeakMap();
     const assets = new Map();
@@ -65,6 +219,8 @@ export function zyzz(options = {}) {
     const sourceEntrypoints = new Set();
     const identities = new Map();
     const exclusions = new Map();
+    // Every compile checks each import against the source directories.
+    const roots = new Map();
     const lazyImports = new WeakMap();
     let directories;
     let filter;
@@ -146,13 +302,17 @@ export function zyzz(options = {}) {
         return value;
     }
     function sourceRoot(file) {
-        return directories.find((directory) => {
+        if (roots.has(file))
+            return roots.get(file);
+        const root = directories.find((directory) => {
             const relative = Path.relative(directory, file);
             return (relative !== '..' &&
                 !relative.startsWith(`..${Path.sep}`) &&
                 !Path.isAbsolute(relative) &&
                 !relative.split(Path.sep).includes('node_modules'));
         });
+        roots.set(file, root);
+        return root;
     }
     function discover(environment, host) {
         let pending = discoveries.get(environment);
@@ -293,7 +453,37 @@ export function zyzz(options = {}) {
     }
     async function updateDiscovery(environment, file, event) {
         reads.delete(environment);
-        lookups.delete(environment);
+        generations.set(environment, (generations.get(environment) ?? 0) + 1);
+        const changed = entries(environment).get(file);
+        if (changed)
+            changed.source = undefined;
+        // An edit keeps every resolution. Adding or removing a file can change where a
+        // specifier resolves, and a contract derives again only when a file it read changes.
+        // Editors save through temporary files, which no specifier resolves to.
+        const resolvable = event !== 'update' &&
+            /\.(?:[cm]?[jt]sx?|json|css|svelte|vue)$|(?:^|[/\\])package\.json$/.test(file);
+        const cache = lookups.get(environment);
+        // Import edges derive from resolutions and module text, which each memo compares.
+        if (resolvable)
+            edgeMemos.delete(environment);
+        if (cache) {
+            if (resolvable)
+                cache.resolutions.clear();
+            for (const [key, files] of cache.read)
+                if (files.has(file)) {
+                    cache.contracts.delete(key);
+                    cache.read.delete(key);
+                }
+        }
+        if (event === 'delete') {
+            const value = projects.get(environment);
+            const id = sourceId(file);
+            if (value && Object.hasOwn(value.modules, id)) {
+                delete value.modules[id];
+                delete value.imports[id];
+                value.outcome = undefined;
+            }
+        }
         if (event === 'delete') {
             if (entries(environment).has(file)) {
                 let files = removed.get(environment);
@@ -323,10 +513,52 @@ export function zyzz(options = {}) {
         }
     }
     async function compile(entry, host, code, allSources = false, everything = false) {
-        // Every compile visits the discovered project, so modules share lookups
-        // until the watcher reports a change. Full-project compiles look up afresh.
+        const generation = generations.get(entry.environment) ?? 0;
+        const memo = outputs.get(entry);
+        const current = projects.get(entry.environment)?.outcome;
+        // Without a watcher event the closure is unchanged, so a stylesheet load after its
+        // transform reuses the output while the merged graph has not recompiled.
+        if (memo &&
+            !everything &&
+            memo.allSources === allSources &&
+            memo.generation === generation &&
+            (code === undefined || code === memo.code) &&
+            current &&
+            'result' in current &&
+            current.result === memo.result) {
+            for (const file of entry.files)
+                host.watch(file);
+            return memo.output;
+        }
+        const output = await compileEntry(entry, host, code, allSources, everything);
+        const outcome = projects.get(entry.environment)?.outcome;
+        // A concurrent compile can replace the merged result while this one renders, so only an
+        // output of the current result is kept.
+        if (entry.environment.mode === 'dev' &&
+            !everything &&
+            outcome &&
+            'result' in outcome &&
+            outcome.result.modules === output.modules &&
+            generation === (generations.get(entry.environment) ?? 0))
+            outputs.set(entry, {
+                allSources,
+                code,
+                generation,
+                output,
+                result: outcome.result,
+            });
+        return output;
+    }
+    async function compileEntry(entry, host, code, allSources = false, everything = false) {
+        // Every compile visits the discovered project, so modules share lookups. Watcher events
+        // drop the resolutions and contracts a change can affect. Full-project compiles look up
+        // afresh, since a document must not trail the watcher.
         const cache = (() => {
-            const fresh = { contracts: new Map(), resolutions: new Map() };
+            const fresh = {
+                contracts: new Map(),
+                read: new Map(),
+                resolutions: new Map(),
+            };
             if (everything)
                 return fresh;
             let value = lookups.get(entry.environment);
@@ -336,6 +568,8 @@ export function zyzz(options = {}) {
             }
             return value;
         })();
+        // Full-project compiles walk afresh, as they look up afresh.
+        const memos = everything ? undefined : importEdges(entry.environment);
         async function resolve(source, importer) {
             if (isBuiltin(source))
                 return { id: source, external: true };
@@ -350,15 +584,33 @@ export function zyzz(options = {}) {
             if (!resolved)
                 return resolved;
             if (entry.environment.mode === 'dev') {
-                const optimized = Object.values({
-                    ...entry.environment.depsOptimizer?.metadata.optimized,
-                    ...entry.environment.depsOptimizer?.metadata.discovered,
-                }).find((item) => item.file === resolved.id.split('?')[0]);
-                if (optimized?.src)
-                    return { ...resolved, id: optimized.src };
+                const source = optimized().get(resolved.id.split('?')[0]);
+                if (source)
+                    return { ...resolved, id: source };
             }
             return { ...resolved, id: normalize(resolved.id) };
         }
+        // Optimized dependency sources by bundled file, indexed once per compile rather than
+        // searched for every resolution.
+        let indexed;
+        function optimized() {
+            if (indexed)
+                return indexed;
+            indexed = new Map();
+            const environment = entry.environment;
+            const metadata = environment.mode === 'dev'
+                ? environment.depsOptimizer?.metadata
+                : undefined;
+            // Discovered entries replace optimized ones of the same name, and the first entry
+            // bundling a file wins, as a search of the merged record finds it.
+            for (const item of Object.values({
+                ...metadata?.optimized,
+                ...metadata?.discovered,
+            }))
+                if (!indexed.has(item.file))
+                    indexed.set(item.file, item.src ?? '');
+            return indexed;
+        }
         const imports = Object.create(null);
         const contracts = Object.create(null);
         const lazy = Object.create(null);
@@ -381,7 +633,10 @@ export function zyzz(options = {}) {
                     required,
                     resolve: async (specifier, importer) => (await resolve(specifier, importer))?.id.split(/[?#]/)[0],
                 })
-                    .then((contract) => ({ contract, files: read }));
+                    .then((contract) => {
+                    cache.read.set(key, read);
+                    return { contract, files: read };
+                });
                 cache.contracts.set(key, pending);
                 pending.catch(() => cache.contracts.delete(key));
             }
@@ -405,14 +660,37 @@ export function zyzz(options = {}) {
                 cached = new Map();
                 reads.set(entry.environment, cached);
             }
+            // Earlier plugins can rewrite a module before this one sees it, as router plugins drop
+            // server routes from client route trees. Its importers read the code Vite transformed, so
+            // every graph in the environment holds one version of each module.
             // Full-project compilation must not reuse reads from concurrent module transforms.
             const text = source ??
+                (everything
+                    ? undefined
+                    : entries(entry.environment).get(file)?.source) ??
                 (everything ? undefined : cached.get(file)) ??
                 (await snapshot(entry.environment).read(file));
             if (!everything)
                 cached.set(file, text);
             modules[id] = text;
+            const memo = memos?.get(file);
+            // Replaying the edges keeps the order in which modules and contracts join the compile.
+            if (memo?.text === text) {
+                imports[id] = { ...memo.resolutions };
+                for (const step of memo.steps) {
+                    if (typeof step === 'string') {
+                        await visit(step);
+                        continue;
+                    }
+                    const contract = await readContract(step.physical);
+                    if (contract !== undefined)
+                        contracts[step.id] = contract;
+                }
+                lazy[id] = memo.lazy;
+                return;
+            }
             const resolutions = Object.create(null);
+            const steps = [];
             imports[id] = resolutions;
             const parsed = snapshot(entry.environment).parse({
                 moduleId: id,
@@ -461,6 +739,7 @@ export function zyzz(options = {}) {
                     /[/\\]src[/\\]default\.[cm]?ts$/.test(resolved.id)) {
                     sourceEntrypoints.add(normalize(resolved.id));
                     resolutions[specifier] = sourceId(resolved.id);
+                    steps.push(resolved.id);
                     await visit(resolved.id);
                     continue;
                 }
@@ -471,9 +750,10 @@ export function zyzz(options = {}) {
                 }
                 if (resolved.external || !eligible(resolved.id)) {
                     const physical = resolved.id.split('?')[0].split('#')[0];
-                    const contract = Path.isAbsolute(physical) && /\.[cm]?[jt]sx?$/.test(physical)
-                        ? await readContract(physical)
-                        : undefined;
+                    const readable = Path.isAbsolute(physical) && /\.[cm]?[jt]sx?$/.test(physical);
+                    if (readable)
+                        steps.push({ id: resolved.id, physical });
+                    const contract = readable ? await readContract(physical) : undefined;
                     if (contract !== undefined) {
                         contracts[resolved.id] = contract;
                         resolutions[specifier] = resolved.id;
@@ -483,6 +763,7 @@ export function zyzz(options = {}) {
                     continue;
                 }
                 resolutions[specifier] = sourceId(resolved.id);
+                steps.push(resolved.id);
                 await visit(resolved.id);
             }
             // Lazy imports stay outside this compile but scope the documents that load them.
@@ -510,6 +791,7 @@ export function zyzz(options = {}) {
                 targets.add(eligible(resolved.id) ? sourceId(resolved.id) : resolved.id);
             }
             lazy[id] = targets;
+            memos?.set(file, { lazy: targets, resolutions, steps, text });
         }
         await visit(entry.file, code);
         const connected = new Set(files);
@@ -593,22 +875,9 @@ export function zyzz(options = {}) {
             if (loaded.has(id))
                 return;
             loaded.add(id);
-            const metadata = (() => {
-                try {
-                    return JSON.parse(contracts[id]);
-                }
-                catch (error) {
-                    Graph.compile({ modules: {}, contracts: { [id]: contracts[id] } });
-                    throw error;
-                }
-            })();
-            if (!Array.isArray(metadata?.stylesheets))
-                return;
-            for (const section of metadata.stylesheets) {
-                if (!Array.isArray(section?.dependency))
-                    continue;
+            for (const dependency of stylesheetDependencies(id, contracts[id])) {
                 let owner = id;
-                for (const specifier of section.dependency) {
+                for (const specifier of dependency) {
                     if (typeof specifier !== 'string' ||
                         !specifier ||
                         specifier.includes('\0'))
@@ -639,9 +908,9 @@ export function zyzz(options = {}) {
                 ...Object.values(resolutions).filter((target) => target !== null),
                 ...(lazy[id] ?? []),
             ]));
-        const result = entry.compiler.compile({
+        const input = {
+            [Results.lean]: true,
             [ThemeRules.shared]: native ? undefined : 'all',
-            [Syntax.cache]: snapshot(entry.environment).programs(modules),
             compiler: options.compiler,
             reset: options.reset ? Reset.read() : undefined,
             native,
@@ -649,7 +918,10 @@ export function zyzz(options = {}) {
             development: entry.environment.mode !== 'build',
             imports,
             modules,
-        });
+        };
+        const result = entry.environment.mode === 'dev' && !native && !everything
+            ? compileProject(entry.environment, input, sourceId(entry.file))
+            : entry.compiler.compile(input);
         if (native) {
             const output = result.modules[sourceId(entry.file)];
             entry.files = files;
@@ -662,6 +934,7 @@ export function zyzz(options = {}) {
                 configurations: new Map(),
                 connections: staged,
                 css: '',
+                graphSharedCss: '',
                 sharedCss: '',
                 cssMap: map,
                 sharedCssMap: map,
@@ -689,132 +962,143 @@ export function zyzz(options = {}) {
                     catalogs.delete(key);
         const configurations = new Map();
         for (const [id, contract] of Object.entries(compiled))
-            for (const configuration of Catalogs.read(contract)) {
+            for (const configuration of read(contract)) {
                 const key = `${id}\0${configuration.identity}`;
                 catalogs.set(key, configuration);
                 configurations.set(key, configuration);
             }
-        const owners = new Map();
-        for (const id of new Set(Object.values(result.sharedAssetOwners ?? {}))) {
-            if (!Path.isAbsolute(id))
-                continue;
-            let directory = Path.dirname(id.split(/[?#]/)[0]);
-            for (;;) {
-                try {
-                    await Fs.access(Path.join(directory, 'package.json'));
-                    owners.set(id, await Fs.realpath(directory));
-                    break;
-                }
-                catch (error) {
-                    if (error.code !== 'ENOENT')
-                        throw error;
+        // Development renders the shared stylesheet for its own request only; transforms and module
+        // stylesheets read module outputs.
+        async function renderShared() {
+            const owners = new Map();
+            for (const id of new Set(Object.values(result.sharedAssetOwners ?? {}))) {
+                if (!Path.isAbsolute(id))
+                    continue;
+                let directory = Path.dirname(id.split(/[?#]/)[0]);
+                for (;;) {
+                    try {
+                        await Fs.access(Path.join(directory, 'package.json'));
+                        owners.set(id, await Fs.realpath(directory));
+                        break;
+                    }
+                    catch (error) {
+                        if (error.code !== 'ENOENT')
+                            throw error;
+                    }
+                    const parent = Path.dirname(directory);
+                    if (parent === directory)
+                        throw new Error('Packed assets require an owning package.json.');
+                    directory = parent;
                 }
-                const parent = Path.dirname(directory);
-                if (parent === directory)
-                    throw new Error('Packed assets require an owning package.json.');
-                directory = parent;
             }
-        }
-        const assetUrls = new Map();
-        for (const [key, target] of Object.entries(result.sharedAssets ?? {})) {
-            const raw = target.split(/[?#]/)[0];
-            const identity = result.sharedAssetOwners?.[key];
-            const path = sourceFile(decodeURIComponent(raw)) ??
-                (Path.isAbsolute(raw) ? decodeURIComponent(raw) : undefined);
-            if (!path)
-                throw new Error('Asset path escapes the Vite graph.');
-            const asset = await (async () => {
-                try {
-                    return { file: await Fs.realpath(path), package: false };
-                }
-                catch (error) {
-                    if (error.code !== 'ENOENT' ||
-                        !identity ||
-                        !sourceFile(identity))
-                        throw error;
-                    const importer = sourceFile(identity);
-                    const specifier = Path.relative(Path.dirname(importer), path)
-                        .split(Path.sep)
-                        .join('/');
-                    if (specifier.startsWith('.') || Path.isAbsolute(specifier))
-                        throw error;
-                    const resolved = await host.resolve(specifier, importer);
-                    if (!resolved || resolved.external)
-                        throw error;
-                    return {
-                        file: await Fs.realpath(resolved.id.split('?')[0]),
-                        package: true,
-                    };
-                }
-            })();
-            const file = asset.file;
-            const owner = identity && sourceFile(identity)
-                ? sourceRoot(sourceFile(identity))
-                : identity
-                    ? owners.get(identity)
-                    : undefined;
-            const relative = owner ? Path.relative(owner, file) : '..';
-            if (!asset.package &&
-                (relative === '..' ||
-                    relative.startsWith(`..${Path.sep}`) ||
-                    Path.isAbsolute(relative)))
-                throw new Error('Asset path escapes its owning package.');
-            host.watch(file);
-            files.add(file);
-            let url;
-            if (asset.package || /[?#%]/.test(file)) {
-                if (entry.environment.mode === 'build') {
-                    url = await host.asset(file);
-                    if (target.slice(raw.length))
-                        url += `$_${target.slice(raw.length)}__`;
+            const assetUrls = new Map();
+            for (const [key, target] of Object.entries(result.sharedAssets ?? {})) {
+                const raw = target.split(/[?#]/)[0];
+                const identity = result.sharedAssetOwners?.[key];
+                const path = sourceFile(decodeURIComponent(raw)) ??
+                    (Path.isAbsolute(raw) ? decodeURIComponent(raw) : undefined);
+                if (!path)
+                    throw new Error('Asset path escapes the Vite graph.');
+                const asset = await (async () => {
+                    try {
+                        return { file: await Fs.realpath(path), package: false };
+                    }
+                    catch (error) {
+                        if (error.code !== 'ENOENT' ||
+                            !identity ||
+                            !sourceFile(identity))
+                            throw error;
+                        const importer = sourceFile(identity);
+                        const specifier = Path.relative(Path.dirname(importer), path)
+                            .split(Path.sep)
+                            .join('/');
+                        if (specifier.startsWith('.') || Path.isAbsolute(specifier))
+                            throw error;
+                        const resolved = await host.resolve(specifier, importer);
+                        if (!resolved || resolved.external)
+                            throw error;
+                        return {
+                            file: await Fs.realpath(resolved.id.split('?')[0]),
+                            package: true,
+                        };
+                    }
+                })();
+                const file = asset.file;
+                const owner = identity && sourceFile(identity)
+                    ? sourceRoot(sourceFile(identity))
+                    : identity
+                        ? owners.get(identity)
+                        : undefined;
+                const relative = owner ? Path.relative(owner, file) : '..';
+                if (!asset.package &&
+                    (relative === '..' ||
+                        relative.startsWith(`..${Path.sep}`) ||
+                        Path.isAbsolute(relative)))
+                    throw new Error('Asset path escapes its owning package.');
+                host.watch(file);
+                files.add(file);
+                let url;
+                if (asset.package || /[?#%]/.test(file)) {
+                    if (entry.environment.mode === 'build') {
+                        url = await host.asset(file);
+                        if (target.slice(raw.length))
+                            url += `$_${target.slice(raw.length)}__`;
+                    }
+                    else {
+                        url = `/@zyzz/asset/${Crypto.hash('sha256', file)}/${encodeURIComponent(Path.basename(file))}`;
+                        assets.set(url, file);
+                        url += target.slice(raw.length);
+                    }
                 }
                 else {
-                    url = `/@zyzz/asset/${Crypto.hash('sha256', file)}/${encodeURIComponent(Path.basename(file))}`;
-                    assets.set(url, file);
-                    url += target.slice(raw.length);
+                    // Vite reads `/@fs/` URLs with `decodeURI`, which keeps reserved escapes
+                    // such as `%40` in scoped package paths, so those characters stay raw.
+                    const pathname = encodeURI(file.replaceAll('\\', '/'));
+                    url = `/@fs/${pathname}${target.slice(raw.length)}`;
                 }
+                assetUrls.set(target, url);
             }
-            else {
-                // Vite reads `/@fs/` URLs with `decodeURI`, which keeps reserved escapes
-                // such as `%40` in scoped package paths, so those characters stay raw.
-                const pathname = encodeURI(file.replaceAll('\\', '/'));
-                url = `/@fs/${pathname}${target.slice(raw.length)}`;
-            }
-            assetUrls.set(target, url);
-        }
-        const shared = !Object.keys(result.sharedAssets ?? {}).length
-            ? {
-                code: new TextEncoder().encode(result.sharedCss ?? ''),
-                map: new TextEncoder().encode(JSON.stringify(result.sharedCssMap ??
-                    Mapping.toEncodedMap(new Mapping.GenMapping()))),
-            }
-            : AtRules.transform({
-                filename: 'zyzz.shared.css',
-                code: new TextEncoder().encode(result.sharedCss ?? ''),
-                sourceMap: true,
-                inputSourceMap: JSON.stringify(result.sharedCssMap ??
-                    Mapping.toEncodedMap(new Mapping.GenMapping())),
-                visitor: {
-                    Rule(rule) {
-                        if (rule.type !== 'import')
-                            return;
-                        const target = result.sharedAssets?.[rule.value.url];
-                        if (target)
-                            return AtRules.relocateImport(rule.value, assetUrls.get(target));
-                    },
-                    Url(url) {
-                        const target = result.sharedAssets?.[url.url];
-                        if (!target)
-                            return;
-                        return { ...url, url: assetUrls.get(target) };
+            const shared = !Object.keys(result.sharedAssets ?? {}).length
+                ? {
+                    code: new TextEncoder().encode(result.sharedCss ?? ''),
+                    map: new TextEncoder().encode(JSON.stringify(result.sharedCssMap ??
+                        Mapping.toEncodedMap(new Mapping.GenMapping()))),
+                }
+                : AtRules.transform({
+                    filename: 'zyzz.shared.css',
+                    code: new TextEncoder().encode(result.sharedCss ?? ''),
+                    sourceMap: true,
+                    inputSourceMap: JSON.stringify(result.sharedCssMap ??
+                        Mapping.toEncodedMap(new Mapping.GenMapping())),
+                    visitor: {
+                        Rule(rule) {
+                            if (rule.type !== 'import')
+                                return;
+                            const target = result.sharedAssets?.[rule.value.url];
+                            if (target)
+                                return AtRules.relocateImport(rule.value, assetUrls.get(target));
+                        },
+                        Url(url) {
+                            const target = result.sharedAssets?.[url.url];
+                            if (!target)
+                                return;
+                            return { ...url, url: assetUrls.get(target) };
+                        },
                     },
-                },
-            });
-        const sharedMap = JSON.parse(new TextDecoder().decode(shared.map));
-        sharedMap.sources = sharedMap.sources.map((source) => source === null ? null : (sourceFile(source) ?? source));
+                });
+            const sharedMap = JSON.parse(new TextDecoder().decode(shared.map));
+            sharedMap.sources = sharedMap.sources.map((source) => source === null ? null : (sourceFile(source) ?? source));
+            return { css: new TextDecoder().decode(shared.code), map: sharedMap };
+        }
+        const sharedOutput = entry.environment.mode !== 'dev' || allSources
+            ? await renderShared()
+            : {
+                css: '',
+                map: Mapping.toEncodedMap(new Mapping.GenMapping()),
+            };
         const output = result.modules[sourceId(entry.file)];
         entry.files = files;
-        return {
+        const value = {
             imports,
             modules: result.modules,
             code: output.code,
@@ -822,8 +1106,10 @@ export function zyzz(options = {}) {
             configurations,
             connections: staged,
             css: output.css,
-            sharedCss: new TextDecoder().decode(shared.code),
-            sharedCssMap: sharedMap,
+            // Edits compare the graph's stylesheet, which precedes asset relocation.
+            graphSharedCss: result.sharedCss ?? '',
+            sharedCss: sharedOutput.css,
+            sharedCssMap: sharedOutput.map,
             cssMap: {
                 ...output.cssMap,
                 sources: output.cssMap.sources.map((source) => source === null ? null : (sourceFile(source) ?? source)),
@@ -833,16 +1119,16 @@ export function zyzz(options = {}) {
                 sources: output.map.sources.map((source) => source === null ? null : (sourceFile(source) ?? source)),
             },
         };
+        return value;
     }
     /** Compiles every discovered source once so index.html can inline each configuration's script before modules load. */
     async function initializations(server) {
         const environment = server.environments.client;
         reads.delete(environment);
-        lookups.delete(environment);
         const host = {
             asset: async (file) => file,
             resolve: resolver(environment),
-            watch: (file) => server.watcher.add(file),
+            watch: (file) => watch(server, file),
         };
         const sources = await discover(environment, host);
         let entry = initializers.get(environment);
@@ -851,8 +1137,9 @@ export function zyzz(options = {}) {
             const file = sources.keys().next().value;
             if (file === undefined)
                 return { catalogs: new Map(), edges: new Map() };
+            // Whole-project compiles keep their own cache beside the transforms' merged graph.
             entry = {
-                compiler: compiler(environment),
+                compiler: initializers.get(environment)?.compiler ?? Graph.create(),
                 environment,
                 file,
                 files: new Set([file]),
@@ -976,8 +1263,105 @@ export function zyzz(options = {}) {
             .filter(([key]) => contracts.has(key.split('\0')[0]))
             .map(([, configuration]) => configuration);
     }
+    /**
+     * The modules an edit invalidates: those whose code or stylesheet differs from what Vite served.
+     * A concurrent compile can already hold the edit, so outputs are not compared with each other.
+     */
+    async function changes(environment, after, served, modules, timestamp, edited, deleted) {
+        // Portable build adapters share this module and do not require Vite.
+        const { transformWithOxc } = await import('vite');
+        const code = new Set();
+        const css = new Set();
+        for (const [entry, { code: current, css: stylesheet, imports },] of served.entries) {
+            const id = sourceId(entry.file);
+            const next = after.modules[id];
+            if (!next)
+                continue;
+            // A stylesheet Vite never loaded has no module to invalidate.
+            if (stylesheet !== undefined && stylesheet !== next.css)
+                css.add(entry.file);
+            // A stylesheet request can compile a module whose code was never transformed here.
+            if (current === undefined)
+                continue;
+            if (imports !== JSON.stringify(projects.get(environment)?.imports[id])) {
+                code.add(entry.file);
+                continue;
+            }
+            if (current === next.code)
+                continue;
+            // Generated type assertions can change without changing runtime bindings.
+            const [left, right] = await Promise.all([
+                transformWithOxc(current, entry.file, { sourcemap: false }),
+                transformWithOxc(next.code, entry.file, { sourcemap: false }),
+            ]);
+            if (left.code !== right.code)
+                code.add(entry.file);
+        }
+        const stylesheets = new Set();
+        if (deleted !== undefined)
+            stylesheets.add(cssId(deleted));
+        if (served.shared !== undefined &&
+            served.shared !== (after.sharedCss ?? ''))
+            stylesheets.add(sharedId);
+        for (const file of css)
+            stylesheets.add(cssId(file));
+        // Compiled modules the edit left unchanged skip Vite's own update; other modules, such as
+        // plain JavaScript or assets, keep it.
+        const affected = new Set(modules.filter((module) => {
+            if (!module.id)
+                return module.type !== 'asset';
+            const file = normalize(module.id);
+            return Object.hasOwn(after.modules, sourceId(file))
+                ? code.has(file)
+                : true;
+        }));
+        for (const file of code) {
+            const module = environment.moduleGraph.getModuleById(file);
+            if (!module)
+                continue;
+            environment.moduleGraph.invalidateModule(module, new Set(), timestamp, true);
+            affected.add(module);
+        }
+        const sheets = [];
+        // The edited module's stylesheet updates first, ahead of stylesheets other modules share.
+        for (const id of [...stylesheets].sort((left, right) => Number(right === cssId(edited)) - Number(left === cssId(edited)))) {
+            const module = environment.moduleGraph.getModuleById(id);
+            if (!module)
+                continue;
+            environment.moduleGraph.invalidateModule(module, new Set(), timestamp, true);
+            sheets.push(module);
+        }
+        // A stylesheet accepts its own updates and only its module imports it, so it is never within
+        // an import cycle. Vite proves that by walking every importer of the importing module, which
+        // costs each stylesheet of a shared edit the whole graph, so stylesheet-only edits send the
+        // same update directly. Edits that also change code keep Vite's single batched update.
+        if (!affected.size &&
+            sheets.length &&
+            sheets.every((module) => module.isSelfAccepting)) {
+            const updates = sheets.map((module) => {
+                const path = module.url.startsWith('/') || module.url.startsWith('.')
+                    ? module.url
+                    : `/@id/${module.url.replace('\0', '__x00__')}`;
+                return {
+                    acceptedPath: path,
+                    explicitImportRequired: false,
+                    isWithinCircularImport: false,
+                    path,
+                    timestamp,
+                    type: 'js-update',
+                };
+            });
+            environment.logger.info(`hmr update ${updates.map((update) => update.path).join(', ')}`, { timestamp: true });
+            environment.hot.send({ type: 'update', updates });
+            return [];
+        }
+        for (const module of sheets)
+            affected.add(module);
+        return [...affected];
+    }
     return {
         buildStart() {
+            edgeMemos.delete(this.environment);
             reads.delete(this.environment);
             lookups.delete(this.environment);
         },
@@ -1040,6 +1424,7 @@ export function zyzz(options = {}) {
             },
         },
         configureServer(server) {
+            devServer = server;
             // Directory watches belong to the server, not module import dependencies.
             server.watcher.add(directories.slice(1));
             server.middlewares.use((request, response, next) => {
@@ -1072,6 +1457,7 @@ export function zyzz(options = {}) {
             const patterns = [...configFiles, ...(options.exclude ?? [])];
             filter = createFilter(null, patterns, { resolve: root });
             exclusions.clear();
+            roots.clear();
             if (native)
                 return;
             const lightning = (config.css.lightningcss ??= {});
@@ -1134,10 +1520,46 @@ export function zyzz(options = {}) {
             },
         },
         async watchChange(file, change) {
+            // A removed file leaves the watcher, so a later compile that reads it again adds it again.
+            if (change.event === 'delete')
+                watched.delete(file);
             await updateDiscovery(this.environment, file, change.event);
         },
         async hotUpdate({ file, modules, timestamp, type, server }) {
             const state = entries(this.environment);
+            const before = projects.get(this.environment)?.outcome;
+            // Concurrent transforms update entries while this compiles, so the served output is read now.
+            const served = {
+                entries: new Map([...state.values()].map((entry) => [
+                    entry,
+                    { code: entry.code, css: entry.css, imports: entry.imports },
+                ])),
+                shared: servedShared.get(this.environment),
+            };
+            // The merged development graph compares module outputs before and after the edit, so
+            // only modules whose code or stylesheet changed update.
+            if (!native && before && 'result' in before) {
+                await updateDiscovery(this.environment, file, type);
+                // The edited module's own entry, or one whose closure reads it, merges its new source.
+                // A contribution source no module imports joins every closure.
+                const first = state.get(file) ??
+                    [...state.values()].find((entry) => entry.files.has(file)) ??
+                    (eager(file, this.environment)
+                        ? state.values().next().value
+                        : undefined);
+                if (!first && !removed.get(this.environment)?.has(file))
+                    return modules;
+                const compiled = first && type === 'update' && eligible(file)
+                    ? await compile(first, {
+                        resolve: resolver(this.environment),
+                        watch: (file) => watch(server, file),
+                        asset: async (file) => file,
+                    }).then(() => true, () => false)
+                    : false;
+                const after = projects.get(this.environment)?.outcome;
+                if (compiled && after && 'result' in after)
+                    return await changes(this.environment, after.result, served, modules, timestamp, file, type === 'delete' ? file : undefined);
+            }
             const previous = [...state.values()].map((entry) => ({
                 code: entry.code,
                 file: entry.file,
@@ -1151,9 +1573,7 @@ export function zyzz(options = {}) {
             const output = first && type === 'update' && eligible(file)
                 ? await compile(first, {
                     resolve: resolver(this.environment),
-                    watch: (file) => {
-                        server.watcher.add(file);
-                    },
+                    watch: (file) => watch(server, file),
                     asset: async (file) => file,
                 }, undefined, true, true).catch(() => undefined)
                 : undefined;
@@ -1214,19 +1634,40 @@ export function zyzz(options = {}) {
             const file = id === sharedId
                 ? undefined
                 : decodeURIComponent(id.slice(prefix.length, -4));
-            const entry = file === undefined
+            let entry = file === undefined
                 ? entries(this.environment).values().next().value
                 : entries(this.environment).get(file);
             // A pruned JavaScript module can leave its stylesheet loaded in the browser.
             if (!entry && file && removed.get(this.environment)?.has(file))
                 return '';
+            // Server rendering links the stylesheets of modules this environment has not transformed
+            // yet, so a development request compiles the module where the browser loads it.
+            if (!entry && this.environment.mode === 'dev') {
+                const anchor = file ??
+                    (await discover(this.environment, {
+                        asset: async (file) => file,
+                        resolve: resolver(this.environment),
+                        watch: watcher(this),
+                    }))
+                        .keys()
+                        .next().value;
+                if (anchor !== undefined && eligible(anchor)) {
+                    entry = {
+                        compiler: compiler(this.environment),
+                        environment: this.environment,
+                        file: anchor,
+                        files: new Set([anchor]),
+                    };
+                    entries(this.environment).set(anchor, entry);
+                }
+            }
             if (!entry)
                 throw new Error(`Unknown Zyzz stylesheet: ${file}`);
             const output = await compile(entry, {
                 resolve: this.environment.mode === 'dev'
                     ? resolver(this.environment)
                     : (source, importer) => this.resolve(source, importer),
-                watch: (file) => this.addWatchFile(file),
+                watch: watcher(this),
                 asset: async (file) => {
                     const reference = this.emitFile({
                         type: 'asset',
@@ -1240,12 +1681,18 @@ export function zyzz(options = {}) {
             const transport = (css) => this.environment.config.command === 'build'
                 ? AtRules.rename(AtRules.rename(Namespaces.protect(css), 'font-feature-values', '-zyzz-ffv-000000000'), 'font-palette-values', '-zyzz-fpv-000000000')
                 : css;
-            if (id === sharedId)
+            if (id === sharedId) {
+                servedShared.set(this.environment, output.graphSharedCss);
                 return {
                     code: transport(output.sharedCss),
                     map: JSON.stringify(output.sharedCssMap),
                 };
-            return { code: transport(output.css), map: JSON.stringify(output.cssMap) };
+            }
+            entry.css = output.css;
+            return {
+                code: transport(output.css),
+                map: JSON.stringify(output.cssMap),
+            };
         },
         name: 'zyzz',
         resolveId(id) {
@@ -1268,11 +1715,12 @@ export function zyzz(options = {}) {
                 state.set(id, entry);
                 removed.get(this.environment)?.delete(id);
             }
+            entry.source = code;
             const output = await compile(entry, {
                 resolve: this.environment.mode === 'dev'
                     ? resolver(this.environment)
                     : (source, importer) => this.resolve(source, importer),
-                watch: (file) => this.addWatchFile(file),
+                watch: watcher(this),
                 asset: async (file) => {
                     const reference = this.emitFile({
                         type: 'asset',
@@ -1289,53 +1737,23 @@ export function zyzz(options = {}) {
                 return { code: output.code, map: JSON.stringify(output.map) };
             // Keep the CSS dependency even when the current graph has no live rules.
             // Later edits can introduce styles without changing this import boundary.
-            const parsed = Parser.parseSync('source.tsx', output.code, {
-                sourceType: 'module',
-            });
-            let offset = output.code.startsWith('#!')
-                ? output.code.indexOf('\n') + 1
-                : 0;
-            for (const node of parsed.program.body) {
-                if (node.type !== 'ExpressionStatement' || !node.directive)
-                    break;
-                offset = node.end;
-            }
+            const offset = prologue(output.code);
             const sharedImport = `\nimport ${JSON.stringify(sharedId)};\n`;
-            const map = Mapping.fromMap(JSON.stringify(output.map));
             // The inserted dependency shifts only generated positions after the prologue.
             const before = output.code.slice(0, offset);
             const insertionLine = before.split('\n').length;
             const insertionColumn = before.length - (before.lastIndexOf('\n') + 1);
-            const shifted = new Mapping.GenMapping();
-            for (const mapping of Mapping.allMappings(map)) {
-                const generated = { ...mapping.generated };
-                if (generated.line > insertionLine ||
-                    (generated.line === insertionLine &&
-                        generated.column >= insertionColumn)) {
-                    if (generated.line === insertionLine)
-                        generated.column -= insertionColumn;
-                    generated.line += 2;
-                }
-                if (mapping.source !== undefined && mapping.original !== undefined) {
-                    const location = {
-                        generated,
-                        original: mapping.original,
-                        source: mapping.source,
-                    };
-                    if (mapping.name === undefined)
-                        Mapping.addMapping(shifted, location);
-                    else
-                        Mapping.addMapping(shifted, { ...location, name: mapping.name });
-                }
-                else
-                    Mapping.addMapping(shifted, { generated });
-            }
-            for (const [index, source] of output.map.sources.entries())
-                if (source !== null)
-                    Mapping.setSourceContent(shifted, source, output.map.sourcesContent?.[index] ?? null);
+            // A build compiles a fixed project, so an empty module sheet stays empty. Importing it
+            // would link an empty stylesheet from every chunk that holds no styled module.
+            const stylesheetImport = this.environment.mode === 'build' && !output.css.trim()
+                ? ''
+                : `\nimport ${JSON.stringify(cssId(id))};`;
             return {
-                code: `${before}${sharedImport}${output.code.slice(offset)}\nimport ${JSON.stringify(cssId(id))};`,
-                map: JSON.stringify(Mapping.toEncodedMap(shifted)),
+                code: `${before}${sharedImport}${output.code.slice(offset)}${stylesheetImport}`,
+                map: JSON.stringify({
+                    ...output.map,
+                    mappings: insert(output.map.mappings, insertionLine - 1, insertionColumn),
+                }),
             };
         },
         transformIndexHtml: {
@@ -1363,6 +1781,83 @@ export function zyzz(options = {}) {
         },
     };
 }
+/**
+ * The end of a module's hashbang and directive prologue, where an added import keeps directives
+ * first. Source without a leading string literal skips parsing.
+ */
+function prologue(code) {
+    let index = code.startsWith('#!') ? code.indexOf('\n') + 1 : 0;
+    const start = index;
+    for (;;) {
+        while (index < code.length && /\s/.test(code[index]))
+            index++;
+        if (code.startsWith('//', index)) {
+            const end = code.indexOf('\n', index);
+            index = end === -1 ? code.length : end;
+        }
+        else if (code.startsWith('/*', index)) {
+            const end = code.indexOf('*/', index + 2);
+            index = end === -1 ? code.length : end + 2;
+        }
+        else
+            break;
+    }
+    if (code[index] !== "'" && code[index] !== '"')
+        return start;
+    let offset = start;
+    const { program } = Parser.parseSync('source.tsx', code, {
+        sourceType: 'module',
+    });
+    for (const node of program.body) {
+        if (node.type !== 'ExpressionStatement' || !node.directive)
+            break;
+        offset = node.end;
+    }
+    return offset;
+}
+/**
+ * Moves encoded mappings for two lines inserted at a generated position. Segments at or past
+ * `column` on `line` start the line after the insertion, and every later line moves down by two.
+ * Other fields stay relative to the segment before them, which keeps its order.
+ */
+function insert(mappings, line, column) {
+    const lines = mappings.split(';');
+    const text = lines[line];
+    if (text === undefined)
+        return mappings;
+    let generated = 0;
+    let split = -1;
+    let position = 0;
+    const segments = text ? text.split(',') : [];
+    for (const [index, segment] of segments.entries()) {
+        const [delta] = Vlq.decode(segment);
+        generated += delta;
+        if (generated >= column) {
+            split = index;
+            position = generated;
+            break;
+        }
+    }
+    if (split === -1) {
+        lines.splice(line + 1, 0, '', '');
+        return lines.join(';');
+    }
+    const moved = segments.slice(split);
+    const fields = Vlq.decode(moved[0]);
+    fields[0] = position - column;
+    moved[0] = Vlq.encode(fields);
+    lines.splice(line, 1, segments.slice(0, split).join(','), '', moved.join(','));
+    return lines.join(';');
+}
+/** Whether two import resolution records hold the same entries. */
+function same(left, right) {
+    if (!left)
+        return false;
+    const keys = Object.keys(right);
+    if (Object.keys(left).length !== keys.length)
+        return false;
+    return keys.every((key) => left[key] === right[key]);
+}
 /**
  * Whether `zyzz/runtime` resolves inside node_modules from the Vite root. Vite
  * optimizes a discovered import only there, so linked and aliased copies stay