@table-bro/mcp 0.0.0-stage → 1.2.0

package/dist/generate/angular.js

@@ -0,0 +1,241 @@
+import { cssVariables } from '../spec/css-variables.js';
+import { byColumns, cellCode } from './cells.js';
+import { imports, importsField, indentBlock, literal, quote, raw } from './code.js';
+import { configCode } from './config.js';
+import { BroFiltersCode } from './filters.js';
+import { BroNames } from './names.js';
+import { cssVarsRule, rowTypeCode } from './rows.js';
+import { serviceCode } from './service.js';
+/**
+ * The table for an Angular project: the type of the row, the page component with <table-bro-ng> and its cols, rows and
+ * config, the cells, the filters. The files go in the order a reader needs them.
+ */
+export function angularTable(spec, skin, fillings, tagSuffix = '', extensions = [], simulateServer = false) {
+    const names = BroNames.of(spec, tagSuffix);
+    const folder = names.folder;
+    const config = spec.config ?? {};
+    const server = Boolean(config.server);
+    const filters = new BroFiltersCode(spec, fillings);
+    const hasFilters = filters.filters.length > 0;
+    const specRows = Boolean(spec.rows?.length) && !server;
+    // The page and the server row details load from the simulated server, or from the API of the spec
+    const simulated = server && (simulateServer || Boolean(spec.api));
+    const source = !server ? undefined : spec.api ? (spec.api.paging ? 'api-pages' : 'api') : simulated ? 'simulated' : 'project';
+    const cells = (spec.cells ?? []).map(cell => cellCode(spec, cell, 'angular', fillings.cells?.[cell.name]?.[skin], tagSuffix, simulated));
+    const files = [];
+    const todo = [];
+    for (const cell of byColumns(spec, cells)) {
+        files.push({ path: `${folder}/${cell.file}.ts`, content: cell.content, description: cellDescription(cell) });
+        if (!cell.filled) {
+            todo.push(`${folder}/${cell.file}.ts: write the template of the ${cell.cell.kind === 'details' ? 'row details' : 'cell'}: ${cell.cell.shows}`);
+        }
+    }
+    const conf = configCode(spec, skin, fillings, '    ', tagSuffix, extensions);
+    const cssVars = Object.entries(spec.cssVars ?? {});
+    // The filters matter little to a reader: their component comes after the cells
+    if (hasFilters) {
+        files.push({ path: `${folder}/${names.filtersFile}.ts`, content: filters.angularComponent(skin), description: 'the filters of the drawer: their form, which gives the table its filter.' });
+    }
+    // The changes of the styles close the code: the CSS variables that the table overrides
+    if (cssVars.length) {
+        const tableVars = cssVars.filter(([name]) => cssVariables.find(item => item.name === name)?.target !== 'drawer');
+        // The container of the drawer reads its own variables
+        const drawerVars = hasFilters ? cssVars.filter(([name]) => cssVariables.find(item => item.name === name)?.target !== 'table') : [];
+        const rules = [
+            ...(tableVars.length ? [cssVarsRule(names.tableId, tableVars)] : []),
+            ...(drawerVars.length ? [cssVarsRule(names.drawerId, drawerVars)] : [])
+        ];
+        files.push({
+            path: `${folder}/${names.kebab}-table.css`,
+            content: `/* The CSS variables of the table: global styles, as the table and its drawer read them on their own elements */\n${rules.join('\n\n')}\n`,
+            description: 'the changes of the styles: the CSS variables of the table that override the ones of its skin.'
+        });
+        todo.push(`Add ${folder}/${names.kebab}-table.css to "styles" of angular.json, or import it into the global styles of the application`);
+    }
+    if (!specRows && !server) {
+        todo.push(`${folder}/${names.pageFile}.ts: load the rows and set them with this.rows.set(rows)`);
+    }
+    if (source === 'simulated') {
+        todo.push(`${folder}/${names.serviceFile}.ts: replace the simulated server of loadPage with a request to your API, and map its parameters and its answer`);
+    }
+    else if (source === 'project') {
+        todo.push(`${folder}/${names.serviceFile}.ts: the address of your API in loadPage, and the map of the query of the table to its parameters and of its answer to the rows with their total`);
+    }
+    // The model, the page with the cols, the rows and the config, and the service of a server table come first
+    files.unshift({ path: `${folder}/${names.kebab}.ts`, content: rowTypeCode(spec), description: modelDescription(hasFilters) }, {
+        path: `${folder}/${names.pageFile}.ts`,
+        content: pageCode(spec, skin, cells, filters, conf, specRows, tagSuffix, source),
+        description: `the page of the table. Here are its columns, \`cols\`, its rows, \`rows\`, and its config, \`conf\`${server ? ', with the loading of its pages' : ''}.`
+    }, ...(source
+        ? [{
+                path: `${folder}/${names.serviceFile}.ts`,
+                content: serviceCode(spec, source, hasFilters ? filters : undefined),
+                description: 'the service of the table: it sends the request of a query of the table to the API, and turns its answer into the rows of a page.'
+            }]
+        : []));
+    return { files, todo };
+}
+function pageCode(spec, skin, cells, filters, conf, specRows, tagSuffix, source) {
+    const names = BroNames.of(spec, tagSuffix);
+    const config = spec.config ?? {};
+    const server = Boolean(config.server);
+    const hasFilters = filters.filters.length > 0;
+    const material = (skin === 'mat');
+    const angularCells = cells.filter(cell => cell.angular);
+    const actions = [
+        ...(spec.cells ?? []).filter(cell => cell.kind !== 'details').flatMap(cell => cell.actions ?? []),
+        ...(spec.toolbar?.buttons ?? []).map(button => button.action),
+        ...(spec.toolbar?.menu?.items ?? []).map(item => item.action)
+    ];
+    const detailsButton = spec.cols.some(col => col.component && 'element' in col.component && col.component.element === 'details-button');
+    // The service of a server table sends its requests and maps them: the page delivers the rows to the table
+    const row = spec.rowType;
+    const angularModules = {
+        '@angular/core': ['ChangeDetectionStrategy', 'Component', 'signal', ...((angularCells.length || server) ? ['inject'] : []), ...(angularCells.length ? ['Injector'] : []), ...((hasFilters && !material) ? ['CUSTOM_ELEMENTS_SCHEMA'] : [])],
+        '@angular/elements': angularCells.length ? ['createCustomElement'] : []
+    };
+    const tableBroModules = {
+        ...conf.imports,
+        '@table-bro/core': [...conf.imports['@table-bro/core'], 'type BroCol', ...(actions.length ? ['type BroActionDetail'] : []), ...(server ? ['type BroEmptyState', 'type BroQuery'] : []), ...((hasFilters && !material) ? ['defineTableBroFilterDrawerContainer'] : []), ...(detailsButton ? ['events'] : [])],
+        '@table-bro/angular': [...(server ? ['type BroServerContainer', 'type BroServerPage'] : ['type BroContainer']), ...((hasFilters && material) ? [] : ['TableBroNg'])],
+        '@table-bro/angular-material': [...(conf.imports['@table-bro/angular-material'] ?? []), ...((hasFilters && material) ? ['TableBroFilterDrawerContainerNg'] : [])]
+    };
+    const localModules = {
+        [`./${names.kebab}`]: [`type ${spec.rowType}`, ...(hasFilters ? [`type ${names.filtersType}`] : [])],
+        ...(source ? { [`./${names.serviceFile}`]: [names.serviceClass] } : {}),
+        ...Object.fromEntries(cells.map(cell => [`./${cell.file}`, [cell.className]])),
+        ...(hasFilters ? { [`./${names.filtersFile}`]: [names.filtersClass] } : {})
+    };
+    const componentImports = {
+        ...((hasFilters && material) ? { '@table-bro/angular-material': ['TableBroFilterDrawerContainerNg'] } : { '@table-bro/angular': ['TableBroNg'] }),
+        ...(hasFilters ? { [`./${names.filtersFile}`]: [names.filtersClass] } : {})
+    };
+    const shadows = (config.shadowsEnabled !== false);
+    const inputs = [
+        '[cols]="cols()" [rows]="rows()" [conf]="conf()"',
+        ...(server ? ['[total]="total()" [rowsToAppend]="rowsToAppend()" [failed]="failed()" [emptyState]="emptyState()"'] : []),
+        ...(hasFilters ? ['[filter]="filter()"'] : []),
+        ...(server ? ['(query)="onQueryTable($event)"'] : []),
+        ...(actions.length ? ['(action)="onTableAction($event)"'] : [])
+    ];
+    const element = (tag, attributes) => {
+        const head = `<${tag} ${attributes}`;
+        const pad = ' '.repeat(tag.length + 2);
+        return `${head}\n${inputs.map(line => pad + line).join('\n')}>`;
+    };
+    const tableNg = element('table-bro-ng', `${(shadows && !(hasFilters && material)) ? 'class="bro-table-shadow-container" ' : ''}tableId="${names.tableId}"`);
+    let template;
+    if (hasFilters && material) {
+        template = `${element('table-bro-filter-drawer-container-ng', `id="${names.drawerId}" tableId="${names.tableId}"`)}\n  <${names.filtersSelector} (changeFilter)="filter.set($event)"></${names.filtersSelector}>\n</table-bro-filter-drawer-container-ng>`;
+    }
+    else if (hasFilters) {
+        template = `<table-bro-filter-drawer-container id="${names.drawerId}" skin="${skin}">\n${indentBlock(`${tableNg}</table-bro-ng>`, '  ')}\n\n  <${names.filtersSelector} slot="filters" (changeFilter)="filter.set($event)"></${names.filtersSelector}>\n</table-bro-filter-drawer-container>`;
+    }
+    else {
+        template = `${tableNg}</table-bro-ng>`;
+    }
+    const members = [
+        `  cols = signal<BroCol<${spec.rowType}>[]>(${literal(colsValue(spec, skin, cells), '  ')});`,
+        '',
+        `  rows = signal<${spec.rowType}[] | undefined>(${specRows ? literal(spec.rows, '  ') : 'undefined'});`,
+        '',
+        `  conf = signal<BroConfig<${spec.rowType}>>(${conf.code.replace(/^ {4}/gm, '  ').replace(/\n {2}\}$/, '\n  }')});`
+    ];
+    if (server) {
+        members.push('', '  total = signal<number>(0);', `  rowsToAppend = signal<${spec.rowType}[] | undefined>(undefined);`, '  failed = signal<boolean>(false);', '  /** The state of an empty answer: no rows found for a query with a search or filters, else no data. */', '  emptyState = signal<BroEmptyState | undefined>(undefined);');
+    }
+    if (source) {
+        members.push('', `  private service = inject(${names.serviceClass});`, '  /** The filters and the sort of the rows the table has: another query starts from the first page. */', '  private loadedQuery: string = \'\';', '  /** The last query: an answer to an older one comes late and is left out. */', `  private lastQuery?: BroQuery<${row}>;`);
+    }
+    if (hasFilters) {
+        members.push('', '  /** The filters of the drawer: the table takes them through its input filter. */', `  filter = signal<${names.filtersType} | undefined>(undefined);`);
+    }
+    if (angularCells.length) {
+        members.push('', '  private injector = inject(Injector);');
+    }
+    const constructor = [];
+    if (cells.length) {
+        constructor.push('    this.defineCustomElements();');
+    }
+    if (hasFilters && !material) {
+        constructor.push('    defineTableBroFilterDrawerContainer();');
+    }
+    if (!specRows && !server) {
+        constructor.push('', '    // TODO: load the rows and set them with this.rows.set(rows)');
+    }
+    // The table asks for the next pages and for the first page of other filters; the page asks for its first page
+    if (server) {
+        constructor.push('', `    this.onQueryTable({page: 1, pageSize: ${config.pageSize ?? 5}});`);
+    }
+    // The page starts its table in initTable of BroContainer
+    members.push('', '  constructor() {', '    this.initTable();', '  }', '', '  initTable() {', ...(constructor.length ? constructor.filter((line, index) => line || index) : ['    // The table starts with the rows of the spec: nothing more to start']), '  }');
+    if (source) {
+        members.push('', `  onQueryTable(query: BroQuery<${row}>) {`, '    const queryKey: string = JSON.stringify([query.filter, query.sort]);', '', '    this.lastQuery = query;', '', `    this.service.loadPage(query).then(({rows, total}: BroServerPage<${row}>) => {`, '      if (query !== this.lastQuery) {', '        return;', '      }', '', '      // One batch for one delivery: the rows go with the total of the same answer', '      this.failed.set(false);', '      this.total.set(total);', '      this.emptyState.set(Object.values(query.filter ?? {}).some(value => value !== undefined && value !== null && value !== \'\') ? \'not-found\' : undefined);', '', '      // Other filters or another sort give the first page anew; the next pages of the same query add to it', '      if (queryKey !== this.loadedQuery) {', '        this.loadedQuery = queryKey;', '        this.rows.set(rows);', '      } else {', '        this.rowsToAppend.set(rows);', '      }', '    }, () => {', '      // A failed load shows the failure state of the table', '      if (query === this.lastQuery) {', '        this.failed.set(true);', '      }', '    });', '  }');
+    }
+    if (actions.length) {
+        members.push('', `  onTableAction(event: BroActionDetail<${spec.rowType}>) {`, '    switch (event.action) {', ...[...new Set(actions)].flatMap(action => [`      case ${quote(action)}:`, `        // TODO: ${rowAction(spec, action) ? 'the row is event.data?.row' : 'the action of the toolbar'}`, '        break;']), '    }', '  }');
+    }
+    if (cells.length) {
+        members.push('', '  /** The cells are Custom Elements: the table creates them by their tags, so they are defined before it. */', '  private defineCustomElements() {', `    if (customElements.get(${quote(cells[0].tag)})) {`, '      return;', '    }', '', ...cells.map(cell => cell.angular ? `    customElements.define(${quote(cell.tag)}, createCustomElement(${cell.className}, {injector: this.injector}));` : `    customElements.define(${quote(cell.tag)}, ${cell.className});`), '  }');
+    }
+    return [
+        imports({ ...angularModules, ...tableBroModules, ...localModules }),
+        '',
+        ...conf.preamble.flatMap(declaration => [declaration, '']),
+        '@Component({',
+        `  selector: '${names.pageSelector}',`,
+        `  template: \`\n${indentBlock(template, '    ')}\`,`,
+        '  changeDetection: ChangeDetectionStrategy.OnPush,',
+        ...((hasFilters && !material) ? ['  // <table-bro-filter-drawer-container> is an element of table-bro', '  schemas: [CUSTOM_ELEMENTS_SCHEMA],'] : []),
+        importsField(componentImports),
+        '})',
+        `export class ${names.pageClass} implements ${source ? `BroServerContainer<${row}>` : `BroContainer<${row}>`} {`,
+        ...members,
+        '}',
+        ''
+    ].join('\n');
+}
+/** The columns of the API: an own cell by its tag, a ready element by the tag of the skin. */
+export function colsValue(spec, skin, cells) {
+    const fields = new Map(spec.fields.map(field => [field.name, field]));
+    return spec.cols.map(col => {
+        const field = col.name ? fields.get(col.name) : undefined;
+        const dataType = col.dataType ?? ((field?.type === 'number' || field?.type === 'boolean') ? field.type : undefined);
+        let component;
+        if (col.component && 'cell' in col.component) {
+            const name = col.component.cell;
+            const cell = cells.find(item => item.cell.name === name);
+            component = { selector: cell.tag, event: cell.cell.actions?.length ? 'action' : undefined };
+        }
+        else if (col.component) {
+            component = elementComponent(col.component.element, skin, col.name);
+        }
+        // Numbers stand at the right edge of their column, as in the tables of Material
+        const className = (dataType === 'number') ? 'bro-col_text-right' : undefined;
+        return { title: col.title, tooltip: col.tooltip, name: col.name, className, dataType, sortKey: col.sortKey, component };
+    });
+}
+/** A ready element of the skins: its tag depends on the skin. */
+function elementComponent(element, skin, name) {
+    switch (element) {
+        case 'tags':
+            return { selector: `bro-${skin}-tags` };
+        case 'switch':
+            // The switch of the bs and nv skins takes its value from the attribute checked
+            return { selector: (skin === 'mat') ? 'bro-mat-slide-toggle' : 'bro-switch', attrs: { checked: raw(`(_col, row) => row.${name}`) } };
+        default:
+            // The table opens the row details on the action bro-details-toggle of the button
+            return { selector: 'bro-details-button', attrs: { title: 'Details', name: raw('events.detailsToggleEvent') }, event: 'action' };
+    }
+}
+function rowAction(spec, action) {
+    return (spec.cells ?? []).some(cell => cell.actions?.includes(action));
+}
+/** The line about the model: the type of a row, and of the filters of the drawer. */
+export function modelDescription(hasFilters) {
+    return `the model: the type of a row${hasFilters ? ' and of the filters of the drawer' : ''}.`;
+}
+/** The line about a cell: what it shows, or the row details. */
+export function cellDescription(cell) {
+    return (cell.cell.kind === 'details') ? `the row details: ${cell.cell.shows}.` : `a cell: ${cell.cell.shows}.`;
+}

