|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +## Purpose |
| 4 | + |
| 5 | +This repository is a client-side SQLite editor built with React 19, TypeScript, |
| 6 | +Vite 6, Tailwind CSS 4, Zustand, Radix UI, and `sql.js` running inside a web |
| 7 | +worker. |
| 8 | + |
| 9 | +This file is for coding agents working in `/home/yz/Documents/sqlite-online`. |
| 10 | +It documents the commands, constraints, and code conventions that are actually |
| 11 | +used in this repo. |
| 12 | + |
| 13 | +## Instruction Sources |
| 14 | + |
| 15 | +- No repository-local `CLAUDE.md` was found. |
| 16 | +- No Cursor rules were found in `.cursor/rules/`. |
| 17 | +- No `.cursorrules` file was found. |
| 18 | +- No Copilot instructions were found at `.github/copilot-instructions.md`. |
| 19 | +- CI currently enforces formatting and linting through GitHub Actions. |
| 20 | + |
| 21 | +## Environment And Tooling |
| 22 | + |
| 23 | +- Primary package manager: `npm` |
| 24 | +- Runtime used in CI: Node.js `20` |
| 25 | +- Build tool: Vite |
| 26 | +- Language: TypeScript with `strict: true` |
| 27 | +- Linting: ESLint flat config (`eslint.config.js`) |
| 28 | +- Formatting: Prettier (`prettier.config.js`) with `prettier-plugin-tailwindcss` |
| 29 | +- Type checking: performed through `tsc -b` inside the build script |
| 30 | +- Tests: no automated test runner is configured right now |
| 31 | + |
| 32 | +## Development Commands |
| 33 | + |
| 34 | +- Install dependencies: `npm install` |
| 35 | +- Start dev server: `npm run dev` |
| 36 | +- Build production app: `npm run build` |
| 37 | +- Build GitHub Pages variant: `npm run build:pages` |
| 38 | +- Preview normal build: `npm run preview` |
| 39 | +- Preview Pages build: `npm run preview:pages` |
| 40 | +- Deploy `dist/` to GitHub Pages: `npm run deploy` |
| 41 | +- Run lint: `npm run lint` |
| 42 | +- Format source files: `npm run format` |
| 43 | +- Check formatting only: `npm run format:check` |
| 44 | +- Detect unused files / deps: `npm run knip` |
| 45 | + |
| 46 | +## Single-File And Narrow Checks |
| 47 | + |
| 48 | +- Lint one file: `npx eslint src/path/to/file.tsx` |
| 49 | +- Lint a folder: `npx eslint src/components/browseTab` |
| 50 | +- Check formatting for one file: `npx prettier --check src/path/to/file.tsx` |
| 51 | +- Format one file: `npx prettier --write src/path/to/file.tsx` |
| 52 | +- There is no dedicated standalone typecheck script; use `npm run build` to run |
| 53 | + the repo's TypeScript project references. |
| 54 | + |
| 55 | +## Test Status |
| 56 | + |
| 57 | +- There are currently no `*.test.*` or `*.spec.*` files in the repository. |
| 58 | +- There is no Vitest, Jest, Playwright, or other test runner configured in |
| 59 | + `package.json`. |
| 60 | +- Because no test framework exists yet, there is no valid "run a single test" |
| 61 | + command today. |
| 62 | +- If you add tests in the future, also add package scripts and update this file. |
| 63 | + |
| 64 | +## Recommended Validation Sequence |
| 65 | + |
| 66 | +1. `npx eslint <changed files>` |
| 67 | +2. `npx prettier --check <changed files>` |
| 68 | +3. `npm run build` |
| 69 | + |
| 70 | +If you touch dependency boundaries or dead code, also run `npm run knip`. |
| 71 | + |
| 72 | +Known current lint warnings: |
| 73 | + |
| 74 | +- `src/components/DatabaseURLLoader.tsx`: missing `isValidURL` callback dep |
| 75 | +- `src/components/common/ErrorBoundary.tsx`: fast-refresh warning for mixed exports |
| 76 | +- `src/components/table/FilterInput.tsx`: missing `onChange` memo dependency |
| 77 | + |
| 78 | +## Import Conventions |
| 79 | + |
| 80 | +- Prefer `@/` aliases for imports from `src/` across directory boundaries. |
| 81 | +- Use relative imports for same-folder files such as `./ThemeContext` or |
| 82 | + `./buttonVariants`. |
| 83 | +- Keep CSS side-effect imports first when present, as in `src/main.tsx`. |
| 84 | +- Group imports with blank lines between logical sections. |
| 85 | +- Typical grouping order: side effects, React/platform, third-party, `@/` |
| 86 | + imports, relative imports, then `import type`. |
| 87 | +- Prefer `import type` for type-only imports. |
| 88 | +- Match nearby files instead of reordering unrelated imports. |
| 89 | + |
| 90 | +## Formatting Rules |
| 91 | + |
| 92 | +- Prettier is authoritative. |
| 93 | +- Use 2-space indentation. |
| 94 | +- Use semicolons. |
| 95 | +- Use double quotes, including JSX attributes. |
| 96 | +- Keep `printWidth` near 80 columns. |
| 97 | +- Trailing commas are disabled. |
| 98 | +- Arrow functions should keep parentheses even for one parameter. |
| 99 | +- Tailwind class order is auto-sorted by the Prettier Tailwind plugin. |
| 100 | + |
| 101 | +## TypeScript Rules |
| 102 | + |
| 103 | +- `strict` mode is enabled. Do not weaken types to get code through build. |
| 104 | +- `noUnusedLocals` and `noUnusedParameters` are enabled. |
| 105 | +- `noFallthroughCasesInSwitch` is enabled. |
| 106 | +- `noUncheckedSideEffectImports` is enabled. |
| 107 | +- Prefer explicit domain types from `src/types.ts` for worker payloads and data. |
| 108 | +- Use `interface` for object-shaped contracts that may grow. |
| 109 | +- Use `type` aliases for unions, records, and composed utility types. |
| 110 | +- Preserve readonly intent where it already exists. |
| 111 | +- Avoid `any`; if unavoidable, isolate it and justify it locally. |
| 112 | + |
| 113 | +## Naming Conventions |
| 114 | + |
| 115 | +- React components: PascalCase file names and PascalCase component names. |
| 116 | +- Hooks: camelCase starting with `use`, for example `useFileDrop`. |
| 117 | +- Providers and contexts: `XProvider` and `XContext`. |
| 118 | +- Zustand stores: `useXStore` named exports. |
| 119 | +- Props types: `XProps`. |
| 120 | +- Store internals commonly use `State`, `Actions`, and `Store` suffixes. |
| 121 | +- Constants use `UPPER_SNAKE_CASE` when module-level and stable. |
| 122 | +- Helper functions use clear verb names like `handleDownload` and |
| 123 | + `initializeApiKey`. |
| 124 | + |
| 125 | +## React And State Conventions |
| 126 | + |
| 127 | +- This repo uses React 19 and the React Compiler Babel plugin. |
| 128 | +- Respect `eslint-plugin-react-compiler`. |
| 129 | +- Use hooks and functional components by default. |
| 130 | +- Class components exist only where they provide value, such as `ErrorBoundary`. |
| 131 | +- Memoization with `useCallback` and `useMemo` is common in heavy UI and |
| 132 | + provider code; keep dependency arrays correct. |
| 133 | +- Zustand selectors are typically read one field at a time: |
| 134 | + `useDatabaseStore((state) => state.currentTable)`. |
| 135 | +- Direct store access through `useDatabaseStore.getState()` is used for event |
| 136 | + handlers and other non-reactive flows. |
| 137 | + |
| 138 | +## Error Handling |
| 139 | + |
| 140 | +- Fail loudly on true invariants, for example missing provider context hooks. |
| 141 | +- Prefer `try/catch` around async browser APIs, worker setup, storage, crypto, |
| 142 | + fetches, and SQL initialization. |
| 143 | +- When catching unknown errors, normalize with |
| 144 | + `error instanceof Error ? error.message : String(error)`. |
| 145 | +- Use `console.error` for operational failures and `console.warn` for degraded fallbacks. |
| 146 | +- Surface user-visible problems through store error state or toast messages. |
| 147 | +- Do not silently swallow errors unless the file already intentionally does so. |
| 148 | + |
| 149 | +## UI And Styling Conventions |
| 150 | + |
| 151 | +- Prefer existing shadcn/Radix primitives from `src/components/ui/`. |
| 152 | +- Use the shared `cn()` utility from `@/lib/utils` for class composition. |
| 153 | +- For variant-based styling, follow the existing `cva` pattern. |
| 154 | +- Preserve accessibility attributes already common in the repo: `role`, |
| 155 | + `aria-label`, `aria-live`, `aria-describedby`, and keyboard support. |
| 156 | +- Keep styling in Tailwind utility classes inside components; there is very |
| 157 | + little component-scoped CSS. |
| 158 | + |
| 159 | +## File Change Guidelines |
| 160 | + |
| 161 | +- Make minimal, localized changes. |
| 162 | +- Reuse existing helpers, stores, and provider wiring before introducing new |
| 163 | + abstractions. |
| 164 | +- Match the export style already used nearby: default exports are common for |
| 165 | + components, hooks, providers, and classes; named exports are common for |
| 166 | + stores and small shared utilities. |
| 167 | +- Do not introduce a test framework, state library, or styling approach unless |
| 168 | + the task explicitly requires it. |
| 169 | +- If you add new commands or repo-wide rules, update this `AGENTS.md`. |
0 commit comments