simplify and extend

Cargo.toml

@@ -20,3 +20,7 @@ tauri = "1"
 sqlite = ["sqlx/sqlite"]
 mysql = ["sqlx/mysql"]
 postgres = ["sqlx/postgres"]
+
+[profile.release]
+lto = true
+opt-level = 3

examples/vue-todos/package.json → example/vue-todos/package.json

@@ -19,7 +19,7 @@
     "@vueuse/core": "^9.3.0",
     "pinia": "^2.0.23",
     "@tauri-apps/api": "^1.1.0",
-    "tauri-plugin-sql-api": "github:tauri-apps/tauri-plugin-sql#dev",
+    "tauri-plugin-sql-api": "workspace:*",
     "uuid": "^9.0.0",
     "vue": "^3.2.40"
   },
@@ -46,4 +46,4 @@
     "vue-tsc": "^1.0.3",
     "windicss": "^3.5.6"
   }
-}
+}

examples/vue-todos/src/App.vue → example/vue-todos/src/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { UseDark } from '@vueuse/components';
-import { onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useStore } from './stores/todos';
+import { select } from './services/Storage';
 
 const s = useStore();
 

examples/vue-todos/src/components/ListTodos.vue → example/vue-todos/src/components/ListTodos.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-import type { Todo } from 'src/models/Todo';
+export type TodoFilter = 'all' | 'completed' | 'incomplete';
 import { computed, ref } from 'vue';
-import type { PropType } from 'vue';
 import { useStore } from '../stores/todos';
 
 const s = useStore();
 
-export type TodoFilter = 'all' | 'completed' | 'incomplete';
 const filter = ref<TodoFilter>('all');
 
 const items = computed(() => {
@@ -15,7 +13,10 @@ const items = computed(() => {
 </script>
 
 <template>
-  <div class="rounded flex flex-col border-1 border-gray-400 min-h-90 w-full p-4 todos">
+  <div
+    class="rounded flex flex-col border-1 border-gray-400 min-h-90 w-full p-4 todos"
+    :data-count="s.count"
+  >
     <ul class="flex flex-col flex-grow w-full py-4">
       <todo-item v-for="todo in items" :key="todo.id" :todo="todo"> </todo-item>
     </ul>

example/vue-todos/src/services/Storage.ts

@@ -0,0 +1,76 @@
+import Database from 'tauri-plugin-sql-api';
+import type { QueryResult } from 'tauri-plugin-sql-api';
+import { v4 } from 'uuid';
+import type { Todo, uuid } from '../models/Todo';
+
+let database: Database;
+
+export async function connect(): Promise<Database> {
+  if (database) {
+    return database;
+  } else {
+    database = await Database.load('sqlite:test.db');
+    return database;
+  }
+}
+
+export async function all(): Promise<Todo[]> {
+  const db = await connect();
+
+  return await db.select('SELECT * FROM todos');
+}
+
+export async function create(title: string): Promise<Todo> {
+  const db = await connect();
+
+  const newTodo = {
+    id: v4(),
+    title,
+    completed: false
+  };
+  if (db) {
+    await db.execute('INSERT INTO todos (id, title, completed) VALUES ($1,$2,$3)', [
+      newTodo.id,
+      title,
+      false
+    ]);
+  } else {
+    console.warn(`There is not a valid DB connection, adding TODO to local storage only`);
+  }
+  return newTodo;
+}
+
+export async function select<T = unknown>(query: string): Promise<T> {
+  const db = await connect();
+
+  return db.select(query);
+}
+
+export async function select_one<T = Record<string, unknown>>(query: string): Promise<T> {
+  const db = await connect();
+
+  return db.select_one(query);
+}
+
+export async function execute(query: string): Promise<QueryResult> {
+  const db = await connect();
+
+  return db.execute(query);
+}
+
+export async function update(todo: Todo): Promise<Todo> {
+  const db = await connect();
+
+  await db.execute('UPDATE todos SET title = $1, completed = $2 WHERE id = $3', [
+    todo.title,
+    todo.completed,
+    todo.id
+  ]);
+  return todo;
+}
+
+export async function remove(id: uuid): Promise<QueryResult> {
+  const db = await connect();
+
+  return await db.execute('DELETE FROM todos WHERE id = $1', [id]);
+}

examples/vue-todos/src/stores/todos.ts → example/vue-todos/src/stores/todos.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import Storage from '../services/Storage';
+import * as Storage from '../services/Storage';
 import type { Todo, uuid } from '../models/Todo';
 
 function localOnly() {
@@ -11,6 +11,7 @@ export const useStore = defineStore('todos', {
     return {
       todos: [] as Todo[],
       ready: false,
+      count: 'undetermined',
       dbError: undefined as string | undefined,
       dbConnectionString: ''
     };
@@ -39,6 +40,9 @@ export const useStore = defineStore('todos', {
     async initializeDbBackedStore() {
       try {
         await Storage.connect();
+        let count = await Storage.select_one('select count(*) as count from todos');
+        console.log(`there are ${JSON.stringify(count)} TODOs in the database`);
+        this.count = count;
       } catch (e) {
         this.dbError = `Failed to connect to DB: ${e}`;
         console.log(this.dbError);

example/vue-todos/tsconfig.json

@@ -0,0 +1,45 @@
+{
+    "compilerOptions": {
+        "moduleResolution": "node",
+        "module": "es2020",
+        "lib": [
+            "DOM",
+            "ES2020"
+        ],
+        "target": "es2020",
+        /**
+			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+			to enforce using \`import type\` instead of \`import\` for Types.
+			*/
+        "importsNotUsedAsValues": "error",
+        "isolatedModules": true,
+        "resolveJsonModule": true,
+        /**
+			To have warnings/errors of the Svelte compiler at the correct position,
+			enable source maps by default.
+			*/
+        "sourceMap": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "baseUrl": ".",
+        "allowJs": false,
+        "checkJs": false,
+        "types": [
+            "vite/client"
+        ],
+        "paths": {
+            "~/*": [
+                "src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "dist",
+        "node_modules",
+        "**/*.spec.ts"
+    ]
+}