@adecore/database 0.0.1 → 0.16.0-beta.0

package/src/ddl/parse.ts

@@ -0,0 +1,161 @@
+import type { TableStructure } from '../protocol/index.ts';
+
+const CLOSERS: Readonly<Record<string, string>> = { "'": "'", '"': '"', '`': '`', '[': ']' };
+
+interface Spot {
+    readonly index: number;
+    readonly char: string;
+    /* The number of parentheses open around it; a parenthesis counts for the level it sits in. */
+    readonly depth: number;
+}
+
+/* The characters of SQL that are not inside a quote, for a scan that has to ignore a comma in a default or a comment. */
+function* unquoted(text: string, backslash: boolean): Generator<Spot> {
+    let depth = 0;
+    let closer: string | null = null;
+    for (let i = 0; i < text.length; i++) {
+        const char = text[i]!;
+        if (closer !== null) {
+            if (backslash && char === '\\' && closer === "'") {
+                i++;
+            } else if (char === closer) {
+                if (closer !== ']' && text[i + 1] === closer) {
+                    i++;
+                } else {
+                    closer = null;
+                }
+            }
+            continue;
+        }
+        if (char in CLOSERS) {
+            closer = CLOSERS[char]!;
+            continue;
+        }
+        if (char === ')') {
+            depth--;
+        }
+        yield { index: i, char, depth };
+        if (char === '(') {
+            depth++;
+        }
+    }
+}
+
+export interface Definition {
+    /* The column and constraint definitions, each as written. */
+    readonly items: readonly string[];
+    /* What follows the closing parenthesis: the table options. */
+    readonly tail: string;
+}
+
+/* Splits a `CREATE TABLE` into its definitions and its table options, or `null` when it holds no parenthesis. */
+export const definitionOf = (ddl: string | null): Definition | null => {
+    if (ddl === null) {
+        return null;
+    }
+    // Only a MySQL statement reads a backslash as an escape, and only a MySQL statement quotes with backticks.
+    const backslash = ddl.includes('`');
+    let open = -1;
+    let close = -1;
+    const commas: number[] = [];
+    for (const { index, char, depth } of unquoted(ddl, backslash)) {
+        if (open < 0) {
+            if (char === '(' && depth === 0) {
+                open = index;
+            }
+        } else if (close < 0) {
+            if (char === ')' && depth === 0) {
+                close = index;
+            } else if (char === ',' && depth === 1) {
+                commas.push(index);
+            }
+        }
+    }
+    if (open < 0 || close < 0) {
+        return null;
+    }
+    const bounds = [open, ...commas, close];
+    return {
+        items: bounds.slice(1).map((end, at) => ddl.slice(bounds[at]! + 1, end).trim()),
+        tail: ddl.slice(close + 1)
+    };
+};
+
+/* The name a definition starts with, unquoted. */
+const leadingName = (item: string): string | null => {
+    const mark = item[0];
+    if (mark === '`' || mark === '"') {
+        const end = item.indexOf(mark, 1);
+        return end < 0 ? null : item.slice(1, end).replaceAll(mark + mark, mark);
+    }
+    if (mark === '[') {
+        const end = item.indexOf(']');
+        return end < 0 ? null : item.slice(1, end);
+    }
+    return /^[^\s(]+/.exec(item)?.[0] ?? null;
+};
+
+const AS_OPEN = /\b(?:GENERATED\s+ALWAYS\s+)?AS\s*\(/i;
+const AS_SUFFIX = /^\s*(?:VIRTUAL|STORED|PERSISTENT)\b/i;
+
+/* The `GENERATED ALWAYS AS (...) STORED` clause of a column definition, or `null` when it has none. */
+const generatedClauseOf = (item: string): string | null => {
+    // A default or a comment may hold the words, so the strings are blanked before the search.
+    const masked = item.replace(/'(?:[^']|'')*'/g, (text) => ' '.repeat(text.length));
+    const start = AS_OPEN.exec(masked);
+    if (start === null) {
+        return null;
+    }
+    const open = start.index + start[0].length - 1;
+    let end = -1;
+    for (const { index, char, depth } of unquoted(masked.slice(open), false)) {
+        if (char === ')' && depth === 0) {
+            end = open + index + 1;
+            break;
+        }
+    }
+    if (end < 0) {
+        return null;
+    }
+    const suffix = AS_SUFFIX.exec(masked.slice(end));
+    return item.slice(start.index, end + (suffix?.[0].length ?? 0)).trim();
+};
+
+/* The generated clause of every generated column in a table's DDL, by column name. */
+export const generatedClausesOf = (ddl: string | null): ReadonlyMap<string, string> => {
+    const clauses = new Map<string, string>();
+    for (const item of definitionOf(ddl)?.items ?? []) {
+        const name = leadingName(item);
+        const clause = name === null ? null : generatedClauseOf(item);
+        if (name !== null && clause !== null) {
+            clauses.set(name, clause);
+        }
+    }
+    return clauses;
+};
+
+/* What the options of a table say, in the terms of both engines; the ones an engine has no word for stay empty. */
+export interface TableOptions {
+    readonly engine: string;
+    readonly charset: string;
+    readonly collation: string;
+    readonly comment: string;
+    readonly withoutRowid: boolean;
+    readonly strict: boolean;
+}
+
+export const NO_OPTIONS: TableOptions = { engine: '', charset: '', collation: '', comment: '', withoutRowid: false, strict: false };
+
+export const optionsOf = (structure: Pick<TableStructure, 'ddl'>): TableOptions => {
+    const tail = definitionOf(structure.ddl)?.tail ?? '';
+    const word = (pattern: RegExp): string => pattern.exec(tail)?.[1] ?? '';
+    const comment = /\bCOMMENT\s*=?\s*'((?:[^'\\]|''|\\.)*)'/i.exec(tail)?.[1] ?? '';
+    return {
+        engine: word(/\bENGINE\s*=\s*(\w+)/i),
+        charset: word(/\b(?:DEFAULT\s+)?(?:CHARSET|CHARACTER\s+SET)\s*=?\s*(\w+)/i),
+        collation: word(/\bCOLLATE\s*=?\s*(\w+)/i),
+        comment: comment.replaceAll("''", "'").replace(/\\(.)/g, '$1'),
+        withoutRowid: /\bWITHOUT\s+ROWID\b/i.test(tail),
+        strict: /\bSTRICT\b/i.test(tail)
+    };
+};

