compare DB: diff view

packages/web/src/elements/DiffView.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { createTwoFilesPatch } from 'diff';
+  import { html, parse } from 'diff2html';
+
+  export let leftText;
+  export let rightText;
+  export let leftTitle;
+  export let rightTitle;
+
+  $: unifiedDiff = createTwoFilesPatch(leftTitle, rightTitle, leftText, rightText, '', '');
+  $: diffJson = parse(unifiedDiff);
+  // $: diffHtml = html(diffJson, { outputFormat: 'side-by-side', drawFileList: false });
+  $: diffHtml = html(diffJson, { drawFileList: false });
+</script>
+
+<div class="root">
+  {@html diffHtml}
+</div>
+
+<style>
+  .root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: scroll;
+  }
+  /* :global(.d2h-file-diff) {
+    overflow-y: scroll;
+    max-height: 300px;
+  }
+
+  :global(.d2h-code-wrapper) {
+    position: relative;
+  } */
+</style>

packages/web/src/tabs/CompareModelTab.svelte

@@ -7,6 +7,7 @@
 
   import _ from 'lodash';
   import { derived, writable } from 'svelte/store';
+  import DiffView from '../elements/DiffView.svelte';
   import ScrollableTableControl from '../elements/ScrollableTableControl.svelte';
   import TabControl from '../elements/TabControl.svelte';
   import TableControl from '../elements/TableControl.svelte';
@@ -19,7 +20,7 @@
   import SqlEditor from '../query/SqlEditor.svelte';
   import useEditorData from '../query/useEditorData';
   import { extensions } from '../stores';
-  import { computeDbDiffRows, computeTableDiffColumns } from '../utility/computeDiffRows';
+  import { computeDbDiffRows, computeTableDiffColumns, getCreateTableScript } from '../utility/computeDiffRows';
   import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
 
   export let tabid;
@@ -144,20 +145,33 @@
       <TabControl
         tabs={[
           {
-            label: 'SQL script',
+            label: 'DDL',
             slot: 1,
           },
           {
-            label: 'Columns',
+            label: 'SQL script',
             slot: 2,
           },
+          {
+            label: 'Columns',
+            slot: 3,
+          },
         ]}
       >
         <svelte:fragment slot="1">
-          <SqlEditor readOnly value={sqlPreview} />
+          <DiffView
+            leftTitle={diffRows[pairIndex]?.source?.pureName}
+            rightTitle={diffRows[pairIndex]?.source?.pureName}
+            leftText={getCreateTableScript(diffRows[pairIndex]?.source, driver)}
+            rightText={getCreateTableScript(diffRows[pairIndex]?.target, driver)}
+          />
         </svelte:fragment>
 
         <svelte:fragment slot="2">
+          <SqlEditor readOnly value={sqlPreview} />
+        </svelte:fragment>
+
+        <svelte:fragment slot="3">
           <ScrollableTableControl
             rows={diffColumns}
             disableFocusOutline

packages/web/src/utility/computeDiffRows.ts

@@ -68,3 +68,10 @@ export function computeTableDiffColumns(
     targetNotNull: row?.target?.notNull,
   }));
 }
+
+export function getCreateTableScript(table: TableInfo, driver: EngineDriver) {
+  if (!table || !driver) return '';
+  const dmp = driver.createDumper();
+  dmp.createTable(table);
+  return dmp.s;
+}