denwa-web-shared 1.0.52 → 1.0.54
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/package.json
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "denwa-web-shared",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.54",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Denwa",
|
|
7
7
|
"main": "dist/denwa-web-shared.cjs.js",
|
|
8
8
|
"module": "dist/denwa-web-shared.es.js",
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "https://github.com/Denwa799/web-shared.git"
|
|
12
|
+
},
|
|
9
13
|
"files": [
|
|
10
14
|
"dist",
|
|
11
15
|
"skills",
|
|
@@ -5,9 +5,9 @@ description: >
|
|
|
5
5
|
Load when implementing infinite scroll, lazy loading, or pagination lists.
|
|
6
6
|
type: core
|
|
7
7
|
library: denwa-web-shared
|
|
8
|
-
library_version:
|
|
8
|
+
library_version: '1.0.54'
|
|
9
9
|
sources:
|
|
10
|
-
-
|
|
10
|
+
- 'src/client/ui/infinity-list.tsx'
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
# denwa-web-shared — Implement infinite lists
|
|
@@ -17,13 +17,15 @@ sources:
|
|
|
17
17
|
```tsx
|
|
18
18
|
import { InfinityList } from 'denwa-web-shared/client';
|
|
19
19
|
|
|
20
|
-
<InfinityList
|
|
21
|
-
isNext={hasNextPage}
|
|
22
|
-
onIntersection={fetchNextPage}
|
|
20
|
+
<InfinityList
|
|
21
|
+
isNext={hasNextPage}
|
|
22
|
+
onIntersection={fetchNextPage}
|
|
23
23
|
intersectionElement={() => <div>Loading...</div>}
|
|
24
24
|
>
|
|
25
|
-
{items.map(item =>
|
|
26
|
-
|
|
25
|
+
{items.map((item) => (
|
|
26
|
+
<Item key={item.id} {...item} />
|
|
27
|
+
))}
|
|
28
|
+
</InfinityList>;
|
|
27
29
|
```
|
|
28
30
|
|
|
29
31
|
## Core Patterns
|
|
@@ -42,7 +44,7 @@ export const Feed = ({ items, hasNext, loadMore }) => {
|
|
|
42
44
|
intersectionElement={() => <Spinner />}
|
|
43
45
|
intersectionElementClassName="py-4"
|
|
44
46
|
>
|
|
45
|
-
{items.map(item => (
|
|
47
|
+
{items.map((item) => (
|
|
46
48
|
<FeedItem key={item.id} data={item} />
|
|
47
49
|
))}
|
|
48
50
|
</InfinityList>
|
|
@@ -65,9 +67,13 @@ Correct:
|
|
|
65
67
|
```tsx
|
|
66
68
|
import { InfinityList } from 'denwa-web-shared/client';
|
|
67
69
|
|
|
68
|
-
<InfinityList
|
|
70
|
+
<InfinityList
|
|
71
|
+
isNext={hasNextPage}
|
|
72
|
+
onIntersection={fetchNextPage}
|
|
73
|
+
intersectionElement={() => <Spinner />}
|
|
74
|
+
>
|
|
69
75
|
{items}
|
|
70
|
-
</InfinityList
|
|
76
|
+
</InfinityList>;
|
|
71
77
|
```
|
|
72
78
|
|
|
73
79
|
Agents might manually write intersection observers instead of using InfinityList.
|
|
@@ -5,10 +5,10 @@ description: >
|
|
|
5
5
|
Load when generating images, using getImageData, IPreparedServerImage, or IPreparedServerImageWithAlt.
|
|
6
6
|
type: core
|
|
7
7
|
library: denwa-web-shared
|
|
8
|
-
library_version:
|
|
8
|
+
library_version: '1.0.54'
|
|
9
9
|
sources:
|
|
10
|
-
-
|
|
11
|
-
-
|
|
10
|
+
- 'src/server/ui/image.tsx'
|
|
11
|
+
- 'src/server/lib/utils.ts'
|
|
12
12
|
---
|
|
13
13
|
|
|
14
14
|
# denwa-web-shared — Render responsive images
|
|
@@ -22,7 +22,7 @@ import { getImageData } from 'denwa-web-shared/server';
|
|
|
22
22
|
// Assuming serverImage is of type IPreparedServerImage
|
|
23
23
|
const pictureData = getImageData(serverImage);
|
|
24
24
|
|
|
25
|
-
<BasePicture data={pictureData} alt="alt text" type={serverImage.type}
|
|
25
|
+
<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## Core Patterns
|
|
@@ -35,7 +35,7 @@ import type { IPreparedServerImage } from 'denwa-web-shared/server';
|
|
|
35
35
|
|
|
36
36
|
export const MyComponent = ({ image }: { image: IPreparedServerImage }) => {
|
|
37
37
|
const data = getImageData(image);
|
|
38
|
-
|
|
38
|
+
|
|
39
39
|
return <BasePicture data={data} alt="Responsive image" type={image.type} />;
|
|
40
40
|
};
|
|
41
41
|
```
|
|
@@ -49,7 +49,7 @@ Wrong:
|
|
|
49
49
|
```tsx
|
|
50
50
|
import Image from 'next/image';
|
|
51
51
|
|
|
52
|
-
<Image src={src} alt={alt}
|
|
52
|
+
<Image src={src} alt={alt} />;
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
Correct:
|
|
@@ -58,7 +58,7 @@ Correct:
|
|
|
58
58
|
import { BasePicture, getImageData } from 'denwa-web-shared/server';
|
|
59
59
|
|
|
60
60
|
const pictureData = getImageData(serverImage);
|
|
61
|
-
<BasePicture data={pictureData} alt="alt text" type={serverImage.type}
|
|
61
|
+
<BasePicture data={pictureData} alt="alt text" type={serverImage.type} />;
|
|
62
62
|
```
|
|
63
63
|
|
|
64
64
|
Agents default to next/image instead of using the custom BasePicture component.
|
|
@@ -72,7 +72,7 @@ Wrong:
|
|
|
72
72
|
```tsx
|
|
73
73
|
import { BasePicture } from 'denwa-web-shared/server';
|
|
74
74
|
|
|
75
|
-
<BasePicture data={{ image1x: item.path }} alt="alt text" type="image/jpeg"
|
|
75
|
+
<BasePicture data={{ image1x: item.path }} alt="alt text" type="image/jpeg" />;
|
|
76
76
|
```
|
|
77
77
|
|
|
78
78
|
Correct:
|
|
@@ -81,7 +81,7 @@ Correct:
|
|
|
81
81
|
import { BasePicture, getImageData } from 'denwa-web-shared/server';
|
|
82
82
|
|
|
83
83
|
const pictureData = getImageData(item);
|
|
84
|
-
<BasePicture data={pictureData} alt="alt text" type={item.type}
|
|
84
|
+
<BasePicture data={pictureData} alt="alt text" type={item.type} />;
|
|
85
85
|
```
|
|
86
86
|
|
|
87
87
|
Agents try to construct paths manually instead of using the getImageData helper to generate PictureData.
|
|
@@ -5,9 +5,9 @@ description: >
|
|
|
5
5
|
Load when hardcoding time durations, milliseconds, breakpoints, or offsets.
|
|
6
6
|
type: core
|
|
7
7
|
library: denwa-web-shared
|
|
8
|
-
library_version:
|
|
8
|
+
library_version: '1.0.54'
|
|
9
9
|
sources:
|
|
10
|
-
-
|
|
10
|
+
- 'src/server/constants/index.ts'
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
# denwa-web-shared — Use library constants
|
|
@@ -31,7 +31,7 @@ import { TIME } from 'denwa-web-shared/server';
|
|
|
31
31
|
export const fetchWithTimeout = async (url: string) => {
|
|
32
32
|
const controller = new AbortController();
|
|
33
33
|
setTimeout(() => controller.abort(), TIME.milliseconds.seconds5);
|
|
34
|
-
|
|
34
|
+
|
|
35
35
|
return fetch(url, { signal: controller.signal });
|
|
36
36
|
};
|
|
37
37
|
```
|
|
@@ -5,9 +5,9 @@ description: >
|
|
|
5
5
|
Load when writing responsive behavior, using useMedia, useLaptopBigViewPort, useMobileViewPort.
|
|
6
6
|
type: core
|
|
7
7
|
library: denwa-web-shared
|
|
8
|
-
library_version:
|
|
8
|
+
library_version: '1.0.54'
|
|
9
9
|
sources:
|
|
10
|
-
-
|
|
10
|
+
- 'src/client/hooks/use-view-port.ts'
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
# denwa-web-shared — Use custom viewport hooks
|
|
@@ -33,7 +33,7 @@ export const ResponsiveLayout = () => {
|
|
|
33
33
|
|
|
34
34
|
if (isMobileMaxWidth) return <MobileMenu />;
|
|
35
35
|
if (isLaptopMinWidth) return <DesktopMenu />;
|
|
36
|
-
|
|
36
|
+
|
|
37
37
|
return <DefaultMenu />;
|
|
38
38
|
};
|
|
39
39
|
```
|
|
@@ -5,9 +5,9 @@ description: >
|
|
|
5
5
|
Load when creating RSS feeds or Yandex XML exports.
|
|
6
6
|
type: core
|
|
7
7
|
library: denwa-web-shared
|
|
8
|
-
library_version:
|
|
8
|
+
library_version: '1.0.54'
|
|
9
9
|
sources:
|
|
10
|
-
-
|
|
10
|
+
- 'src/server/lib/utils.ts'
|
|
11
11
|
---
|
|
12
12
|
|
|
13
13
|
# denwa-web-shared — Generate Yandex Feed XML
|
|
@@ -32,9 +32,9 @@ import { generateYandexFeedXML } from 'denwa-web-shared/server';
|
|
|
32
32
|
export async function GET() {
|
|
33
33
|
const data = await getFeedData();
|
|
34
34
|
const xml = generateYandexFeedXML(data);
|
|
35
|
-
|
|
35
|
+
|
|
36
36
|
return new Response(xml, {
|
|
37
|
-
headers: { 'Content-Type': 'application/xml' }
|
|
37
|
+
headers: { 'Content-Type': 'application/xml' },
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
```
|