@evolu/svelte 3.0.0-next.0 → 3.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Evolu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.svelte.d.ts

@@ -3,7 +3,7 @@
  * compiler in the app itself.
  */
 import type { AppOwner, Evolu, EvoluSchema, InferRow, Query, Row } from "@evolu/common/local-first";
-export declare const evoluSvelteDeps: import("@evolu/common/local-first").EvoluDeps;
+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.

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

@@ -1 +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,+CAAoB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"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

@@ -4,8 +4,8 @@
  */
 import { createEvoluDeps } from "@evolu/web";
 // just in case we need to add some svelte specific deps
-// eslint-disable-next-line evolu/require-pure-annotation
-export const evoluSvelteDeps = createEvoluDeps();
+// 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evolu/svelte",
-  "version": "3.0.0-next.0",
+  "version": "3.0.0",
   "description": "Evolu for Svelte",
   "keywords": [
     "evolu",
@@ -10,7 +10,10 @@
   "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": false,
   "type": "module",
@@ -20,30 +23,23 @@
       "svelte": "./dist/index.svelte.js"
     }
   },
-  "svelte": "./dist/index.svelte.js",
   "types": "./dist/index.svelte.d.ts",
   "files": [
     "dist",
+    "src/**",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
-  "scripts": {
-    "build": "tsc --build && npm run package",
-    "prepack": "npm run build",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "package": "svelte-package",
-    "prepublishOnly": "npm run package",
-    "preview": "vite preview"
-  },
   "devDependencies": {
-    "@evolu/common": "8.0.0-next.0",
-    "@evolu/typescript-config": "*",
-    "@evolu/web": "3.0.0-next.0",
     "@sveltejs/package": "^2.5.7",
     "@tsconfig/svelte": "^5.0.6",
-    "svelte": "^5.48.2",
-    "svelte-check": "^4.3.6",
-    "typescript": "^5.9.3"
+    "@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": "^8.0.0-next.0",
@@ -52,5 +48,11 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsc --build tsconfig.build.json && pnpm package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "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;
+      },
+    };
+  }
+};