@fireproof/core 0.20.0-dev-preview-63 → 0.20.1-dev-preview-01

package/react/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/react/utils.ts":{"bytes":156,"imports":[],"format":"esm"},"src/react/use-document.ts":{"bytes":3958,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/react/utils.ts","kind":"import-statement","original":"./utils.js"}],"format":"esm"},"src/react/use-live-query.ts":{"bytes":1760,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-all-docs.ts":{"bytes":934,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-changes.ts":{"bytes":974,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-fireproof.ts":{"bytes":2505,"imports":[{"path":"@fireproof/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/react/use-document.ts","kind":"import-statement","original":"./use-document.js"},{"path":"src/react/use-live-query.ts","kind":"import-statement","original":"./use-live-query.js"},{"path":"src/react/use-all-docs.ts","kind":"import-statement","original":"./use-all-docs.js"},{"path":"src/react/use-changes.ts","kind":"import-statement","original":"./use-changes.js"}],"format":"esm"},"src/react/types.ts":{"bytes":2407,"imports":[],"format":"esm"},"src/react/img-file.ts":{"bytes":2248,"imports":[{"path":"@fireproof/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/index.ts":{"bytes":124,"imports":[{"path":"src/react/use-fireproof.ts","kind":"import-statement","original":"./use-fireproof.js"},{"path":"src/react/types.ts","kind":"import-statement","original":"./types.js"},{"path":"src/react/img-file.ts","kind":"import-statement","original":"./img-file.js"}],"format":"esm"}},"outputs":{"dist/fireproof-core/react/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":19682},"dist/fireproof-core/react/index.cjs":{"imports":[{"path":"@fireproof/core","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true},{"path":"react","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/react/index.ts","inputs":{"src/react/index.ts":{"bytesInOutput":197},"src/react/use-fireproof.ts":{"bytesInOutput":687},"src/react/use-document.ts":{"bytesInOutput":3458},"src/react/utils.ts":{"bytesInOutput":107},"src/react/use-live-query.ts":{"bytesInOutput":1129},"src/react/use-all-docs.ts":{"bytesInOutput":657},"src/react/use-changes.ts":{"bytesInOutput":679},"src/react/img-file.ts":{"bytesInOutput":1499}},"bytes":10094}}}