package/dist/generate/cells.d.ts

@@ -0,0 +1,22 @@
+import type { BroSpecCell, BroTableSpec } from '../spec/spec.js';
+import { type BroCellFilling } from './fillings.js';
+import type { BroTarget } from './setup.js';
+export interface BroCellCode {
+    cell: BroSpecCell;
+    /** The file from the folder of the page, without the extension. */
+    file: string;
+    className: string;
+    tag: string;
+    /** An Angular component, registered with createCustomElement, or a Custom Element in Vanilla JS. */
+    angular: boolean;
+    content: string;
+    /** The cell has its filling; without it the scaffold has a TODO in place of the template. */
+    filled: boolean;
+}
+/** The cells in the order a reader meets them: by their first columns, then the row details. */
+export declare function byColumns(spec: BroTableSpec, cells: BroCellCode[]): BroCellCode[];
+/**
+ * The scaffold of a cell or of the row details with its filling: an Angular component in an Angular project, with the
+ * markup of the skin in its template, and a Custom Element in Vanilla JS for a page without a framework.
+ */
+export declare function cellCode(spec: BroTableSpec, cell: BroSpecCell, target: BroTarget, filling?: BroCellFilling, tagSuffix?: string, simulated?: boolean): BroCellCode;

package/dist/generate/cells.js

