firestore-schema-viewer 0.1.0 → 0.2.0

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 (7) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +58 -41
  3. package/dist/fsv.es.js +9351 -27959
  4. package/dist/fsv.umd.js +70 -344
  5. package/dist/screenshot.png +0 -0
  6. package/dist/style.css +1 -1
  7. package/package.json +1 -1
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 Juan Isidoro
3
+ Copyright (c) 2026 Juan Isidoro
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -16,13 +16,7 @@ Document your Firestore database structure using [JSON Schema](https://json-sche
16
16
 
17
17
  ## Quick Start
18
18
 
19
- ### 1. Install
20
-
21
- ```bash
22
- npm install firestore-schema-viewer
23
- ```
24
-
25
- ### 2. Create your schema files
19
+ ### 1. Create your schema files
26
20
 
27
21
  Create a `schemas/` folder in your project. Each `.schema.json` file represents one Firestore collection:
28
22
 
@@ -43,7 +37,6 @@ Example `schemas/users.schema.json`:
43
37
  "$schema": "https://raw.githubusercontent.com/juanisidoro/firestore-schema-viewer/main/schema/collection.schema.json",
44
38
  "collection": "users",
45
39
  "description": "Application users",
46
- "documentCount": 1500,
47
40
  "schema": {
48
41
  "$schema": "https://json-schema.org/draft/2020-12/schema",
49
42
  "type": "object",
@@ -60,9 +53,17 @@ Example `schemas/users.schema.json`:
60
53
 
61
54
  > **Tip:** The `$schema` line at the top gives you autocomplete and validation in VS Code.
62
55
 
63
- ### 3. Create a viewer page
56
+ ### 2. Create the viewer page
57
+
58
+ Create an `index.html` next to your `schemas/` folder. Pick one of the setup options below:
59
+
60
+ ---
61
+
62
+ ## Setup Options
64
63
 
65
- Create an `index.html` anywhere in your project:
64
+ ### Option A: CDN (recommended — zero install)
65
+
66
+ No dependencies, no `node_modules`. Just an HTML file:
66
67
 
67
68
  ```html
68
69
  <!DOCTYPE html>
@@ -72,17 +73,16 @@ Create an `index.html` anywhere in your project:
72
73
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
73
74
  <title>My Database Schema</title>
74
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">
75
- <link rel="stylesheet" href="./node_modules/firestore-schema-viewer/dist/style.css">
76
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.2/style.css">
76
77
  </head>
77
78
  <body>
78
79
  <div id="schema-viewer"></div>
79
- <script src="./node_modules/firestore-schema-viewer/dist/fsv.umd.js"></script>
80
+ <script src="https://cdn.jsdelivr.net/npm/firestore-schema-viewer-dist@0.2/fsv.umd.js"></script>
80
81
  <script>
81
82
  FirestoreSchemaViewer.render('#schema-viewer', {
82
83
  title: 'My Project',
83
84
  schemas: [
84
85
  './schemas/users.schema.json',
85
- './schemas/users/orders.schema.json',
86
86
  './schemas/products.schema.json'
87
87
  ]
88
88
  })
@@ -97,35 +97,29 @@ Then serve it:
97
97
  npx serve .
98
98
  ```
99
99
 
100
- That's it. Open the URL and you'll see your full database documentation.
101
-
102
- ## Schema File Format
103
-
104
- Each `.schema.json` file has this structure:
105
-
106
- | Field | Required | Description |
107
- |---|---|---|
108
- | `collection` | Yes | Collection name (e.g. `"users"`) |
109
- | `schema` | Yes | Standard [JSON Schema](https://json-schema.org/draft/2020-12/schema) object |
110
- | `description` | No | What this collection stores |
111
- | `documentCount` | No | Approximate number of documents |
100
+ ### Option B: Static files via npm (no dependency tree)
112
101
 
113
- The `schema` field is plain **JSON Schema draft 2020-12**. You can use all standard features: `type`, `properties`, `required`, `enum`, `format`, `pattern`, `minimum`, `maximum`, nested `object` and `array` types, etc.
102
+ Install the dist-only package (3 files, ~725 KB, zero dependencies):
114
103
 
115
- ## How Paths Are Inferred
104
+ ```bash
105
+ npm install firestore-schema-viewer-dist
106
+ ```
116
107
 
117
- You never write Firestore paths manually. They're inferred from the file location:
108
+ Then reference the files in your HTML:
118
109
 
119
- | File path | Inferred Firestore path |
120
- |---|---|
121
- | `users.schema.json` | `/users/{userId}` |
122
- | `users/orders.schema.json` | `/users/{userId}/orders/{orderId}` |
123
- | `frontend-shops/products.schema.json` | `/frontend-shops/{frontend_shopId}/products/{productId}` |
110
+ ```html
111
+ <link rel="stylesheet" href="./node_modules/firestore-schema-viewer-dist/style.css">
112
+ <script src="./node_modules/firestore-schema-viewer-dist/fsv.umd.js"></script>
113
+ ```
124
114
 
125
- ## Usage with a Bundler
115
+ ### Option C: Full package (for bundler projects)
126
116
 
127
117
  If your project uses a bundler (Vite, Webpack, etc.):
128
118
 
119
+ ```bash
120
+ npm install firestore-schema-viewer
121
+ ```
122
+
129
123
  ```js
130
124
  import { render } from 'firestore-schema-viewer'
131
125
  import 'firestore-schema-viewer/dist/style.css'
@@ -139,14 +133,30 @@ render('#schema-viewer', {
139
133
  })
140
134
  ```
141
135
 
142
- ## Usage with CDN
136
+ ---
143
137
 
144
- No install needed — reference directly from jsDelivr:
138
+ ## Schema File Format
145
139
 
146
- ```html
147
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/juanisidoro/firestore-schema-viewer/dist/style.css">
148
- <script src="https://cdn.jsdelivr.net/gh/juanisidoro/firestore-schema-viewer/dist/fsv.umd.js"></script>
149
- ```
140
+ Each `.schema.json` file has this structure:
141
+
142
+ | Field | Required | Description |
143
+ |---|---|---|
144
+ | `collection` | Yes | Collection name (e.g. `"users"`) |
145
+ | `schema` | Yes | Standard [JSON Schema](https://json-schema.org/draft/2020-12/schema) object |
146
+ | `description` | No | What this collection stores |
147
+ | `documentCount` | No | Approximate number of documents (hidden in UI if omitted) |
148
+
149
+ The `schema` field is plain **JSON Schema draft 2020-12**. You can use all standard features: `type`, `properties`, `required`, `enum`, `format`, `pattern`, `minimum`, `maximum`, nested `object` and `array` types, etc.
150
+
151
+ ## How Paths Are Inferred
152
+
153
+ You never write Firestore paths manually. They're inferred from the file location:
154
+
155
+ | File path | Inferred Firestore path |
156
+ |---|---|
157
+ | `users.schema.json` | `/users/{userId}` |
158
+ | `users/orders.schema.json` | `/users/{userId}/orders/{orderId}` |
159
+ | `frontend-shops/products.schema.json` | `/frontend-shops/{frontend_shopId}/products/{productId}` |
150
160
 
151
161
  ## API
152
162
 
@@ -167,9 +177,16 @@ No install needed — reference directly from jsDelivr:
167
177
  - **Example generator** — auto-generated example documents from the schema
168
178
  - **Copy buttons** — one-click copy for paths, empty objects, and examples
169
179
 
180
+ ## Packages
181
+
182
+ | Package | What it includes | Dependencies |
183
+ |---|---|---|
184
+ | [`firestore-schema-viewer`](https://www.npmjs.com/package/firestore-schema-viewer) | Full library (UMD + ES + CSS + source) | React, Radix, etc. |
185
+ | [`firestore-schema-viewer-dist`](https://www.npmjs.com/package/firestore-schema-viewer-dist) | Static files only (UMD + CSS) | **None** |
186
+
170
187
  ## Roadmap
171
188
 
172
- - **v1.0** (current): Static viewer, dark theme, CDN support
189
+ - **v0.2** (current): Static viewer, dark theme, CDN support, process.env fix
173
190
  - **Future** (based on demand): CLI tool, hot reload, schema validation, light theme, CI/CD integration
174
191
 
175
192
  Want a feature? [Open an issue](https://github.com/juanisidoro/firestore-schema-viewer/issues).