ts-prorm-orm 1.1.0

package/dist/diagrams/migration-diagram.js

@@ -0,0 +1,316 @@
+"use strict";
+/**
+ * MigrationDiagram — generates an SVG showing database schema changes.
+ *
+ * Features:
+ *  - Shows tables with their columns (before/after or just new state)
+ *  - Color-coded change indicators: green (added), red (removed), yellow (modified)
+ *  - Migration metadata header with timestamp and description
+ *  - Support for multiple migration steps
+ *  - Compact field rows with type badges
+ *
+ * Usage:
+ *   const diag = new MigrationDiagram({
+ *     title: 'User Migration',
+ *     description: 'Add email verification fields',
+ *     changes: [
+ *       { table: 'users', type: 'modify', changes: [...] },
+ *       { table: 'sessions', type: 'add', changes: [...] },
+ *     ]
+ *   });
+ *   diag.save('./diagrams/migration.svg');
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MigrationDiagram = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+// ─── Constants ─────────────────────────────────────────────────────────────
+const CHANGE_COLORS = {
+    add: { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46', icon: '#059669' },
+    remove: { header: '#7F1D1D', mid: '#DC2626', light: '#FEE2E2', text: '#7F1D1D', icon: '#DC2626' },
+    modify: { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E', icon: '#D97706' },
+};
+const TABLE_COLORS = [
+    { header: '#1E3A8A', mid: '#2563EB', light: '#DBEAFE', text: '#1E3A8A' },
+    { header: '#5B21B6', mid: '#7C3AED', light: '#EDE9FE', text: '#5B21B6' },
+    { header: '#065F46', mid: '#059669', light: '#D1FAE5', text: '#065F46' },
+    { header: '#92400E', mid: '#D97706', light: '#FEF3C7', text: '#92400E' },
+    { header: '#831843', mid: '#DB2777', light: '#FCE7F3', text: '#831843' },
+    { header: '#0C4A6E', mid: '#0284C7', light: '#E0F2FE', text: '#0C4A6E' },
+];
+// ─── Helpers ─────────────────────────────────────────────────────────────
+function xmlEsc(s) {
+    return String(s ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+function typeBadgeColor(type) {
+    const t = type.toUpperCase();
+    if (/STRING|VARCHAR|CHAR|TEXT/i.test(t))
+        return { text: '#059669', bg: '#D1FAE5' };
+    if (/INT|BIGINT|SMALLINT|FLOAT|DOUBLE|DECIMAL/i.test(t))
+        return { text: '#7C3AED', bg: '#EDE9FE' };
+    if (/DATE|TIME|TIMESTAMP/i.test(t))
+        return { text: '#EA580C', bg: '#FFEDD5' };
+    if (/BOOL/i.test(t))
+        return { text: '#DB2777', bg: '#FCE7F3' };
+    if (/UUID/i.test(t))
+        return { text: '#0891B2', bg: '#CFFAFE' };
+    if (/JSON/i.test(t))
+        return { text: '#4F46E5', bg: '#E0E7FF' };
+    return { text: '#475569', bg: '#F1F5F9' };
+}
+// ─── Main class ────────────────────────────────────────────────────────────
+class MigrationDiagram {
+    constructor(options) {
+        this.opts = {
+            title: options.title ?? 'Database Migration',
+            description: options.description ?? '',
+            timestamp: options.timestamp ?? new Date().toISOString(),
+            changes: options.changes ?? [],
+            theme: options.theme ?? 'light',
+            color: options.color ?? 'blue',
+        };
+    }
+    // ── Compute layout positions ─────────────────────────────────────────
+    computeLayout() {
+        const layout = [];
+        let y = this.opts.changes.length > 0 ? MigrationDiagram.BANNER_H + MigrationDiagram.MARGIN : 0;
+        let maxW = 0;
+        this.opts.changes.forEach((change, idx) => {
+            const rowCount = Math.max((change.changes ?? []).length, 1);
+            const h = MigrationDiagram.BOX_HDR + rowCount * MigrationDiagram.BOX_ROW + MigrationDiagram.FOOT_H;
+            const x = MigrationDiagram.MARGIN;
+            layout.push({
+                change,
+                x,
+                y,
+                w: MigrationDiagram.BOX_W,
+                h,
+                colorIdx: idx % TABLE_COLORS.length,
+            });
+            maxW = Math.max(maxW, MigrationDiagram.BOX_W);
+            y += h + MigrationDiagram.V_GAP;
+        });
+        return layout;
+    }
+    // ── Render banner ────────────────────────────────────────────────────
+    renderBanner(totalW) {
+        const H = MigrationDiagram.BANNER_H;
+        const { title, description, timestamp } = this.opts;
+        return `
+  <!-- ═══ BANNER ═══ -->
+  <defs>
+    <linearGradient id="migBanner" x1="0" y1="0" x2="1" y2="0"
+                    gradientUnits="objectBoundingBox">
+      <stop offset="0%" stop-color="#7C3AED"/>
+      <stop offset="100%" stop-color="#A855F7"/>
+    </linearGradient>
+    <filter id="migBannerSh" x="-5%" y="-5%" width="110%" height="120%">
+      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#7C3AED30"/>
+    </filter>
+  </defs>
+  <rect width="${totalW}" height="${H}" fill="url(#migBanner)" filter="url(#migBannerSh)"/>
+
+  <!-- Database icon (SVG) -->
+  <g transform="translate(30, 24)">
+    <ellipse cx="14" cy="8" rx="12" ry="4" fill="white" opacity="0.3"/>
+    <path d="M2 12v12c0 2.2 5.4 4 12 4s12-1.8 12-4V12" fill="white" opacity="0.9"/>
+    <path d="M2 16c0 2.2 5.4 4 12 4s12-1.8 12-4" fill="none" stroke="white" stroke-width="1.5" opacity="0.5"/>
+    <path d="M2 20c0 2.2 5.4 4 12 4s12-1.8 12-4" fill="none" stroke="white" stroke-width="1.5" opacity="0.3"/>
+  </g>
+
+  <text x="58" y="36" font-family="system-ui" font-size="22" font-weight="800" fill="white">${xmlEsc(title)}</text>
+  <text x="58" y="54" font-family="system-ui" font-size="12" fill="rgba(255,255,255,0.75)">${xmlEsc(description)}</text>
+  <text x="${totalW - 30}" y="54" font-family="'SF Mono',monospace" font-size="11" fill="rgba(255,255,255,0.6)" text-anchor="end">${timestamp}</text>
+
+  <!-- Migration tag -->
+  <rect x="${totalW - 130}" y="20" width="100" height="26" rx="13" fill="rgba(255,255,255,0.15)"/>
+  <text x="${totalW - 80}" y="38" font-family="'SF Mono',monospace" font-size="11" font-weight="700" fill="white" text-anchor="middle">MIGRATION</text>`;
+    }
+    // ── Render a table change box ─────────────────────────────────────────
+    renderChangeBox(item) {
+        const { change, x, y, w, h, colorIdx } = item;
+        // Fallback color for unknown/undefined change types so `colors.header` etc.
+        // never throw.
+        const colors = CHANGE_COLORS[change.type] ?? {
+            header: '#334155',
+            mid: '#475569',
+            light: '#E2E8F0',
+            text: '#334155',
+            icon: '#475569',
+        };
+        const R = 10;
+        // Sanitize the table name for use in an SVG element id (must be a valid,
+        // unique NCName) and escape it wherever it lands in markup/comments.
+        const safeId = String(change.table ?? 'table').replace(/\W/g, '') + colorIdx;
+        const changes = change.changes ?? [];
+        let out = `\n  <!-- Change: ${xmlEsc(change.table)} (${xmlEsc(change.type)}) -->`;
+        // Shadow
+        out += `\n  <defs>
+    <filter id="migSh${safeId}" x="-8%" y="-8%" width="116%" height="130%">
+      <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="#00000015"/>
+    </filter>
+  </defs>`;
+        // Box background
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="${R}" fill="white" filter="url(#migSh${safeId})"/>`;
+        // Header with change type indicator
+        out += `\n  <rect x="${x}" y="${y}" width="${w}" height="${MigrationDiagram.BOX_HDR}" rx="${R}" fill="${colors.header}"/>`;
+        // Change type badge
+        out += `\n  <rect x="${x + 12}" y="${y + 10}" width="56" height="22" rx="6" fill="${colors.light}"/>`;
+        out += `\n  <text x="${x + 40}" y="${y + 25}" font-family="'SF Mono',monospace" font-size="10" font-weight="700" fill="${colors.text}" text-anchor="middle">${xmlEsc(String(change.type ?? '').toUpperCase())}</text>`;
+        // Table name
+        out += `\n  <text x="${x + 80}" y="${y + 27}" font-family="system-ui" font-size="15" font-weight="700" fill="white">${xmlEsc(change.table)}</text>`;
+        // Column changes
+        changes.forEach((col, i) => {
+            const fy = y + MigrationDiagram.BOX_HDR + i * MigrationDiagram.BOX_ROW;
+            const rowBg = i % 2 === 0 ? '#FFFFFF' : '#F9FAFB';
+            const tc = typeBadgeColor(col.type);
+            out += `\n  <rect x="${x}" y="${fy}" width="${w}" height="${MigrationDiagram.BOX_ROW}" fill="${rowBg}"/>`;
+            // Change indicator stripe
+            const stripeColor = col.action === 'add' ? '#059669' : col.action === 'remove' ? '#DC2626' : '#D97706';
+            out += `\n  <rect x="${x}" y="${fy}" width="4" height="${MigrationDiagram.BOX_ROW}" fill="${stripeColor}"/>`;
+            // Action icon (SVG)
+            const ix = x + 16;
+            const iy = fy + MigrationDiagram.BOX_ROW / 2;
+            if (col.action === 'add') {
+                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
+  <path d="M${ix - 3} ${iy}v6M${ix} ${iy - 3}h6" stroke="white" stroke-width="2" fill="none"/>`;
+            }
+            else if (col.action === 'remove') {
+                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
+  <path d="M${ix - 3} ${iy}h6" stroke="white" stroke-width="2" fill="none"/>`;
+            }
+            else {
+                out += `\n  <circle cx="${ix}" cy="${iy}" r="6" fill="${stripeColor}"/>
+  <path d="M${ix - 3} ${iy}h6" stroke="white" stroke-width="2" fill="none"/>
+  <path d="M${ix} ${iy - 3}v6" stroke="white" stroke-width="2" fill="none"/>`;
+            }
+            // Column name
+            const nameX = x + 36;
+            const nameW = col.action === 'modify' && col.oldType ? '600' : '500';
+            out += `\n  <text x="${nameX}" y="${iy + 4}" font-family="'SF Mono',monospace" font-size="12" font-weight="${nameW}" fill="#1E293B">${xmlEsc(col.name)}</text>`;
+            // Type badge
+            if (col.action === 'modify' && col.oldType) {
+                // Show old → new type
+                out += `\n  <text x="${x + w - 10}" y="${iy + 4}" font-family="'SF Mono',monospace" font-size="9" fill="#94A3B8" text-anchor="end">${xmlEsc(col.oldType)} → ${xmlEsc(col.type)}</text>`;
+            }
+            else {
+                const tbW = col.type.length * 6 + 12;
+                out += `\n  <rect x="${x + w - tbW - 8}" y="${fy + 6}" width="${tbW}" height="16" rx="4" fill="${tc.bg}"/>`;
+                out += `\n  <text x="${x + w - tbW / 2 - 8}" y="${fy + 18}" font-family="'SF Mono',monospace" font-size="9" font-weight="600" fill="${tc.text}" text-anchor="middle">${xmlEsc(col.type.slice(0, 12))}</text>`;
+            }
+            // Row separator
+            out += `\n  <line x1="${x}" y1="${fy + MigrationDiagram.BOX_ROW}" x2="${x + w}" y2="${fy + MigrationDiagram.BOX_ROW}" stroke="#E2E8F0"/>`;
+        });
+        // Footer
+        const footY = y + MigrationDiagram.BOX_HDR + changes.length * MigrationDiagram.BOX_ROW;
+        out += `\n  <rect x="${x}" y="${footY}" width="${w}" height="${MigrationDiagram.FOOT_H}" fill="${colors.light}" rx="0 0 ${R} ${R}"/>`;
+        out += `\n  <text x="${x + 12}" y="${footY + 18}" font-family="system-ui" font-size="10" fill="${colors.text}" font-weight="600">${changes.length} change${changes.length !== 1 ? 's' : ''}</text>`;
+        return out;
+    }
+    // ── Render legend ────────────────────────────────────────────────────
+    renderLegend(x, y) {
+        const items = [
+            { label: 'Added', color: '#059669', bg: '#D1FAE5' },
+            { label: 'Removed', color: '#DC2626', bg: '#FEE2E2' },
+            { label: 'Modified', color: '#D97706', bg: '#FEF3C7' },
+        ];
+        let out = `\n  <!-- LEGEND -->`;
+        items.forEach((item, i) => {
+            const ix = x + i * 110;
+            out += `\n  <rect x="${ix}" y="${y}" width="90" height="28" rx="6" fill="${item.bg}"/>`;
+            out += `\n  <circle cx="${ix + 16}" cy="${y + 14}" r="6" fill="${item.color}"/>`;
+            out += `\n  <text x="${ix + 30}" y="${y + 18}" font-family="system-ui" font-size="11" font-weight="600" fill="${item.color}">${item.label}</text>`;
+        });
+        return out;
+    }
+    // ── Generate full SVG ────────────────────────────────────────────────
+    generate() {
+        const { changes } = this.opts;
+        const MARGIN = MigrationDiagram.MARGIN;
+        const BANNER = MigrationDiagram.BANNER_H;
+        const layout = this.computeLayout();
+        // Calculate dimensions
+        let totalW = MigrationDiagram.BOX_W + 2 * MARGIN + 100;
+        let totalH = BANNER + MARGIN;
+        if (layout.length > 0) {
+            const lastItem = layout[layout.length - 1];
+            totalH = lastItem.y + lastItem.h + MARGIN + 50;
+        }
+        const svg = [
+            `<?xml version="1.0" encoding="UTF-8"?>`,
+            `<!-- Generated by ts-prorm-orm MigrationDiagram -->`,
+            `<svg xmlns="http://www.w3.org/2000/svg" width="${totalW}" height="${totalH}" viewBox="0 0 ${totalW} ${totalH}">`,
+            `  <rect width="${totalW}" height="${totalH}" fill="#F8FAFC"/>`,
+        ];
+        // Banner
+        svg.push(this.renderBanner(totalW));
+        // Change boxes
+        layout.forEach((item) => {
+            svg.push(this.renderChangeBox(item));
+        });
+        // Legend
+        if (layout.length > 0) {
+            svg.push(this.renderLegend(MARGIN, totalH - 50));
+        }
+        svg.push(`</svg>`);
+        return svg.join('\n');
+    }
+    /**
+     * Write the SVG to a file.
+     */
+    save(outputPath) {
+        const resolved = path.resolve(outputPath);
+        const dir = path.dirname(resolved);
+        if (!fs.existsSync(dir))
+            fs.mkdirSync(dir, { recursive: true });
+        const svg = this.generate();
+        fs.writeFileSync(resolved, svg, 'utf-8');
+        return resolved;
+    }
+}
+exports.MigrationDiagram = MigrationDiagram;
+// Layout constants
+MigrationDiagram.BOX_W = 320;
+MigrationDiagram.BOX_HDR = 42;
+MigrationDiagram.BOX_ROW = 28;
+MigrationDiagram.FOOT_H = 28;
+MigrationDiagram.MARGIN = 40;
+MigrationDiagram.BANNER_H = 80;
+MigrationDiagram.V_GAP = 50;