@@ -0,0 +1,157 @@
+import { htmlComment, imports, importsField, indentBlock, lineComment, templateText } from './code.js';
+import { angularClasses, templateClasses } from './fillings.js';
+import { BroNames } from './names.js';
+/** The cells in the order a reader meets them: by their first columns, then the row details. */
+export function byColumns(spec, cells) {
+    const column = (code) => {
+        const index = spec.cols.findIndex(col => col.component && 'cell' in col.component && col.component.cell === code.cell.name);
+        return (code.cell.kind === 'details' || index < 0) ? spec.cols.length : index;
+    };
+    return [...cells].sort((a, b) => column(a) - column(b));
+}
+/**
+ * The scaffold of a cell or of the row details with its filling: an Angular component in an Angular project, with the
+ * markup of the skin in its template, and a Custom Element in Vanilla JS for a page without a framework.
+ */
+export function cellCode(spec, cell, target, filling, tagSuffix = '', simulated = false) {
+    const names = BroNames.of(spec, tagSuffix);
+    const angular = (target === 'angular');
+    const code = {
+        cell,
+        file: names.cellFile(cell.name),
+        className: names.cellClass(cell.name),
+        tag: names.tag(cell.name),
+        angular,
+        content: '',
+        filled: angular ? Boolean(filling?.template) : Boolean(filling?.render)
+    };
+    code.content = angular ? angularCell(spec, code, filling, simulated) : vanillaCell(spec, code, filling);
+    return code;
+}
+function angularCell(spec, code, filling, simulated) {
+    const { cell } = code;
+    const details = (cell.kind === 'details');
+    const server = details && Boolean(spec.config?.rowDetailsServer);
+    const actions = !details && Boolean(cell.actions?.length);
+    const angularModules = {
+        '@angular/core': ['ChangeDetectionStrategy', 'Component', 'Input', ...((actions || server) ? ['EventEmitter', 'Output'] : []), ...((server && simulated) ? ['type OnInit'] : [])]
+    };
+    const localModules = {
+        [`./${BroNames.of(spec).kebab}`]: [`type ${spec.rowType}`]
+    };
+    // The classes of the template by their modules, for the field imports of the component
+    const classes = {};
+    const template = filling?.template?.trim() || `<!-- TODO: ${htmlComment(cell.shows)}; the fields of the row: ${cell.fields.join(', ')} -->`;
+    const imported = [
+        ...templateClasses(template).map(name => ({ name, from: angularClasses[name] })),
+        ...(filling?.imports ?? []).map(item => (typeof item === 'string') ? { name: item, from: angularClasses[item] } : item)
+    ];
+    for (const { name, from } of imported) {
+        const modules = from.startsWith('.') ? localModules : angularModules;
+        if (!Object.values(classes).flat().includes(name)) {
+            (modules[from] ??= []).push(name);
+            (classes[from] ??= []).push(name);
+        }
+    }
+    const decorator = [
+        `  template: \`\n${indentBlock(templateText(template), '      ')}\`,`,
+        ...(filling?.styles?.trim() ? [`  styles: \`\n${indentBlock(templateText(filling.styles.trim()), '      ')}\`,`] : []),
+        `  changeDetection: ChangeDetectionStrategy.OnPush${Object.keys(classes).length ? ',' : ''}`,
+        ...(Object.keys(classes).length ? [importsField(classes)] : [])
+    ];
+    const members = details
+        ? [
+            `  @Input() row!: ${spec.rowType};`,
+            ...(server
+                ? [
+                    '',
+                    '  /** Set for the details that load from the server: emit loaded with the loaded part, 1 at the end. */',
+                    '  @Input() server?: string;',
+                    '',
+                    '  @Output(events.detailsServerLoadedEvent) loaded: EventEmitter<number> = new EventEmitter<number>();',
+                    ...(simulated
+                        ? [
+                            '',
+                            '  /** The simulated server gives the details in a second: your request for them takes its place. */',
+                            '  ngOnInit() {',
+                            '    if (this.server) {',
+                            '      setTimeout(() => this.loaded.emit(1), 1000);',
+                            '    }',
+                            '  }'
+                        ]
+                        : [])
+                ]
+                : [])
+        ]
+        : [
+            `  @Input() col!: BroCol<${spec.rowType}>;`,
+            `  @Input() row!: ${spec.rowType};`,
+            ...(actions ? ['', '  @Output() action: EventEmitter<string> = new EventEmitter<string>();'] : [])
+        ];
+    if (filling?.members?.trim()) {
+        members.push('', indentBlock(filling.members.trim(), '  '));
+    }
+    return [
+        imports({
+            ...angularModules,
+            '@table-bro/core': details ? ['type BroRowDetailsElement', ...(server ? ['events'] : [])] : ['type BroCellElement', 'type BroCol'],
+            ...localModules
+        }),
+        '',
+        '@Component({',
+        ...decorator,
+        '})',
+        `export class ${code.className} implements ${details ? 'BroRowDetailsElement' : 'BroCellElement'}<${spec.rowType}>${(server && simulated) ? ', OnInit' : ''} {`,
+        ...members,
+        '}',
+        ''
+    ].join('\n');
+}
+function vanillaCell(spec, code, filling) {
+    const { cell } = code;
+    const details = (cell.kind === 'details');
+    const server = details && Boolean(spec.config?.rowDetailsServer);
+    const actions = !details && Boolean(cell.actions?.length);
+    const render = filling?.render?.trim() || `// TODO: ${lineComment(cell.shows)}; the fields of the row: ${cell.fields.join(', ')}. Values go in with textContent`;
+    const body = [
+        ...(details ? [`  row?: ${spec.rowType};`] : [`  col?: BroCol<${spec.rowType}>;`, `  row?: ${spec.rowType};`]),
+        '',
+        '  /** A move in the DOM connects the element again; it keeps its markup. */',
+        '  private built: boolean = false;',
+        '',
+        '  connectedCallback(): void {',
+        '    if (this.built) {',
+        '      return;',
+        '    }',
+        '',
+        '    this.built = true;',
+        '',
+        '    this.render();',
+        '  }',
+        '',
+        '  private render(): void {',
+        indentBlock(render, '    '),
+        '  }'
+    ];
+    if (actions) {
+        body.push('', '  /** Sends an action of the cell: the table gives it to the page with the column and the row. */', '  private sendAction(action: string): void {', '    this.dispatchEvent(new CustomEvent(\'action\', {detail: action}));', '  }');
+    }
+    if (server) {
+        body.push('', '  /** For the details that load from the server (the attribute server): the loaded part, 1 at the end. */', '  private reportLoaded(part: number): void {', '    this.dispatchEvent(new CustomEvent(events.detailsServerLoadedEvent, {detail: part}));', '  }');
+    }
+    if (filling?.members?.trim()) {
+        body.push('', indentBlock(filling.members.trim(), '  '));
+    }
+    return [
+        imports({
+            '@table-bro/core': server ? ['events'] : [],
+            'type @table-bro/core': details ? ['BroRowDetailsElement'] : ['BroCellElement', 'BroCol'],
+            [`type ./${BroNames.of(spec).kebab}`]: [spec.rowType]
+        }),
+        '',
+        `export class ${code.className} extends HTMLElement implements ${details ? 'BroRowDetailsElement' : 'BroCellElement'}<${spec.rowType}> {`,
+        ...body,
+        '}',
+        ''
+    ].join('\n');
+}

