jsswift 2.0.1 → 2.1.0

package/AI.md

@@ -16,6 +16,7 @@ The installed package exposes this same guide as `AI.md` at its root and through
 | --- | --- | --- |
 | Small page with the six components below | This guide | Implement the supported subset without opening component contracts. |
 | Product CRUD with validation, persistence and focus | [CRUD example](examples/crud.md) | Reuse the example; do not also concatenate Input, Select, Dialog and Table contracts. |
+| jss.config.js, selective runtime, Vite plugin or optional extras | [Configured runtime](configured-runtime.md) (`guide:configured-runtime`) | Follow the existing app configuration; do not also import the complete runtime/CSS. |
 | One missing prop or callback | Map → exact document, or selective MCP read | Read only the needed section; do not search the runtime bundle. |
 | Custom appearance | Supported props below, then one relevant contract | Keep component styles; add CSS for page layout and task-specific visuals. |
 
@@ -23,6 +24,8 @@ The map locates a contract; it does not replace it. Avoid reading all of `ui/com
 
 ## Import, create, mount
 
+For an existing app, preserve its loading method. With the configured Vite plugin, import `jss:runtime` instead of the two traditional imports below: it includes the configured JavaScript, CSS and extras. Read [configured-runtime.md](configured-runtime.md) for setup and package availability; older installed releases may not expose this tooling.
+
 With Vite, provide `<div id="app"></div>` and a module entrypoint:
 
 ```js
