@evolu/svelte 2.4.0 → 3.0.0

package/README.md

@@ -1,6 +1,6 @@
 # Evolu for Svelte
 
-[Evolu](https://github.com/evoluhq/evolu) for [Svelte](https://svelte.dev/).
+This package provides Evolu for [Svelte](https://svelte.dev).
 
 ## Documentation
 
@@ -12,4 +12,4 @@ The Evolu community is on [GitHub Discussions](https://github.com/evoluhq/evolu/
 
 To chat with other community members, you can join the [Evolu Discord](https://discord.gg/2J8yyyyxtZ).
 
-[![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/evoluhq.svg?style=social&label=Follow%20%40evoluhq)](https://twitter.com/evoluhq)
+[![X](https://img.shields.io/twitter/url/https/x.com/evoluhq.svg?style=social&label=Follow%20%40evoluhq)](https://x.com/evoluhq)

package/dist/index.svelte.d.ts

@@ -2,8 +2,8 @@
  * This file needs to be named .svelte.ts to be recognized by the Svelte
  * compiler in the app itself.
  */
-import type { AppOwner, Evolu, EvoluDeps, EvoluSchema, InferRow, Query, Row } from "@evolu/common/local-first";
-export declare const evoluSvelteDeps: EvoluDeps;
+import type { AppOwner, Evolu, EvoluSchema, InferRow, Query, Row } from "@evolu/common/local-first";
+export declare const evoluSvelteDeps: any;
 /**
  * Load and subscribe to the Query, and return an object with `rows` property
  * that are automatically updated when data changes.
@@ -12,7 +12,9 @@ export declare const evoluSvelteDeps: EvoluDeps;
  *
  * ```ts
  * // Create your query
- * const allTodos = evolu.createQuery((db) => ...);
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
  *
  * // Get all rows.
  * const allTodosState = queryState(evolu, () => allTodos);
@@ -22,10 +24,14 @@ export declare const evoluSvelteDeps: EvoluDeps;
  *
  * ```ts
  * // some kind of state
- * let someKindOfState = $state('someId');
+ * let someKindOfState = $state("someId");
  *
  * // derive your query based other props
- * const allTodos = $derived(evolu.createQuery((db) => use someKindOfState here ));
+ * const allTodos = $derived(
+ *   evolu.createQuery((db) =>
+ *     db.selectFrom("todo").where("id", "=", someKindOfState).selectAll(),
+ *   ),
+ * );
  *
  * // Get all rows, once someKindOfState changes, this allTodosState will be updated with the evolu query result
  * const allTodosState = queryState(evolu, () => allTodos);
@@ -33,14 +39,14 @@ export declare const evoluSvelteDeps: EvoluDeps;
  * // use allTodosState.rows in further calculations / UI
  * ```
  */
-export declare function queryState<R extends Row, Schema extends EvoluSchema, MappedRow = InferRow<Query<R>>>(evolu: Evolu<Schema>, 
+export declare const queryState: <R extends Row, Schema extends EvoluSchema, MappedRow = InferRow<Query<Schema, R>>>(evolu: Evolu<Schema>, 
 /**
  * Can be a normal query or a derived query.
  *
  * Svelte reactivity: it needs to be a callback, if the query is $derived this
  * will re-trigger the load/subscription based on the new query.
  */
-observedQuery: () => Query<R> | undefined, options?: {
+observedQuery: () => Query<Schema, R> | undefined, options?: {
     /**
      * This is a little helper so that you can map the results instead of using
      * a $derive operation.
@@ -48,7 +54,7 @@ observedQuery: () => Query<R> | undefined, options?: {
      * @param row
      */
     mapping?: (row: R) => MappedRow;
-}): {
+}) => {
     readonly rows: Array<MappedRow>;
 };
 /**
@@ -65,6 +71,7 @@ observedQuery: () => Query<R> | undefined, options?: {
  * // it will be undefined initially and set once the promise resolves
  * ```
  */
-export declare function appOwnerState<Schema extends EvoluSchema>(evolu: Evolu<Schema>): {
+export declare const appOwnerState: <Schema extends EvoluSchema>(evolu: Evolu<Schema>) => {
     readonly current: AppOwner | undefined;
 };
+//# sourceMappingURL=index.svelte.d.ts.map

package/dist/index.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.svelte.d.ts","sourceRoot":"","sources":["../src/lib/index.svelte.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EACV,QAAQ,EACR,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EAEL,GAAG,EACJ,MAAM,2BAA2B,CAAC;AAKnC,eAAO,MAAM,eAAe,KAAkC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,UAAU,GACrB,CAAC,SAAS,GAAG,EACb,MAAM,SAAS,WAAW,EAC1B,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAEtC,OAAO,KAAK,CAAC,MAAM,CAAC;AACpB;;;;;GAKG;AACH,eAAe,MAAM,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,SAAS,EACjD,UAAU;IACR;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;CACjC,KACA;IAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CA2CnC,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,SAAS,WAAW,EACtD,OAAO,KAAK,CAAC,MAAM,CAAC,KACnB;IACD,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAkBxC,CAAC"}

package/dist/index.svelte.js

@@ -2,9 +2,10 @@
  * This file needs to be named .svelte.ts to be recognized by the Svelte
  * compiler in the app itself.
  */
-import { evoluWebDeps } from "@evolu/web";
+import { createEvoluDeps } from "@evolu/web";
 // just in case we need to add some svelte specific deps
-export const evoluSvelteDeps = Object.assign({}, evoluWebDeps);
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+export const evoluSvelteDeps = /*#__PURE__*/ createEvoluDeps();
 /**
  * Load and subscribe to the Query, and return an object with `rows` property
  * that are automatically updated when data changes.
@@ -13,7 +14,9 @@ export const evoluSvelteDeps = Object.assign({}, evoluWebDeps);
  *
  * ```ts
  * // Create your query
- * const allTodos = evolu.createQuery((db) => ...);
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
  *
  * // Get all rows.
  * const allTodosState = queryState(evolu, () => allTodos);
@@ -23,10 +26,14 @@ export const evoluSvelteDeps = Object.assign({}, evoluWebDeps);
  *
  * ```ts
  * // some kind of state
- * let someKindOfState = $state('someId');
+ * let someKindOfState = $state("someId");
  *
  * // derive your query based other props
- * const allTodos = $derived(evolu.createQuery((db) => use someKindOfState here ));
+ * const allTodos = $derived(
+ *   evolu.createQuery((db) =>
+ *     db.selectFrom("todo").where("id", "=", someKindOfState).selectAll(),
+ *   ),
+ * );
  *
  * // Get all rows, once someKindOfState changes, this allTodosState will be updated with the evolu query result
  * const allTodosState = queryState(evolu, () => allTodos);
@@ -34,18 +41,18 @@ export const evoluSvelteDeps = Object.assign({}, evoluWebDeps);
  * // use allTodosState.rows in further calculations / UI
  * ```
  */
-export function queryState(evolu, 
+export const queryState = (evolu, 
 /**
  * Can be a normal query or a derived query.
  *
  * Svelte reactivity: it needs to be a callback, if the query is $derived this
  * will re-trigger the load/subscription based on the new query.
  */
-observedQuery, options) {
+observedQuery, options) => {
     {
         // writing to this variable - svelte's compiler will track it
         let writableState = $state([]);
-        function updateState(rows) {
+        const updateState = (rows) => {
             if (options === null || options === void 0 ? void 0 : options.mapping) {
                 // re-assigning because somehow typescript thinks its still nullable here
                 // remove again once no issue anymore
@@ -53,7 +60,7 @@ observedQuery, options) {
                 writableState = rows.map((row) => mapper(row));
             }
             writableState = rows;
-        }
+        };
         $effect(() => {
             const query = observedQuery();
             if (!query) {
@@ -76,7 +83,7 @@ observedQuery, options) {
             },
         };
     }
-}
+};
 /**
  * Get the {@link AppOwner} promise that resolves when available.
  *
@@ -91,14 +98,13 @@ observedQuery, options) {
  * // it will be undefined initially and set once the promise resolves
  * ```
  */
-export function appOwnerState(evolu) {
+export const appOwnerState = (evolu) => {
     {
         // writing to this variable - svelte's compiler will track it
         let writableState = $state(undefined);
         $effect(() => {
-            void evolu.appOwner.then((appOwner) => {
-                writableState = appOwner;
-            });
+            // TODO: Review, it was promise, it isn't anymore.
+            writableState = evolu.appOwner;
         });
         return {
             // Svelte reactivity: it needs to be a getter
@@ -107,4 +113,4 @@ export function appOwnerState(evolu) {
             },
         };
     }
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolu/svelte",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Evolu for Svelte",
   "keywords": [
     "evolu",
@@ -10,9 +10,12 @@
   "bugs": {
     "url": "https://github.com/evoluhq/evolu/issues"
   },
-  "repository": "evoluhq/evolu",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/evoluhq/evolu.git"
+  },
   "license": "MIT",
-  "sideEffects": [],
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -20,36 +23,35 @@
       "svelte": "./dist/index.svelte.js"
     }
   },
-  "svelte": "./dist/index.svelte.js",
   "types": "./dist/index.svelte.d.ts",
   "files": [
     "dist",
+    "src/**",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@sveltejs/package": "^2.5.0",
-    "@tsconfig/svelte": "^5.0.5",
-    "svelte": "^5.38.2",
-    "svelte-check": "^4.3.1",
-    "typescript": "^5.9.2",
-    "@evolu/common": "7.4.0",
-    "@evolu/tsconfig": "0.0.2",
-    "@evolu/web": "2.4.0"
+    "@sveltejs/package": "^2.5.7",
+    "@tsconfig/svelte": "^5.0.6",
+    "@typescript/native": "npm:typescript@^7.0.2",
+    "svelte": "^5.56.8",
+    "svelte-check": "^4.7.4",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
+    "@evolu/typescript-config": "0.0.2",
+    "@evolu/web": "3.0.0",
+    "@evolu/common": "8.0.0"
   },
   "peerDependencies": {
-    "@evolu/common": "^7.4.0",
-    "@evolu/web": "^2.4.0",
+    "@evolu/common": "^8.0.0-next.0",
+    "@evolu/web": "^3.0.0-next.0",
     "svelte": ">=5"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "rimraf dist && tsc && pnpm run package",
+    "build": "tsc --build tsconfig.build.json && pnpm package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "clean": "rimraf .turbo .svelte-kit node_modules dist",
-    "dev": "tsc --watch",
     "package": "svelte-package",
     "preview": "vite preview"
   }

package/src/lib/index.svelte.ts

@@ -0,0 +1,158 @@
+/**
+ * This file needs to be named .svelte.ts to be recognized by the Svelte
+ * compiler in the app itself.
+ */
+
+import type {
+  AppOwner,
+  Evolu,
+  EvoluSchema,
+  InferRow,
+  Query,
+  QueryRows,
+  Row,
+} from "@evolu/common/local-first";
+import { createEvoluDeps } from "@evolu/web";
+
+// just in case we need to add some svelte specific deps
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+export const evoluSvelteDeps = /*#__PURE__*/ createEvoluDeps();
+
+/**
+ * Load and subscribe to the Query, and return an object with `rows` property
+ * that are automatically updated when data changes.
+ *
+ * ### Example
+ *
+ * ```ts
+ * // Create your query
+ * const allTodos = evolu.createQuery((db) =>
+ *   db.selectFrom("todo").selectAll(),
+ * );
+ *
+ * // Get all rows.
+ * const allTodosState = queryState(evolu, () => allTodos);
+ * ```
+ *
+ * ### Example
+ *
+ * ```ts
+ * // some kind of state
+ * let someKindOfState = $state("someId");
+ *
+ * // derive your query based other props
+ * const allTodos = $derived(
+ *   evolu.createQuery((db) =>
+ *     db.selectFrom("todo").where("id", "=", someKindOfState).selectAll(),
+ *   ),
+ * );
+ *
+ * // Get all rows, once someKindOfState changes, this allTodosState will be updated with the evolu query result
+ * const allTodosState = queryState(evolu, () => allTodos);
+ *
+ * // use allTodosState.rows in further calculations / UI
+ * ```
+ */
+export const queryState = <
+  R extends Row,
+  Schema extends EvoluSchema,
+  MappedRow = InferRow<Query<Schema, R>>,
+>(
+  evolu: Evolu<Schema>,
+  /**
+   * Can be a normal query or a derived query.
+   *
+   * Svelte reactivity: it needs to be a callback, if the query is $derived this
+   * will re-trigger the load/subscription based on the new query.
+   */
+  observedQuery: () => Query<Schema, R> | undefined,
+  options?: {
+    /**
+     * This is a little helper so that you can map the results instead of using
+     * a $derive operation.
+     *
+     * @param row
+     */
+    mapping?: (row: R) => MappedRow;
+  },
+): { readonly rows: Array<MappedRow> } => {
+  {
+    // writing to this variable - svelte's compiler will track it
+    let writableState: Array<MappedRow> = $state([]);
+
+    const updateState = (rows: QueryRows<R>): void => {
+      if (options?.mapping) {
+        // re-assigning because somehow typescript thinks its still nullable here
+        // remove again once no issue anymore
+        const mapper = options.mapping;
+        writableState = rows.map((row) => mapper(row));
+      }
+
+      writableState = rows as Array<MappedRow>;
+    };
+
+    $effect(() => {
+      const query = observedQuery();
+
+      if (!query) {
+        return;
+      }
+
+      // always setting the state on first load
+      // for a) if the query changes we definitely need current content immediately
+      // for b) if you sub/unsub in a very short time can cause the subscription not to trigger a callback
+      // => this is also for HMR
+      void evolu.loadQuery(query).then(updateState);
+
+      return evolu.subscribeQuery(query)(() => {
+        const rows = evolu.getQueryRows(query);
+
+        updateState(rows);
+      });
+    });
+
+    return {
+      // Svelte reactivity: it needs to be a getter
+      get rows() {
+        return writableState;
+      },
+    };
+  }
+};
+
+/**
+ * Get the {@link AppOwner} promise that resolves when available.
+ *
+ * ### Example
+ *
+ * ```ts
+ * import { appOwnerState } from "@evolu/svelte";
+ *
+ * const owner = appOwnerState(evolu);
+ *
+ * // use owner.current in your Svelte templates
+ * // it will be undefined initially and set once the promise resolves
+ * ```
+ */
+export const appOwnerState = <Schema extends EvoluSchema>(
+  evolu: Evolu<Schema>,
+): {
+  readonly current: AppOwner | undefined;
+} => {
+  {
+    // writing to this variable - svelte's compiler will track it
+    let writableState = $state<AppOwner | undefined>(undefined);
+
+    $effect(() => {
+      // TODO: Review, it was promise, it isn't anymore.
+      writableState = evolu.appOwner;
+    });
+
+    return {
+      // Svelte reactivity: it needs to be a getter
+      get current() {
+        return writableState;
+      },
+    };
+  }
+};