Skip to content

Commit

Permalink
chore: updated linting and using new tutorial instructions containing…
Browse files Browse the repository at this point in the history 
… `useQuery`
  • Loading branch information
@Chriztiaan
Chriztiaan committed Jun 3, 2024
1 parent b9cbddb commit acae7ab
Show file tree
Hide file tree
Showing 6 changed files with 164 additions and 122 deletions.
3 changes: 3 additions & 0 deletions demos/vue-supabase-todolist-completed-tutorial/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
.env*
.vscode
6 changes: 3 additions & 3 deletions demos/vue-supabase-todolist-completed-tutorial/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@
"@headlessui/vue": "^1.7.22",
"@heroicons/vue": "^2.1.3",
"@journeyapps/wa-sqlite": "^0.2.0",
"@powersync/vue": "^0.1.4",
"@powersync/web": "^0.7.0",
"@supabase/supabase-js": "^2.43.2",
"@powersync/vue": "^0.1.6",
"@powersync/web": "^1.0.0",
"@supabase/supabase-js": "^2.43.4",
"js-logger": "^1.6.1",
"vite-plugin-top-level-await": "^1.4.1",
"vite-plugin-wasm": "^3.3.0",
Expand Down
10 changes: 5 additions & 5 deletions demos/vue-supabase-todolist-completed-tutorial/src/plugins/powerSync.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
// src/plugins/powersync.ts
import { AppSchema } from "../library/AppSchema.ts";
import { WASQLitePowerSyncDatabaseOpenFactory } from "@powersync/web";
import { createPowerSyncPlugin } from "@powersync/vue";
import { AppSchema } from '../library/AppSchema.ts';
import { WASQLitePowerSyncDatabaseOpenFactory } from '@powersync/web';
import { createPowerSyncPlugin } from '@powersync/vue';

export const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
dbFilename: "vue-todo.db",
schema: AppSchema,
dbFilename: 'vue-todo.db',
schema: AppSchema
}).getInstance();

export const powerSyncPlugin = createPowerSyncPlugin({ database: powerSync });
70 changes: 21 additions & 49 deletions demos/vue-supabase-todolist-completed-tutorial/src/views/TodoList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
<template>
<div class="container mx-auto my-10 px-4">
<div class="flex items-center justify-between mb-6">
<h1 class="text-md font-semibold text-gray-900">
Status: {{ status.connected ? "Connected" : "Disconnected" }}
</h1>
<button
@click="logout()"
class="text-red-500 hover:text-red-700 font-semibold"
>
Logout
</button>
<h1 class="text-md font-semibold text-gray-900">Status: {{ status.connected ? 'Connected' : 'Disconnected' }}</h1>
<button @click="logout()" class="text-red-500 hover:text-red-700 font-semibold">Logout</button>
</div>

<h1
class="text-center text-3xl md:text-4xl font-semibold text-gray-900 mb-6"
>
To Do List
</h1>
<h1 class="text-center text-3xl md:text-4xl font-semibold text-gray-900 mb-6">To Do List</h1>
<div class="max-w-2xl mx-auto bg-white shadow-md rounded-lg p-6">
<form @submit.prevent="addTodo">
<div class="flex items-center mb-4 space-x-3">
Expand Down Expand Up @@ -50,19 +39,11 @@
@change="updateTodo(index)"
:checked="todo.completed === 1"
/>
<div
:class="{ 'line-through': todo.completed }"
class="text-lg text-gray-800"
>
<div :class="{ 'line-through': todo.completed }" class="text-lg text-gray-800">
{{ todo.description }}
</div>
</div>
<button
@click.prevent="removeTodo(index)"
class="text-red-500 hover:text-red-700 font-semibold"
>
X
</button>
<button @click.prevent="removeTodo(index)" class="text-red-500 hover:text-red-700 font-semibold">X</button>
</li>
</ul>
</div>
Expand All @@ -71,11 +52,11 @@