@@ -73,6 +76,8 @@ Prefer public props to rebuilding controls: `_.Button({color:'primary',outline:t
 
 Classes and theme variables use `jss-`; migrate old `cms-` overrides. Fonts are system defaults. Import `jsswift/css/fonts-nunito.css`, `fonts-material.css`, or `jsswift/tabler` only when required; Material Symbols downloads a remote font.
 
+With `jss:runtime`, choose assets in `jss.config.js` through `extras` instead of adding these imports. `ui: {all:true}` includes the complete UI and services. For a selective build, use `ui: {components:['Button','Input','Select','Card','Table'],services:['Dialog']}` for the example above; dependencies are automatic. Services also support Notify, Loading and Form (useForm). Add every component used through dynamic lookup explicitly. `responsive:false` retains base utilities and component mobile CSS but excludes breakpoint utilities; use true for tablet/pc props. Shared and complex CSS rules are retained conservatively.
+
 ## Accessibility and verification
 
 String labels name Input/Select; set Dialog `ariaLabel`. Field errors are associated automatically. Dialog preserves focus assigned in `onOpen`. If rendering replaces the trigger, restore its current replacement in `onClose`; see CRUD.

package/README.md

@@ -5,3 +5,5 @@
 For an API absent from that guide, use [knowledge-map.json](dist/documentions/knowledge-map.json) to locate the exact document. Read only the relevant contract; avoid concatenating the component catalog or searching runtime bundles for documentation.
 
 Import `jsswift` and `jsswift/css/ui-light.css`; add `jsswift/css/responsive.css` when using breakpoint props. `ui.css` remains the complete alternative. Component CSS is included; fonts and Tabler are optional. The read-only `@jsswift/knowledge-mcp` is an optional discovery interface when configured in your AI client.
+
+For configured builds, see [configured-runtime.md](dist/documentions/configured-runtime.md). Import `jssRuntime` from `jsswift/vite` in Vite config and `jss:runtime` in the application entry. Or use `npx jss-build` to generate standalone assets. Set `ui.all: true` for the complete UI, or list components/services for a selective build. Tooling requires Node.js 20.19.x or >=22.12.0; Vite is optional for standalone builds.

package/dist/build/build-configured-runtime.d.mts

@@ -0,0 +1,29 @@
+export interface RuntimeConfig {
+  ui?: {
+    all?: boolean;
+    responsive?: boolean;
+    components?: string[];
+    services?: Array<'Dialog' | 'Notify' | 'Loading' | 'Form'>;
+  };
+  extras?: Array<'material-symbols-outlined' | 'nunito-font' | 'tabler'>;
+}
+export interface NormalizedRuntimeConfig {
+  ui: { all: boolean; responsive: boolean; components: string[]; services: string[] };
+  extras: string[];
+}
+export interface RuntimeBuildReport {
+  config: NormalizedRuntimeConfig;
+  javascript: string[];
+  css: string[];
+  extras: string[];
+  selectiveComponents: boolean;
+  components: string[] | 'all';
+  services: string[] | 'all';
+  reasons: Record<string, string>;
+  removedSelectors: number;
+  runtimeBytes: number;
+  cssBytes: number;
+}
+export declare const extras: Record<string, string | null>;
+export declare function validateConfig(config: RuntimeConfig): NormalizedRuntimeConfig;
+export declare function buildConfiguredRuntime(config: RuntimeConfig, output: string, sourceRoot?: string): Promise<RuntimeBuildReport>;

package/dist/build/build-configured-runtime.mjs

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { pathToFileURL, fileURLToPath } from 'node:url';
+import { transform } from 'esbuild';
+import { selectUI, selectComponentCSS } from './select-ui.mjs';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const root = fileURLToPath(new URL('../', import.meta.url));
+export const extras = {
+  'material-symbols-outlined': 'fonts-material.css',
+  'nunito-font': 'fonts-nunito.css',
+  tabler: null,
+};
+
+export function validateConfig(config) {
+  if (!config || typeof config !== 'object' || Array.isArray(config)) throw new Error('Expected a configuration object');
+  for (const key of Object.keys(config)) if (!['ui', 'extras'].includes(key)) throw new Error(`Unknown config option: ${key}`);
+  const ui = config.ui ?? { all: true };
+  if (!ui || typeof ui !== 'object' || Array.isArray(ui)) throw new Error('ui must be an object');
+  for (const key of Object.keys(ui)) if (!['all', 'responsive', 'components', 'services'].includes(key)) throw new Error(`Unknown ui option: ${key}`);
+  if (ui.all !== undefined && typeof ui.all !== 'boolean') throw new Error('ui.all must be boolean');
+  if (ui.responsive !== undefined && typeof ui.responsive !== 'boolean') throw new Error('ui.responsive must be boolean');
+  for (const key of ['components', 'services']) {
+    if (ui[key] !== undefined && (!Array.isArray(ui[key]) || ui[key].some(name => typeof name !== 'string' || !name))) throw new Error(`ui.${key} must be an array of names`);
+  }
+  const all = ui.all ?? (ui.components === undefined && ui.services === undefined);
+  if (all && (ui.components?.length || ui.services?.length)) throw new Error('Use ui.all: true alone or selective components/services');
+  const selected = config.extras ?? [];
+  if (!Array.isArray(selected)) throw new Error('extras must be an array');
+  for (const name of selected) if (!Object.hasOwn(extras, name)) throw new Error(`Unknown extra: ${name}`);
+  return { ui: { all, responsive: ui.responsive ?? true, components: [...new Set(ui.components ?? [])], services: [...new Set(ui.services ?? [])] }, extras: [...new Set(selected)] };
+}
+
+export async function buildConfiguredRuntime(config, output, sourceRoot = root) {
+  const normalized = validateConfig(config);
+  const layout = runtimeLayout(sourceRoot);
+  const selective = !normalized.ui.all && (normalized.ui.components.length || normalized.ui.services.length);
+  const selection = selective ? await selectUI(sourceRoot, normalized.ui.components, normalized.ui.services) : null;
+  // A dedicated empty directory prevents stale opt-in assets and accidental overwrite.
+  await fs.mkdir(output, { recursive: true });
+  if ((await fs.readdir(output)).length) throw new Error('Output directory must be empty; choose a new application output directory');
+  const inputs = [path.relative(sourceRoot, layout.core)];
+  if (normalized.ui.all) inputs.push(path.relative(sourceRoot, layout.ui));
+  const chunks = await Promise.all(inputs.map(file => fs.readFile(path.join(sourceRoot, file), 'utf8')));
+  if (selection) { chunks.push(selection.code); inputs.push(...selection.sources); }
+  if (normalized.extras.includes('tabler')) {
+    chunks.push('JSswift.config ||= {}; JSswift.config.iconSpriteUrl = new URL("./img/svg/tabler-icons-sprite.svg", import.meta.url).href;');
+    await fs.mkdir(path.join(output, 'img/svg'), { recursive: true });
+    await fs.copyFile(path.join(layout.assets, 'img/svg/tabler-icons-sprite.svg'), path.join(output, 'img/svg/tabler-icons-sprite.svg'));
+  }
+  const runtime = await transform(chunks.join('\n'), { minify: true, target: 'es2018', format: 'esm' });
+  await fs.writeFile(path.join(output, 'runtime.js'), runtime.code);
+  const css = [];
+  if (normalized.ui.all) css.push(normalized.ui.responsive ? 'ui.css' : 'ui-light.css');
+  else if (selection) css.push('base.css', 'animation.css', 'ui-components.css', normalized.ui.responsive ? 'responsive.css' : 'responsive-base.css');
+  else css.push('base.css');
+  for (const name of normalized.extras) if (extras[name]) css.push(extras[name]);
+  await fs.mkdir(path.join(output, 'css'), { recursive: true });
+  let removedSelectors = 0;
+  const cssChunks = await Promise.all(css.map(async file => {
+    const content = await fs.readFile(path.join(layout.assets, 'css', file), 'utf8');
+    if (selection && file === 'ui-components.css') {
+      const result = selectComponentCSS(content, selection.components, selection.services);
+      removedSelectors = result.removedSelectors;
+      return result.css;
+    }
+    return content;
+  }));
+  const stylesheet = cssChunks.join('\n');
+  await fs.writeFile(path.join(output, 'css/runtime.css'), stylesheet);
+  if (normalized.extras.includes('nunito-font')) await fs.cp(path.join(layout.assets, 'fonts'), path.join(output, 'fonts'), { recursive: true });
+  const report = { config: normalized, javascript: inputs, css, extras: normalized.extras, selectiveComponents: !!selection, components: selection?.components ?? (normalized.ui.all ? 'all' : []), services: selection?.services ?? (normalized.ui.all ? 'all' : []), reasons: selection?.reasons ?? {}, removedSelectors, runtimeBytes: Buffer.byteLength(runtime.code), cssBytes: Buffer.byteLength(stylesheet) };
+  await fs.writeFile(path.join(output, 'build-report.json'), JSON.stringify(report, null, 2) + '\n');
+  return report;
+}
+
+// npm binaries are symlinks; compare the real entrypoint rather than .bin path.
+const invokedPath = process.argv[1] ? await fs.realpath(process.argv[1]).catch(() => null) : null;
+if (invokedPath === fileURLToPath(import.meta.url)) {
+  try {
+    if (process.argv[2] === '--help' || process.argv[2] === '-h') {
+      console.log('Usage: jss-build [config-path] [output-directory]\nDefaults: jss.config.js and dist-runtime (must be empty)');
+    } else {
+      const configPath = path.resolve(process.argv[2] ?? 'jss.config.js');
+      const output = path.resolve(process.argv[3] ?? 'dist-runtime');
+      const config = (await import(pathToFileURL(configPath).href)).default;
+      const report = await buildConfiguredRuntime(config, output);
+      console.log(`Configured runtime: ${output} (${report.runtimeBytes} JS bytes); report: build-report.json`);
+    }
+  } catch (error) { console.error(error.message); process.exitCode = 1; }
+}

package/dist/build/runtime-layout.mjs

@@ -0,0 +1,13 @@
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+// The same tooling runs from the checkout and from jsswift/dist/build.
+export function runtimeLayout(root) {
+  const checkout = existsSync(path.join(root, 'packages/ui/src/modules.json'));
+  return {
+    core: path.join(root, checkout ? 'packages/core/dist/cms.js' : 'cms.js'),
+    ui: path.join(root, checkout ? 'packages/ui/dist/ui.js' : 'ui.js'),
+    assets: path.join(root, checkout ? 'packages/ui/dist' : '.'),
+    source: path.join(root, checkout ? 'packages/ui/src' : 'ui-src'),
+  };
+}

package/dist/build/select-ui.mjs

@@ -0,0 +1,167 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { parseAst } from 'rolldown/parseAst';
+import postcss from 'postcss';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const services = {
+  Notify: ['UI.Notify', 'JSswift.services.notify', 'JSswift.notify'],
+  Dialog: ['UI.Dialog', 'JSswift.dialog'],
+  Loading: ['JSswift.loading'],
+  Form: ['JSswift.useForm'],
+};
+
+function member(node) {
+  if (node?.type === 'ChainExpression') return member(node.expression);
+  if (node?.type === 'Identifier') return node.name;
+  if (node?.type !== 'MemberExpression') return null;
+  const object = member(node.object);
+  const property = node.computed ? (node.property.type === 'Literal' ? node.property.value : null) : node.property.name;
+  if (!object || typeof property !== 'string') return null;
+  return `${object}.${property}`;
+}
+
+function walk(node, visit, parent = null, key = null) {
+  if (!node || typeof node !== 'object') return;
+  if (node.type) visit(node, parent, key);
+  for (const [name, value] of Object.entries(node)) {
+    if (['start', 'end', 'loc', 'range'].includes(name)) continue;
+    if (Array.isArray(value)) for (const child of value) walk(child, visit, node, name);
+    else if (value && typeof value === 'object') walk(value, visit, node, name);
+  }
+}
+
+function canonical(name, components) {
+  name = name.replace(/^app\./, 'JSswift.');
+  // UI aliases exist on both public namespaces. Slot helpers are separate.
+  const match = /^(?:UI|JSswift\.ui|_)\.([^.]+)(.*)$/.exec(name);
+  if (match && components.has(match[1])) return `UI.${match[1] === 'Button' ? 'Btn' : match[1]}${match[2]}`;
+  return name;
+}
+
+export async function selectUI(root, requested, requestedServices) {
+  const directory = runtimeLayout(root).source;
+  const manifest = JSON.parse(await fs.readFile(path.join(directory, 'modules.json'), 'utf8'));
+  const files = await Promise.all(manifest.buildOrder.map(async file => ({ file, text: await fs.readFile(path.join(directory, file), 'utf8') })));
+  let offset = 0;
+  for (const file of files) { file.start = offset; offset += file.text.length + 1; file.end = offset; }
+  const source = files.map(file => file.text).join('\n');
+  const program = parseAst(source);
+  const call = program.body[0]?.expression;
+  if (program.body.length !== 1 || call?.type !== 'CallExpression' || !call.callee.body?.body) throw new Error('Unexpected UI module structure; update dependency extraction');
+  const nodes = call.callee.body.body;
+  const components = new Set();
+  for (const node of nodes) {
+    const lhs = node.expression?.type === 'AssignmentExpression' ? member(node.expression.left) : null;
+    if (lhs && /^UI\.[^.]+$/.test(lhs)) components.add(lhs.slice(3));
+  }
+  for (const name of requested) if (!components.has(name)) throw new Error(`Unknown UI component: ${name}`);
+  for (const name of requestedServices) if (!Object.hasOwn(services, name)) throw new Error(`Unknown UI service: ${name}`);
+  const definitions = new Map();
+  const records = nodes.map((node, index) => {
+    const file = files.find(file => node.start >= file.start && node.start < file.end).file;
+    const defined = [];
+    if (node.type === 'VariableDeclaration') for (const declaration of node.declarations) {
+      walk(declaration.id, child => { if (child.type === 'Identifier') defined.push(child.name); });
+    }
+    if (node.type === 'FunctionDeclaration') defined.push(node.id.name);
+    if (node.expression?.type === 'AssignmentExpression') {
+      const lhs = member(node.expression.left);
+      if (!lhs) throw new Error(`Unsupported UI assignment in ${file}`);
+      defined.push(canonical(lhs, components));
+    }
+    for (const name of defined) {
+      if (!definitions.has(name)) definitions.set(name, []);
+      definitions.get(name).push(index);
+    }
+    const references = new Set();
+    walk(node, (child, parent, key) => {
+      if (child.type === 'MemberExpression') {
+        const name = member(child);
+        if (name) references.add(canonical(name, components));
+      }
+      if (child.type === 'Identifier') {
+        if (parent?.type === 'MemberExpression' && key === 'property' && !parent.computed) return;
+        if ((parent?.type === 'Property' || parent?.type === 'MethodDefinition') && key === 'key' && !parent.computed) return;
+        references.add(child.name);
+      }
+    });
+    return { index, node, file, defined, references };
+  });
+  const included = new Set();
+  const reasons = {};
+  const include = (index, reason) => {
+    if (included.has(index)) return;
+    included.add(index);
+    const record = records[index];
+    for (const name of record.defined) reasons[name] ??= reason;
+    for (const reference of record.references) {
+      for (const dependency of definitions.get(reference) ?? []) include(dependency, record.defined[0] ?? `initialization:${record.file}`);
+    }
+    // A selected component/service includes its public methods and aliases.
+    for (const name of record.defined) {
+      if (/^UI\.[^.]+$/.test(name) || /^JSswift\.(dialog|loading|notify)$/.test(name) || name === 'JSswift.services.notify') {
+        for (const [child, indices] of definitions) if (child.startsWith(name + '.')) for (const dependency of indices) include(dependency, name);
+      }
+    }
+  };
+  // Preserve initialization order and rod-path hooks. Helpers otherwise follow references.
+  for (const record of records) if ((record.file === '00-bootstrap.js' && !record.defined.includes('JSswift.services.notify')) || record.defined.includes('JSswift.omit')) include(record.index, 'shared UI initialization');
+  const roots = [...requested.map(name => `UI.${name}`), ...requestedServices.flatMap(name => services[name])];
+  for (const root of roots) for (const index of definitions.get(canonical(root, components)) ?? []) include(index, 'requested');
+  const selectedRecords = records.filter(record => included.has(record.index));
+  const selectedComponents = [...components].filter(name => definitions.get(canonical(`UI.${name}`, components))?.some(index => included.has(index)));
+  const selectedServices = Object.keys(services).filter(name => services[name].every(root => definitions.get(canonical(root, components))?.some(index => included.has(index))));
+  return {
+    code: `(function initJSswiftUI(app) {\n${selectedRecords.map(record => source.slice(record.node.start, record.node.end)).join('\n')}\n})(JSswift);`,
+    components: selectedComponents,
+    services: selectedServices,
+    sources: [...new Set(selectedRecords.map(record => path.relative(root, path.join(directory, record.file))))],
+    reasons,
+  };
+}
+
+// Only rules with explicit component ownership are removed. Shared tokens,
+// utilities, native styles and unknown selectors are retained conservatively.
+const cssOwners = {
+  btn: ['Btn', 'Button'], card: ['Card', 'cardHeader', 'cardBody', 'cardFooter'],
+  input: ['Input', 'InputRaw', 'Textarea', 'FormField'], field: ['FormField'],
+  textarea: ['Textarea'], select: ['Select'], search: ['Search'], upload: ['Upload'],
+  icon: ['Icon'], badge: ['Badge'], avatar: ['Avatar'], chip: ['Chip'],
+  list: ['List', 'Item'], item: ['Item'], separator: ['Separator'], tooltip: ['Tooltip'],
+  checkbox: ['Checkbox'], radio: ['Radio'], toggle: ['Toggle'], slider: ['Slider'], rating: ['Rating'],
+  date: ['Date', 'Calendar', 'Datepicker'], calendar: ['Date', 'Calendar'], time: ['Time'],
+  tabs: ['Tabs', 'RouteTab'], tab: ['Tabs', 'RouteTab', 'TabPanel'], breadcrumbs: ['Breadcrumbs'], breadcrumb: ['Breadcrumbs'],
+  pagination: ['Pagination'], spinner: ['Spinner'], progress: ['Progress'], 'loading-bar': ['LoadingBar'],
+  banner: ['Banner'], alert: ['Alert'], table: ['Table'], menu: ['Menu'], popover: ['Popover'],
+  dialog: ['Dialog'], notify: ['Notify'], toast: ['Notify'], loading: ['$Loading'],
+  header: ['Header', 'Layout'], drawer: ['Drawer', 'Layout'], footer: ['Footer', 'Layout'],
+  page: ['Page', 'Layout'], 'app-shell': ['AppShell'], parallax: ['Parallax'],
+  toolbar: ['Toolbar'], grid: ['Grid', 'GridCol'], container: ['Container'], form: ['Form'], kpi: ['Kpi'],
+};
+
+export function selectComponentCSS(css, components, selectedServices = []) {
+  const selected = new Set([...components, ...selectedServices.map(name => `$${name}`)]);
+  const prefixes = Object.keys(cssOwners).sort((a, b) => b.length - a.length);
+  const ast = postcss.parse(css);
+  let removedSelectors = 0;
+  ast.walkRules(rule => {
+    if (rule.parent.type === 'atrule' && /keyframes$/i.test(rule.parent.name)) return;
+    const selectors = postcss.list.comma(rule.selector).filter(selector => {
+      // Functional selector lists can mix owners; preserve them rather than
+      // risk changing :is/:not/:has semantics without a selector AST.
+      if (/:(?:is|where|not|has)\(/.test(selector)) return true;
+      const classes = [...selector.matchAll(/\.jss-([a-zA-Z0-9_-]+)/g)].map(match => match[1]);
+      const omitted = classes.some(name => {
+        const prefix = prefixes.find(prefix => name === prefix || name.startsWith(prefix + '-'));
+        return prefix && !cssOwners[prefix].some(owner => selected.has(owner));
+      });
+      if (omitted) removedSelectors++;
+      return !omitted;
+    });
+    if (selectors.length) rule.selector = selectors.join(',\n');
+    else rule.remove();
+  });
+  ast.walkAtRules(rule => { if (rule.nodes && !rule.nodes.length) rule.remove(); });
+  return { css: ast.toString(), removedSelectors };
+}

package/dist/build/vite-jss.d.mts

@@ -0,0 +1,2 @@
+import type { Plugin } from 'vite';
+export declare function jssRuntime(options?: { config?: string; sourceRoot?: string }): Plugin;

package/dist/build/vite-jss.mjs

@@ -0,0 +1,73 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { validateConfig, extras } from './build-configured-runtime.mjs';
+import { selectUI, selectComponentCSS } from './select-ui.mjs';
+import { runtimeLayout } from './runtime-layout.mjs';
+
+const frameworkRoot = fileURLToPath(new URL('../', import.meta.url));
+const runtimeId = '\0jss:runtime';
+const cssId = '\0jss:selected.css';
+
+export function jssRuntime(options = {}) {
+  const configPath = path.resolve(options.config ?? 'jss.config.js');
+  const sourceRoot = options.sourceRoot ?? frameworkRoot;
+  const layout = runtimeLayout(sourceRoot);
+  let cached;
+  let used = false;
+  const prepare = () => cached ??= (async () => {
+    const config = validateConfig((await import(pathToFileURL(configPath).href + `?mtime=${(await fs.stat(configPath)).mtimeMs}`)).default);
+    const selective = !config.ui.all && (config.ui.components.length || config.ui.services.length);
+    const selection = selective ? await selectUI(sourceRoot, config.ui.components, config.ui.services) : null;
+    return { config, selection };
+  })();
+  return {
+    name: 'jss-configured-runtime',
+    resolveId(id) {
+      if (id === 'jss:runtime') return runtimeId;
+      if (id === 'jss:selected.css') return cssId;
+    },
+    async load(id) {
+      if (![runtimeId, cssId].includes(id)) return;
+      this.addWatchFile(configPath);
+      const { config, selection } = await prepare();
+      const asset = file => path.join(layout.assets, file);
+      if (id === cssId) {
+        const filename = asset('css/ui-components.css');
+        this.addWatchFile(filename);
+        return selectComponentCSS(await fs.readFile(filename, 'utf8'), selection.components, selection.services).css;
+      }
+      used = true;
+      const imports = [`import ${JSON.stringify(layout.core)};`];
+      const css = config.ui.all ? [config.ui.responsive ? 'ui.css' : 'ui-light.css'] : selection ? ['base.css', 'animation.css'] : ['base.css'];
+      for (const file of css) imports.push(`import ${JSON.stringify(asset('css/' + file))};`);
+      if (selection) {
+        imports.push('import "jss:selected.css";');
+        imports.push(`import ${JSON.stringify(asset('css/' + (config.ui.responsive ? 'responsive.css' : 'responsive-base.css')))};`);
+        for (const file of selection.sources) this.addWatchFile(path.join(sourceRoot, file));
+      } else if (config.ui.all) imports.push(`import ${JSON.stringify(asset('ui.js'))};`);
+      for (const extra of config.extras) {
+        if (extras[extra]) imports.push(`import ${JSON.stringify(asset('css/' + extras[extra]))};`);
+        else if (extra === 'tabler') imports.push(`import spriteUrl from ${JSON.stringify(asset('img/svg/tabler-icons-sprite.svg') + '?url')};`);
+      }
+      return imports.join('\n') + '\n' + (selection?.code ?? '') + (config.extras.includes('tabler') ? '\nJSswift.config ||= {}; JSswift.config.iconSpriteUrl = spriteUrl;' : '');
+    },
+    configureServer(server) {
+      server.watcher.add(configPath);
+      const onChange = file => {
+        if (file === configPath || file.startsWith(layout.source + path.sep)) {
+          cached = undefined;
+          void server.restart();
+        }
+      };
+      server.watcher.on('change', onChange);
+      server.httpServer?.once('close', () => server.watcher.off('change', onChange));
+    },
+    watchChange() { cached = undefined; },
+    async generateBundle() {
+      if (!used) return;
+      const { config, selection } = await prepare();
+      this.emitFile({ type: 'asset', fileName: 'jss-build-report.json', source: JSON.stringify({ config, components: selection?.components ?? (config.ui.all ? 'all' : []), services: selection?.services ?? (config.ui.all ? 'all' : []), reasons: selection?.reasons ?? {} }, null, 2) });
+    },
+  };
+}