package/src/ddl/statements.ts

@@ -0,0 +1,20 @@
+import { quote, sqliteSchemaPrefix, tableName, type Dialect } from './dialect.ts';
+
+export const dropTableSql = (dialect: Dialect, schema: string, table: string): string => `DROP TABLE ${tableName(dialect, schema, table)}`;
+
+export const dropViewSql = (dialect: Dialect, schema: string, view: string): string => `DROP VIEW ${tableName(dialect, schema, view)}`;
+
+/* SQLite has no `TRUNCATE`; deleting every row is what it does instead. */
+export const truncateTableSql = (dialect: Dialect, schema: string, table: string): string =>
+    dialect.engine === 'sqlite' ? `DELETE FROM ${tableName(dialect, schema, table)}` : `TRUNCATE TABLE ${tableName(dialect, schema, table)}`;
+
+export const renameTableSql = (dialect: Dialect, schema: string, from: string, to: string): string =>
+    dialect.engine === 'sqlite'
+        ? `ALTER TABLE ${tableName(dialect, schema, from)} RENAME TO ${quote(dialect, to)}`
+        : `RENAME TABLE ${tableName(dialect, schema, from)} TO ${tableName(dialect, schema, to)}`;
+
+/* MySQL drops an index from the table it is on; SQLite names it alone, in its schema. */
+export const dropIndexSql = (dialect: Dialect, schema: string, table: string, index: string): string =>
+    dialect.engine === 'sqlite'
+        ? `DROP INDEX ${sqliteSchemaPrefix(dialect, schema)}${quote(dialect, index)}`
+        : `DROP INDEX ${quote(dialect, index)} ON ${tableName(dialect, schema, table)}`;

package/src/ddl/types.ts

