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.

Sign up for GitHub

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

Elijah/add web interface #759

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+422 −305
Open

Elijah/add web interface #759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48a47bc
Add tsconfig and tsc
elijahmorg Jan 20, 2025
e9f1e26
add interface.ts
elijahmorg Jan 20, 2025
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
197 changes: 106 additions & 91 deletions bindings/wasm/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 5 additions & 2 deletions bindings/wasm/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,18 @@
"exports": {
".": {
"node": "./node/dist/index.cjs",
"browser": "./web/dist/index.js",
"browser": "./web/dist/interface.js",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should default also be interface.js? Further, perhaps this should be sth like

      "node": {
        "import": "./node/dist/index.mjs", // if we have ES module support in node, i dont remember
        "require": "./node/dist/index.cjs",
      },
      "browser": {
        "import": "./web/dist/interface.js",
        "require": "???"
      }

"default": "./web/dist/index.js"
},
"./limbo-worker.js": "./web/dist/limbo-worker.js"
"./limbo-worker.js": "./web/dist/limbo-worker.js",
"./interface.js": "./web/dist/interface.js"
},
"files": [
"node/dist",
"web/dist"
],
"scripts": {
"build:ts": "tsc",
"dev": "cd web && vite",
"test": "cd web && vitest",
"test:ui": "cd web && vitest --ui"
Expand All @@ -34,6 +36,7 @@
"@vitest/ui": "^2.1.8",
"happy-dom": "^16.3.0",
"playwright": "^1.49.1",
"typescript": "^5.7.3",
"vite": "^6.0.7",
"vite-plugin-wasm": "^3.4.1",
"vitest": "^2.1.8",
Expand Down
12 changes: 5 additions & 7 deletions bindings/wasm/scripts/build
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#!/bin/bash

set -e

# Define final output directories
NODE_DIR="node"
WEB_DIR="web"

Expand All @@ -14,8 +14,7 @@ npx wasm-pack build \
--out-name index \
--no-default-features \
--features nodejs

rm -rf pkg/package.json # don't want generated package.json
rm -rf pkg/package.json
mv pkg/* $NODE_DIR/dist/
cp -r $NODE_DIR/src/* $NODE_DIR/dist/
cd node/dist/
Expand All @@ -32,11 +31,10 @@ npx wasm-pack build \
--out-name index \
--no-default-features \
--features web

rm -rf pkg/package.json # don't want generated package.json
rm -rf pkg/package.json
mv pkg/* $WEB_DIR/dist/
cp -r $WEB_DIR/src/* $WEB_DIR/dist/

# TypeScript build
npx tsc

# mv $WEB_DIR/index.js $WEB_DIR/index.mjs
rm -rf pkg
135 changes: 56 additions & 79 deletions bindings/wasm/test-limbo-pkg/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>Limbo Test</title>
<title>Database Test</title>
<style>
.success { color: green; font-weight: bold; }
.error { color: red; font-weight: bold; }
.test-status { padding: 10px; margin: 5px; border-radius: 4px; }
</style>
</head>
<body>
<script type="module">
function waitForMessage(worker, type, op) {
return new Promise((resolve, reject) => {
const handler = (e) => {
if (e.data.type === type && (!op || e.data.op === op)) {
worker.removeEventListener('message', handler);
resolve(e.data);
} else if (e.data.type === 'error') {
worker.removeEventListener('message', handler);
reject(e.data.error);
}
};
worker.addEventListener('message', handler);
});
}

async function runTests() {
// const worker = new Worker('./src/limbo-worker.js', { type: 'module' });
// const worker = new Worker('limbo-wasm/src/limbo-worker.js', { type: 'module' });
// const worker = new Worker('./node_modules/limbo-wasm/src/limbo-worker.js', { type: 'module' });
const worker = new Worker(new URL('limbo-wasm/limbo-worker.js', import.meta.url), { type: 'module' });

// Wait for ready then send createDb
await waitForMessage(worker, 'ready');
worker.postMessage({
op: 'createDb',
path: 'test.db'
});

// Wait for createDb success then send exec
await waitForMessage(worker, 'success', 'createDb');
worker.postMessage({
op: 'exec',
sql: `
CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT);
`
});
console.log("made it here");

// Wait for exec success then send prepare
await waitForMessage(worker, 'success', 'exec');
worker.postMessage({
op: 'exec',
sql: `
INSERT INTO users VALUES (1, 'Alice', '[email protected]');
`
});

await waitForMessage(worker, 'success', 'exec');
worker.postMessage({
op: 'exec',
sql: `
INSERT INTO users VALUES (2, 'Bob', '[email protected]');
`
});

await waitForMessage(worker, 'success', 'exec');
worker.postMessage({
op: 'exec',
sql: `
INSERT INTO users VALUES (3, 'bill', '[email protected]');
`
});

// Wait for exec success then send prepare
await waitForMessage(worker, 'success', 'exec');
worker.postMessage({
op: 'prepare',
sql: 'SELECT * FROM users;'
});

const results = await waitForMessage(worker, 'result');
console.log('Query results:', results);
}

runTests().catch(console.error);
</script>
<div id="results"></div>

<script type="module">
import { DatabaseClient } from 'limbo-wasm';

function log(message, isError = false) {
const div = document.createElement('div');
div.className = `test-status ${isError ? 'error' : 'success'}`;
div.textContent = typeof message === 'string' ? message : JSON.stringify(message, null, 2);
document.getElementById('results').appendChild(div);
}

async function runTests() {
const db = new DatabaseClient();

try {
log('Starting up');
await db.init('test.db');
log('Database initialized');

await db.exec(`
CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, email TEXT);
`);
log('Table created');

await db.exec(`
INSERT INTO users VALUES (1, 'Alice', '[email protected]');
`);
await db.exec(`
INSERT INTO users VALUES (2, 'Bob', '[email protected]');

`);
await db.exec(`
INSERT INTO users VALUES (3, 'bill', '[email protected]');
`);
log('Data inserted');

const stmt = await db.prepare('SELECT * FROM users;');
const results = await stmt.all();
log('Query results: ' + JSON.stringify(results));

db.close();
log('All tests completed successfully');
} catch (error) {
log(`Test failed: ${error.message}`, true);
}
}

runTests();
</script>
</body>
</html>

Loading
Loading