8000 refactor(nanostores-qs): better type def (#8) · vp-tw/nanostores-qs@610c011 · GitHub
[go: up one dir, main page]
Skip to content

Commit 610c011

Browse files
VdustRVdustR
authored
refactor(nanostores-qs): better type def (#8)
1 parent c2f4b9a commit 610c011

File tree

3 files changed

+379
-226
lines changed

3 files changed

+379
-226
lines changed

‎README.md‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const strStore = qsUtils.createSearchParamStore("str");
5252
// In React component
5353
function Str() {
5454
const str = useStore(strStore.$value);
55-
// ^? string
55+
// ^? string | undefined
5656

5757
return (
5858
<input
@@ -65,11 +65,12 @@ function Str() {
6565
}
6666

6767
// Number parameter with custom encoding/decoding
68-
const numStore = qsUtils.createSearchParamStore("num", {
69-
decode: (v) => (!v ? "" : Number(v)),
70-
encode: String,
71-
defaultValue: "",
72-
});
68+
const numStore = qsUtils.createSearchParamStore("num", (def) =>
69+
def({
70+
decode: (v) => (!v ? "" : Number(v)),
71+
defaultValue: "",
72+
}),
73+
);
7374

7475
function N 8000 um() {
7576
const num = useStore(numStore.$value);
@@ -122,18 +123,16 @@ By default, it uses `es-toolkit`'s `isEqual` function.
122123
### Multiple Parameters
123124

124125
```tsx
125-
const filtersStore = qsUtils.createSearchParamsStore((defineSearchParam) => ({
126-
search: defineSearchParam({ defaultValue: "" }),
127-
category: defineSearchParam({ isArray: true }),
128-
minPrice: defineSearchParam({
126+
const filtersStore = qsUtils.createSearchParamsStore((def) => ({
127+
search: def({ defaultValue: "" }),
128+
category: def({ isArray: true }),
129+
minPrice: def({
129130
decode: Number,
130-
encode: String,
131-
}),
132-
maxPrice: defineSearchParam({
131+
}).setEncode(String),
132+
maxPrice: def({
133133
decode: Number,
134-
encode: String,
135-
}),
136-
sortBy: defineSearchParam({
134+
}).setEncode(String),
135+
sortBy: def({
137136
defaultValue: "newest",
138137
}),
139138
}));

‎packages/demo/src/App.tsx‎

Lines changed: 38 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,23 @@ const tabStore = urlSearchParamsUtils.createSearchParamStore("tab", {
3939
defaultValue: TabSchema.options[0],
4040
});
4141

42-
const replaceStore = urlSearchParamsUtils.createSearchParamStore("replace", {
43-
decode: (v) => v !== "false",
44-
encode: (v) => (v ? undefined : "false"),
45-
defaultValue: true,
46-
});
42+
const replaceStore = urlSearchParamsUtils.createSearchParamStore(
43+
"replace",
44+
(def) =>
45+
def({
46+
decode: (v) => v !== "false",
47+
defaultValue: true,
48+
}).setEncode((v) => (v ? undefined : "false")),
49+
);
4750

48-
const keepHashStore = urlSearchParamsUtils.createSearchParamStore("keepHash", {
49-
decode: (v) => v === "true",
50-
encode: (v) => (v ? "true" : undefined),
51-
defaultValue: false,
52-
});
51+
const keepHashStore = urlSearchParamsUtils.createSearchParamStore(
52+
"keepHash",
53+
(def) =>
54+
def({
55+
decode: (v) => v === "true",
56+
defaultValue: false,
57+
}).setEncode((v) => (v ? "true" : undefined)),
58+
);
5359

5460
const qsUtils = createQsUtils({
5561
qs: {
@@ -58,42 +64,40 @@ const qsUtils = createQsUtils({
5864
},
5965
});
6066

61-
const qsSearchParamsStore = qsUtils.createSearchParamsStore(
62-
(defineSearchParam) => ({
63-
qsSearch: defineSearchParam({}),
64-
qsPage: defineSearchParam({
65-
decode: IntegerParamSchema.parse,
66-
encode: String,
67-
}),
68-
qsEnumArray: defineSearchParam({
69-
isArray: true,
70-
decode: z
71-
.array(MultipleOptionsSchema.or(z.undefined().catch(undefined)))
72-
.transform((arr) => arr.flatMap((v) => (v === undefined ? [] : [v])))
73-
.parse,
74-
}),
75-
qsDate: defineSearchParam({
76-
decode: z.string().transform(datetimeLocalToDate).parse,
77-
encode: z.date().transform(dateToDatetimeLocal).parse,
78-
}),
67+
const qsSearchParamsStore = qsUtils.createSearchParamsStore((def) => ({
68+
qsSearch: undefined,
69+
qsPage: def({
70+
decode: IntegerParamSchema.parse,
71+
encode: String,
7972
}),
80-
);
73+
qsEnumArray: def({
74+
isArray: true,
75+
decode: z
76+
.array(MultipleOptionsSchema.or(z.undefined().catch(undefined)))
77+
.transform((arr) => arr.flatMap((v) => (v === undefined ? [] : [v])))
78+
.parse,
79+
}),
80+
qsDate: def({
81+
decode: z.string().transform(datetimeLocalToDate).parse,
82+
encode: z.date().transform(dateToDatetimeLocal).parse,
83+
}),
84+
}));
8185

8286
const urlSearchParamsStore = urlSearchParamsUtils.createSearchParamsStore(
83-
(defineSearchParam) => ({
84-
urlSearch: defineSearchParam({}),
85-
urlPage: defineSearchParam({
87+
(def) => ({
88+
urlSearch: undefined,
89+
urlPage: def({
8690
decode: IntegerParamSchema.parse,
8791
encode: String,
8892
}),
89-
urlEnumArray: defineSearchParam({
93+
urlEnumArray: def({
9094
isArray: true,
9195
decode: z
9296
.array(MultipleOptionsSchema.or(z.undefined().catch(undefined)))
9397
.transform((arr) => arr.flatMap((v) => (v === undefined ? [] : [v])))
9498
.parse,
9599
}),
96-
urlDate: defineSearchParam({
100+
urlDate: def({
97101
decode: z.string().transform(datetimeLocalToDate).parse,
98102
encode: z.date().transform(dateToDatetimeLocal).parse,
99103
}),

0 commit comments

Comments
 (0)
0