@@ -0,0 +1,60 @@
+import type { Dialect } from './dialect.ts';
+
+const SQLITE_TYPES = ['INTEGER', 'TEXT', 'REAL', 'BLOB', 'NUMERIC'] as const;
+
+const MYSQL_TYPES = [
+    'tinyint',
+    'smallint',
+    'mediumint',
+    'int',
+    'bigint',
+    'bigint unsigned',
+    'decimal(10,2)',
+    'float',
+    'double',
+    'bit(1)',
+    'char(36)',
+    'varchar(255)',
+    'varchar(64)',
+    'tinytext',
+    'text',
+    'mediumtext',
+    'longtext',
+    'binary(16)',
+    'varbinary(255)',
+    'tinyblob',
+    'blob',
+    'mediumblob',
+    'longblob',
+    'date',
+    'time',
+    'datetime',
+    'datetime(6)',
+    'timestamp',
+    'timestamp(6)',
+    'year',
+    'json',
+    "enum('a','b')",
+    "set('a','b')"
+] as const;
+
+/* The types a type field offers; any other text is still allowed, since both engines accept more than a list holds. */
+export const typeSuggestionsOf = (dialect: Dialect): readonly string[] => (dialect.engine === 'sqlite' ? SQLITE_TYPES : MYSQL_TYPES);
+
+export const MYSQL_ENGINES = ['InnoDB', 'MyISAM', 'MEMORY', 'ARCHIVE', 'CSV'] as const;
+
+export const MYSQL_CHARSETS = ['utf8mb4', 'utf8mb3', 'latin1', 'ascii', 'binary'] as const;
+
+/* Collations to offer for a character set, which is the family it is named after. */
+export const collationSuggestionsOf = (charset: string): readonly string[] => {
+    if (charset === '') {
+        return [];
+    }
+    if (charset === 'binary') {
+        return ['binary'];
+    }
+    const suggestions = [`${charset}_general_ci`, `${charset}_unicode_ci`, `${charset}_bin`];
+    return charset === 'utf8mb4' ? ['utf8mb4_0900_ai_ci', 'utf8mb4_unicode_520_ci', ...suggestions] : suggestions;
+};
+
+export const FOREIGN_KEY_ACTIONS = ['CASCADE', 'SET NULL', 'RESTRICT', 'NO ACTION', 'SET DEFAULT'] as const;

package/src/ddl/validate.ts

@@ -0,0 +1,47 @@
+import type { Dialect } from './dialect.ts';
+import type { TableDraft } from './draft.ts';
+
+/* What stops a draft from becoming SQL. `subject` names the item it is about, empty for the table itself. */
+export interface DraftProblem {
+    readonly code: 'tableName' | 'noColumns' | 'columnName' | 'columnDuplicate' | 'columnType' | 'indexName' | 'indexColumns' | 'foreignKey';
+    readonly subject: string;
+}
+
+export const validateDraft = (dialect: Dialect, draft: TableDraft): DraftProblem[] => {
+    const problems: DraftProblem[] = [];
+    if (draft.name.trim() === '') {
+        problems.push({ code: 'tableName', subject: '' });
+    }
+    if (draft.columns.length === 0) {
+        problems.push({ code: 'noColumns', subject: '' });
+    }
+    const seen = new Set<string>();
+    for (const column of draft.columns) {
+        const folded = column.name.toLowerCase();
+        if (column.name.trim() === '') {
+            problems.push({ code: 'columnName', subject: '' });
+        } else if (seen.has(folded)) {
+            problems.push({ code: 'columnDuplicate', subject: column.name });
+        }
+        seen.add(folded);
+        if (dialect.engine === 'mysql' && column.type.trim() === '' && column.name.trim() !== '') {
+            problems.push({ code: 'columnType', subject: column.name });
+        }
+    }
+    for (const index of draft.indexes) {
+        if (index.columns.length === 0) {
+            problems.push({ code: 'indexColumns', subject: index.name });
+        }
+        if (dialect.engine === 'sqlite' && index.name.trim() === '') {
+            problems.push({ code: 'indexName', subject: '' });
+        }
+    }
+    for (const foreignKey of draft.foreignKeys) {
+        const complete =
+            foreignKey.columns.length > 0 && foreignKey.referencedTable !== '' && foreignKey.referencedColumns.length === foreignKey.columns.length;
+        if (!complete) {
+            problems.push({ code: 'foreignKey', subject: foreignKey.name });
+        }
+    }
+    return problems;
+};

