Skip to content

Commit 7ee0f08

Browse files
GioeeGioee
committed
fixed browser compatibility + example
1 parent 7ca1d9d commit 7ee0f08

6 files changed

Lines changed: 169 additions & 22 deletions

File tree

‎bun.lockb‎

1.84 KB
Binary file not shown.

‎examples/with-javascript-browser/index.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title>Driver | SQLite Cloud</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<script src="../../lib/sqlitecloud.drivers.js"></script>
9+
</head>
10+
11+
<body class="p-4">
12+
<h1>SQLite Cloud Drivers</h1>
13+
<div class="pb-6 text-sm">
14+
<a href="https://www.npmjs.com/package/@sqlitecloud/drivers">npm add @sqlitecloud/drivers</a>
15+
</div>
16+
17+
<!-- Add the text field and button here -->
18+
<div class="pb-2">
19+
<div class="text-xs w-12">databaseUrl</div>
20+
<input type="text" id="connectionStringInput"
21+
placeholder="Example: sqlitecloud://admin:password@host.sqlite.cloud:8860/chinook.sqlite"
22+
value="sqlitecloud://host.sqlite.cloud:8860?apikey=apikey"
23+
class="border rounded w-full pl-2 pr-2 mb-2" />
24+
<div class="text-sm w-12">sql:</div>
25+
<input type="text" id="messageInput"
26+
placeholder="Example: USE DATABASE chinook.sqlite; select * from customers limit 3"
27+
value="USE DATABASE chinook.sqlite; select * from customers limit 3"
28+
class="border rounded w-full pl-2 pr-2 mb-2" />
29+
</div>
30+
<button id="sendButton" class="border rounded w-32 mb-6">query</button>
31+
32+
<h2 class="pb-4">Results:</h2>
33+
<ul id="messages" class="pl-4"></ul>
34+
35+
<script type="module">
36+
const status = document.getElementById('status');
37+
const messages = document.getElementById('messages');
38+
39+
const appendMessage = (content) => {
40+
const item = document.createElement('li');
41+
item.classList.add('pb-4');
42+
item.classList.add('text-sm');
43+
item.textContent = content;
44+
messages.prepend(item);
45+
};
46+
47+
// socket is connected the first time the sql button is clicked and stays connected until the page is refreshed
48+
var database = null;
49+
50+
sendButton.addEventListener('click', () => {
51+
if (!database) {
52+
// Get the input element by ID
53+
var connectionStringinputElement = document.getElementById('connectionStringInput');
54+
var connectionstring = connectionStringinputElement.value;
55+
// connect via websocket to the gateway on the same server
56+
const connectionConfig = {
57+
gatewayUrl: `${window.location.protocol === 'https:' ? 'wss' : 'ws'
58+
}://${window.location.hostname}:4000`,
59+
connectionstring: connectionstring,
60+
};
61+
database = new window.sqlitecloud.Database(
62+
connectionConfig,
63+
(error) => {
64+
if (error) {
65+
database = null;
66+
appendMessage(`connection error: ${error}`);
67+
} else {
68+
console.log('connected');
69+
appendMessage(`connected`);
70+
}
71+
}
72+
);
73+
}
74+
75+
var messageInputElement = document.getElementById('messageInput');
76+
const sql = messageInputElement.value;
77+
const startTime = Date.now();
78+
79+
// send an async sql request to the server
80+
database.all(sql, (error, rows) => {
81+
if (error) {
82+
console.error(`sql: ${sql}, error: ${error}`, error);
83+
appendMessage(`sql: ${sql}, error: ${error}`);
84+
} else {
85+
console.debug(`sql: ${sql}, (${Date.now() - startTime}ms)`, rows);
86+
appendMessage(JSON.stringify(rows));
87+
}
88+
});
89+
});
90+
</script>
91+
</body>
92+
93+
</html>

‎package-lock.json‎

Lines changed: 70 additions & 17 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,16 @@
4848
"lz4js": "^0.2.0",
4949
"react-native-url-polyfill": "^2.0.0",
5050
"socket.io": "^4.7.5",
51-
"socket.io-client": "^4.7.5"
51+
"socket.io-client": "^4.7.5",
52+
"whatwg-url": "^14.0.0"
5253
},
5354
"devDependencies": {
5455
"@types/bun": "^1.1.1",
5556
"@types/express": "^4.17.21",
5657
"@types/jest": "^29.5.12",
5758
"@types/lz4": "^0.6.4",
5859
"@types/node": "^12.20.55",
60+
"@types/whatwg-url": "^11.0.5",
5961
"@typescript-eslint/eslint-plugin": "^4.33.0",
6062
"@typescript-eslint/parser": "^4.33.0",
6163
"dotenv": "^16.4.5",
@@ -91,7 +93,7 @@
9193
"printWidth": 160
9294
},
9395
"react-native": {
94-
"url": "react-native-url-polyfill"
96+
"whatwg-url": "react-native-url-polyfill"
9597
},
9698
"browser": {
9799
"tls": false

‎src/drivers/utilities.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import { SQLiteCloudConfig, SQLiteCloudError, SQLiteCloudDataTypes, DEFAULT_PORT, DEFAULT_TIMEOUT } from './types'
66
import { SQLiteCloudArrayType } from './types'
7-
import { URL } from 'url'
7+
import { URL } from 'whatwg-url'
88

99
//
1010
// determining running environment, thanks to browser-or-node

‎webpack.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,7 @@ const productionConfig = {
2626
resolve: {
2727
fallback: {
2828
net: false, // tell Webpack to ignore "net"
29-
tls: false, // tell Webpack to ignore "tls"
30-
url: false
29+
tls: false // tell Webpack to ignore "tls"
3130
}
3231
}
3332
}

0 commit comments

Comments
 (0)