Skip to content

Powerful SQLite adapter for web, mobile and desktop. Build reactive UI on top of it

License

Notifications You must be signed in to change notification settings

kikko-land/kikko

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dark-mix

Kikko is a wrapper around SQLite interfaces. It brings transaction support, middlewares for queries, and SQLite adapters for the most popular platforms.

It also allows you to build data heavy reactive interfaces on top of SQLite for any platform with any framework or lib.

This project is in an active development! Don't expect it to work stable before stable release. Some backend could not work, and breaking API changes may happen.

Full documentation can be found on the site.

Also you can check React example at CodeSanbox (multi-tab is not supported due to CORS).

Actually, what kikko is:

  1. Correct transaction handling, with transaction and queries queue
  2. Middlewares api, to intercept all running queries
  3. Built-in profiler information

And it also require db backend, that should implement needed interface. Other things, like reactive-queries-plugin(which gives reactivity for React or Vue) or migrations-plugin, are optional to install and use.

Features

Kikko
⚖️ Tiny size < 15kb size in gzip
📱 Wide platforms support Web, mobile(react-native, expo, cordova, ionic), desktop(electron, tauri).
🧰 Lib-agnostic Use with React, Vue, Svelte (WIP), Angular (WIP) or any other lib/framework you want.
🐛 Easy to debug Kikko colorize queries, so, for example, you can easily understand to which transaction query belongs. He also meausures preparation, transfer and execution time.
🔐 Secured by default With template literals, all vars that are used will be automatically marked as prepared statement variable that reduce chances of SQL injections a lot.
🛠 Plugin system Allows you to integrate your own code on query/transaction run.

Simple React component example

import {
  makeId,
  sql,
  useDbQuery,
  useFirstRowDbQuery,
  useRunDbQuery,
} from "@kikko-land/react";

type Note = { id: string; title: string };
const notesTable = sql.table`notes`;

export const Notes = () => {
  const notes = useDbQuery<Note>(sql`SELECT * FROM ${notesTable}`);
  const notesCount = useFirstRowDbQuery<{ count: number }>(
    sql`SELECT COUNT(*) FROM ${notesTable}`
  );

  const [addNote, addNoteState] = useRunDbQuery((db) => async () => {
    const id = makeId();

    await db.runQuery(
      sql`INSERT INTO ${notesTable}(id, title) VALUES(${id}, ${`Note#${id}`})`
    );
  });

  return (
    <>
      <button
        onClick={addNote}
        disabled={
          addNoteState.type === "running" || addNoteState.type === "waitingDb"
        }
      >
        Add note
      </button>
      <div>Add note result: {JSON.stringify(addNoteState)}</div>
      <div>Query result (total notes count: {notesCount.data?.count})</div>
      <pre>{JSON.stringify(notes)}</pre>
    </>
  );
};

Supported platforms

Platform Uses Package Example Doc
Vite + React @kikko-land/better-absurd-sql @kikko-land/absurd-web-backend Link Link
Tauri + Vite + Vue tauri-plugin-sqlite @kikko-land/tauri-backend Link Link
Create-react-app @kikko-land/better-absurd-sql @kikko-land/absurd-web-backend Link Link
Expo @kikko-land/better-absurd-sql for web, expo SQLite for native @kikko-land/absurd-web-backend
@kikko-land/native-expo-backend
Link Link
Electron better-sqlite3 @kikko-land/electron-better-sqlite3-backend Link Link
Ionic @awesome-cordova-plugins/sqlite @kikko-land/absurd-web-backend
@kikko-land/native-ionic-backend
Link Link
React Native react-native-sqlite-storage @kikko-land/react-native-backend Link Link
Cloudflare D1 Cloudflare D1 @kikko-land/d1-backend Link Link