Tab-search

Adapter for frontend and backend to create database search filter

Preview

Usage

Install and register the web component:

npm install tab-search

import "tab-search/codemirror";

No CodeMirror CSS import is required. The editor renders in shadow DOM, so it can run beside another CodeMirror editor without sharing .cm-* styles.

Use a schema endpoint:

<tab-search
    src="/api/tab-search"
    theme="light"
    placeholder="Search users..."
></tab-search>

<script type="module">
    const search = document.querySelector("tab-search");

    search.addEventListener("change", ({ detail }) => {
        console.log(detail.doc);
    });

    search.addEventListener("submit", ({ detail }) => {
        console.log("Submit:", detail.doc);
    });

    search.addEventListener("error", ({ detail }) => {
        console.error("Schema failed to load:", detail.error);
    });
</script>

Or set the schema directly:

import "tab-search/codemirror";
import type { TabSearchElement } from "tab-search/codemirror";

const search = document.querySelector("tab-search") as TabSearchElement;

search.schema = {
    tables: {
        user: {
            id: { type: "number" },
            email: { type: "string" },
        },
    },
};
search.value = "@user.id == 1";

Supported properties and attributes:

Name	Description
src	URL returning the autocomplete schema.
schema	Schema object property or JSON string attribute. Takes priority over src.
value	Current editor value. Updates are reactive.
placeholder	Empty editor text.
theme	light or dark.

Events:

Event	Detail
change	{ doc } after a user edit.
submit	{ doc } when Enter is pressed and autocomplete did not consume it.
ready	{ schema, src } after a schema is installed.
error	{ error, src } when schema parsing or loading fails.

Entering plain text, for example สวัสดี, performs a broad LIKE search across the selected table's text columns.

Svelte, Hono, Drizzle ORM

<!-- page.svelte -->
<script lang="ts">
    import { mode } from "mode-watcher";
    import { onMount } from "svelte";

    onMount(async () => {
        // Register only in the browser when using SSR.
        await import("tab-search/codemirror");
    });
</script>

<tab-search
    src="/api/v3/user/tab"
    theme={$mode} placeholder="Search something..."
    onchange={console.log}
/>

// main.ts
import { serve } from '@hono/node-server'
import { Hono } from 'hono'
import { Tab } from "tab-search/drizzle"
// drizzle
import * as schema from "$schema"
import db from '$database'

const app = new Hono()
const tab = Tab(schema)


// create user tab
const tab$user = tab.use("USER", schema.USER)

app.get('/tab', async (c) => {
    return c.json(tab$user.codemirrorSchema())
})

app.post('/tab',async (c)=> {
    const query = await c.req.text()
    const [where, err] = await tab$user.prepare(query)
    if (err) {
        return c.json({ error: err.message }, 400)
    }
    const data = await db.query.USER.findMany({
        where
    })
    return c.json(data)
})

serve({ fetch: app.fetch, port: 3000 }, (info) => {
    console.log(`http://localhost:${info.port}`)
})

Author

• boon4681