package/dist/generate/code.d.ts

@@ -0,0 +1,48 @@
+/** Code to print as it is inside a literal, as a function in a config. */
+export declare class BroRawCode {
+    readonly code: string;
+    constructor(code: string);
+}
+export declare function raw(code: string): BroRawCode;
+/**
+ * Prints a value as a TypeScript literal in the style of the code of Table, Bro: single quotes, an object with one field
+ * on a line, objects of an array joined with "}, {", no trailing commas. Undefined fields are left out.
+ */
+export declare function literal(value: unknown, indent?: string): string;
+/**
+ * A key of an object literal in the style of the code of Table, Bro: a key in camelCase without quotes, any other in quotes.
+ * @param key - the name of the key
+ */
+export declare function objectKey(key: string): string;
+/** A string literal: the line terminators of JavaScript would end it, so they go in as escapes. */
+export declare function quote(value: string): string;
+/** A text of the spec for a comment of one line: a line break would end the comment, and the rest would be code. */
+export declare function lineComment(value: string): string;
+/** A text of the spec for a block comment of one line: its end, the star and the slash, would make the rest code. */
+export declare function blockComment(value: string): string;
+/** A text of the spec for an HTML comment: two hyphens could end it, and the rest would be markup. */
+export declare function htmlComment(value: string): string;
+/** A text for a template literal: the backticks and the placeholders of the text stay text. */
+export declare function templateText(value: string): string;
+/** Moves the lines after the first one by the indent: a block of code inside other code. */
+export declare function reindent(code: string, indent: string): string;
+/** Indents every non-empty line of a block. */
+export declare function indentBlock(code: string, indent: string): string;
+export declare function escapeHtml(value: string): string;
+/** A text for an Angular template: also its interpolation and its blocks stay text. */
+export declare function escapeTemplate(value: string): string;
+/**
+ * Import lines grouped as in the code of Table, Bro: a block per group of the modules, the "from" of a block aligned,
+ * the lines of a block sorted by module, one line per module. A name with the prefix "type " is a type: import type
+ * {...} when the module gives only types, an inline type next to the values otherwise, as verbatimModuleSyntax takes
+ * them. A module with the prefix "type " gives only types.
+ * @param modules - the names to import by their modules
+ */
+export declare function imports(modules: Record<string, string[]>): string;
+/**
+ * The field imports of an Angular decorator as in the code of Table, Bro: one entry per line, in the groups of the
+ * imports between blank lines, each group sorted by name.
+ * @param modules - the classes of the field by their modules
+ */
+export declare function importsField(modules: Record<string, string[]>): string;
+export declare function isPlainObject(value: unknown): value is Record<string, unknown>;

