Document plain sqlite usage, for example for Svelte(Kit)

[bluepuma77]

Is your feature request related to a problem? Please describe. I am trying to use SvelteKit with Capacitor (Starter, Recipe, CLI tool, Blog 1, Blog 2). Sadly most examples for sqlite here seem very specific to Angular, React and Vue.

When checking plain API docs, it sounds like everything just works out-of-the-box:

Web the database is stored in Web browser INDEXEDDB storage as a localforage store under the jeepSqliteStore name and databases table name.

But the Web-Usage doc is many pages of code, and it's hard to see which is the generic and which is Angular/React/Vue specific.

Maybe I just don't understand what a "Stencil Component" actually is. Or why jeep-sqlite is needed. And what localforage is for.

Describe the solution you'd like A clear and concise description of how to setup and use sqlite in native/web environment with plain Javascript. It would be great to have a simple stand-alone function to call after the page is loaded. Without polyfills, window use and document.body.appendChild() if possible. Maybe that function can even become part of the package, why should everyone code this separately? And optional enable encryption.

// raw example, don't try this at home
import { Capacitor } from "@capacitor/core";
import { CapacitorSQLite, SQLiteConnection } from "@capacitor-community/sqlite";
import initSqlJs from 'sql.js';

export async function initDB(dbName) {
    let db;
    const platform = Capacitor.getPlatform();
    if (platform == 'web') {
        console.log('Using web sqlite')
        const SQL = await initSqlJs({
            locateFile: file => `./node_modules/sql.js/dist/${file}`
        })
        db = new SQL.Database();
    } else {
        console.log('Using capacitor sqlite')
        const sqlite = new SQLiteConnection(CapacitorSQLite)
        const ret = await sqlite.checkConnectionsConsistency()
        console.log(`after checkConnectionsConsistency ${ret.result}`)
        const isConn = await sqlite.isConnection(dbName, false)
        console.log(`after isConnection ${isConn.result}`)
        if (ret.result && isConn) {
            db = await sqlite.retrieveConnection(dbName, false)
        } else {
            db = await sqlite.createConnection(dbName, false, "no-encryption", 1, false)
        }
        await db.open()
    }
    return db
}

Describe alternatives you've considered Alternatively it would be awesome to have a full SvelteKit example, Svelte has already been mentioned in TypeORM-Usage doc.

[jepiqueau]

@bluepuma77 Can you share a template of your SvelteKit example i will implement the @capacitor-community/sqlite so it will be used for a full SvelteKit example. Please share it on github

[bluepuma77]

@jepiqueau Wow, now you really challenge me 😉

Does this work for you? Tested on web and iOS.

/src/lib/database.js includes the database functions /src/routes/+layout.js initialises the database /src/routes/+page.svelte shows the data and can add a line

It currently uses sql.js for web and sqlite plugin for native, therefore database.js has a lot of switches, you can completely replace sql.js with jeep and simply if you like. sql.js also has a different result structure.

Current issue is that the DB initialisation can not be awaited for in Capacitor, therefore the first render will show no data.

[khromov]

@jepiqueau I've made a bit of a wrapper around the sqlite plugin that works with SvelteKit (and HMR quirks), perhaps it can help you: https://github.com/khromov/sveltekit-capacitor-starter/pull/2#issuecomment-1994313430

Aside from the above you need to copy sql-wasm.wasm into the /static folder which is where SvelteKit expects static files to be after build.

[jepiqueau]

@bluepuma77 @khromov look atvite-sveltekit-capacitor-sqlite to day the web part is implemented. Hope this will help you to start

[bluepuma77]

Thanks @jepiqueau !

Running a first test:

git clone https://github.com/jepiqueau/vite-sveltekit-capacitor-sqlite
cd vite-sveltekit-capacitor-sqlite
npm install --save-dev copyfiles
npm run dev -- --open

It works in Firefox on Mac, I can navigate to users, and save a name when it includes a space. Was wondering at first why the button is disabled 😉

---

Thanks for the template with the store for the header with title and showBack, was just trying to figure that out, if I should just have the component on every page or pass params to a central component.

You can simply align the header with the window by placing this in app.html:

    <body data-sveltekit-preload-data="hover" style="margin: 0; padding: 0;">

[jepiqueau]

@bluepuma77 Thanks for your feedback. I didn't know SvelteKit so i had to figure out and test few things before to produce this example. I do not say that it is the best app implementation. The driver for it was to find the way to set-up the @capacitor-community/sqlite plugin, in order that developers could use it in that framework. As it works i will close the issue and make a link to reference that application in the @capacitor-community/sqlite list of application.thanks to push me to do it

[jepiqueau]

@bluepuma77 i develop a specific capacitor-typeorm-cli . If you could test it and revert to me