feat(new tool): SQL Parameters Generator

Fix CorentinTh#988

Author: sharevb

src/tools/sql-parameters/index.ts

@@ -0,0 +1,13 @@
+import { Database } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'SQL Parameters Generator',
+  path: '/sql-parameters',
+  description: 'Prepare SQL statement from a given parametrized SQL query and parameters',
+  keywords: ['sql', 'select', 'insert', 'parameters'],
+  component: () => import('./sql-parameters.vue'),
+  icon: Database,
+  createdAt: new Date('2025-08-15'),
+  category: 'Development',
+});

src/tools/sql-parameters/sql-parameters.service.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+import { detectTypeAndEscape, generateSQLFromTemplate } from './sql-parameters.service';
+
+describe('detectTypeAndEscape', () => {
+  it('should return NULL for null-like values', () => {
+    expect(detectTypeAndEscape(null)).toBe('NULL');
+    expect(detectTypeAndEscape(undefined)).toBe('NULL');
+    expect(detectTypeAndEscape('null')).toBe('NULL');
+  });
+
+  it('should detect and return numbers', () => {
+    expect(detectTypeAndEscape('42')).toBe(42);
+    expect(detectTypeAndEscape('3.14')).toBe(3.14);
+  });
+
+  it('should escape and wrap strings in quotes', () => {
+    expect(detectTypeAndEscape('O\'Reilly')).toBe('\'O\'\'Reilly\'');
+    expect(detectTypeAndEscape('hello')).toBe('\'hello\'');
+  });
+});
+
+describe('generateSQLFromTemplate', () => {
+  it('should replace named parameters correctly', () => {
+    const template = 'SELECT * FROM users WHERE name = :name AND age = @age';
+    const params = [
+      { key: 'name', value: 'O\'Reilly' },
+      { key: 'age', value: '42' },
+    ];
+    const { sql, error } = generateSQLFromTemplate(template, params);
+    expect(sql).toBe('SELECT * FROM users WHERE name = \'O\'\'Reilly\' AND age = 42');
+    expect(error).toBeNull();
+  });
+
+  it('should replace positional parameters correctly', () => {
+    const template = 'INSERT INTO products VALUES (?, ?, ?)';
+    const params = [
+      { key: '0', value: 'Book' },
+      { key: '1', value: '19.99' },
+      { key: '2', value: 'null' },
+    ];
+    const { sql, error } = generateSQLFromTemplate(template, params);
+    expect(sql).toBe('INSERT INTO products VALUES (\'Book\', 19.99, NULL)');
+    expect(error).toBeNull();
+  });
+
+  it('should handle escaped question marks', () => {
+    const template = 'SELECT * FROM faq WHERE question LIKE \'\\?\' OR answer = ?';
+    const params = [{ key: '0', value: '42' }];
+    const { sql, error } = generateSQLFromTemplate(template, params);
+    expect(sql).toBe('SELECT * FROM faq WHERE question LIKE \'?\' OR answer = 42');
+    expect(error).toBeNull();
+  });
+
+  it('should return error for missing named parameter', () => {
+    const template = 'SELECT * FROM users WHERE name = :name';
+    const params: Array<{ key: string; value: string }> = [];
+    const { sql, error } = generateSQLFromTemplate(template, params);
+    expect(sql).toBe('');
+    expect(error).toContain('Missing value for named parameter');
+  });
+
+  it('should return error for missing positional parameter', () => {
+    const template = 'SELECT * FROM items WHERE id = ? AND price = ?';
+    const params = [{ key: '0', value: '1' }];
+    const { sql, error } = generateSQLFromTemplate(template, params);
+    expect(sql).toBe('');
+    expect(error).toContain('Missing value for positional parameter');
+  });
+});

src/tools/sql-parameters/sql-parameters.service.ts

