Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/different client types #1

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion examples/vanilla-js/README.md
Original file line number Diff line number Diff line change
@@ -12,6 +12,9 @@ To test it out for yourself, clone this repository and execute these steps:

2- Execute `npm run build`

3- Execute `npm run start:server`
3.a - Execute `npm run start:server` if you want to run without COOP headers ("OPFS_WORKER" **will not** work)

3.b - Execute `npm run start:server:coop` if you want to run with COOP headers being returned ("OPFS_WORKER" **will** work)


4- Open your browser, go to `http://localhost:3000`, open the DevTools and you should see the results outputted.
526 changes: 416 additions & 110 deletions examples/vanilla-js/package-lock.json

Large diffs are not rendered by default.

20 changes: 11 additions & 9 deletions examples/vanilla-js/package.json
Original file line number Diff line number Diff line change
@@ -6,22 +6,24 @@
"type": "module",
"scripts": {
"build": "tsc -p tsconfig.json && rollup -c rollup.config.js --compact && cp node_modules/@magieno/sqlite-client/dist/bundle/sqlite-client-worker.js public_html/scripts/sqlite-worker.mjs && cp -r node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/* public_html/scripts/",
"start:server": "serve public_html -c ../serve.json "
"start:server:coop": "serve public_html -c ../serve.json ",
"start:server": "serve public_html"
},
"author": "",
"license": "ISC",
"dependencies": {
"@magieno/sqlite-client": "^3.43.2"
"@magieno/sqlite-client": "3.45.1-build1",
"@sqlite.org/sqlite-wasm": "3.45.2-build1"
},
"devDependencies": {
"typescript": "^5.0.4",
"@rollup/plugin-commonjs": "^24.0.1",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"rollup": "^3.16.0",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.1.0",
"@rollup/plugin-node-resolve": "^15.2.3",
"rollup": "^4.13.0",
"rollup-plugin-cleanup": "^3.2.1",
"rollup-plugin-ignore": "^1.0.10",
"rollup-plugin-typescript2": "^0.34.1",
"serve": "^14.2.0"
"rollup-plugin-typescript2": "^0.36.0",
"serve": "^14.2.1",
"typescript": "^5.4.2"
}
}
14 changes: 14 additions & 0 deletions examples/vanilla-js/public_html/index.html
Original file line number Diff line number Diff line change
@@ -9,5 +9,19 @@

<body>
<h1>SQLite Wasm Playground</h1>


<form id="sqliteConfigForm">
<label for="clientType">Sqlite Client Type:</label>
<select id="clientType" name="clientType">
<option value="MEMORY_MAIN_THREAD">MEMORY_MAIN_THREAD</option>
<option value="MEMORY_WORKER">MEMORY_WORKER</option>
<option value="OPFS_WORKER">OPFS_WORKER</option>
<option value="OPFS_SYNC_ACCESS_HANDLE_WORKER">OPFS_SYNC_ACCESS_HANDLE_WORKER</option>
</select>

<button type="button">Run SQLite</button>
</form>

</body>
</html>
46 changes: 36 additions & 10 deletions examples/vanilla-js/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,43 @@
import {SqliteClient} from "@magieno/sqlite-client";
import { SqliteClient } from "@magieno/sqlite-client";
import { SqliteClientTypeEnum } from "@magieno/sqlite-client/dist/esm/enums/sqlite-client-type.enum";

const bootstrap = async () => {

function runSqlite(): void {
const clientTypeSelect = document.getElementById('clientType') as HTMLSelectElement;

run(clientTypeSelect.value as SqliteClientTypeEnum);
}

// Adapt the HTML button onclick to directly call submitForm() without needing an inline event handler
document.querySelector('button')?.addEventListener('click', runSqlite);

const sqliteClients = {};

const run = async (clientType: SqliteClientTypeEnum) => {
const webSqliteWorkerPath = "scripts/sqlite-worker.mjs"; // Must correspond to the path in your final deployed build.
const filename = "/test.sqlite3"; // This is the name of your database. It corresponds to the path in the OPFS.

const webSqlite = new SqliteClient(filename, "c", webSqliteWorkerPath)
await webSqlite.init();
let webSqlite: SqliteClient;
if (sqliteClients[clientType]) {
webSqlite = sqliteClients[clientType];
} else {

await webSqlite.executeSql("CREATE TABLE IF NOT EXISTS test(a,b)");
await webSqlite.executeSql("INSERT INTO test VALUES(?, ?)", [6,7]);
const results = await webSqlite.executeSql("SELECT * FROM test");
console.log("Results:", results);
}
webSqlite = new SqliteClient(
{
type: clientType,
filename: filename,
sqliteWorkerPath: webSqliteWorkerPath,
flags: "c",
}
);

await webSqlite.init();
sqliteClients[clientType] = webSqlite;
}

bootstrap();
await webSqlite.executeSql("CREATE TABLE IF NOT EXISTS test(a,b)", []);
await webSqlite.executeSql("INSERT INTO test VALUES(?, ?)", [6, 7]);
const results = await webSqlite.executeSql("SELECT * FROM test", []);
console.log("Results:", results);

}