Skip to content

Commit cb993be

Browse files
phireskyphiresky
committed
add full minimal example
1 parent 807be59 commit cb993be

File tree

8 files changed

+199
-4
lines changed

8 files changed

+199
-4
lines changed

‎.gitignore

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
/node_modules
2-
/dist
3-
/data
1+
node_modules
2+
dist
3+
/data
4+
/example/package-lock.json

‎README.md

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ vacuum; -- reorganize database and apply changed page size
2929

3030
Finally, install sql.js-httpvfs from [npm](https://www.npmjs.com/package/sql.js-httpvfs) and use it in TypeScript / JS!
3131

32+
Here's an example for people familiar with the JS / TS world. At the bottom of this readme there's a more complete example for those unfamiliar.
33+
3234
```ts
3335
import { createDbWorker } from "sql.js-httpvfs"
3436

@@ -70,7 +72,6 @@ const worker = await createDbWorker(
7072

7173
const result = await worker.db.exec(`select * from table where id = ?`, [123]);
7274

73-
7475
```
7576

7677
## Is this production ready?
@@ -86,3 +87,58 @@ This project is inspired by:
8687
* https://phiresky.github.io/youtube-sponsorship-stats/?uploader=Adam+Ragusea what I originally built sql.js-httpvfs for
8788

8889
The original code of lazyFile is based on the emscripten createLazyFile function, though not much of that code is remaining.
90+
91+
## Minimal Example from scratch
92+
93+
Here's an example of how to setup sql.js-httpvfs completely from scratch, for people unfamiliar with JavaScript or NPM in general.
94+
95+
First, You will need `node` and `npm`. Get this from your system package manager like `apt`.
96+
97+
Then, go to a new directory and add a few dependencies:
98+
99+
```sh
100+
mkdir example
101+
cd example
102+
npm install --save-dev webpack webpack-cli typescript ts-loader http-server
103+
npm install --save sql.js-httpvfs
104+
npx tsc --init
105+
```
106+
107+
Edit the tsconfig.json file to make it more modern:
108+
```json
109+
...
110+
"target": "es2020",
111+
"module": "es2020",
112+
"moduleResolution": "node",
113+
...
114+
```
115+
116+
Create a webpack config, minimal index.html file and TypeScript
117+
118+
* [example/webpack.config.js](./example/webpack.config.js)
119+
* [example/index.html](./example/index.html)
120+
* [example/src/index.ts](./example/src/index.ts)
121+
122+
Finally, create a database:
123+
124+
```sh
125+
sqlite3 example.sqlite3 "create table mytable(foo, bar)"
126+
sqlite3 example.sqlite3 "insert into mytable values ('hello', 'world')"
127+
```
128+
129+
and build the JS bundle and start a webserver:
130+
131+
```
132+
./node_modules/.bin/webpack --mode=development
133+
./node_modules/.bin/http-server
134+
```
135+
136+
Then go to http://localhost:8080
137+
138+
And you should see the output to the query `select * from mytable`.
139+
140+
```json
141+
[{"foo":"hello","bar":"world"}]
142+
```
143+
144+
The full code of this example is in [example/](./example/)

‎example/example.sqlite3

8 KB
Binary file not shown.

‎example/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!doctype html>
2+
<title>Minimal sql.js-httpvfs demo</title>
3+
<script src="./dist/bundle.js"></script>
4+
<div>Hello World!</div>

‎example/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"dependencies": {
3+
"sql.js-httpvfs": "^0.8.8"
4+
},
5+
"devDependencies": {
6+
"http-server": "^0.12.3",
7+
"ts-loader": "^9.1.2",
8+
"typescript": "^4.2.4",
9+
"webpack": "^5.36.2",
10+
"webpack-cli": "^4.7.0"
11+
}
12+
}

‎example/src/index.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { createDbWorker } from "sql.js-httpvfs";
2+
3+
const workerUrl = new URL(
4+
"sql.js-httpvfs/dist/sqlite.worker.js",
5+
import.meta.url
6+
);
7+
const wasmUrl = new URL("sql.js-httpvfs/dist/sql-wasm.wasm", import.meta.url);
8+
9+
async function load() {
10+
const worker = await createDbWorker(
11+
[
12+
{
13+
from: "inline",
14+
config: {
15+
serverMode: "full",
16+
url: "/example.sqlite3",
17+
requestChunkSize: 4096
18+
}
19+
},
20+
],
21+
workerUrl.toString(),
22+
wasmUrl.toString()
23+
);
24+
25+
const result = await worker.db.query(`select * from mytable`);
26+
27+
document.body.textContent = JSON.stringify(result);
28+
}
29+
30+
load();

‎example/tsconfig.json

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
{
2+
"compilerOptions": {
3+
/* Visit https://aka.ms/tsconfig.json to read more about this file */
4+
5+
/* Basic Options */
6+
// "incremental": true, /* Enable incremental compilation */
7+
"target": "es2020", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
8+
"module": "es2020", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
9+
// "lib": [], /* Specify library files to be included in the compilation. */
10+
// "allowJs": true, /* Allow javascript files to be compiled. */
11+
// "checkJs": true, /* Report errors in .js files. */
12+
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
13+
// "declaration": true, /* Generates corresponding '.d.ts' file. */
14+
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
15+
// "sourceMap": true, /* Generates corresponding '.map' file. */
16+
// "outFile": "./", /* Concatenate and emit output to single file. */
17+
// "outDir": "./", /* Redirect output structure to the directory. */
18+
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
19+
// "composite": true, /* Enable project compilation */
20+
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21+
// "removeComments": true, /* Do not emit comments to output. */
22+
// "noEmit": true, /* Do not emit outputs. */
23+
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
24+
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25+
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
26+
27+
/* Strict Type-Checking Options */
28+
"strict": true, /* Enable all strict type-checking options. */
29+
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
30+
// "strictNullChecks": true, /* Enable strict null checks. */
31+
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
32+
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33+
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
34+
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
35+
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
36+
37+
/* Additional Checks */
38+
// "noUnusedLocals": true, /* Report errors on unused locals. */
39+
// "noUnusedParameters": true, /* Report errors on unused parameters. */
40+
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
41+
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
42+
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
43+
// "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */
44+
45+
/* Module Resolution Options */
46+
"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
47+
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
48+
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
49+
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
50+
// "typeRoots": [], /* List of folders to include type definitions from. */
51+
// "types": [], /* Type declaration files to be included in compilation. */
52+
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
53+
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
54+
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
55+
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
56+
57+
/* Source Map Options */
58+
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
59+
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
60+
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
61+
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
62+
63+
/* Experimental Options */
64+
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
65+
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
66+
67+
/* Advanced Options */
68+
"skipLibCheck": true, /* Skip type checking of declaration files. */
69+
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
70+
}
71+
}

‎example/webpack.config.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
entry: './src/index.ts',
3+
module: {
4+
rules: [
5+
{
6+
test: /\.tsx?$/,
7+
use: 'ts-loader',
8+
exclude: /node_modules/,
9+
},
10+
],
11+
},
12+
resolve: {
13+
extensions: ['.tsx', '.ts', '.js'],
14+
},
15+
output: {
16+
filename: 'bundle.js',
17+
},
18+
devServer: {
19+
publicPath: '/dist'
20+
}
21+
};

0 commit comments

Comments
 (0)