jsx-sql

Overview

A SQL notation that mimic JSX.

Notes

• This library is a tribute to the following X-posts.
  • https://x.com/RyanEls4/status/1781711077639688197
• Please understand that this is only a joke.

Installation

You can install this library using npm:

npm install jsx-sql

Usage

1. Create SQLite3 database.

touch ./db/sqlite.db

2. Insert data into database.

sqlite3 db/sqlite.db < db/init.sql

3. Wrap your app with the SQLProvider and provide dbPath property.

import { SQLProvider } from "jsx-sql";

ReactDOM.render(
  <React.StrictMode>
    <SQLProvider dbPath="/db/sqlite.db">
      <App />
    </SQLProvider>
  </React.StrictMode>,
  document.getElementById("root"),
);

Use the provided hooks to fetch DB data:

export default function Home() {
  const data = query(
    <Select>
      <Where>
        <Column name="status" value="paid" />
        <Column name="name" value="bob" />
      </Where>
      <Limit amount={5} />
    </Select>,
  );

  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {data.map((record, index) => (
          <tr key={index}>
            <td>{record[0]}</td>
            <td>{record[1]}</td>
            <td>{record[2]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

API

Hooks

• query(node) - Build SQL query by JSX.Element and fetch data from DB.

SQLProvider

The SQLProvider component should be used to wrap your app.

Link

• Original Post

License

This project is licensed under the MIT License - see the LICENSE file for details.