@flightdev/data 0.0.6 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -15
- package/package.json +7 -6
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# @
|
|
1
|
+
# @flightdev/data
|
|
2
2
|
|
|
3
3
|
Data fetching primitives for Flight Framework.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install @
|
|
8
|
+
npm install @flightdev/data
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Loaders
|
|
@@ -14,7 +14,7 @@ Loaders run on the server before rendering a page. They fetch data that the page
|
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
16
|
// src/routes/posts/[slug].page.tsx
|
|
17
|
-
import { useLoaderData } from '@
|
|
17
|
+
import { useLoaderData } from '@flightdev/data';
|
|
18
18
|
|
|
19
19
|
export async function loader({ params }: LoaderContext) {
|
|
20
20
|
const post = await db.posts.findUnique({
|
|
@@ -45,7 +45,7 @@ export default function PostPage() {
|
|
|
45
45
|
Actions handle form submissions and mutations. They run on the server when a form is submitted.
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
import { redirect, Form } from '@
|
|
48
|
+
import { redirect, Form } from '@flightdev/data';
|
|
49
49
|
|
|
50
50
|
export async function action({ request }: ActionContext) {
|
|
51
51
|
const formData = await request.formData();
|
|
@@ -76,7 +76,7 @@ export default function NewPostPage() {
|
|
|
76
76
|
For data fetching without navigation:
|
|
77
77
|
|
|
78
78
|
```tsx
|
|
79
|
-
import { useFetcher } from '@
|
|
79
|
+
import { useFetcher } from '@flightdev/data';
|
|
80
80
|
|
|
81
81
|
function SearchBox() {
|
|
82
82
|
const fetcher = useFetcher<SearchResult[]>();
|
|
@@ -101,7 +101,7 @@ function SearchBox() {
|
|
|
101
101
|
## Response Utilities
|
|
102
102
|
|
|
103
103
|
```ts
|
|
104
|
-
import { redirect, json, notFound, badRequest } from '@
|
|
104
|
+
import { redirect, json, notFound, badRequest } from '@flightdev/data';
|
|
105
105
|
|
|
106
106
|
// Redirect
|
|
107
107
|
return redirect('/dashboard');
|
|
@@ -121,7 +121,7 @@ return badRequest({ error: 'Invalid input' });
|
|
|
121
121
|
The `SerializeFrom` utility type extracts the return type of a loader:
|
|
122
122
|
|
|
123
123
|
```tsx
|
|
124
|
-
import type { SerializeFrom } from '@
|
|
124
|
+
import type { SerializeFrom } from '@flightdev/data';
|
|
125
125
|
|
|
126
126
|
export async function loader() {
|
|
127
127
|
return { posts: await getPosts() };
|
|
@@ -137,7 +137,7 @@ Loader data is automatically hydrated from SSR to client:
|
|
|
137
137
|
|
|
138
138
|
```tsx
|
|
139
139
|
// entry-server.tsx
|
|
140
|
-
import { hydrateLoaderData } from '@
|
|
140
|
+
import { hydrateLoaderData } from '@flightdev/data';
|
|
141
141
|
|
|
142
142
|
const html = `
|
|
143
143
|
<html>
|
|
@@ -161,7 +161,7 @@ Simple, cached data fetching:
|
|
|
161
161
|
|
|
162
162
|
```tsx
|
|
163
163
|
// React
|
|
164
|
-
import { useFetch } from '@
|
|
164
|
+
import { useFetch } from '@flightdev/data/react';
|
|
165
165
|
|
|
166
166
|
function Users() {
|
|
167
167
|
const { data, pending, error, refresh } = useFetch<User[]>('/api/users');
|
|
@@ -184,16 +184,16 @@ Import from the adapter for your framework:
|
|
|
184
184
|
|
|
185
185
|
```typescript
|
|
186
186
|
// React
|
|
187
|
-
import { useFetch, useAsyncData } from '@
|
|
187
|
+
import { useFetch, useAsyncData } from '@flightdev/data/react';
|
|
188
188
|
|
|
189
189
|
// Vue
|
|
190
|
-
import { useFetch, useAsyncData } from '@
|
|
190
|
+
import { useFetch, useAsyncData } from '@flightdev/data/vue';
|
|
191
191
|
|
|
192
192
|
// Svelte
|
|
193
|
-
import { useFetch, useAsyncData } from '@
|
|
193
|
+
import { useFetch, useAsyncData } from '@flightdev/data/svelte';
|
|
194
194
|
|
|
195
195
|
// Solid
|
|
196
|
-
import { useFetch, useAsyncData } from '@
|
|
196
|
+
import { useFetch, useAsyncData } from '@flightdev/data/solid';
|
|
197
197
|
```
|
|
198
198
|
|
|
199
199
|
### useAsyncData
|
|
@@ -201,7 +201,7 @@ import { useFetch, useAsyncData } from '@flight-framework/data/solid';
|
|
|
201
201
|
For custom fetching logic:
|
|
202
202
|
|
|
203
203
|
```tsx
|
|
204
|
-
import { useAsyncData } from '@
|
|
204
|
+
import { useAsyncData } from '@flightdev/data/react';
|
|
205
205
|
|
|
206
206
|
function Analytics() {
|
|
207
207
|
const { data, pending, execute } = useAsyncData(
|
|
@@ -235,7 +235,7 @@ useFetch('/api/data', {
|
|
|
235
235
|
### Cache Utilities
|
|
236
236
|
|
|
237
237
|
```typescript
|
|
238
|
-
import { invalidate, prefetch, clearCache } from '@
|
|
238
|
+
import { invalidate, prefetch, clearCache } from '@flightdev/data';
|
|
239
239
|
|
|
240
240
|
// Invalidate specific key
|
|
241
241
|
invalidate('/api/users');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flightdev/data",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "Data fetching primitives for Flight Framework - loaders, actions, forms, useFetch, and useAsyncData",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -48,11 +48,6 @@
|
|
|
48
48
|
],
|
|
49
49
|
"author": "Flight Framework",
|
|
50
50
|
"license": "MIT",
|
|
51
|
-
"repository": {
|
|
52
|
-
"type": "git",
|
|
53
|
-
"url": "https://github.com/EliosLT/Flight-framework",
|
|
54
|
-
"directory": "packages/data"
|
|
55
|
-
},
|
|
56
51
|
"devDependencies": {
|
|
57
52
|
"tsup": "^8.0.0",
|
|
58
53
|
"typescript": "^5.3.0"
|
|
@@ -77,6 +72,12 @@
|
|
|
77
72
|
"optional": true
|
|
78
73
|
}
|
|
79
74
|
},
|
|
75
|
+
"homepage": "https://github.com/EliosLT/FlightDev",
|
|
76
|
+
"repository": {
|
|
77
|
+
"url": "https://github.com/EliosLT/FlightDev.git",
|
|
78
|
+
"directory": "packages/data",
|
|
79
|
+
"type": "git"
|
|
80
|
+
},
|
|
80
81
|
"scripts": {
|
|
81
82
|
"build": "tsup src/index.ts src/react.ts src/vue.ts src/svelte.ts src/solid.ts --format esm --dts --clean",
|
|
82
83
|
"dev": "tsup src/index.ts src/react.ts src/vue.ts src/svelte.ts src/solid.ts --format esm --dts --watch"
|