tungsten 0.4.11 → 0.4.13

package/dist/build/babel.user.common.config.js

@@ -1,15 +1,26 @@
 import { MakeBabelTransformJsxExtensionsToJs } from "../babelPlugins/BabelTransformJsxExtensionsToJs.js";
 import { buildFolder } from "../settings.js";
+import { createRequire } from "module";
 import babelPresetReactModule from "@babel/preset-react";
 const babelPresetReact = babelPresetReactModule.default;
-import babelPluginSxyModuleResolve from "babel-plugin-sxy-module-resolver";
-import babelPluginCssToJs from "babel-plugin-css-to-js";
-import babelPluginProposalClassPropertiesModule from "@babel/plugin-transform-class-properties";
-const babelPluginProposalClassProperties = babelPluginProposalClassPropertiesModule.default;
+const require = createRequire(import.meta.url);
+// config `typescript: true`: appended after preset-react so babel runs it first (presets run last
+// to first). allowDeclareFields matches tsc's useDefineForClassFields: `x: T` stays a field,
+// `declare x: T` is erased - without it babel erases both.
+// required on demand: ~95 modules that only this flag needs
+export function typescriptPreset() {
+  const babelPresetTypescript = require("@babel/preset-typescript").default;
+  return [babelPresetTypescript, {
+    allowDeclareFields: true
+  }];
+}
 const regexEscape = r => r.replaceAll(".", "\\.");
 const ignoreRegex = new RegExp(`(node_modules|${regexEscape(buildFolder)})`);
 const userCommonConfig = {
   ignore: [ignoreRegex],
+  // the config is all here: no per-file search up the tree for .babelrc / babel.config.*
+  babelrc: false,
+  configFile: false,
   presets: [[babelPresetReact, {
     "runtime": "automatic",
     "importSource": "tungsten"
@@ -19,17 +30,11 @@ const userCommonConfig = {
   //     "importSource": "tungsten",
   // }],
   ],
-  plugins: [[babelPluginSxyModuleResolve, {
-    // This alias is resolved after Tungsten rewrites package imports.
-    "loglevel": "silent",
-    "alias": {
-      "tungsten/jsx-runtime": "tungsten/jsxRuntime.js" // fix the import location created by @babel/preset-react
-    }
-  }], MakeBabelTransformJsxExtensionsToJs(), [babelPluginCssToJs], [babelPluginProposalClassProperties]],
-  "env": {
-    "production": {
-      "plugins": ["transform-react-remove-prop-types"]
-    }
-  }
+  // widen to allow pushing
+  // no alias plugin: preset-react's `tungsten/jsx-runtime` import resolves through the package's
+  // exports map (node, rollup, the packages plugin) and the dev import map has the same key
+  plugins: [MakeBabelTransformJsxExtensionsToJs()
+  // no css-to-js: the lowercase css`…` tag it compiled is not used; css="…" is a plain string prop
+  ] // widen to allow pushing
 };
 export default userCommonConfig;

package/dist/build/bundle.d.ts

@@ -1,2 +1,2 @@
-export declare function bundle(projectDir: string, quiet?: boolean): Promise<unknown>;
+export declare function bundle(projectDir: string, quiet?: boolean, targets?: string | string[]): Promise<unknown>;
 //# sourceMappingURL=bundle.d.ts.map

package/dist/build/bundle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../../src/build/bundle.ts"],"names":[],"mappings":"AAUA,wBAAsB,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,UAAQ,oBAyC7D"}
+{"version":3,"file":"bundle.d.ts","sourceRoot":"","sources":["../../src/build/bundle.ts"],"names":[],"mappings":"AAWA,wBAAsB,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,UAAQ,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,oBA8C1F"}

package/dist/build/bundle.js

@@ -1,11 +1,12 @@
 import { join } from 'path';
 //import type { FrameworkConfigComplete } from '../FrameworkConfig.js'
-import { findProjectDir } from "../findProjectDir.js";
-import { spawnShellCommand } from "../spawnShellCommand.js";
-import { prodBuildFolder, bundleFolder, frameworkDistFolder, clientFolder } from "../settings.js";
-import { errorOut } from "../output.js";
-import { cliLog, cliOut } from "../cliOutput.js";
-export async function bundle(projectDir, quiet = false /*, appConfig: FrameworkConfigComplete*/) {
+import { findProjectDir } from '../findProjectDir.js';
+import { spawnShellCommand } from '../spawnShellCommand.js';
+import { prodBuildFolder, bundleFolder, frameworkDistFolder, clientFolder } from '../settings.js';
+import { errorOut } from '../output.js';
+import { cliLog, cliOut } from '../cliOutput.js';
+// targets: the config's browser floor for rollup's babel step, undefined for the framework default
+export async function bundle(projectDir, quiet = false, targets) {
   return new Promise((resolve, reject) => {
     if (!quiet) cliOut('Bundling application');
     const frameworkDir = findProjectDir(import.meta.url);
@@ -18,8 +19,15 @@ export async function bundle(projectDir, quiet = false /*, appConfig: FrameworkC
     ];
     const command = `cd ${frameworkDir} && npx rollup` + ` --input "${join(projectDir, prodBuildFolder, clientFolder, 'client.js')}"` + ` --file "${join(projectDir, bundleFolder, 'client.js')}"` + ` --config "${join(frameworkDir, frameworkDistFolder, 'build/rollup.user.prod.config.js')}"` + (externalModules.length > 0 ? ` --external ${externalModules.join(',')}` : ``) + ` --inlineDynamicImports --format iife`;
     if (!quiet) cliLog('bundle command:', command);
+    // the rollup config reads this back; a browserslist query can hold commas, which rollup's own
+    // --environment flag would split on
+    const env = targets === undefined ? process.env : {
+      ...process.env,
+      TUNGSTEN_TARGETS: JSON.stringify(targets)
+    };
     const subProcess = spawnShellCommand(command, {
-      cwd: frameworkDir /*cwd: projectDir*/ /*, stdio: 'inherit'*/
+      cwd: frameworkDir,
+      env
     });
     subProcess.on('data', data => {
       if (!quiet) cliLog(data);

package/dist/build/bundleBabelOptions.d.ts

@@ -0,0 +1,6 @@
+import type { PluginItem } from '@babel/core';
+export declare function bundleBabelOptions(targets?: string | string[]): {
+    presets: PluginItem[];
+    plugins: PluginItem[];
+};
+//# sourceMappingURL=bundleBabelOptions.d.ts.map

package/dist/build/bundleBabelOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundleBabelOptions.d.ts","sourceRoot":"","sources":["../../src/build/bundleBabelOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAa7C,wBAAgB,kBAAkB,CAAC,OAAO,GAAE,MAAM,GAAG,MAAM,EAA0B;;;EAMpF"}

package/dist/build/bundleBabelOptions.js

@@ -0,0 +1,23 @@
+import presetEnvModule from '@babel/preset-env';
+import { MakeBabelTransformRemoveServerBlocks } from '../babelPlugins/BabelTransformRemoveServerBlocks.js';
+import { MakeBabelTransformRemoveDevBlocks } from '../babelPlugins/BabelTransformRemoveDevBlocks.js';
+import { defaultBrowserTargets } from '../settings.js';
+// babel 7 presets are cjs and arrive as { default }, babel 8's are esm and arrive as the function
+const presetEnv = typeof presetEnvModule === 'function' ? presetEnvModule : presetEnvModule.default;
+// The production bundle's babel pass: strips server and dev blocks and lowers syntax to the browser
+// floor. Back-compat lives here and nowhere else - dev serves what tsc emits. Only the rollup
+// config (a build-time subprocess) imports this, so preset-env never loads under dev.
+export function bundleBabelOptions(targets = defaultBrowserTargets) {
+  // bugfixes: where a target has a feature with a known bug, apply the small fix instead of the
+  // full lowering (opt-in on babel 7, always on in 8)
+  const presets = [[presetEnv, {
+    targets,
+    bugfixes: true,
+    modules: false
+  }]];
+  const plugins = [MakeBabelTransformRemoveServerBlocks(), MakeBabelTransformRemoveDevBlocks()];
+  return {
+    presets,
+    plugins
+  };
+}

package/dist/build/combineComponentCss.js

@@ -1,7 +1,7 @@
 import { promises as fsPromises } from 'fs';
 import { isAbsolute, join, relative, resolve } from 'path';
-import { componentCssFile, componentCssFolder } from "../settings.js";
-import { TungstenError } from "../TungstenError.js";
+import { componentCssFile, componentCssFolder } from '../settings.js';
+import { TungstenError } from '../TungstenError.js';
 const componentImportPattern = /@import\s+["'](i\/[^"']+\.css)["']\s*;/g;
 const charsetPattern = /@charset\s+["']([^"']+)["']\s*;?/gi;
 function validateCharset(css, file) {

package/dist/build/compileJavascript.d.ts

@@ -11,14 +11,18 @@ type CompileJavascriptResult = {
 export type JavascriptCompilationCycle = {
     success: boolean;
     file?: string;
+    client?: boolean;
 };
 export type CompileJavascriptOptions = {
     quiet?: boolean;
     packagesCacheLocation?: string;
+    stylesCacheLocation?: string;
+    rawBuildLocation?: string;
     packages?: boolean;
     hmr?: boolean;
     onCycleComplete?: ((cycle: JavascriptCompilationCycle) => void | Promise<void>) | undefined;
     tests?: boolean;
+    fresh?: boolean;
 };
 export declare function compileJavascript(projectDir: string, appConfig: FrameworkConfigComplete, codeLocation: string, sourceLocation: string, styleImportBase: string, buildLocation: string, buildCodeLocation: string, mode: Mode, watch?: boolean, options?: CompileJavascriptOptions): Promise<CompileJavascriptResult>;
 export {};

package/dist/build/compileJavascript.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compileJavascript.d.ts","sourceRoot":"","sources":["../../src/build/compileJavascript.ts"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,UAAU,CAAA;AAO/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAiBtC,KAAK,uBAAuB,GAAG;IAC3B,OAAO,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;IAClC,WAAW,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAE9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAA;IAE3F,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAoBD,wBAAsB,iBAAiB,CACnC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EACtD,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EACrE,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,UAAO,EAC1E,OAAO,GAAE,wBAA6B,GACvC,OAAO,CAAC,uBAAuB,CAAC,CA+blC"}
+{"version":3,"file":"compileJavascript.d.ts","sourceRoot":"","sources":["../../src/build/compileJavascript.ts"],"names":[],"mappings":"AAGA,OAAO,QAAQ,MAAM,UAAU,CAAA;AAO/B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAmBtC,KAAK,uBAAuB,GAAG;IAC3B,OAAO,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;IAClC,WAAW,EAAE,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAA;IACtC,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,0BAA0B,GAAG;IACrC,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,MAAM,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,wBAAwB,GAAG;IACnC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAE5B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,eAAe,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAA;IAE3F,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAuBD,wBAAsB,iBAAiB,CACnC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,uBAAuB,EACtD,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EACrE,aAAa,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,UAAO,EAC1E,OAAO,GAAE,wBAA6B,GACvC,OAAO,CAAC,uBAAuB,CAAC,CA4gBlC"}

package/dist/build/compileJavascript.js

@@ -1,26 +1,31 @@
-import { join, dirname } from 'path';
+import { join, dirname, isAbsolute } from 'path';
 import { pathToFileURL } from 'url';
 import chokidar from 'chokidar';
-import { transformFileSync as babelTransformFileSync } from '@babel/core';
+import { transformSync as babelTransformSync } from '@babel/core';
 import fs, { promises as fsPromises } from 'fs';
-import slash from 'slash';
+import slash from '../slash.js';
 import serializeJavascript from 'serialize-javascript';
-import { globby } from 'globby';
-import { packagesCacheFolder } from "../settings.js";
-import { makeBabelUserDevConfig } from "./makeBabelUserDevConfig.js";
-import { makeBabelUserProdConfig } from "./makeBabelUserProdConfig.js";
-import { cliOut, cliLog, cliError, cliWarn } from "../cliOutput.js"; // eslint-disable-line @typescript-eslint/no-unused-vars
-import { createTimeProfiler, isProfiling, tally } from "../timeProfiler.js";
-import { tallyBabelPlugins } from "./tallyBabelPlugins.js";
-import { TungstenError } from "../TungstenError.js";
-import { getFrameworkDir } from "../getFrameworkDir.js";
+import { glob } from '../glob.js';
+import { devRawBuildFolder, packagesCacheFolder, prodRawBuildFolder, stylesCacheFolder } from '../settings.js';
+import { frameworkVersion } from './frameworkDestLocation.js';
+import { makeBabelUserDevConfig } from './makeBabelUserDevConfig.js';
+import { makeBabelUserProdConfig } from './makeBabelUserProdConfig.js';
+import { makeBabelRawConfig } from './makeBabelRawConfig.js';
+import { cliOut, cliLog, cliError, cliWarn } from '../cliOutput.js'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { createTimeProfiler, isProfiling, tallied } from '../timeProfiler.js';
+import { tallyBabel } from './tallyBabel.js';
+import { TungstenError } from '../TungstenError.js';
+import { getFrameworkDir } from '../getFrameworkDir.js';
 // The graph writeDependencyGraph() left behind on the previous run, naming a compiled copy of every
 // package file in the packages cache. Missing or unreadable just means everything is compiled from
 // source, which is what happened on every run before this was read back.
+// Nodes are keyed by package version only, so a graph another tungsten version wrote is discarded:
+// the transform may have changed. frameworkVersion here is a free option - any stamp works.
 async function loadDependencyGraph(location) {
   if (!fs.existsSync(location)) return {};
   try {
     const graphModule = await import(pathToFileURL(location).href);
+    if (graphModule.version !== frameworkVersion) return {};
     return graphModule.graph ?? {};
   } catch (error) {
     cliWarn(`Could not read the package cache at ${location}, compiling packages from source`);
@@ -33,6 +38,9 @@ async function loadDependencyGraph(location) {
 export async function compileJavascript(projectDir, appConfig, codeLocation, sourceLocation, styleImportBase, buildLocation, buildCodeLocation, mode, watch = true, options = {}) {
   if (options.quiet !== true) cliOut(`Compiling app code`);
   const compilePackages = options.packages !== false;
+  // codeLocation's .ts/.tsx are sources too, compiled to .js by babel; .d.ts is never one
+  const typescript = appConfig.typescript === true;
+  const rawBuildLocation = options.rawBuildLocation ?? join(projectDir, mode === 'dev' ? devRawBuildFolder : prodRawBuildFolder);
   let dependencyGraphDir = '';
   let dependencyGraphLocation = '';
   let oldDependencyGraph = {};
@@ -44,9 +52,8 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
   const skipPackageCompilationFiles = new Set();
   async function refreshSkipPackageCompilationFiles() {
     skipPackageCompilationFiles.clear();
-    const matchingFiles = await globby(skipPackageCompilationPatterns, {
-      cwd: codeLocation,
-      absolute: true
+    const matchingFiles = await glob(skipPackageCompilationPatterns, {
+      cwd: codeLocation
     });
     for (const file of matchingFiles) skipPackageCompilationFiles.add(slash(file));
   }
@@ -54,35 +61,48 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
   if (mode === 'dev') {
     dependencyGraphDir = options.packagesCacheLocation ?? join(projectDir, packagesCacheFolder);
     dependencyGraphLocation = join(dependencyGraphDir, '.dependency-graph.js');
-    oldDependencyGraph = await loadDependencyGraph(dependencyGraphLocation);
+    oldDependencyGraph = options.fresh === true ? {} : await loadDependencyGraph(dependencyGraphLocation);
     dependencyGraph = {};
     importAliases = {};
     promises = [];
-    config = makeBabelUserDevConfig(projectDir, codeLocation, sourceLocation, styleImportBase, buildLocation, buildCodeLocation, dependencyGraphDir, skipPackageCompilationFiles, oldDependencyGraph, dependencyGraph, importAliases, promises, watch, options.hmr === true, compilePackages);
+    config = makeBabelUserDevConfig(projectDir, codeLocation, sourceLocation, typescript, styleImportBase, buildLocation, buildCodeLocation, dependencyGraphDir, options.stylesCacheLocation ?? join(projectDir, stylesCacheFolder), options.fresh === true, skipPackageCompilationFiles, oldDependencyGraph, dependencyGraph, importAliases, promises, watch, options.hmr === true, compilePackages);
   } else {
-    config = makeBabelUserProdConfig(projectDir, codeLocation, sourceLocation, styleImportBase, watch);
+    config = makeBabelUserProdConfig(projectDir, codeLocation, sourceLocation, typescript, styleImportBase, watch);
   }
   config.root = getFrameworkDir();
+  const rawConfig = makeBabelRawConfig(typescript);
+  rawConfig.root = config.root;
   // per-plugin attribution of the transform's time, only when someone is looking: the wrappers
   // run per AST node
   if (isProfiling()) {
-    config.plugins = tallyBabelPlugins(config.plugins);
+    tallyBabel(config);
+    tallyBabel(rawConfig);
     if (mode === 'dev' && compilePackages) {
-      cliWarn(`profiling serves linked packages from the packages cache -` + ` delete ${dependencyGraphDir} after rebuilding one, or this run compiles stale code`);
+      cliWarn(`profiling serves linked packages from the packages cache -` + ` pass --fresh after rebuilding one, or this run compiles stale code`);
     }
   }
   // compile with the API
   const codeLocationLength = codeLocation.length + 1;
+  // a source's path within the build: every compiled extension becomes .js
+  function outputRel(file) {
+    const rel = file.slice(codeLocationLength);
+    if (rel.endsWith('.jsx')) return rel.slice(0, -1);
+    if (typescript && rel.endsWith('.tsx')) return `${rel.slice(0, -3)}js`;
+    if (typescript && rel.endsWith('.ts')) return `${rel.slice(0, -2)}js`;
+    return rel;
+  }
   const transformPromises = [];
   const failedFiles = new Set();
   const pendingExportWipes = new Map();
   const exportWipeGraceMs = 5000;
+  // A source goes through the client pipeline, the raw one, both, or neither - see
+  // refreshSelections() below for what decides that
   async function transformFile(file) {
     //if (options.quiet !== true) console.log('transforming file', file)
+    const client = isClient(file);
+    const raw = isRaw(file);
+    if (!client && !raw) return;
     try {
-      let rel = file.slice(codeLocationLength);
-      if (rel.endsWith('.jsx')) rel = rel.slice(0, -1);
-      const dest = join(buildCodeLocation, rel);
       // tsc's own watch/incremental emit can leave this file genuinely blank for a
       // stretch while it recomputes - not a write-in-progress chokidar's
       // awaitWriteFinish can wait out, but a real (if temporary) empty file on disk.
@@ -93,64 +113,15 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
         failedFiles.delete(file);
         return;
       }
-      // Sync, so this can be tallied exactly - nothing else runs during it. Babel's work is
-      // cpu-bound on one thread either way, so the async API's 291 concurrent calls bought
-      // no parallelism, only scheduling. The plugins defer their async work into
-      // opts.promises rather than awaiting in a visitor, which is what makes sync viable.
-      const babelStart = performance.now();
-      const result = babelTransformFileSync(file, config);
-      tally('babel transform', performance.now() - babelStart);
-      if (result === null) throw new TungstenError(`Err: babel transform on file ${file} returned null`);
-      const {
-        code
-      } = result;
-      if (code === null || code === undefined) {
-        throw new TungstenError(`Err: code from babel transform on file ${file} was null or undefined: ${typeof code}`);
-      }
-      // tsc's incremental watch can, for one transient pass right after a save, emit
-      // `export {};` for a file that previously had real exports - its own convention
-      // for "this module has nothing to export", produced here as a self-correcting
-      // glitch rather than a real edit (confirmed via tsc's own transient
-      // "has no exported member" watch error). Quarantine it behind a timer rather than
-      // overwrite the last-good compiled output immediately: tsc's follow-up pass moments
-      // later normally retriggers this watcher with the real content, cancelling the
-      // quarantine below. But if nothing ever corrects it (a genuine edit really does
-      // remove every export), accept the quarantined content once the grace period lapses
-      // instead of hiding it forever.
-      if (code.trim() === 'export {};' && fs.existsSync(dest)) {
-        const previousCode = fs.readFileSync(dest, 'utf8');
-        if (previousCode.trim() !== 'export {};' && previousCode.trim() !== '') {
-          if (!pendingExportWipes.has(file)) {
-            const timer = setTimeout(() => {
-              void acceptQuarantinedExportWipe(file);
-            }, exportWipeGraceMs);
-            pendingExportWipes.set(file, {
-              dest,
-              code,
-              timer
-            });
-          } else {
-            // keep the original timer (grace period counts from the first sighting),
-            // just refresh the content that'll be written if it elapses
-            const pending = pendingExportWipes.get(file);
-            if (pending !== undefined) pending.code = code;
-          }
-          failedFiles.delete(file);
-          return;
-        }
+      // each transform runs synchronously up to its write, so both are in flight together
+      const writes = [];
+      if (client) {
+        writes.push(transformTo(file, sourceContent, config, join(buildCodeLocation, outputRel(file)), 'babel transform', true));
       }
-      // real content arrived - cancel any quarantine still pending for this file
-      const pendingWipe = pendingExportWipes.get(file);
-      if (pendingWipe !== undefined) {
-        clearTimeout(pendingWipe.timer);
-        pendingExportWipes.delete(file);
+      if (raw) {
+        writes.push(transformTo(file, sourceContent, rawConfig, join(rawBuildLocation, outputRel(file)), 'babel transform (raw)', false));
       }
-      await fsPromises.mkdir(dirname(dest), {
-        recursive: true
-      });
-      //// Using the sync version here, because the promise version keeps bugging out - node bug?
-      //await fsPromises.writeFile(dest, code)
-      fs.writeFileSync(dest, code);
+      await Promise.all(writes);
       failedFiles.delete(file);
     } catch (e) {
       failedFiles.add(file);
@@ -159,28 +130,92 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
       throw e;
     }
   }
+  // One pipeline's transform and write. The transform is sync, so it can be tallied exactly -
+  // nothing else runs during it. Babel's work is cpu-bound on one thread either way, so the async
+  // API's 291 concurrent calls bought no parallelism, only scheduling. The plugins defer their
+  // async work into opts.promises rather than awaiting in a visitor, which is what makes sync
+  // viable. Async so the client and raw writes of one file could overlap; see the write below.
+  async function transformTo(file, sourceContent, babelConfig, dest, tallyName, guardExportWipe) {
+    // the content already read above: transformFileSync would read the file a second time
+    const result = tallied(tallyName, () => babelTransformSync(sourceContent, {
+      ...babelConfig,
+      filename: file
+    }));
+    if (result === null) throw new TungstenError(`Err: babel transform on file ${file} returned null`);
+    const {
+      code
+    } = result;
+    if (code === null || code === undefined) {
+      throw new TungstenError(`Err: code from babel transform on file ${file} was null or undefined: ${typeof code}`);
+    }
+    // tsc's incremental watch can, for one transient pass right after a save, emit
+    // `export {};` for a file that previously had real exports - its own convention
+    // for "this module has nothing to export", produced here as a self-correcting
+    // glitch rather than a real edit (confirmed via tsc's own transient
+    // "has no exported member" watch error). Quarantine it behind a timer rather than
+    // overwrite the last-good compiled output immediately: tsc's follow-up pass moments
+    // later normally retriggers this watcher with the real content, cancelling the
+    // quarantine below. But if nothing ever corrects it (a genuine edit really does
+    // remove every export), accept the quarantined content once the grace period lapses
+    // instead of hiding it forever. The client tree's guard only - the raw tree is not served.
+    if (guardExportWipe && code.trim() === 'export {};' && fs.existsSync(dest)) {
+      const previousCode = fs.readFileSync(dest, 'utf8');
+      if (previousCode.trim() !== 'export {};' && previousCode.trim() !== '') {
+        if (!pendingExportWipes.has(file)) {
+          const timer = setTimeout(() => {
+            void acceptQuarantinedExportWipe(file);
+          }, exportWipeGraceMs);
+          pendingExportWipes.set(file, {
+            dest,
+            code,
+            timer
+          });
+        } else {
+          // keep the original timer (grace period counts from the first sighting),
+          // just refresh the content that'll be written if it elapses
+          const pending = pendingExportWipes.get(file);
+          if (pending !== undefined) pending.code = code;
+        }
+        return;
+      }
+    }
+    // real content arrived - cancel any quarantine still pending for this file
+    if (guardExportWipe) {
+      const pendingWipe = pendingExportWipes.get(file);
+      if (pendingWipe !== undefined) {
+        clearTimeout(pendingWipe.timer);
+        pendingExportWipes.delete(file);
+      }
+    }
+    // Sync on purpose (measured 2026-09, qtc-2, 202 files, phase time minus babel's): sync
+    // ~400ms, fsPromises mkdir + writeFile ~520ms, memoising the mkdir no better. Babel saturates
+    // the main thread so completions only queue, and the promise api's open/write/close costs
+    // more there than a 1.5ms blocking write. Long ago the promise version also misbehaved.
+    fs.mkdirSync(dirname(dest), {
+      recursive: true
+    });
+    fs.writeFileSync(dest, code);
+  }
   async function deleteTransformedFile(file) {
-    let rel = file.slice(codeLocationLength);
-    if (rel.endsWith('.jsx')) rel = rel.slice(0, -1);
-    const dest = join(buildCodeLocation, rel);
     const pendingWipe = pendingExportWipes.get(file);
     if (pendingWipe !== undefined) {
       clearTimeout(pendingWipe.timer);
       pendingExportWipes.delete(file);
     }
-    try {
-      await fsPromises.unlink(dest);
-    } catch (error) {
-      const fileError = error;
-      if (fileError.code !== 'ENOENT') throw error;
+    // whichever trees hold it
+    for (const dest of [join(buildCodeLocation, outputRel(file)), join(rawBuildLocation, outputRel(file))]) {
+      try {
+        await fsPromises.unlink(dest);
+      } catch (error) {
+        const fileError = error;
+        if (fileError.code !== 'ENOENT') throw error;
+      }
     }
     failedFiles.delete(file);
   }
   async function copyFile(file) {
     try {
-      let rel = file.slice(codeLocationLength);
-      if (rel.endsWith('.jsx')) rel = rel.slice(0, -1);
-      const dest = join(buildCodeLocation, rel);
+      const dest = join(buildCodeLocation, outputRel(file));
       await fsPromises.mkdir(dirname(dest), {
         recursive: true
       });
@@ -194,9 +229,7 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
   }
   async function deleteFile(file) {
     try {
-      let rel = file.slice(codeLocationLength);
-      if (rel.endsWith('.jsx')) rel = rel.slice(0, -1);
-      const dest = join(buildCodeLocation, rel);
+      const dest = join(buildCodeLocation, outputRel(file));
       await fsPromises.unlink(dest);
     } catch (e) {
       cliError(`Tungsten: Error deleting file ${file}`);
@@ -205,22 +238,26 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
     }
   }
   // get a list of files
-  const watchGlob = slash(`${codeLocation}/**/*.js{,x}`);
+  const watchGlob = slash(`${codeLocation}/**/*.{js,jsx${typescript ? ',ts,tsx' : ''}}`);
   // typed rather than inferred from the pushes: it is captured by a closure below, which stops
   // typescript widening it from the pushes
   const ignored = [];
   ignored.push(slash(`${buildLocation}/**`));
+  if (typescript) ignored.push(slash(`${codeLocation}/**/*.d.ts`));
   if (appConfig.ignoreDirs !== undefined && appConfig.ignoreDirs !== '') {
     const ignoreDirs = typeof appConfig.ignoreDirs === 'string' ? [appConfig.ignoreDirs] : appConfig.ignoreDirs;
     ignored.push(...ignoreDirs.map(folder => slash(`${codeLocation}/${folder}/**`)));
   }
+  // patterns are relative to the code dir, like the dirs above and the selections below; raw they
+  // resolved against the cwd, so `client/testing/**` never matched <code>/client/testing/…
+  const fromCodeDir = pattern => isAbsolute(pattern) ? slash(pattern) : slash(`${codeLocation}/${pattern}`);
   if (appConfig.ignorePatterns !== undefined && appConfig.ignorePatterns !== '') {
     if (Array.isArray(appConfig.ignorePatterns)) {
       for (const pattern of appConfig.ignorePatterns) {
-        ignored.push(pattern);
+        ignored.push(fromCodeDir(pattern));
       }
     } else {
-      ignored.push(appConfig.ignorePatterns);
+      ignored.push(fromCodeDir(appConfig.ignorePatterns));
     }
   }
   // test files are a category, not noise: excluded here like ignoreDirs/ignorePatterns, but a
@@ -231,10 +268,39 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
       ignored.push(...testDirs.map(folder => slash(`${codeLocation}/${folder}/**`)));
     }
     if (appConfig.testPatterns !== undefined && appConfig.testPatterns !== '') {
-      ignored.push(...(Array.isArray(appConfig.testPatterns) ? appConfig.testPatterns : [appConfig.testPatterns]));
+      const testPatterns = Array.isArray(appConfig.testPatterns) ? appConfig.testPatterns : [appConfig.testPatterns];
+      ignored.push(...testPatterns.map(fromCodeDir));
     }
   }
   if (appConfig.exclude !== undefined) ignored.push(slash(`${codeLocation}/${appConfig.exclude}`));
+  // Which sources each pipeline compiles. Unset, client is everything and raw is nothing; a file
+  // may be in both. Dirs and patterns are relative to codeDir. The ignores are not applied
+  // here - every file that reaches isClient/isRaw has already passed them, in the initial glob
+  // or in the watcher - so "client minus ignores" holds. Sets rather than matchers, refreshed on
+  // the watcher's `add`, like skipPackageCompilationFiles.
+  const sourceExtensions = `*.{js,jsx${typescript ? ',ts,tsx' : ''}}`;
+  function selectionGlobs(dirs, patterns) {
+    if (dirs === undefined && patterns === undefined) return null;
+    const list = value => value === undefined || value === '' ? [] : typeof value === 'string' ? [value] : value;
+    return [...list(dirs).map(dir => `${dir}/**/${sourceExtensions}`), ...list(patterns)];
+  }
+  const clientSelection = selectionGlobs(appConfig.clientDirs, appConfig.clientPatterns);
+  const rawSelection = selectionGlobs(appConfig.rawDirs, appConfig.rawPatterns);
+  let clientFiles = null;
+  let rawFiles = new Set();
+  async function selectedFiles(selection) {
+    const files = await glob(selection, {
+      cwd: codeLocation
+    });
+    return new Set(files.map(file => slash(file)));
+  }
+  async function refreshSelections() {
+    clientFiles = clientSelection === null ? null : await selectedFiles(clientSelection);
+    rawFiles = rawSelection === null ? new Set() : await selectedFiles(rawSelection);
+  }
+  const isClient = file => clientFiles === null || clientFiles.has(file);
+  const isRaw = file => rawFiles.has(file);
+  await refreshSelections();
   //console.log('appConfig', appConfig)
   //console.log('ignored', ignored)
   //cliWarn(watchGlob)
@@ -245,7 +311,7 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
   // phases record into the profiler module's shared timeline, so this instance need not be the
   // one the command created - it only has to be enabled when --profile is
   const profiler = createTimeProfiler(isProfiling());
-  const paths = await profiler.timeProfileAsync('find source files', () => globby([watchGlob, ...ignored.map(x => `!${x}`)]));
+  const paths = await profiler.timeProfileAsync('find source files', () => glob([watchGlob, ...ignored.map(x => `!${x}`)]));
   // the transforms are started inside the phase, not just awaited there: a resource is charged to
   // the phase that created it, so starting them outside credits all the work to the parent
   const transformResults = await profiler.timeProfileAsync(`transform ${paths.length} files`, () => {
@@ -276,7 +342,7 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
         recursive: true
       });
     }
-    fs.writeFileSync(dependencyGraphLocation, `export const graph = ${serializeJavascript(dependencyGraph)}`);
+    fs.writeFileSync(dependencyGraphLocation, `export const version = ${serializeJavascript(frameworkVersion)}\n` + `export const graph = ${serializeJavascript(dependencyGraph)}`);
   }
   async function acceptQuarantinedExportWipe(file) {
     const pending = pendingExportWipes.get(file);
@@ -287,7 +353,7 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
       await fsPromises.mkdir(dirname(pending.dest), {
         recursive: true
       });
-      fs.writeFileSync(pending.dest, pending.code);
+      await fsPromises.writeFile(pending.dest, pending.code);
       failedFiles.delete(file);
       const failures = await settleDeferredWork();
       success = failures.length === 0 && failedFiles.size === 0;
@@ -299,7 +365,8 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
     }
     await options.onCycleComplete?.({
       success,
-      file
+      file,
+      client: true
     });
   }
   if (!watch) {
@@ -337,7 +404,10 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
           if (event === 'unlink') {
             await deleteTransformedFile(file);
           } else {
-            if (event === 'add') await refreshSkipPackageCompilationFiles();
+            if (event === 'add') {
+              await refreshSkipPackageCompilationFiles();
+              await refreshSelections();
+            }
             await transformFile(file);
           }
           const failures = await settleDeferredWork();
@@ -348,7 +418,8 @@ export async function compileJavascript(projectDir, appConfig, codeLocation, sou
         }
         await options.onCycleComplete?.({
           success,
-          file
+          file,
+          client: isClient(file)
         });
       }).catch(error => {
         cliError('Tungsten: Error completing JavaScript watch cycle');