package/dist/generate/code.js

@@ -0,0 +1,153 @@
+/** Code to print as it is inside a literal, as a function in a config. */
+export class BroRawCode {
+    code;
+    constructor(code) {
+        this.code = code;
+    }
+}
+export function raw(code) {
+    return new BroRawCode(code);
+}
+/**
+ * Prints a value as a TypeScript literal in the style of the code of Table, Bro: single quotes, an object with one field
+ * on a line, objects of an array joined with "}, {", no trailing commas. Undefined fields are left out.
+ */
+export function literal(value, indent = '') {
+    const inner = indent + '  ';
+    if (value instanceof BroRawCode) {
+        return reindent(value.code, indent);
+    }
+    if (typeof value === 'string') {
+        return quote(value);
+    }
+    if (Array.isArray(value)) {
+        if (!value.length) {
+            return '[]';
+        }
+        if (value.every(item => item === null || typeof item !== 'object')) {
+            return `[${value.map(item => literal(item)).join(', ')}]`;
+        }
+        if (value.every(item => isPlainObject(item))) {
+            return `[\n${inner}${value.map(item => literal(item, inner)).join(', ')}\n${indent}]`;
+        }
+        return `[\n${value.map(item => inner + literal(item, inner)).join(',\n')}\n${indent}]`;
+    }
+    if (isPlainObject(value)) {
+        const entries = Object.entries(value).filter(([, item]) => item !== undefined);
+        if (!entries.length) {
+            return '{}';
+        }
+        return `{\n${entries.map(([key, item]) => `${inner}${objectKey(key)}: ${literal(item, inner)}`).join(',\n')}\n${indent}}`;
+    }
+    return String(value);
+}
+/**
+ * A key of an object literal in the style of the code of Table, Bro: a key in camelCase without quotes, any other in quotes.
+ * @param key - the name of the key
+ */
+export function objectKey(key) {
+    return /^[a-z][a-zA-Z0-9]*$/.test(key) ? key : quote(key);
+}
+/** A string literal: the line terminators of JavaScript would end it, so they go in as escapes. */
+export function quote(value) {
+    return `'${value.replace(/[\\'\n\r\u2028\u2029]/g, char => stringEscapes[char])}'`;
+}
+const stringEscapes = { '\\': '\\\\', '\'': '\\\'', '\n': '\\n', '\r': '\\r', '\u2028': '\\u2028', '\u2029': '\\u2029' };
+/** A text of the spec for a comment of one line: a line break would end the comment, and the rest would be code. */
+export function lineComment(value) {
+    return value.replace(/[\n\r\u2028\u2029]+/g, ' ');
+}
+/** A text of the spec for a block comment of one line: its end, the star and the slash, would make the rest code. */
+export function blockComment(value) {
+    return lineComment(value).replace(/\*\//g, '*\\/');
+}
+/** A text of the spec for an HTML comment: two hyphens could end it, and the rest would be markup. */
+export function htmlComment(value) {
+    return lineComment(value).replace(/-(?=-)/g, '- ');
+}
+/** A text for a template literal: the backticks and the placeholders of the text stay text. */
+export function templateText(value) {
+    return value.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+/** Moves the lines after the first one by the indent: a block of code inside other code. */
+export function reindent(code, indent) {
+    return code.split('\n').map((line, index) => (index && line) ? indent + line : line).join('\n');
+}
+/** Indents every non-empty line of a block. */
+export function indentBlock(code, indent) {
+    return code.split('\n').map(line => line ? indent + line : line).join('\n');
+}
+export function escapeHtml(value) {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+/** A text for an Angular template: also its interpolation and its blocks stay text. */
+export function escapeTemplate(value) {
+    return escapeHtml(value).replace(/\{/g, '&#123;').replace(/\}/g, '&#125;').replace(/@/g, '&#64;');
+}
+/**
+ * Import lines grouped as in the code of Table, Bro: a block per group of the modules, the "from" of a block aligned,
+ * the lines of a block sorted by module, one line per module. A name with the prefix "type " is a type: import type
+ * {...} when the module gives only types, an inline type next to the values otherwise, as verbatimModuleSyntax takes
+ * them. A module with the prefix "type " gives only types.
+ * @param modules - the names to import by their modules
+ */
+export function imports(modules) {
+    const groups = [[], [], [], []];
+    const merged = new Map();
+    Object.entries(modules).forEach(([key, names]) => {
+        const module = key.replace(/^type /, '');
+        const kinds = merged.get(module) ?? new Map();
+        names.forEach(entry => {
+            const name = entry.replace(/^type /, '');
+            const type = key.startsWith('type ') || entry.startsWith('type ');
+            kinds.set(name, (kinds.get(name) ?? true) && type);
+        });
+        merged.set(module, kinds);
+    });
+    [...merged.entries()]
+        .filter(([, kinds]) => kinds.size)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .forEach(([module, kinds]) => {
+        const types = [...kinds.values()].every(Boolean);
+        const list = [...kinds.keys()].sort(byName).map(name => (kinds.get(name) && !types) ? `type ${name}` : name).join(', ');
+        groups[importGroup(module)].push([`import ${types ? 'type ' : ''}{${list}}`, `from '${module}';`]);
+    });
+    return groups
+        .filter(lines => lines.length)
+        .map(lines => {
+        const width = Math.max(...lines.map(([head]) => head.length));
+        return lines.map(([head, tail]) => `${head.padEnd(width)} ${tail}`).join('\n');
+    })
+        .join('\n\n');
+}
+/**
+ * The field imports of an Angular decorator as in the code of Table, Bro: one entry per line, in the groups of the
+ * imports between blank lines, each group sorted by name.
+ * @param modules - the classes of the field by their modules
+ */
+export function importsField(modules) {
+    const groups = [[], [], [], []];
+    Object.entries(modules).forEach(([module, names]) => groups[importGroup(module)].push(...names));
+    return `  imports: [\n${groups.filter(names => names.length).map(names => [...new Set(names)].sort((a, b) => a.localeCompare(b, 'en')).map(name => `    ${name}`).join(',\n')).join(',\n\n')}\n  ]`;
+}
+/**
+ * The group of a module among the imports, as the ESLint settings of Table, Bro order them: 0 Angular, 1 the UI
+ * libraries, Angular Material and Table, Bro among them, 2 other libraries, 3 the application.
+ * @param module - the module of an import
+ */
+function importGroup(module) {
+    if (module.startsWith('.')) {
+        return 3;
+    }
+    if (/^@angular\/(?!material(\/|$)|cdk(\/|$))/.test(module)) {
+        return 0;
+    }
+    return /^(@angular\/(material|cdk)(\/|$)|bootstrap$|@table-bro(-extended)?\/)/.test(module) ? 1 : 2;
+}
+/** The order of the names in an import: case-insensitive, as in the code of Table, Bro. */
+function byName(a, b) {
+    return a.toLowerCase().localeCompare(b.toLowerCase()) || a.localeCompare(b);
+}
+export function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof BroRawCode);
+}

package/dist/generate/config.d.ts

@@ -0,0 +1,16 @@
+import type { BroMcpExtension } from '../extension.js';
+import type { BroSpecSkin, BroTableSpec } from '../spec/spec.js';
+import type { BroSpecFillings } from './fillings.js';
+export interface BroConfigCode {
+    /** The config as a literal. */
+    code: string;
+    /** Declarations before the config, as the short titles of shortColumnTitle. */
+    preamble: string[];
+    /** The names the config imports, by module; a type with the prefix "type ", as imports() takes it. */
+    imports: Record<string, string[]>;
+}
+/**
+ * The config of the table from the spec: the functions and the settings of the skin come from the data of the spec,
+ * only the bodies of the callbacks and of the custom rules from a model.
+ */
+export declare function configCode(spec: BroTableSpec, skin: BroSpecSkin, fillings: BroSpecFillings, indent: string, tagSuffix?: string, extensions?: BroMcpExtension[]): BroConfigCode;