package/src/designer/ColumnsEditor.tsx

@@ -0,0 +1,204 @@
+import { useId } from 'react';
+import clsx from 'clsx';
+import { ArrowDown, ArrowUp, KeyRound, Plus, Trash2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, EmptyState, Icon, IconButton, Input, Pill } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { typeSuggestionsOf } from '../ddl/index.ts';
+import type { EditorProps } from './editor-props.ts';
+import { addColumn, moveColumn, patchColumn, removeColumn, togglePrimaryKey } from './edit.ts';
+
+const TH = 'sticky top-0 z-10 h-7 bg-surface px-2 text-left text-xs font-medium whitespace-nowrap text-text-faint';
+const TD = 'border-t border-border-soft px-2 py-1 align-middle';
+
+/* The columns of the table as rows to edit: name, type, null, default, key, comment and where each one sits. */
+export function ColumnsEditor({ draft, dialect, disabled, onChange, className, ref }: EditorProps) {
+    const { t } = useTranslation('database');
+    const listId = useId();
+    const mysql = dialect.engine === 'mysql';
+    const defaultType = typeSuggestionsOf(dialect)[0]!;
+    return (
+        <div ref={ref} className={clsx('flex min-h-0 flex-col', className)}>
+            {draft.columns.length === 0 ? (
+                <EmptyState>{t('designer.columns.empty')}</EmptyState>
+            ) : (
+                <div>
+                    <datalist id={listId}>
+                        {typeSuggestionsOf(dialect).map((type) => (
+                            <option key={type} value={type} />
+                        ))}
+                    </datalist>
+                    <table className="w-full border-collapse">
+                        <thead>
+                            <tr>
+                                <th scope="col" className={TH}>
+                                    <span className="sr-only">{t('designer.columns.order')}</span>
+                                </th>
+                                <th scope="col" className={TH}>
+                                    {t('designer.columns.name')}
+                                </th>
+                                <th scope="col" className={TH}>
+                                    {t('designer.columns.type')}
+                                </th>
+                                <th scope="col" className={clsx(TH, 'text-center')}>
+                                    {t('designer.columns.notNull')}
+                                </th>
+                                <th scope="col" className={TH}>
+                                    {t('designer.columns.default')}
+                                </th>
+                                {mysql && (
+                                    <th scope="col" className={clsx(TH, 'text-center')}>
+                                        {t('designer.columns.autoIncrement')}
+                                    </th>
+                                )}
+                                <th scope="col" className={TH}>
+                                    {t('designer.columns.primaryKey')}
+                                </th>
+                                {mysql && (
+                                    <th scope="col" className={TH}>
+                                        {t('designer.columns.comment')}
+                                    </th>
+                                )}
+                                <th scope="col" className={TH}>
+                                    <span className="sr-only">{t('designer.columns.remove')}</span>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {draft.columns.map((column, at) => {
+                                const keyAt = draft.primaryKey.indexOf(column.name);
+                                const locked = disabled || column.generated;
+                                const patch = (change: Parameters<typeof patchColumn>[2]): void => onChange(patchColumn(draft, column.key, change));
+                                return (
+                                    <tr key={column.key}>
+                                        <td className={clsx(TD, 'whitespace-nowrap')}>
+                                            <span className="flex">
+                                                <IconButton
+                                                    icon={ArrowUp}
+                                                    size="xs"
+                                                    label={t('designer.columns.moveUp')}
+                                                    disabled={disabled || at === 0}
+                                                    onClick={() => onChange(moveColumn(draft, column.key, -1))}
+                                                />
+                                                <IconButton
+                                                    icon={ArrowDown}
+                                                    size="xs"
+                                                    label={t('designer.columns.moveDown')}
+                                                    disabled={disabled || at === draft.columns.length - 1}
+                                                    onClick={() => onChange(moveColumn(draft, column.key, 1))}
+                                                />
+                                            </span>
+                                        </td>
+                                        <td className={clsx(TD, 'min-w-40')}>
+                                            <Input
+                                                size="sm"
+                                                className="w-full"
+                                                aria-label={t('designer.columns.name')}
+                                                spellCheck={false}
+                                                value={column.name}
+                                                disabled={locked}
+                                                onChange={(event) => patch({ name: event.target.value })}
+                                            />
+                                        </td>
+                                        <td className={clsx(TD, 'min-w-36')}>
+                                            <Input
+                                                size="sm"
+                                                mono
+                                                className="w-full"
+                                                aria-label={t('designer.columns.type')}
+                                                list={listId}
+                                                spellCheck={false}
+                                                value={column.type}
+                                                disabled={locked}
+                                                onChange={(event) => patch({ type: event.target.value })}
+                                            />
+                                        </td>
+                                        <td className={TD}>
+                                            <Checkbox
+                                                className="mx-auto"
+                                                label={t('designer.columns.notNullFor', { name: column.name })}
+                                                checked={!column.nullable}
+                                                disabled={locked}
+                                                onCheckedChange={(checked) => patch({ nullable: !checked })}
+                                            />
+                                        </td>
+                                        <td className={clsx(TD, 'min-w-36')}>
+                                            {column.generated ? (
+                                                <Pill mono>{column.generatedClause ?? t('designer.columns.generated')}</Pill>
+                                            ) : (
+                                                <Input
+                                                    size="sm"
+                                                    mono
+                                                    className="w-full"
+                                                    aria-label={t('designer.columns.default')}
+                                                    placeholder={t('designer.columns.noDefault')}
+                                                    spellCheck={false}
+                                                    value={column.defaultValue ?? ''}
+                                                    disabled={disabled}
+                                                    onChange={(event) => patch({ defaultValue: event.target.value === '' ? null : event.target.value })}
+                                                />
+                                            )}
+                                        </td>
+                                        {mysql && (
+                                            <td className={TD}>
+                                                <Checkbox
+                                                    className="mx-auto"
+                                                    label={t('designer.columns.autoIncrementFor', { name: column.name })}
+                                                    checked={column.autoIncrement}
+                                                    disabled={locked}
+                                                    onCheckedChange={(checked) => patch({ autoIncrement: checked })}
+                                                />
+                                            </td>
+                                        )}
+                                        <td className={clsx(TD, 'whitespace-nowrap')}>
+                                            <span className="flex items-center gap-1">
+                                                <IconButton
+                                                    icon={KeyRound}
+                                                    size="xs"
+                                                    label={keyAt < 0 ? t('designer.columns.addToKey') : t('designer.columns.removeFromKey')}
+                                                    aria-pressed={keyAt >= 0}
+                                                    disabled={locked}
+                                                    onClick={() => onChange(togglePrimaryKey(draft, column.key))}
+                                                />
+                                                {keyAt >= 0 && draft.primaryKey.length > 1 && (
+                                                    <span className="text-xs text-text-muted">{formatNumber(keyAt + 1)}</span>
+                                                )}
+                                            </span>
+                                        </td>
+                                        {mysql && (
+                                            <td className={clsx(TD, 'min-w-40')}>
+                                                <Input
+                                                    size="sm"
+                                                    className="w-full"
+                                                    aria-label={t('designer.columns.comment')}
+                                                    value={column.comment}
+                                                    disabled={locked}
+                                                    onChange={(event) => patch({ comment: event.target.value })}
+                                                />
+                                            </td>
+                                        )}
+                                        <td className={TD}>
+                                            <IconButton
+                                                icon={Trash2}
+                                                size="xs"
+                                                label={t('designer.columns.remove')}
+                                                disabled={disabled}
+                                                onClick={() => onChange(removeColumn(draft, column.key))}
+                                            />
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            )}
+            <div className="shrink-0 border-t border-border-soft px-3 py-2">
+                <Button variant="secondary" size="sm" disabled={disabled} onClick={() => onChange(addColumn(draft, defaultType))}>
+                    <Icon icon={Plus} size={12} />
+                    {t('designer.columns.add')}
+                </Button>
+            </div>
+        </div>
+    );
+}