Expose and leverage canUseDOM

.changeset/kind-garlics-appear.md

@@ -0,0 +1,8 @@
+---
+"@evolu/react-native": patch
+"@evolu/common-web": patch
+"@evolu/common": patch
+"@evolu/react": patch
+---
+
+Expose and leverage canUseDOM

packages/evolu-common-web/src/PlatformLive.ts

@@ -7,12 +7,11 @@ import {
   Mnemonic,
   Platform,
   SyncLock,
+  canUseDOM,
 } from "@evolu/common";
 import { Effect, Function, Layer, Predicate, ReadonlyArray } from "effect";
 import { flushSync } from "react-dom";
 
-const hasDoc = typeof document !== "undefined";
-
 const isChromeWithOpfs = (): boolean =>
   navigator.userAgentData != null &&
   navigator.userAgentData.brands.find(
@@ -37,7 +36,7 @@ const isSafariWithOpfs = (): boolean => {
   return Number(matches[1]) >= 17;
 };
 
-const name = hasDoc
+const name = canUseDOM
   ? isChromeWithOpfs() || isFirefoxWithOpfs() || isSafariWithOpfs()
     ? "web-with-opfs"
     : "web-without-opfs"

packages/evolu-common-web/src/SqliteLive.ts

@@ -1,14 +1,15 @@
 import {
   Sqlite,
   SqliteRow,
+  canUseDOM,
   parseJsonResults,
   valuesToSqliteValues,
 } from "@evolu/common";
 import { Effect, Function, Layer } from "effect";
 
 import sqlite3InitModule from "@sqlite.org/sqlite-wasm";
 
-if (typeof document !== "undefined")
+if (canUseDOM)
   // @ts-expect-error Missing types.
   self.sqlite3ApiConfig = {
     debug: Function.constVoid,
@@ -17,11 +18,11 @@ if (typeof document !== "undefined")
     error: Function.constVoid,
   };
 
-const sqlitePromise = sqlite3InitModule().then((sqlite3) => {
-  return typeof document === "undefined"
-    ? new sqlite3.oo1.OpfsDb("/evolu/evolu1.db", "c")
-    : new sqlite3.oo1.JsStorageDb("local");
-});
+const sqlitePromise = sqlite3InitModule().then((sqlite3) =>
+  canUseDOM
+    ? new sqlite3.oo1.JsStorageDb("local")
+    : new sqlite3.oo1.OpfsDb("/evolu/evolu1.db", "c"),
+);
 
 const exec: Sqlite["exec"] = (arg) =>
   Effect.gen(function* (_) {

packages/evolu-common/src/Platform.ts

@@ -61,3 +61,13 @@ export interface AppState {
 }
 
 export const AppState = Context.Tag<AppState>("evolu/AppState");
+
+/**
+ * To detect whether DOM can be used.
+ * https://github.com/facebook/fbjs/blob/main/packages/fbjs/src/core/ExecutionEnvironment.js
+ */
+export const canUseDOM = !!(
+  typeof window !== "undefined" &&
+  window.document &&
+  window.document.createElement
+);

packages/evolu-react-native/src/index.ts

@@ -27,6 +27,7 @@ export {
   SqliteDate,
   String,
   String1000,
+  canUseDOM,
   cast,
   id,
   jsonArrayFrom,

packages/evolu-react/src/index.ts

@@ -20,6 +20,7 @@ export {
   SqliteDate,
   String,
   String1000,
+  canUseDOM,
   cast,
   id,
   jsonArrayFrom,