# Declarative Read Flow

---

## 1. JavaScript Authoring – READING DATA

**Function signature**

```ts
s2client.read(query)
````

**Your code is JavaScript and is agnostic to which framework you use (React or Vue).**

```ts
import { s2client } from "@compilers/s2client"

const rows = s2client.read(
  "select * from users"
)
```

**Summary**

This is the simplest possible declaration: a plain SQL read with no parameters or options. The code expresses intent only and is fully reactivity-agnostic. All execution details are deferred to the compiler.

---

## 2. Compile-Time Capture & Transformation

**Build-time trigger**

```bash
npm run build
# (via Vite, Webpack, etc.)
```

**What happens at build time**

```text
The compiler scans all source files (.ts, .vue, .jsx):

- Identifies every use of s2client.read(...)
- Extracts the SQL query string
- Rewrites each usage into framework-specific runtime code
- Encrypts the SQL query using a shared AES key (client ↔ server)
- Wires any arguments as request parameters
```

**Summary**

During the build process (for example, `npm run build` via Vite), the compiler finds all `s2client.read` calls across the codebase and rewrites them into usable, framework-specific runtime code. The SQL query is encrypted at build time using a shared AES key, and any arguments are wired as request parameters. No SQL construction, encryption, or rewriting occurs at runtime.

---

## 3. Compiled Runtime (Target-Specific)

<details>
<summary><strong>Vue (compiled output)</strong></summary>

```ts
import { computed } from "vue"

const rows = computed(() =>
  fetch("/api/read", {
    method: "POST",
    headers: JSON_HEADERS,
    body: {
      payload // encrypted + base64(query) at compile time
    }
  }).then(r => r.json())
)
```

</details>

<details>
<summary><strong>React (compiled output)</strong></summary>

```tsx
import { useEffect, useState } from "react"

const [rows, setRows] = useState(null)

useEffect(() => {
  fetch("/api/read", {
    method: "POST",
    headers: JSON_HEADERS,
    body: {
      payload // encrypted + base64(query) at compile time
    }
  })
    .then(r => r.json())
    .then(setRows)
}, [])
```

</details>

**Summary**

At runtime, the encrypted payload is static and opaque, representing the compiled SQL query. No parameters or dependencies are evaluated dynamically in this example. The compiler supplies the correct runtime behavior based on the framework target without changing the authoring code.

---