Merge remote-tracking branch 'upstream/main' into feat/useStickToBottom

Author: epavanello

packages/runed/CHANGELOG.md

@@ -1,5 +1,12 @@
 # runed
 
+## 0.24.0
+
+### Minor Changes
+
+- feat: add `resource` that watches dependencies and runs async data fetching
+  ([#218](https://github.com/svecosystem/runed/pull/218))
+
 ## 0.23.4
 
 ### Patch Changes

packages/runed/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "runed",
-	"version": "0.23.4",
+	"version": "0.24.0",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -59,6 +59,7 @@
 		"@vitest/coverage-v8": "^1.5.1",
 		"@vitest/ui": "^1.6.0",
 		"jsdom": "^24.0.0",
+		"msw": "^2.7.0",
 		"publint": "^0.1.9",
 		"resize-observer-polyfill": "^1.5.1",
 		"svelte": "^5.11.0",

packages/runed/src/lib/utilities/index.ts

@@ -21,4 +21,5 @@ export * from "./persisted-state/index.js";
 export * from "./use-geolocation/index.js";
 export * from "./context/index.js";
 export * from "./is-in-viewport/index.js";
+export * from "./resource/index.js";
 export * from "./use-stick-to-bottom/index.js";

packages/runed/src/lib/utilities/resource/index.ts

@@ -0,0 +1 @@
+export * from "./resource.svelte.js";

packages/runed/src/lib/utilities/resource/msw-handlers.ts

@@ -0,0 +1,46 @@
+import { http, delay, HttpResponse } from "msw";
+
+export type ResponseData = {
+	id: number;
+	name: string;
+	email: string;
+};
+
+export type SearchResponseData = {
+	results: { id: number; title: string }[];
+	page: number;
+	total: number;
+};
+
+export const handlers = [
+	// Basic user endpoint
+	http.get("https://api.example.com/users/:id", async ({ params }) => {
+		await delay(50);
+		return HttpResponse.json({
+			id: Number(params.id),
+			name: `User ${params.id}`,
+			email: `user${params.id}@example.com`,
+		});
+	}),
+
+	// Search endpoint with query params
+	http.get("https://api.example.com/search", ({ request }) => {
+		const url = new URL(request.url);
+		const query = url.searchParams.get("q");
+		const page = Number(url.searchParams.get("page")) || 1;
+
+		return HttpResponse.json({
+			results: [
+				{ id: page * 1, title: `Result 1 for ${query}` },
+				{ id: page * 2, title: `Result 2 for ${query}` },
+			],
+			page,
+			total: 10,
+		});
+	}),
+
+	// Endpoint that can fail
+	http.get("https://api.example.com/error-prone", () => {
+		return new HttpResponse(null, { status: 500 });
+	}),
+];