Mirrors/sql.js-httpvfs
1
0
Fork 0
mirror of https://github.com/phiresky/sql.js-httpvfs.git synced 2024-11-08 20:22:44 +01:00
Code Issues Releases Activity

add full minimal example

Browse Source
This commit is contained in:
phiresky 2021-05-08 11:29:11 +02:00
parent 807be59783
commit cb993be24c
8 changed files with 199 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -1,3 +1,4 @@
/node_modules
/dist
node_modules
dist
/data
/example/package-lock.json

58
README.md
View File

@ -29,6 +29,8 @@ vacuum; -- reorganize database and apply changed page size
Finally, install sql.js-httpvfs from [npm](https://www.npmjs.com/package/sql.js-httpvfs) and use it in TypeScript / JS!
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.
```ts
import { createDbWorker } from "sql.js-httpvfs"
@ -70,7 +72,6 @@ const worker = await createDbWorker(
const result = await worker.db.exec(`select * from table where id = ?`, [123]);
```
## Is this production ready?
@ -86,3 +87,58 @@ This project is inspired by:
* https://phiresky.github.io/youtube-sponsorship-stats/?uploader=Adam+Ragusea what I originally built sql.js-httpvfs for
The original code of lazyFile is based on the emscripten createLazyFile function, though not much of that code is remaining.
## Minimal Example from scratch
Here's an example of how to setup sql.js-httpvfs completely from scratch, for people unfamiliar with JavaScript or NPM in general.
First, You will need `node` and `npm`. Get this from your system package manager like `apt`.
Then, go to a new directory and add a few dependencies:
```sh
mkdir example
cd example
npm install --save-dev webpack webpack-cli typescript ts-loader http-server
npm install --save sql.js-httpvfs
npx tsc --init
```
Edit the tsconfig.json file to make it more modern:
```json
...
"target": "es2020",
"module": "es2020",
"moduleResolution": "node",
...
```
Create a webpack config, minimal index.html file and TypeScript
* [example/webpack.config.js](./example/webpack.config.js)
* [example/index.html](./example/index.html)
* [example/src/index.ts](./example/src/index.ts)
Finally, create a database:
```sh
sqlite3 example.sqlite3 "create table mytable(foo, bar)"
sqlite3 example.sqlite3 "insert into mytable values ('hello', 'world')"
```
and build the JS bundle and start a webserver:
```
./node_modules/.bin/webpack --mode=development
./node_modules/.bin/http-server
```
Then go to http://localhost:8080
And you should see the output to the query `select * from mytable`.
```json
[{"foo":"hello","bar":"world"}]
```
The full code of this example is in [example/](./example/)

BIN
example/example.sqlite3 Normal file
View File

Binary file not shown.

4
example/index.html Normal file
View File

@ -0,0 +1,4 @@
<!doctype html>
<title>Minimal sql.js-httpvfs demo</title>
<script src="./dist/bundle.js"></script>
<div>Hello World!</div>

12
example/package.json Normal file
View File

@ -0,0 +1,12 @@
{
"dependencies": {
"sql.js-httpvfs": "^0.8.8"
},
"devDependencies": {
"http-server": "^0.12.3",
"ts-loader": "^9.1.2",
"typescript": "^4.2.4",
"webpack": "^5.36.2",
"webpack-cli": "^4.7.0"
}
}

30
example/src/index.ts Normal file
View File

@ -0,0 +1,30 @@
import { createDbWorker } from "sql.js-httpvfs";
const workerUrl = new URL(
"sql.js-httpvfs/dist/sqlite.worker.js",
import.meta.url
);
const wasmUrl = new URL("sql.js-httpvfs/dist/sql-wasm.wasm", import.meta.url);
async function load() {
const worker = await createDbWorker(
[
{
from: "inline",
config: {
serverMode: "full",
url: "/example.sqlite3",
requestChunkSize: 4096
}
},
],
workerUrl.toString(),
wasmUrl.toString()
);
const result = await worker.db.query(`select * from mytable`);
document.body.textContent = JSON.stringify(result);
}
load();

71
example/tsconfig.json Normal file
View File

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

21
example/webpack.config.js Normal file
View File

@ -0,0 +1,21 @@
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
output: {
filename: 'bundle.js',
},
devServer: {
publicPath: '/dist'
}
};