feat(diagnostics): update autogenerated schema

Author: LucDeCaf

tools/diagnostics-app/src/app/views/schema.tsx

@@ -4,10 +4,13 @@ import { Box, Grid, styled } from '@mui/material';
 
 export default function SchemaPage() {
   const schema = schemaManager.schemaToString();
-  const docs = `// This displays the inferred schema currently used by the diagnostics app.
-// This is based on downloaded data, rather than the source database.
-// If a table is empty, it will not display here.
-// Tables and columns are only added here. Nothing is removed until the database is cleared.`;
+  const docs = `/**
+ * This is the inferred schema of the data received by the diagnostics app.
+ * Because this schema is generated on-the-fly based on the data received by the app, it can
+ * be incomplete and should NOT be relied upon as a source of truth for your app schema.
+ * If a table is empty, it will not be shown here.
+ * Tables and columns are only added here. Nothing is removed until the database is cleared.
+ */`;
   return (
     <NavigationPage title="Dynamic Schema">
       <S.MainContainer>

tools/diagnostics-app/src/library/powersync/AppSchema.ts

@@ -1,6 +1,6 @@
-import { column, Schema, TableV2 } from '@powersync/web';
+import { column, Schema, Table } from '@powersync/web';
 
-export const local_bucket_data = new TableV2(
+export const local_bucket_data = new Table(
   {
     total_operations: column.integer,
     last_op: column.text,
@@ -10,7 +10,7 @@ export const local_bucket_data = new TableV2(
   { localOnly: true }
 );
 
-export const local_schema = new TableV2(
+export const local_schema = new Table(
   {
     data: column.text
   },

tools/diagnostics-app/src/library/powersync/JsSchemaGenerator.ts

@@ -1,26 +1,36 @@
-import { Column, Schema } from '@powersync/web';
+import { Column, ColumnsType, Schema, Table } from '@powersync/web';
 
 export class JsSchemaGenerator {
   generate(schema: Schema): string {
     const tables = schema.tables;
 
-    return `new Schema([
-  ${tables.map((table) => this.generateTable(table.name, table.columns)).join(',\n  ')}
-])
-`;
+    return this.generateTables(tables) + '\n\n' + this.generateAppSchema(tables);
+  }
+
+  private generateTables(tables: Table<ColumnsType>[]): string {
+    return tables.map((table) => this.generateTable(table.name, table.columns)).join('\n\n');
   }
 
   private generateTable(name: string, columns: Column[]): string {
-    return `new Table({
-    name: '${name}',
-    columns: [
-      ${columns.map((c) => this.generateColumn(c)).join(',\n      ')}
-    ]
-  })`;
+    return `export const ${name} = new Table(
+  {
+    // id column (text) is automatically included
+    ${columns.map((column) => this.generateColumn(column)).join(',\n    ')}
+  },
+  { indexes: {} }
+);`;
   }
 
   private generateColumn(column: Column) {
     const t = column.type;
-    return `new Column({ name: '${column.name}', type: ColumnType.${column.type} })`;
+    return `${column.name}: column.${column.type!.toLowerCase()}`;
+  }
+
+  private generateAppSchema(tables: Table<ColumnsType>[]): string {
+    return `export const AppSchema = new Schema({
+  ${tables.map((table) => table.name).join(',\n  ')}
+});
+
+export type Database = (typeof AppSchema)['types'];`;
   }
 }