add "Enable Drop" switch in index.html

gfx · gfx · commit 0f4093646821 · 2025-12-09T10:56:32.000+09:00
diff --git a/.mcp.json b/.mcp.json
@@ -0,0 +1,26 @@
+{
+  "mcpServers": {
+    "lsmcp-go": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@mizchi/lsmcp",
+        "-p",
+        "gopls"
+      ],
+      "env": {}
+    },
+    "lsmcp-ts": {
+      "type": "stdio",
+      "command": "npx",
+      "args": [
+        "-y",
+        "@mizchi/lsmcp",
+        "-p",
+        "tsgo"
+      ],
+      "env": {}
+    }
+  }
+}
diff --git a/app.mjs b/app.mjs
@@ -1,6 +1,7 @@
 import { sqldef, getVersion } from "./sqldef_browser.mjs";
 
 const dbType = document.getElementById("dbType");
+const enableDrop = document.getElementById("enableDrop");
 const inputA = document.getElementById("inputA");
 const inputB = document.getElementById("inputB");
 const outputUp = document.getElementById("outputUp");
@@ -63,7 +64,8 @@ async function runDiff() {
     const result = await sqldef(
       dbType.value,
       inputB.value,
-      inputA.value
+      inputA.value,
+      enableDrop.checked
     );
     outputUp.innerHTML = result;
     outputUp.style.display = "block";
@@ -79,7 +81,8 @@ async function runDiff() {
     const result = await sqldef(
       dbType.value,
       inputA.value,
-      inputB.value
+      inputB.value,
+      enableDrop.checked
     );
     outputDown.innerHTML = result;
     outputDown.style.display = "block";
@@ -100,6 +103,7 @@ dbType.addEventListener("change", () => {
 
 inputA.addEventListener("input", runDiff);
 inputB.addEventListener("input", runDiff);
+enableDrop.addEventListener("change", runDiff);
 
 // Run diff on initial load
 runDiff();
diff --git a/index.html b/index.html
@@ -109,22 +109,19 @@
 
 <body>
   <h1>sqldef</h1>
-  <p>sqldef is a <a href="https://github.com/sqldef/sqldef">CLI tool</a>, <a
-      href="https://github.com/sqldef/sqldef.github.io">Wasm library</a>, and <a
-      href="https://github.com/sqldef/node-sqldef">nodejs tool/library</a> for diffing two SQL schemas. You can use it
-    to
-    manage migration of PostgreSQL, MySQL, SQLite3, and SQL Server databases, using regular SQL DDLs.</p>
-
-  <h2>Demo</h2>
-  <p>You can generate DDLs to update the DB schema:</p>
-
+  <p>sqldef is a <a href="https://github.com/sqldef/sqldef">CLI tool</a> for diffing two SQL schemas. You can use it to
+    manage the migration of PostgreSQL, MySQL, SQLite3, and SQL Server databases, using regular SQL DDLs.</p>
+  <h2>Online Demo</h2>
   <div>
     <select id="dbType">
       <option value="mysql">MySQL</option>
       <option value="postgres">PostgreSQL</option>
       <option value="sqlite3">SQLite3</option>
       <option value="mssql">SQL Server</option>
     </select>
+    <label style="margin-left: 20px;">
+      <input type="checkbox" id="enableDrop"> Enable DROP
+    </label>
   </div>
 
   <div class="schema-row">
@@ -157,6 +154,14 @@ <h4 class="schema-header">Desired schema</h4>
     <pre id="errorDown" class="error"></pre>
   </div>
 
+  <section>
+    <h2>How It Works</h2>
+    <p>
+      The online demo uses the <a href="https://github.com/sqldef/sqldef.github.io">WebAssembly build of sqldef</a> to
+      diff two SQL schemas and generate DDLs.
+    </p>
+  </section>
+
   <footer>
     <p id="version"></p>
     <p>
diff --git a/sqldef-wasm.go b/sqldef-wasm.go
@@ -14,12 +14,13 @@ import (
 	"github.com/sqldef/sqldef/v3/schema"
 )
 
-// diff function (mode: string, desiredDDLs: string, currentDDLs: string, callback: (err: string | null, result: string | null): void)
+// diff function (mode: string, desiredDDLs: string, currentDDLs: string, enableDrop: bool, callback: (err: string | null, result: string | null): void)
 func sqldefDiff(this js.Value, args []js.Value) any {
 	mode := args[0].String()
 	desiredDDLs := args[1].String()
 	currentDDLs := args[2].String()
-	callback := args[3]
+	enableDrop := args[3].Bool()
+	callback := args[4]
 
 	generatorMode := schema.GeneratorModeMysql
 	parserMode := parser.ParserModeMysql
@@ -42,7 +43,10 @@ func sqldefDiff(this js.Value, args []js.Value) any {
 	}
 
 	sqlParser := database.NewParser(parserMode)
-	config := database.GeneratorConfig{}
+	config := database.GeneratorConfig{
+		EnableDrop:         enableDrop,
+		LegacyIgnoreQuotes: false,
+	}
 	defaultSchema := ""
 
 	ddls, err := schema.GenerateIdempotentDDLs(generatorMode, sqlParser, desiredDDLs, currentDDLs, config, defaultSchema)
diff --git a/sqldef.wasm b/sqldef.wasm
diff --git a/sqldef_browser.mjs b/sqldef_browser.mjs
@@ -21,15 +21,15 @@ const getInstance = async () => {
   return SQLDEF;
 };
 
-export async function sqldef(dbType, desiredDDLs, currentDDLs) {
+export async function sqldef(dbType, desiredDDLs, currentDDLs, enableDrop = false) {
   if (typeof WebAssembly === "undefined") {
     throw new Error("WebAssembly is not supported in your browser");
   }
 
   const SQLDEF = await getInstance();
 
   return new Promise((resolve, reject) => {
-    SQLDEF.diff(dbType, desiredDDLs, currentDDLs, (err, ret) => {
+    SQLDEF.diff(dbType, desiredDDLs, currentDDLs, enableDrop, (err, ret) => {
       if (err) {
         return reject(new Error(err));
       }
