Skip to content

Commit 8a135d1

Browse files
whygee-devwhygee-dev
committed
feat: Add example-vite-custom-sql demo project for custom SQL
1 parent 8b4f76f commit 8a135d1

File tree

6 files changed

+158
-0
lines changed

6 files changed

+158
-0
lines changed

‎demos/example-vite-custom-sql/CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# example-vite-custom-sql
2+
3+
## 0.0.1

‎demos/example-vite-custom-sql/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# PowerSync Vite custom SQL demo
2+
3+
This is a minimal example demonstrating how to use custom SQL with PowerSync.
4+
5+
To see it in action:
6+
7+
1. Make sure to run `pnpm install` and `pnpm build:packages` in the root directory of this repo.
8+
2. `cd` into this directory, and run `pnpm start`.
9+
3. Open the localhost URL displayed in the terminal output in your browser.

‎demos/example-vite-custom-sql/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "example-vite-custom-sql",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"start": "pnpm build && pnpm preview",
11+
"test:build": "pnpm build"
12+
},
13+
"dependencies": {
14+
"@powersync/web": "workspace:*"
15+
},
16+
"devDependencies": {
17+
"@swc/core": "~1.6.0",
18+
"vite": "^5.0.12",
19+
"vite-plugin-top-level-await": "^1.4.1",
20+
"vite-plugin-wasm": "^3.3.0"
21+
}
22+
}

‎demos/example-vite-custom-sql/src/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script type="module" src="./index.js"></script>
5+
</head>
6+
<body>
7+
Custom SQL demo: Check the console to see it in action!
8+
</body>
9+
</html>

‎demos/example-vite-custom-sql/src/index.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import { column, Schema, Table, PowerSyncDatabase } from '@powersync/web';
2+
import Logger from 'js-logger';
3+
4+
Logger.useDefaults();
5+
6+
/**
7+
* A placeholder connector which doesn't do anything.
8+
* This is just used to verify that the sync workers can be loaded
9+
* when connecting.
10+
*/
11+
class DummyConnector {
12+
async fetchCredentials() {
13+
return {
14+
endpoint: '',
15+
token: ''
16+
};
17+
}
18+
19+
async uploadData(database) {}
20+
}
21+
22+
const customers = new Table({ first_name: column.text, last_name: column.text, full_name: column.text });
23+
24+
export const AppSchema = new Schema({ customers }, ({ getInternalName }) => [
25+
`DROP TRIGGER IF EXISTS compute_full_name`,
26+
`DROP TRIGGER IF EXISTS update_full_name`,
27+
28+
`
29+
CREATE TRIGGER compute_full_name
30+
AFTER INSERT ON ${getInternalName('customers')}
31+
BEGIN
32+
UPDATE customers
33+
SET full_name = first_name || ' ' || last_name
34+
WHERE id = NEW.id;
35+
END;
36+
`,
37+
`
38+
CREATE TRIGGER update_full_name
39+
AFTER UPDATE OF data ON ${getInternalName('customers')}
40+
BEGIN
41+
UPDATE customers
42+
SET full_name = first_name || ' ' || last_name
43+
WHERE id = NEW.id AND full_name != (first_name || ' ' || last_name);
44+
END;
45+
`
46+
]);
47+
48+
let PowerSync;
49+
50+
const openDatabase = async () => {
51+
PowerSync = new PowerSyncDatabase({
52+
schema: AppSchema,
53+
database: { dbFilename: 'test.sqlite' }
54+
});
55+
56+
await PowerSync.init();
57+
58+
await PowerSync.execute('DELETE FROM customers');
59+
60+
await PowerSync.execute('INSERT INTO customers(id, first_name, last_name) VALUES(uuid(), ?, ?)', ['John', 'Doe']);
61+
62+
const result = await PowerSync.getAll('SELECT * FROM customers');
63+
64+
console.log('Contents of customers after insert: ', result);
65+
66+
await PowerSync.execute('UPDATE customers SET first_name = ?', ['Jane']);
67+
68+
const result2 = await PowerSync.getAll('SELECT * FROM customers');
69+
70+
console.log('Contents of customers after update: ', result2);
71+
72+
console.log(
73+
`Attempting to connect in order to verify web workers are correctly loaded.
74+
This doesn't use any actual network credentials.
75+
Network errors will be shown: these can be ignored.`
76+
);
77+
78+
/**
79+
* Try and connect, this will setup shared sync workers
80+
* This will fail due to not having a valid endpoint,
81+
* but it will try - which is all that matters.
82+
*/
83+
await PowerSync.connect(new DummyConnector());
84+
};
85+
86+
document.addEventListener('DOMContentLoaded', (event) => {
87+
openDatabase();
88+
});

‎demos/example-vite-custom-sql/vite.config.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import wasm from 'vite-plugin-wasm';
2+
import topLevelAwait from 'vite-plugin-top-level-await';
3+
import { defineConfig } from 'vite';
4+
5+
// https://vitejs.dev/config/
6+
export default defineConfig({
7+
root: 'src',
8+
build: {
9+
outDir: '../dist',
10+
rollupOptions: {
11+
input: 'src/index.html'
12+
},
13+
emptyOutDir: true
14+
},
15+
envDir: '..', // Use this dir for env vars, not 'src'.
16+
optimizeDeps: {
17+
// Don't optimize these packages as they contain web workers and WASM files.
18+
// https://github.com/vitejs/vite/issues/11672#issuecomment-1415820673
19+
exclude: ['@journeyapps/wa-sqlite', '@powersync/web'],
20+
include: ['@powersync/web > js-logger']
21+
},
22+
plugins: [wasm(), topLevelAwait()],
23+
worker: {
24+
format: 'es',
25+
plugins: () => [wasm(), topLevelAwait()]
26+
}
27+
});

0 commit comments

Comments
 (0)