@evolu/svelte 1.0.0-preview.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/README.md

@@ -0,0 +1,15 @@
+# Evolu for Svelte
+
+[Evolu](https://github.com/evoluhq/evolu) for [Svelte](https://svelte.dev/).
+
+## Documentation
+
+For detailed information and usage examples, please visit [evolu.dev](https://www.evolu.dev).
+
+## Community
+
+The Evolu community is on [GitHub Discussions](https://github.com/evoluhq/evolu/discussions), where you can ask questions and voice ideas.
+
+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)

package/dist/index.svelte.d.ts

@@ -0,0 +1,53 @@
+/**
+ * This file needs to be named .svelte.ts to be recognized by the Svelte
+ * compiler in the app itself.
+ */
+import type { Evolu, EvoluDeps, EvoluSchema, InferRow, Query, Row } from "@evolu/common/evolu";
+export declare const evoluSvelteDeps: EvoluDeps;
+/**
+ * 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) => ...);
+ *
+ * // 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) => use someKindOfState here ));
+ *
+ * // 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 declare function queryState<R extends Row, Schema extends EvoluSchema, MappedRow = InferRow<Query<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?: {
+    /**
+     * 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>;
+};

package/dist/index.svelte.js

@@ -0,0 +1,82 @@
+/**
+ * This file needs to be named .svelte.ts to be recognized by the Svelte
+ * compiler in the app itself.
+ */
+import { evoluWebDeps } from "@evolu/web";
+// just in case we need to add some svelte specific deps
+export const evoluSvelteDeps = Object.assign({}, evoluWebDeps);
+/**
+ * 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) => ...);
+ *
+ * // 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) => use someKindOfState here ));
+ *
+ * // 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 function 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) {
+    {
+        // writing to this variable - svelte's compiler will track it
+        let writableState = $state([]);
+        function 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
+                const mapper = options.mapping;
+                writableState = rows.map((row) => mapper(row));
+            }
+            writableState = rows;
+        }
+        $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);
+            const unsubEvoluSub = evolu.subscribeQuery(query)(() => {
+                const rows = evolu.getQueryRows(query);
+                updateState(rows);
+            });
+            return () => {
+                unsubEvoluSub();
+            };
+        });
+        return {
+            // Svelte reactivity: it needs to be a getter
+            get rows() {
+                return writableState;
+            },
+        };
+    }
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@evolu/svelte",
+  "version": "1.0.0-preview.0",
+  "description": "Evolu for Svelte",
+  "keywords": [
+    "evolu",
+    "svelte"
+  ],
+  "license": "MIT",
+  "repository": "evoluhq/evolu",
+  "bugs": {
+    "url": "https://github.com/evoluhq/evolu/issues"
+  },
+  "homepage": "https://evolu.dev",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [],
+  "svelte": "./dist/index.svelte.js",
+  "types": "./dist/index.svelte.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.svelte.d.ts",
+      "svelte": "./dist/index.svelte.js"
+    }
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.11",
+    "@tsconfig/svelte": "^5.0.4",
+    "svelte": "^5.33.17",
+    "svelte-check": "^4.2.1",
+    "typescript": "^5.8.3",
+    "@evolu/common": "6.0.0-preview.0",
+    "@evolu/tsconfig": "0.0.2",
+    "@evolu/web": "1.0.0-preview.0"
+  },
+  "peerDependencies": {
+    "@evolu/common": "^6.0.0-preview.0",
+    "@evolu/web": "^1.0.0-preview.0",
+    "svelte": "^5.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "shx rm -rf dist && tsc && pnpm run package",
+    "preview": "vite preview",
+    "package": "svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "clean": "shx rm -rf .turbo .svelte-kit node_modules dist"
+  }
+}