@@ -0,0 +1,55 @@
+export function detectTypeAndEscape(val: string | null | undefined) {
+  if (val === null || val === undefined || val.toLowerCase?.() === 'null') {
+    return 'NULL';
+  }
+  if (!Number.isNaN(Number(val)) && val.trim() !== '') {
+    return val.includes('.') ? Number.parseFloat(val) : Number.parseInt(val);
+  }
+  return `'${val.replace(/'/g, '\'\'')}'`;
+}
+
+export function generateSQLFromTemplate(template: string, parameters: Array<{ key: string; value: string }>) {
+  const paramMap = new Map();
+  const indexedParams: Array<{ key: string; value: string }> = [];
+  let keyIndex = 0;
+  parameters.forEach(({ key, value }) => {
+    if (key !== '' && !/^\d+$/.test(key)) {
+      paramMap.set(key, detectTypeAndEscape(value));
+    }
+    else {
+      const indexKey = (keyIndex++).toString();
+      indexedParams.push({ key: indexKey, value });
+    }
+  });
+
+  let sql = template;
+  let error = null;
+
+  // Replace named parameters
+  sql = sql.replace(/(:\w+|@\w+)/g, (match) => {
+    const key = match.slice(1);
+    if (!paramMap.has(key)) {
+      error = `Missing value for named parameter "${match}"`;
+      return match;
+    }
+    return paramMap.get(key);
+  });
+
+  // Replace positional parameters
+  let positionalIndex = 0;
+  const positionalParams = indexedParams.filter(p => /^\d+$/.test(p.key));
+
+  sql = sql.replace(/(^|[^\\])\?/g, (_, prefix) => {
+    const param = positionalParams[positionalIndex++];
+    if (!param) {
+      error = `Missing value for positional parameter at index ${positionalIndex - 1}`;
+      return `${prefix}?`;
+    }
+    return `${prefix}${detectTypeAndEscape(param.value)}`;
+  });
+
+  // Unescape escaped question marks
+  sql = sql.replace(/\\\?/g, '?');
+
+  return { sql: error ? '' : sql, error };
+}

src/tools/sql-parameters/sql-parameters.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { generateSQLFromTemplate } from './sql-parameters.service';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+
+const sqlTemplate = useQueryParamOrStorage({ name: 'sql', storageName: 'sql-params:sql', defaultValue: '' });
+const parameters = ref([{ key: '', value: '' }]);
+
+const generatedSQL = ref('');
+const errorMessage = ref('');
+
+function generateSQL() {
+  const { sql, error } = generateSQLFromTemplate(
+    sqlTemplate.value,
+    parameters.value,
+  );
+
+  generatedSQL.value = sql;
+  errorMessage.value = error || '';
+}
+</script>
+
+<template>
+  <NCard title="SQL Generator">
+    <NForm label-placement="top">
+      <NFormItem label="Parameterized SQL statement:">
+        <NInput
+          v-model:value="sqlTemplate"
+          type="textarea"
+          placeholder="e.g. SELECT * FROM users WHERE name = :name AND age > ? AND type = @type"
+          :autosize="{ minRows: 3 }"
+        />
+      </NFormItem>
+
+      <n-card title="Parameters">
+        <n-p>For positional parameters, leave Name empty. For named parameters, enter name without '?' or '@' prefix</n-p>
+        <NDynamicInput
+          v-model:value="parameters"
+          :min="1"
+          preset="pair"
+          show-sort-button
+          key-placeholder="Name (e.g. name or type)"
+          value-placeholder="Value (e.g. Alice or 42 or 1.3)"
+        />
+      </n-card>
+
+      <n-space justify="center">
+        <NButton type="primary" @click="generateSQL">
+          Generate SQL
+        </NButton>
+      </n-space>
+
+      <NFormItem v-if="generatedSQL" label="Generated SQL:" mt-2>
+        <textarea-copyable :value="generatedSQL" />
+      </NFormItem>
+
+      <NAlert v-if="errorMessage" type="error" mt-2 @close="errorMessage = ''">
+        {{ errorMessage }}
+      </NAlert>
+    </NForm>
+  </NCard>
+</template>