// TodoList.vue
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { usePowerSync, useStatus } from "@powersync/vue";
import { TodoRecord } from "../library/AppSchema";
import { supabase } from "../plugins/supabase";
import { useRouter } from "vue-router";
import { ref } from 'vue';
import { usePowerSync, useQuery, useStatus } from '@powersync/vue';
import { TodoRecord } from '../library/AppSchema';
import { supabase } from '../plugins/supabase';
import { useRouter } from 'vue-router';
const powersync = usePowerSync();
const status = useStatus();
Expand All @@ -87,51 +68,42 @@ if (!supabase.ready) {
* Redirect if on the entry view
*/
if (supabase.currentSession) {
router.push("/");
router.push('/');
} else {
router.push("/login");
router.push('/login');
}
},
}
});
} else {
router.push("/");
router.push('/');
}
// Define a type for the Todo item
type Todo = TodoRecord;
const newTodo = ref<string>("");
const todos = ref<Todo[]>([]);
const newTodo = ref<string>('');
const { data: todos } = useQuery<Todo>('SELECT * from todos');
const logout = async () => {
await supabase.client.auth.signOut();
};
const addTodo = async () => {
if (newTodo.value.trim()) {
await powersync.value.execute(
"INSERT INTO todos (id, created_at, description, completed) VALUES (uuid(), datetime(), ?, ?) RETURNING *",
'INSERT INTO todos (id, created_at, description, completed) VALUES (uuid(), datetime(), ?, ?) RETURNING *',
[newTodo.value, 0]
);
todos.value = await powersync.value.getAll("SELECT * from todos");
newTodo.value = "";
newTodo.value = '';
}
};
const updateTodo = async (index: number) => {
const todo = todos.value[index];
await powersync.value.execute("UPDATE todos SET completed = ? WHERE id = ?", [
!todo.completed,
todo.id,
]);
todos.value = await powersync.value.getAll("SELECT * from todos");
await powersync.value.execute('UPDATE todos SET completed = ? WHERE id = ?', [!todo.completed, todo.id]);
};
const removeTodo = async (index: number) => {
const todo = todos.value[index];
await powersync.value.execute("DELETE FROM todos WHERE id = ?", [todo.id]);
todos.value = await powersync.value.getAll("SELECT * from todos");
await powersync.value.execute('DELETE FROM todos WHERE id = ?', [todo.id]);
};
onMounted(async () => {
todos.value = await powersync.value.getAll("SELECT * from todos");
});
</script>
50 changes: 25 additions & 25 deletions demos/vue-supabase-todolist-completed-tutorial/vite.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig(({ command }) => {
const isDev = command === "serve";
const isDev = command === 'serve';

return {
plugins: [vue(), wasm(), topLevelAwait()],
define: { "process.env": {} },
define: { 'process.env': {} },
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"],
extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
},
optimizeDeps: {
// Don't optimize these packages as they contain web workers and WASM files.
// https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
exclude: ["@journeyapps/wa-sqlite", "@powersync/web"],
exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
include: [
"@powersync/web > uuid",
"@powersync/web > event-iterator",
"@powersync/web > js-logger",
"@powersync/web > lodash/throttle",
"@powersync/web > can-ndjson-stream",
"@powersync/web > bson",
"@powersync/web > buffer",
"@powersync/web > rsocket-core",
"@powersync/web > rsocket-websocket-client",
"@powersync/web > cross-fetch",
],
'@powersync/web > uuid',
'@powersync/web > event-iterator',
'@powersync/web > js-logger',
'@powersync/web > lodash/throttle',
'@powersync/web > can-ndjson-stream',
'@powersync/web > bson',
'@powersync/web > buffer',
'@powersync/web > rsocket-core',
'@powersync/web > rsocket-websocket-client',
'@powersync/web > cross-fetch'
]
},
worker: {
format: "es",
plugins: () => [wasm(), topLevelAwait()],
format: 'es',
plugins: () => [wasm(), topLevelAwait()]
},
build: {
sourcemap: !isDev, // Disable sourcemaps in development
},
sourcemap: !isDev // Disable sourcemaps in development
}
};
});
Loading

0 comments on commit acae7ab

Please sign in to comment.