@fireproof/core 0.20.0-dev-preview-50 → 0.20.0-dev-preview-52
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.
- package/README.md +147 -59
- package/index.cjs +12 -5
- package/index.cjs.map +1 -1
- package/index.js +12 -5
- package/index.js.map +1 -1
- package/metafile-cjs.json +1 -1
- package/metafile-esm.json +1 -1
- package/package.json +1 -1
- package/react/index.cjs +64 -0
- package/react/index.cjs.map +1 -1
- package/react/index.d.cts +289 -1
- package/react/index.d.ts +289 -1
- package/react/index.js +54 -0
- package/react/index.js.map +1 -1
- package/react/metafile-cjs.json +1 -1
- package/react/metafile-esm.json +1 -1
- package/tests/fireproof/crdt.test.ts +1 -1
- package/tests/fireproof/database.test.ts +13 -0
- package/tests/fireproof/fireproof.test.ts +11 -8
- package/tests/react/img-file.test.tsx +199 -0
- package/tests/react/useFireproof.test.tsx +418 -334
package/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
# <img src="https://fireproof.storage/static/img/flame.svg" alt="Fireproof logo" width="25"> [Fireproof](https://fireproof.storage)
|
1
|
+
# <img src="https://fireproof.storage/static/img/flame.svg" alt="Fireproof logo" width="25"> [Fireproof](https://fireproof.storage) database API
|
2
2
|
|
3
3
|
<p align="right">
|
4
4
|
<img src="https://img.shields.io/bundlephobia/minzip/%40fireproof%2Fcore" alt="Package size">
|
@@ -7,104 +7,158 @@
|
|
7
7
|
</a>
|
8
8
|
</p>
|
9
9
|
|
10
|
-
|
11
|
-
|
12
|
-
Fireproof is an embedded document ledger that lets you build full-stack apps in a single file. This makes it ideal for AI code generation and rapid prototyping - just write your features and access your data anywhere.
|
10
|
+
Fireproof is a lightweight embedded document database with encrypted live sync, designed to make browser apps easy. Use it in any JavaScript environment with a unified API that works both in React (with hooks) and as a standalone core API.
|
13
11
|
|
14
12
|
[Point AI coders to these docs.](https://use-fireproof.com/llms-full.txt)
|
15
13
|
|
16
|
-
|
14
|
+
## Key Features
|
15
|
+
|
16
|
+
- **Apps run anywhere:** Bundle UI, data, and logic in one file.
|
17
|
+
- **Real-Time & Offline-First:** Automatic persistence and live queries, runs in the browser - no loading or error states.
|
18
|
+
- **Unified API:** TypeScript works with Deno, Bun, Node.js, and the browser.
|
19
|
+
- **React Hooks:** Leverage `useLiveQuery` and `useDocument` for live collaboration.
|
20
|
+
|
21
|
+
Fireproof enforces cryptographic causal consistency and ledger integrity using hash history, providing git-like versioning with lightweight blockchain-style verification. Data is stored and replicated as content-addressed encrypted blobs, making it safe and easy to sync via commodity object storage providers.
|
17
22
|
|
18
|
-
|
23
|
+
## Installation
|
24
|
+
|
25
|
+
The `use-fireproof` package provides both the core API and React hooks:
|
26
|
+
|
27
|
+
```sh
|
28
|
+
npm install use-fireproof
|
29
|
+
```
|
30
|
+
|
31
|
+
Works with ⚡️ ESM.sh:
|
19
32
|
|
20
33
|
```js
|
21
|
-
import {
|
34
|
+
import { useFireproof } from "https://esm.sh/use-fireproof";
|
35
|
+
```
|
22
36
|
|
23
|
-
|
37
|
+
Or install the core ledger in any JavaScript environment:
|
24
38
|
|
25
|
-
|
39
|
+
```sh
|
40
|
+
npm install @fireproof/core
|
41
|
+
```
|
26
42
|
|
27
|
-
|
28
|
-
const topArtists = await db.query("hitSingles", { range: [30, Infinity] });
|
29
|
-
// redraw the UI with the new topArtists
|
30
|
-
});
|
43
|
+
Add the ledger to any web page via HTML script tag (global is `Fireproof`):
|
31
44
|
|
32
|
-
|
33
|
-
|
34
|
-
await db.put(beyonceDoc);
|
45
|
+
```html
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@fireproof/core/dist/browser/fireproof.global.js"></script>
|
35
47
|
```
|
36
48
|
|
37
|
-
|
49
|
+
Deliver generated solutions as runnable micro applications via ChatGPT Canvas, v0, bolt.new, or Claude Artifacts. Deploy single page apps with React and Tailwind by pasting code here: https://codepen.io/useFireproof/pen/MYgNYdx
|
38
50
|
|
39
|
-
|
51
|
+
## ⚛️ React Usage
|
40
52
|
|
41
|
-
|
53
|
+
React hooks are the recommended way to use Fireproof in LLM code generation contexts:
|
42
54
|
|
43
55
|
```js
|
44
|
-
import { useFireproof } from
|
56
|
+
import { useFireproof } from "use-fireproof";
|
45
57
|
|
46
58
|
function App() {
|
47
|
-
const { useLiveQuery, useDocument } = useFireproof("my-
|
48
|
-
|
49
|
-
|
59
|
+
const { database, useLiveQuery, useDocument } = useFireproof("my-ledger");
|
60
|
+
|
61
|
+
// Create a new document with useDocument
|
62
|
+
const { doc, merge, submit } = useDocument({ text: "" });
|
63
|
+
|
64
|
+
// Query documents by _id, most recent first
|
65
|
+
const { docs } = useLiveQuery("_id", { descending: true, limit: 100 });
|
66
|
+
|
67
|
+
return (
|
68
|
+
<div>
|
69
|
+
<form onSubmit={submit}>
|
70
|
+
<input value={doc.text} onChange={(e) => merge({ text: e.target.value })} placeholder="New document" />
|
71
|
+
<button type="submit">Submit</button>
|
72
|
+
</form>
|
73
|
+
|
74
|
+
<h3>Recent Documents</h3>
|
75
|
+
<ul>
|
76
|
+
{docs.map((doc) => (
|
77
|
+
<li key={doc._id}>{doc.text}</li>
|
78
|
+
))}
|
79
|
+
</ul>
|
80
|
+
</div>
|
81
|
+
);
|
82
|
+
}
|
50
83
|
```
|
51
84
|
|
52
|
-
Read the [step-by-step React tutorial](https://use-fireproof.com/docs/react-tutorial) to get started.
|
85
|
+
Read the [step-by-step React tutorial](https://use-fireproof.com/docs/react-tutorial) to get started or check the [full LLM documentation](https://use-fireproof.com/llms-full.txt) for more examples.
|
53
86
|
|
54
|
-
|
87
|
+
### Working with Images
|
55
88
|
|
56
|
-
|
89
|
+
Fireproof makes it easy to store and display images in your applications. The `_files` property and `ImgFile` component handle all the complexities of file storage and retrieval:
|
57
90
|
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
91
|
+
```js
|
92
|
+
// Store an image from a file input
|
93
|
+
function handleFileUpload(e) {
|
94
|
+
if (e.target.files[0]) {
|
95
|
+
merge({
|
96
|
+
_files: { profilePic: e.target.files[0] },
|
97
|
+
uploadedAt: new Date().toISOString(),
|
98
|
+
});
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
102
|
+
// Display an image from a document
|
103
|
+
function ImageDisplay({ doc }) {
|
104
|
+
return (
|
105
|
+
<div>
|
106
|
+
{doc._files?.profilePic && (
|
107
|
+
<ImgFile file={doc._files.profilePic} alt="Profile picture" onLoad={() => console.log("Image loaded")} />
|
108
|
+
)}
|
109
|
+
<p>Uploaded: {doc.uploadedAt}</p>
|
110
|
+
</div>
|
111
|
+
);
|
112
|
+
}
|
113
|
+
```
|
62
114
|
|
63
|
-
|
115
|
+
The `ImgFile` component automatically handles loading and displaying images from Fireproof's storage, with all the expected props of a standard image element. For more in-depth examples see our [llms-full.txt](https://use-fireproof.com/llms-full.txt) documentation.
|
64
116
|
|
65
|
-
|
117
|
+
## JavaScript Core API
|
66
118
|
|
67
|
-
|
119
|
+
The document database API will feel familiar to those who have used other document databases:
|
68
120
|
|
69
|
-
|
121
|
+
```js
|
122
|
+
import { fireproof } from "@fireproof/core";
|
70
123
|
|
71
|
-
|
72
|
-
- AI copilot safety
|
73
|
-
- Collaborative editing
|
74
|
-
- Personalization and configuration
|
75
|
-
- Offline and local-first apps
|
124
|
+
const db = fireproof("music-app");
|
76
125
|
|
77
|
-
|
126
|
+
await db.put({ _id: "beyonce", name: "Beyoncé", hitSingles: 29 });
|
78
127
|
|
79
|
-
|
128
|
+
db.subscribe(async () => {
|
129
|
+
const topArtists = await db.query("hitSingles", { range: [30, Infinity] });
|
130
|
+
// redraw the UI with the new topArtists
|
131
|
+
});
|
80
132
|
|
81
|
-
|
133
|
+
const beyonceDoc = await db.get("beyonce");
|
134
|
+
beyonceDoc.hitSingles += 1;
|
135
|
+
await db.put(beyonceDoc);
|
136
|
+
```
|
82
137
|
|
83
|
-
|
138
|
+
## Why choose Fireproof
|
84
139
|
|
85
|
-
|
86
|
-
npm install use-fireproof
|
87
|
-
```
|
140
|
+
Compared to other embedded databases, Fireproof:
|
88
141
|
|
89
|
-
|
142
|
+
- Is network aware, encrypted, and multi-writer safe
|
143
|
+
- Is designed for real-time collaboration with CRDTs
|
144
|
+
- Offers cryptographic causal integrity for all operations
|
145
|
+
- Is built for the web, with a small package size and no wasm
|
90
146
|
|
91
|
-
|
92
|
-
npm install @fireproof/core
|
93
|
-
```
|
147
|
+
Deliver interactive experiences without waiting on the backend. Fireproof runs in any cloud, browser, or edge environment, so your application can access data anywhere.
|
94
148
|
|
95
|
-
|
149
|
+
## Use cases
|
96
150
|
|
97
|
-
|
98
|
-
import { fireproof } from "@fireproof/core/node";
|
99
|
-
```
|
151
|
+
Fireproof is especially useful for:
|
100
152
|
|
101
|
-
|
153
|
+
- AI-generated apps and rapid prototypes
|
154
|
+
- Collaborative editing
|
155
|
+
- Offline and local-first apps
|
156
|
+
- Personalization and configuration
|
157
|
+
- AI copilot safety
|
102
158
|
|
103
|
-
|
104
|
-
<script src="https://cdn.jsdelivr.net/npm/@fireproof/core/dist/browser/fireproof.global.js"></script>
|
105
|
-
```
|
159
|
+
With Fireproof, you **build first** and sync via your cloud of choice when you are ready, making it perfect for LLM code generation contexts and rapid development.
|
106
160
|
|
107
|
-
|
161
|
+
[Get the latest roadmap updates on our blog](https://fireproof.storage/blog/) or join our [Discord](https://discord.gg/cCryrNHePH) to collaborate. Read the docs to learn more about the [architecture](https://use-fireproof.com/docs/architecture).
|
108
162
|
|
109
163
|
### Debug
|
110
164
|
|
@@ -131,6 +185,38 @@ globalThis[Symbol.for("FP_PRESET_ENV")] = {
|
|
131
185
|
};
|
132
186
|
```
|
133
187
|
|
188
|
+
### Testing
|
189
|
+
|
190
|
+
To run the full test suite across all projects (tested storage gateways configs), run:
|
191
|
+
|
192
|
+
```bash
|
193
|
+
pnpm run test
|
194
|
+
```
|
195
|
+
|
196
|
+
To run tests for specific components or modules, use the following command pattern:
|
197
|
+
|
198
|
+
```bash
|
199
|
+
pnpm run test -t 'test name pattern' path/to/test/file
|
200
|
+
```
|
201
|
+
|
202
|
+
For example, to run a specific test for the CRDT module, in just one project:
|
203
|
+
|
204
|
+
```bash
|
205
|
+
FP_DEBUG=Loader pnpm run test --project file -t 'codec implict iv' crdt
|
206
|
+
```
|
207
|
+
|
208
|
+
For testing React components, you can use:
|
209
|
+
|
210
|
+
```bash
|
211
|
+
pnpm run test tests/react/[ComponentName].test.tsx
|
212
|
+
```
|
213
|
+
|
214
|
+
Example for testing the ImgFile component:
|
215
|
+
|
216
|
+
```bash
|
217
|
+
pnpm run test tests/react/ImgFile.test.tsx
|
218
|
+
```
|
219
|
+
|
134
220
|
### Log Formatting
|
135
221
|
|
136
222
|
It's possible to change the logformat by setting FP_FORMAT to:
|
@@ -170,6 +256,8 @@ pnpm run build:docs
|
|
170
256
|
|
171
257
|
Fireproof is a synthesis of work done by people in the web community over the years. I couldn't even begin to name all the folks who made pivotal contributions. Without npm, React, and VS Code all this would have taken so much longer. Thanks to everyone who supported me getting into ledger development via Apache CouchDB, one of the original document ledgers. The distinguishing work on immutable data-structures comes from the years of consideration [IPFS](https://ipfs.tech), [IPLD](https://ipld.io), and the [Filecoin APIs](https://docs.filecoin.io) have enjoyed.
|
172
258
|
|
259
|
+
Thanks to [Meno Abels](https://github.com/mabels) who has taken on the role of project lead engineer. Fireproof is rapidly becoming a mature solution.
|
260
|
+
|
173
261
|
Thanks to Alan Shaw and Mikeal Rogers without whom this project would have never got started. The core Merkle hash-tree clock is based on [Alan's Pail](https://github.com/alanshaw/pail), and you can see the repository history goes all the way back to work begun as a branch of that repo. Mikeal wrote [the prolly trees implementation](https://github.com/mikeal/prolly-trees).
|
174
262
|
|
175
263
|
## Contributing
|
package/index.cjs
CHANGED
@@ -1962,7 +1962,7 @@ var Index = class {
|
|
1962
1962
|
if (this.mapFn) {
|
1963
1963
|
if (mapFn) {
|
1964
1964
|
if (this.mapFn.toString() !== mapFn.toString()) {
|
1965
|
-
|
1965
|
+
this.logger.Error().Msg("cannot apply different mapFn app2");
|
1966
1966
|
}
|
1967
1967
|
}
|
1968
1968
|
} else {
|
@@ -1971,7 +1971,7 @@ var Index = class {
|
|
1971
1971
|
}
|
1972
1972
|
if (this.mapFnString) {
|
1973
1973
|
if (this.mapFnString !== mapFn.toString()) {
|
1974
|
-
|
1974
|
+
this.logger.Error().Str("mapFnString", this.mapFnString).Str("mapFn", mapFn.toString()).Msg("cannot apply different mapFn app");
|
1975
1975
|
}
|
1976
1976
|
} else {
|
1977
1977
|
this.mapFnString = mapFn.toString();
|
@@ -4404,6 +4404,9 @@ function sanitizeDocumentFields(obj) {
|
|
4404
4404
|
return item;
|
4405
4405
|
});
|
4406
4406
|
} else if (typeof obj === "object" && obj !== null) {
|
4407
|
+
if (obj instanceof Date) {
|
4408
|
+
return obj.toISOString();
|
4409
|
+
}
|
4407
4410
|
const typedObj = obj;
|
4408
4411
|
const result = {};
|
4409
4412
|
for (const key in typedObj) {
|
@@ -4411,8 +4414,12 @@ function sanitizeDocumentFields(obj) {
|
|
4411
4414
|
const value = typedObj[key];
|
4412
4415
|
if (value === null || !Number.isNaN(value) && value !== void 0) {
|
4413
4416
|
if (typeof value === "object" && !key.startsWith("_")) {
|
4414
|
-
|
4415
|
-
|
4417
|
+
if (value instanceof Date) {
|
4418
|
+
result[key] = value.toISOString();
|
4419
|
+
} else {
|
4420
|
+
const sanitized = sanitizeDocumentFields(value);
|
4421
|
+
result[key] = sanitized;
|
4422
|
+
}
|
4416
4423
|
} else {
|
4417
4424
|
result[key] = value;
|
4418
4425
|
}
|
@@ -5299,6 +5306,6 @@ __export(file_exports, {
|
|
5299
5306
|
|
5300
5307
|
// src/version.ts
|
5301
5308
|
var PACKAGE_VERSION = Object.keys({
|
5302
|
-
"0.20.0-dev-preview-
|
5309
|
+
"0.20.0-dev-preview-52": "xxxx"
|
5303
5310
|
})[0];
|
5304
5311
|
//# sourceMappingURL=index.cjs.map
|