In progress React integration. While we've gotten it to allowing ~100 SQLite queries to resolve in a single frame @ 60fps, there's still work to do on making the reactivity smarter and fine-grained.


License
MIT
Install
npm install @vlcn.io/react@3.1.0-next.1

Documentation

crsqlite-js

JavaScript packages to use cr-sqlite in the browser, node, react and other JS frameworks & environments.

Quickstart

Scaffolding a new project -- https://github.com/vlcn-io/vite-starter/tree/main

Example apps:

Video overview

Browser

import initWasm from "@vlcn.io/crsqlite-wasm";
import wasmUrl from "@vlcn.io/crsqlite-wasm/crsqlite.wasm?url";

const crsqlite = await initWasm(wasmUrl);
const db = await sqlite.open("db-name");

...

db.close();

NodeJS

import Database from "better-sqlite3";

const db = new Database(":memory:");
import { extensionPath } from "@vlcn.io/crsqlite";
db.loadExtension(extensionPath);

...

db.close();

React

function TodoList() {
  const allTodos: readonly Todo[] = useQuery<Todo>(
    ctx,
    "SELECT * FROM todo ORDER BY id DESC"
  ).data;

  return (
    <div>
      {allTodos.map((t) => (
        <Todo item={t} />
      ))}
    </div>
  );
}

Sync

See official docs or the vite-starter

Packages

Storage

  • crsqlite: The cr-sqlite loadable extension for use in NodeJS/Deno/Bun. Can be used with the SQLite bindings you currently use.
  • crsqlite-wasm: WASM build of CR-SQLite & SQLite for use in the browser.

Sync

UI

  • react: React hooks for driving UI state from database queries

Other

  • xplat-api: interfaces for components that can exist in NodeJS or the Browser.
  • client-core: Networking code that is common across all client implementations
  • client-server-common: Networking code that is common to the client and server
  • server-core: Network code that is common across all server implementations
  • node-allinone: convenience package for loading and using crsqlite in nodejs
    • Can also be used as a run time loadable extension in nodejs with whatever sqlite bindings you already use. See the node-allinone readme for more details
  • tsbuild-all: convenient package for building all other packages

Integration Tests

  • node-tests:
  • xplat-tests:
  • browser-tests:

Contributing

If you want to build these projects from source and/or hack on them or contribute, you'll need to clone the workspace repository:

git clone --recurse-submodules git@github.com:vlcn-io/workspace.git

Running make in that directory will get you set up. Ensure you have the rust nightly toolchain installed and activated before running make.