firestore-schema-viewer 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +167 -41
  2. package/dist/fsv.es.js +185 -180
  3. package/dist/fsv.umd.js +1 -1
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -63,55 +63,114 @@ Create an `index.html` next to your `schemas/` folder. Pick one of the setup opt
63
63
 
64
64
  ### Option A: CDN (recommended — zero install)
65
65
 
66
- No dependencies, no `node_modules`. Just an HTML file:
67
-
68
- ```html
69
- <!DOCTYPE html>
70
- <html lang="en" class="dark">
71
- <head>
72
- <meta charset="UTF-8">
73
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
74
- <title>My Database Schema</title>
75
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
76
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.3/style.css">
77
- </head>
78
- <body>
79
- <div id="schema-viewer"></div>
80
- <script src="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.3/fsv.umd.js"></script>
81
- <script>
82
- FirestoreSchemaViewer.render('#schema-viewer', {
83
- title: 'My Project',
84
- schemasDir: './schemas/'
85
- })
86
- </script>
87
- </body>
88
- </html>
89
- ```
90
-
91
- Then serve it:
92
-
93
- ```bash
94
- npx serve .
95
- ```
96
-
97
- That's it. The viewer **auto-discovers** all `.schema.json` files in the `schemas/` folder (including subdirectories). No need to list them manually.
66
+ No dependencies, no `node_modules`. Just 1 HTML file + your schema files.
67
+
68
+ **Step by step:**
69
+
70
+ 1. Create a folder for your docs (e.g. `docs/firestore/`):
71
+ ```
72
+ your-project/
73
+ └── docs/firestore/
74
+ ├── index.html
75
+ └── schemas/
76
+ ├── users.schema.json
77
+ └── users/
78
+ └── orders.schema.json
79
+ ```
80
+
81
+ 2. Create `index.html`:
82
+ ```html
83
+ <!DOCTYPE html>
84
+ <html lang="en" class="dark">
85
+ <head>
86
+ <meta charset="UTF-8">
87
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
88
+ <title>My Project - Firestore Schemas</title>
89
+ <link rel="preconnect" href="https://fonts.googleapis.com">
90
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
91
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
92
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.3/style.css">
93
+ </head>
94
+ <body>
95
+ <div id="schema-viewer"></div>
96
+ <script src="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.3/fsv.umd.js"></script>
97
+ <script>
98
+ FirestoreSchemaViewer.render('#schema-viewer', {
99
+ title: 'My Project',
100
+ schemasDir: './schemas/'
101
+ })
102
+ </script>
103
+ </body>
104
+ </html>
105
+ ```
106
+
107
+ 3. Add your `.schema.json` files to `schemas/` and serve:
108
+ ```bash
109
+ cd docs/firestore
110
+ npx serve .
111
+ # Open http://localhost:3000
112
+ ```
113
+ Custom port: `npx serve . -l 8080`
114
+
115
+ That's it. The viewer **auto-discovers** all `.schema.json` files in the `schemas/` folder (including subdirectories). Add new schemas, refresh the browser — no need to touch `index.html`.
98
116
 
99
117
  > **How it works:** When served with `npx serve`, `python3 -m http.server`, or any server with directory listing enabled, the viewer parses the directory listing to find all schema files automatically. If your server doesn't support directory listing (GitHub Pages, Netlify, Vercel), create a `schemas/index.json` manifest — see [Hosting without directory listing](#hosting-without-directory-listing) below.
100
118
 
119
+ > **Full quicksheet:** [QUICKSHEET-CDN.md](./QUICKSHEET-CDN.md) — schema templates, field patterns, checklist.
120
+
101
121
  ### Option B: Static files via npm (no dependency tree)
102
122
 
103
- Install the dist-only package (3 files, ~725 KB, zero dependencies):
123
+ Install the dist-only package — **1 package, ~335 KB total, zero sub-dependencies**:
104
124
 
105
125
  ```bash
106
- npm install firestore-schema-viewer-dist
126
+ npm install --save-dev firestore-schema-viewer-dist
107
127
  ```
108
128
 
109
- Then reference the files in your HTML:
110
-
111
- ```html
112
- <link rel="stylesheet" href="./node_modules/firestore-schema-viewer-dist/style.css">
113
- <script src="./node_modules/firestore-schema-viewer-dist/fsv.umd.js"></script>
114
- ```
129
+ **Step by step:**
130
+
131
+ 1. Create your docs folder and install:
132
+ ```bash
133
+ mkdir -p docs/database/firebase/schemas
134
+ cd docs/database/firebase
135
+ npm init -y
136
+ npm install --save-dev firestore-schema-viewer-dist
137
+ echo "node_modules/" > .gitignore
138
+ ```
139
+
140
+ 2. Create `index.html`:
141
+ ```html
142
+ <!DOCTYPE html>
143
+ <html lang="en" class="dark">
144
+ <head>
145
+ <meta charset="UTF-8">
146
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
147
+ <title>My Project - Firestore Schemas</title>
148
+ <link rel="preconnect" href="https://fonts.googleapis.com">
149
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
150
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
151
+ <link rel="stylesheet" href="./node_modules/firestore-schema-viewer-dist/style.css">
152
+ </head>
153
+ <body>
154
+ <div id="schema-viewer"></div>
155
+ <script src="./node_modules/firestore-schema-viewer-dist/fsv.umd.js"></script>
156
+ <script>
157
+ FirestoreSchemaViewer.render('#schema-viewer', {
158
+ title: 'My Project',
159
+ schemasDir: './schemas/'
160
+ })
161
+ </script>
162
+ </body>
163
+ </html>
164
+ ```
165
+
166
+ 3. Add your `.schema.json` files to `schemas/` and serve:
167
+ ```bash
168
+ npx serve .
169
+ # Open http://localhost:3000
170
+ ```
171
+ Custom port: `npx serve . -l 8080`
172
+
173
+ > **Full quicksheet:** [QUICKSHEET-NPM-DIST.md](./QUICKSHEET-NPM-DIST.md) — complete setup, schema templates, field patterns, checklist.
115
174
 
