Skip to content

Commit 072aec4

Browse files
committed
Add serializer documentation for polyfill
1 parent fc40c3b commit 072aec4

File tree

2 files changed

+35
-2
lines changed

2 files changed

+35
-2
lines changed

README.md

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ await navigation.navigate("/").finished;
201201
<details><summary>Polyfill Global Window Types</summary>
202202

203203
See [`@types/dom-navigation`](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/dom-navigation/package.json) for a standardised type definition for the Navigation API
204-
which can be utilised alongside this polyfill.
204+
which can be utilised alongside this polyfill.
205205

206206
```bash
207207
yarn add --dev @types/dom-navigation
@@ -219,4 +219,32 @@ This should then be included as a type in your `tsconfig.json`:
219219
}
220220
```
221221

222-
</details>
222+
</details>
223+
224+
<details><summary>Polyfill Serializer</summary>
225+
226+
You may want to set a custom serializer state stored in history
227+
228+
The default serializer is [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
229+
230+
In the past, a [structured clone like serializer](https://www.npmjs.com/package/@ungap/structured-clone) was used. This may be useful for you if
231+
you're using native types rather than just JSON compatible values.
232+
233+
An example of making use of a custom serializer with the polyfill:
234+
235+
```typescript
236+
import { setSerializer } from "@virtualstate/navigation/polyfill";
237+
import { serialize, deserialize } from '@ungap/structured-clone';
238+
239+
setSerializer({
240+
stringify(value) {
241+
return serialize(value)
242+
},
243+
parse(value) {
244+
return deserialize(value)
245+
}
246+
});
247+
```
248+
249+
</details>
250+

src/polyfill.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getNavigation } from "./get-navigation";
22
import { applyPolyfill, shouldApplyPolyfill } from "./apply-polyfill";
3+
import { setSerializer } from "./util/serialization";
34

45
const navigation = getNavigation();
56

@@ -12,4 +13,8 @@ if (shouldApplyPolyfill(navigation)) {
1213
console.error("Failed to apply polyfill");
1314
console.error(error);
1415
}
16+
}
17+
18+
export {
19+
setSerializer
1520
}

0 commit comments

Comments
 (0)