package/react/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/react/utils.ts":{"bytes":156,"imports":[],"format":"esm"},"src/react/use-document.ts":{"bytes":3958,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"src/react/utils.ts","kind":"import-statement","original":"./utils.js"}],"format":"esm"},"src/react/use-live-query.ts":{"bytes":1760,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-all-docs.ts":{"bytes":934,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-changes.ts":{"bytes":974,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/use-fireproof.ts":{"bytes":2505,"imports":[{"path":"@fireproof/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/react/use-document.ts","kind":"import-statement","original":"./use-document.js"},{"path":"src/react/use-live-query.ts","kind":"import-statement","original":"./use-live-query.js"},{"path":"src/react/use-all-docs.ts","kind":"import-statement","original":"./use-all-docs.js"},{"path":"src/react/use-changes.ts","kind":"import-statement","original":"./use-changes.js"}],"format":"esm"},"src/react/types.ts":{"bytes":2407,"imports":[],"format":"esm"},"src/react/img-file.ts":{"bytes":2248,"imports":[{"path":"@fireproof/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"src/react/index.ts":{"bytes":124,"imports":[{"path":"src/react/use-fireproof.ts","kind":"import-statement","original":"./use-fireproof.js"},{"path":"src/react/types.ts","kind":"import-statement","original":"./types.js"},{"path":"src/react/img-file.ts","kind":"import-statement","original":"./img-file.js"}],"format":"esm"}},"outputs":{"dist/fireproof-core/react/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":19722},"dist/fireproof-core/react/index.js":{"imports":[{"path":"@fireproof/core","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["FireproofCtx","ImgFile","useFireproof"],"entryPoint":"src/react/index.ts","inputs":{"src/react/use-fireproof.ts":{"bytesInOutput":658},"src/react/use-document.ts":{"bytesInOutput":3262},"src/react/utils.ts":{"bytesInOutput":107},"src/react/use-live-query.ts":{"bytesInOutput":1123},"src/react/use-all-docs.ts":{"bytesInOutput":669},"src/react/use-changes.ts":{"bytesInOutput":691},"src/react/index.ts":{"bytesInOutput":0},"src/react/img-file.ts":{"bytesInOutput":1476}},"bytes":8301}}}

package/tests/blockstore/loader.test.ts

@@ -2,7 +2,7 @@ import * as codec from "@ipld/dag-cbor";
 import { sha256 as hasher } from "multiformats/hashes/sha2";
 import { BlockView } from "multiformats";
 import { CID } from "multiformats/cid";
-import { MemoryBlockstore } from "@fireproof/vendor/@web3-storage/pail/block";
+import { MemoryBlockstore } from "@web3-storage/pail/block";
 import { CRDTMeta, CarTransaction, IndexTransactionMeta, SuperThis, bs, ensureSuperThis, rt } from "@fireproof/core";
 import { simpleBlockOpts } from "../helpers.js";
 

package/tests/blockstore/store.test.ts

@@ -19,8 +19,7 @@ import { mockLoader, noopUrl } from "../helpers.js";
 describe("CarStore", function () {
   let store: bs.CarStore;
   const sthis = ensureSuperThis();
-
-  let loader: bs.Loadable;
+  const loader = mockLoader(sthis);
 
   afterEach(async () => {
     await store.close();
@@ -28,7 +27,6 @@ describe("CarStore", function () {
   });
 
   beforeEach(async () => {
-    loader = mockLoader(sthis);
     await sthis.start();
     const at = await bs.createAttachedStores(noopUrl("test"), loader);
     store = at.stores.car;
@@ -53,9 +51,9 @@ describe("CarStore", function () {
 describe("CarStore with a saved car", function () {
   let store: bs.CarStore;
   let car: bs.AnyBlock;
-  let loader: bs.Loadable;
 
   const sthis = ensureSuperThis();
+  const loader = mockLoader(sthis);
 
   afterEach(async () => {
     await store.close();
@@ -63,7 +61,6 @@ describe("CarStore with a saved car", function () {
   });
 
   beforeEach(async () => {
-    loader = mockLoader(sthis);
     await sthis.start();
 
     const at = await bs.createAttachedStores(noopUrl("test2"), loader);
@@ -98,7 +95,7 @@ describe("CarStore with a saved car", function () {
 describe("MetaStore", function () {
   let store: bs.MetaStore;
   const sthis = ensureSuperThis();
-  let loader: bs.Loadable;
+  const loader = mockLoader(sthis);
 
   afterEach(async () => {
     await store.close();
@@ -106,7 +103,6 @@ describe("MetaStore", function () {
   });
 
   beforeEach(async () => {
-    loader = mockLoader(sthis);
     await sthis.start();
     const at = await bs.createAttachedStores(noopUrl("test"), loader);
     store = at.stores.meta;
@@ -139,7 +135,7 @@ describe("MetaStore with a saved header", function () {
   let store: bs.MetaStore;
   let cid: CID;
   const sthis = ensureSuperThis();
-  let loader: bs.Loadable;
+  const loader = mockLoader(sthis);
 
   afterEach(async () => {
     await store.close();
@@ -147,7 +143,6 @@ describe("MetaStore with a saved header", function () {
   });
 
   beforeEach(async () => {
-    loader = mockLoader(sthis);
     await sthis.start();
     const at = await bs.createAttachedStores(noopUrl("test3-meta"), loader);
     store = at.stores.meta;

package/tests/fireproof/attachable.test.ts

@@ -176,7 +176,7 @@ describe("activate store", () => {
 
   it("activate by store", async () => {
     expect(attach.activate(secondAttached.stores).active.car.url().toString()).toBe(
-      "memory://second?localName=first&name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
+      "memory://second?name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
     );
     expect(attach.activate(firstAttached.stores).local().active.car.url().toString()).toBe(
       "memory://first?name=first&store=car&storekey=%40first-data%40&suffix=.car&version=v0.19-memory",
@@ -188,10 +188,10 @@ describe("activate store", () => {
 
   it("activate by store", async () => {
     expect(attach.activate("memory://second").active.car.url().toString()).toBe(
-      "memory://second?localName=first&name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
+      "memory://second?name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
     );
     expect(attach.activate("memory://second").remotes()[0].active.car.url().toString()).toEqual(
-      "memory://second?localName=first&name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
+      "memory://second?name=second&store=car&storekey=%40second-data%40&suffix=.car&version=v0.19-memory",
     );
     expect(attach.activate("memory://first?store=meta").active.car.url().toString()).toBe(
       "memory://first?name=first&store=car&storekey=%40first-data%40&suffix=.car&version=v0.19-memory",

package/tests/react/use-fireproof-db-switch.test.tsx

@@ -0,0 +1,91 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { fireproof, useFireproof } from "use-fireproof";
+import type { Database, LiveQueryResult } from "use-fireproof";
+
+// Test timeout value for CI
+const TEST_TIMEOUT = 45000;
+
+describe("HOOK: useFireproof database switching", () => {
+  const db1Name = "db1";
+  const db2Name = "db2";
+  let db1: Database, db2: Database;
+
+  beforeEach(async () => {
+    // Setup two databases with different data
+    db1 = fireproof(db1Name);
+    db2 = fireproof(db2Name);
+
+    // Add data to db1
+    await db1.put({ foo: "db1-data" });
+
+    // Add different data to db2
+    await db2.put({ foo: "db2-data" });
+  });
+
+  it(
+    "should switch databases and update query results when database name changes",
+    async () => {
+      let query: LiveQueryResult<{ foo: string }, string>;
+      let currentDbName: string;
+      let currentDb: Database;
+
+      // Initial render with db1
+      const { rerender } = renderHook(
+        ({ dbName }) => {
+          const result = useFireproof(dbName);
+          currentDbName = result.database.name;
+          currentDb = result.database;
+          query = result.useLiveQuery<{ foo: string }>("foo");
+          return result;
+        },
+        { initialProps: { dbName: db1Name } },
+      );
+
+      // Verify initial state with db1
+      await waitFor(() => {
+        expect(currentDbName).toBe(db1Name);
+        expect(currentDb.name).toBe(db1Name);
+        expect(query.rows.map((row) => row.doc?.foo)).toEqual(["db1-data"]);
+      });
+
+      // Switch to db2
+      rerender({ dbName: db2Name });
+
+      // Verify state with db2
+      await waitFor(() => {
+        expect(currentDbName).toBe(db2Name);
+        expect(currentDb.name).toBe(db2Name);
+        expect(query.rows.map((row) => row.doc?.foo)).toEqual(["db2-data"]);
+      });
+
+      // Switch back to db1
+      rerender({ dbName: db1Name });
+
+      // Verify state is back to db1
+      await waitFor(() => {
+        expect(currentDbName).toBe(db1Name);
+        expect(currentDb.name).toBe(db1Name);
+        expect(query.rows.map((row) => row.doc?.foo)).toEqual(["db1-data"]);
+      });
+
+      // Test that changes to the new database are reflected
+      await db2.put({ foo: "db2-updated" });
+      rerender({ dbName: db2Name });
+
+      await waitFor(() => {
+        expect(currentDbName).toBe(db2Name);
+        expect(currentDb.name).toBe(db2Name);
+        expect(query.rows.map((row) => row.doc?.foo)).toEqual(["db2-data", "db2-updated"]);
+      });
+    },
+    TEST_TIMEOUT,
+  );
+
+  afterEach(async () => {
+    await db1.close();
+    await db1.destroy();
+    await db2.close();
+    await db2.destroy();
+  });
+});

package/tests/react/use-fireproof-stability.test.tsx

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, waitFor, fireEvent, act } from "@testing-library/react";
+import { useState, useEffect, createElement } from "react";
+import { useFireproof } from "../../src/react/use-fireproof.js";
+
+// Extend HTMLElement for TypeScript compatibility
+declare global {
+  interface HTMLElement {
+    querySelector(selectors: string): HTMLElement | null;
+    getAttribute(name: string): string | null;
+    textContent: string | null;
+    click(): void;
+  }
+}
+
+// Test component that triggers state updates and verifies database stability
+function TestComponent() {
+  const { database } = useFireproof("test-stability-db");
+  const initialDatabaseRef = database;
+
+  const [counter, setCounter] = useState(0);
+
+  // Verify that the database reference remains stable across renders
+  if (counter > 0 && initialDatabaseRef !== database) {
+    throw new Error("Database reference changed between renders!");
+  }
+
+  return createElement("div", {}, [
+    createElement("div", { "data-testid": "db-name", key: "db-name" }, database.name),
+    createElement("div", { "data-testid": "counter", key: "counter" }, String(counter)),
+    createElement(
+      "button",
+      {
+        "data-testid": "increment",
+        key: "increment",
+        onClick: () => setCounter((c) => c + 1),
+      },
+      "Increment",
+    ),
+  ]);
+}
+
+// Test timeout value for CI
+const TEST_TIMEOUT = 60000; // 1 minute per test
+
+describe("HOOK: useFireproof stability", () => {
+  it(
+    "database instance remains stable across renders",
+    async () => {
+      // Mock console.error to catch any React errors
+      const consoleErrorMock = vi.spyOn(console, "error").mockImplementation(vi.fn());
+
+      const { findByTestId } = render(createElement(TestComponent, {}));
+
+      // Get initial state
+      const dbNameEl = await findByTestId("db-name" as const);
+      const counterEl = await findByTestId("counter" as const);
+
+      // Verify initial state
+      expect(dbNameEl.textContent).toBe("test-stability-db");
+      expect(counterEl.textContent).toBe("0");
+
+      // Trigger a re-render by updating state
+      const incrementButton = await findByTestId("increment" as const);
+      await act(async () => {
+        incrementButton.click();
+      });
+
+      // Verify state changed but no errors occurred
+      expect(counterEl.textContent).toBe("1");
+
+      // There should be no errors logged from React about database reference changing
+      expect(consoleErrorMock).not.toHaveBeenCalledWith(expect.stringContaining("Database reference changed between renders"));
+
+      // Perform multiple render cycles to ensure stability
+      for (let i = 0; i < 5; i++) {
+        await act(async () => {
+          incrementButton.click();
+        });
+      }
+
+      // Verify no errors occurred during multiple renders
+      expect(consoleErrorMock).not.toHaveBeenCalledWith(expect.stringContaining("Database reference changed between renders"));
+
+      // Restore console
+      consoleErrorMock.mockRestore();
+    },
+    TEST_TIMEOUT,
+  );
+
+  it(
+    "input events do not cause infinite render loops",
+    async () => {
+      // This test is specifically designed to catch the issue reported in v0.20.0
+
+      function InputTestComponent() {
+        // We still create the database to ensure no infinite render loops occur
+        // But we don't need to use any of its features directly in this test
+        useFireproof("test-input-db");
+        const [inputValue, setInputValue] = useState("");
+        const [renderCount, setRenderCount] = useState(0);
+
+        // Track render count
+        useEffect(() => {
+          setRenderCount((c) => c + 1);
+        }, []);
+
+        return createElement("div", {}, [
+          createElement("input", {
+            type: "text",
+            "data-testid": "input",
+            key: "input",
+            value: inputValue,
+            onChange: (e: { target: { value: string } }) => {
+              setInputValue(e.target.value);
+            },
+          }),
+          createElement("div", { "data-testid": "render-count", key: "render-count" }, String(renderCount)),
+        ]);
+      }
+
+      // Instead of using createRoot, use the standard render method
+      const { getByTestId } = render(createElement(InputTestComponent));
+
+      // Get the input element
+      const input = getByTestId("input");
+
+      // Simulate typing in the input field - this would trigger the bug in v0.20.0
+      await waitFor(() => {
+        fireEvent.change(input, { target: { value: "test" } });
+      });
+
+      // Wait a bit to ensure no infinite loop occurs
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // Verify the render count hasn't exploded (if it were an infinite loop, the test would timeout)
+      const renderCount = getByTestId("render-count");
+
+      // The exact number isn't important, but it should be a small number
+      // If we're in an infinite loop, the test would have timed out before reaching here
+      expect(parseInt(renderCount.textContent || "0", 10)).toBeLessThan(10);
+    },
+    TEST_TIMEOUT,
+  );
+});

package/tests/www/gallery.html

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fireproof Uploads</title>
+    <script src="./fireproof.iife.js?cache=94"></script>
+    <script type="text/javascript">
+      function testApp() {
+        const { fireproof, connect } = Fireproof;
+        let dbName;
+        let db;
+        let cx;
+
+        let dbUnsubscribe = false;
+
+        function setupDb(name) {
+          if (dbUnsubscribe) {
+            dbUnsubscribe();
+          }
+          dbName = name;
+          db = fireproof(name);
+          window.db = db;
+
+          cx = db.connect("jchris+files-30@fireproof.storage", "todo-test");
+          window.cx = cx;
+
+          dbUnsubscribe = db.subscribe(redraw);
+          return db;
+        }
+
+        let doing;
+        const redraw = async () => {
+          if (doing) {
+            return doing;
+          }
+          doing = draw().finally(() => (doing = null));
+          return doing;
+        };
+
+        const draw = async () => {
+          const result = await db.query("_id", { descending: true, limit: 10 });
+          document.querySelector("ul").innerHTML = "";
+          for (const row of result.rows) {
+            const doc = row.doc;
+            if (doc._publicFiles) {
+              const li = document.querySelector("ul").appendChild(document.createElement("li"));
+              li.appendChild(document.createElement("span")).innerText = row.key;
+              li.appendChild(document.createElement("br"));
+              for (const file of Object.keys(doc._publicFiles)) {
+                (async () => {
+                  const meta = doc._publicFiles[file];
+                  if (meta.file && /image/.test(meta.type)) {
+                    const src = URL.createObjectURL(await meta.file());
+                    const img = document.createElement("img");
+                    img.src = src;
+                    img.height = 100;
+                    img.onload = () => {
+                      URL.revokeObjectURL(img.src);
+                    };
+
+                    console.log("url", meta.url);
+                    li.appendChild(img);
+                  }
+                })();
+              }
+            }
+          }
+        };
+
+        async function changeList(e) {
+          e.preventDefault();
+          const input = document.querySelector("#list");
+          dbName = input.value;
+          history.pushState(null, "", location.pathname + "?db=" + encodeURIComponent(dbName));
+          setupDb(dbName);
+
+          redraw();
+        }
+        window.changeList = changeList;
+
+        async function openDashboard(e) {
+          db.openDashboard();
+        }
+        window.openDashboard = openDashboard;
+
+        function handleFiles() {
+          const fileList = this.files;
+          const doc = {
+            _publicFiles: {},
+          };
+          for (const file of fileList) {
+            doc._publicFiles[file.name] = file;
+          }
+          const ok = db.put(doc);
+        }
+
+        async function initialize() {
+          ps = new URLSearchParams(location.search);
+          const listQ = ps.get("db");
+          setupDb(listQ || "hello-world");
+          const input = document.querySelector("#list");
+          input.value = dbName;
+
+          const inputElement = document.getElementById("files-up");
+          inputElement.addEventListener("change", handleFiles, false);
+          db.subscribe(draw);
+          draw();
+        }
+
+        window.onload = initialize;
+      }
+      testApp();
+    </script>
+  </head>
+
+  <body>
+    List:
+    <input title="gallery" type="text" name="list" id="list" />
+    <button onclick="changeList(event)">Change Gallery</button>
+    <button onclick="openDashboard(event)">🔥 Import to Dashboard</button>
+    <h3>Files</h3>
+    <p>
+      Data is stored locally and encrypted before upload to S3. This is a demo so the encryption key is not managed securely. Read
+      more about <a href="https://use-fireproof.com/docs/ledger-api/replication">Fireproof replication options.</a> You can also see
+      a demo without images but <a href="https://fireproof.storage/s3up-test.html">with compaction and refresh buttons.</a>
+    </p>
+    <label for="files-up"><strong>Drop files:</strong></label>
+    <input accept="image/*" title="save to Fireproof" type="file" id="files-up" multiple />
+    <ul></ul>
+  </body>
+</html>

package/tests/www/iife.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fireproof Test</title>
+    <script src="./fireproof.iife.js"></script>
+    <script type="text/javascript">
+      function testApp() {
+        const db = Fireproof.fireproof("iife-test", { persistIndexes: true });
+
+        const draw = async () => {
+          const result = await db.query("sort", { includeDocs: true });
+          document.querySelector("ul").innerHTML = "";
+          for (const row of result.rows) {
+            document.querySelector("ul").appendChild(document.createElement("li")).innerText = JSON.stringify(row.doc);
+          }
+        };
+
+        async function initialize() {
+          console.log("initialize");
+          db.subscribe(draw);
+          draw();
+        }
+
+        async function onButtonClick(e) {
+          e.preventDefault();
+          console.log("put");
+          const ok = await db.put({ sort: Math.random(), test: "test" });
+          console.log("ok", ok.id);
+        }
+        window.onButtonClick = onButtonClick;
+        window.onload = initialize;
+      }
+      testApp();
+    </script>
+  </head>
+  <body>
+    <button onclick="onButtonClick(event)">Click to Run</button>
+    <ul></ul>
+  </body>
+</html>