116
175
  ### Option C: Full package (for bundler projects)
117
176
 
@@ -131,6 +190,8 @@ render('#schema-viewer', {
131
190
  })
132
191
  ```
133
192
 
193
+ > **Full quicksheet:** [QUICKSHEET-BUNDLER.md](./QUICKSHEET-BUNDLER.md) — complete setup for bundler projects, schema templates, field patterns.
194
+
134
195
  ---
135
196
 
136
197
  ## Hosting without directory listing
@@ -187,6 +248,24 @@ You never write Firestore paths manually. They're inferred from the file locatio
187
248
  | `config.schemasDir` | `string` (recommended) | Path to schemas folder — auto-discovers all `.schema.json` files |
188
249
  | `config.schemas` | `string[]` or `object[]` | Explicit URLs to `.schema.json` files, or inline collection objects |
189
250
 
251
+ Use **one** of `schemasDir` or `schemas`:
252
+
253
+ ```js
254
+ // Option 1: Auto-discovery (recommended) — finds all .schema.json files automatically
255
+ FirestoreSchemaViewer.render('#viewer', {
256
+ schemasDir: './schemas/'
257
+ })
258
+
259
+ // Option 2: Explicit list — useful if you need to control which schemas are loaded
260
+ FirestoreSchemaViewer.render('#viewer', {
261
+ schemas: [
262
+ './schemas/users.schema.json',
263
+ './schemas/users/orders.schema.json',
264
+ './schemas/products.schema.json'
265
+ ]
266
+ })
267
+ ```
268
+
190
269
  ## What You See
191
270
 
192
271
  - **Sidebar** — navigable tree of all collections and subcollections
@@ -203,9 +282,56 @@ You never write Firestore paths manually. They're inferred from the file locatio
203
282
  | [`firestore-schema-viewer`](https://www.npmjs.com/package/firestore-schema-viewer) | Full library (UMD + ES + CSS + source) | React, Radix, etc. |
204
283
  | [`firestore-schema-viewer-dist`](https://www.npmjs.com/package/firestore-schema-viewer-dist) | Static files only (UMD + CSS) | **None** |
205
284
 
285
+ ## Generate Schemas with AI
286
+
287
+ Use this prompt with **Claude Code**, **ChatGPT**, **Copilot**, or any LLM to auto-generate your schema files. Copy the prompt below and adapt the collection list to your project:
288
+
289
+ <details>
290
+ <summary><strong>Prompt: Generate FireSchema files</strong> (click to expand)</summary>
291
+
292
+ ```
293
+ Generate Firestore schema files for the FireSchema viewer (https://github.com/juanisidoro/firestore-schema-viewer).
294
+
295
+ Rules:
296
+ - One .schema.json file per collection
297
+ - Folder structure mirrors Firestore hierarchy: subcollections go inside a folder named after the parent collection
298
+ - If a subcollection exists, the parent .schema.json MUST also exist
299
+ - Every field must have "type" and "description"
300
+ - Use standard JSON Schema features: type, enum, format, required, minimum, maximum, etc.
301
+ - Use "format": "date-time" for timestamps, "format": "email" for emails, "format": "uri" for URLs
302
+ - Do NOT include "path" or "subcollections" fields — they are inferred from folder structure
303
+
304
+ Each file must follow this format:
305
+ {
306
+ "$schema": "https://raw.githubusercontent.com/juanisidoro/firestore-schema-viewer/main/schema/collection.schema.json",
307
+ "collection": "<collection-name>",
308
+ "description": "<what this collection stores>",
309
+ "schema": {
310
+ "type": "object",
311
+ "required": [...],
312
+ "properties": { ... }
313
+ }
314
+ }
315
+
316
+ Generate the schema files for the following collections:
317
+
318
+ - users (email, displayName, role: admin/editor/viewer, createdAt)
319
+ - users/orders (total, status: pending/paid/shipped, items array, createdAt)
320
+ - products (name, price, category, inStock boolean)
321
+
322
+ Output each file with its path (e.g. schemas/users.schema.json) so I can create them directly.
323
+
324
+ After generating the files, follow the setup instructions at:
325
+ https://github.com/juanisidoro/firestore-schema-viewer#setup-options
326
+ ```
327
+
328
+ </details>
329
+
330
+ Replace the collections list at the bottom with your own. The LLM will generate ready-to-use `.schema.json` files with the correct format and folder structure.
331
+
206
332
  ## Roadmap
207
333
 
208
- - **v0.2** (current): Static viewer, dark theme, CDN support, process.env fix
334
+ - **v0.3** (current): Static viewer, dark theme, CDN support, auto-discovery
209
335
  - **Future** (based on demand): CLI tool, hot reload, schema validation, light theme, CI/CD integration
210
336
 
211
337
  Want a feature? [Open an issue](https://github.com/juanisidoro/firestore-schema-viewer/issues).