### Install seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md
Installation commands for various package managers.
```bash
npm install --save seroval
```
```bash
yarn add seroval
```
```bash
pnpm add seroval
```
--------------------------------
### Install seroval-plugins with npm
Source: https://github.com/lxsmnsyc/seroval/blob/main/packages/plugins/README.md
Install the seroval-plugins package using npm. This command adds the package as a dependency to your project.
```bash
npm install --save seroval-plugins
```
--------------------------------
### Serialized Output Example
Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md
The resulting string output from the serialization process, shown in both minified and readable formats.
```js
((h,j,k,m,o)=>(o={number:[0.5337763749243287,-0,0/0,1/0,-1/0],string:["hello world","\x3Cscript>Hello World\x3C/script>"],boolean:[!0,!1],null:null,undefined:void 0,bigint:9007199254740991n,array:h=[,,,,k=(j=[],new Map([["hello","world"],["mutual",m=new Set(["hello","world"])]]))],regexp:/[a-z0-9]+/i,date:new Date("2023-12-07T17:28:57.909Z"),map:k,set:m},h[3]=h,k.set("self",k),m.add(m).add(h),o.self=o,o))()
// Formatted for readability
((h, j, k, m, o) => (
(o = {
number: [0.5337763749243287, -0, 0 / 0, 1 / 0, -1 / 0],
string: ["hello world", "\x3Cscript>Hello World\x3C/script>"],
boolean: [!0, !1],
null: null,
undefined: void 0,
bigint: 9007199254740991n,
array: (h = [
,
,
,
,
(k =
((j = []),
new Map([
["hello", "world"],
["mutual", (m = new Set(["hello", "world"])),
]))),
]),
regexp: /[a-z0-9]+/i,
date: new Date("2023-12-07T17:28:57.909Z"),
map: k,
set: m,
}),
(h[3] = h),
k.set("self", k),
m.add(m).add(h),
(o.self = o),
o
))();
```
--------------------------------
### Install seroval-plugins with pnpm
Source: https://github.com/lxsmnsyc/seroval/blob/main/packages/plugins/README.md
Install the seroval-plugins package using pnpm. This command adds the package as a dependency to your project.
```bash
pnpm add seroval-plugins
```
--------------------------------
### Install seroval-plugins with yarn
Source: https://github.com/lxsmnsyc/seroval/blob/main/packages/plugins/README.md
Install the seroval-plugins package using yarn. This command adds the package as a dependency to your project.
```bash
yarn add seroval-plugins
```
--------------------------------
### Combine Feature Flags with Bitwise OR
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/compatibility.md
Illustrates how to combine multiple feature flags using the bitwise OR operator (`|`) to disable several features simultaneously. This example disables ES2021 and ES2020 features.
```javascript
import { serialize, Feature } from 'seroval';
const ES2017FLAG =
Feature.AggregateError // ES2021
| Feature.BigIntTypedArray // ES2020;
serialize(myValue, {
disabledFeatures: ES2017FLAG,
})
```
--------------------------------
### Initialize Bar Chart for Benchmark Results
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-invalid-keys-collection to string.chart.html
Sets up and renders a bar chart using the Chart.js library to visualize benchmark results. It configures tooltips to display formatted operations per second.
```javascript
const ctx1762139990362 = document.getElementById('chart1762139990362').getContext('2d')
const chart1762139990362 = new Chart(ctx1762139990362, {
type: 'bar',
data: {
labels: ["devalue","flatted","JSON","next-json","o-son","serialize-javascript","seroval","superjson","tosource","turbo-stream","warp10"],
datasets: [
{
data: [421,717,3281,615,1163,1571,763,431,720,497,2046],
backgroundColor: ["hsl(15.395999999999997, 85%, 55%)","hsl(26.21999999999999, 85%, 55%)","hsl(120, 85%, 55%)","hsl(22.487999999999996, 85%, 55%)","hsl(42.540000000000006, 85%, 55%)","hsl(57.456, 85%, 55%)","hsl(27.912000000000006, 85%, 55%)","hsl(15.768000000000002, 85%, 55%)","hsl(26.328, 85%, 55%)","hsl(18.180000000000007, 85%, 55%)","hsl(74.83200000000001, 85%, 55%)"],
borderColor: ["hsl(15.395999999999997, 85%, 55%)","hsl(26.21999999999999, 85%, 55%)","hsl(120, 85%, 55%)","hsl(22.487999999999996, 85%, 55%)","hsl(42.540000000000006, 85%, 55%)","hsl(57.456, 85%, 55%)","hsl(27.912000000000006, 85%, 55%)","hsl(15.768000000000002, 85%, 55%)","hsl(26.328, 85%, 55%)","hsl(18.180000000000007, 85%, 55%)","hsl(74.83200000000001, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'large-invalid-keys-collection to string',
font: { size: 20 },
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Object Creation Variants
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/compatibility.md
Shows two different ways to create and initialize an object, one using `Object.create` and another using `Object.assign`.
```javascript
(function(h){return (h=(h=Object.create(null),h.example="Hello World",h),h.self=h,h)})()
```
```javascript
(h=>(h=Object.assign(Object.create(null),{example:"Hello World"}),h.self=h,h))()
```
--------------------------------
### Render Large Simple Collection to String Benchmark Chart
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-simple-collection to string.chart.html
Initializes a bar chart using Chart.js to visualize benchmark results. Configures tooltips to use the custom format function and sets chart titles and axis labels.
```javascript
const ctx1762140049473 = document.getElementById('chart1762140049473').getContext('2d')
const chart1762140049473 = new Chart(ctx1762140049473, {
type: 'bar',
data: {
labels: ["devalue","flatted","JSON","next-json","o-son","serialize-javascript","seroval","superjson","tosource","turbo-stream","warp10"],
datasets: [
{
data: [719,645,3022,557,1094,1605,850,389,841,496,2125],
backgroundColor: ["hsl(28.548000000000005, 85%, 55%)","hsl(25.608000000000004, 85%, 55%)","hsl(120, 85%, 55%)","hsl(22.11600000000001, 85%, 55%)","hsl(43.440000000000005, 85%, 55%)","hsl(63.732, 85%, 55%)","hsl(33.75599999999999, 85%, 55%)","hsl(15.444000000000004, 85%, 55%)","hsl(33.396, 85%, 55%)","hsl(19.691999999999997, 85%, 55%)","hsl(84.38399999999999, 85%, 55%)"],
borderColor: ["hsl(28.548000000000005, 85%, 55%)","hsl(25.608000000000004, 85%, 55%)","hsl(120, 85%, 55%)","hsl(22.11600000000001, 85%, 55%)","hsl(43.440000000000005, 85%, 55%)","hsl(63.732, 85%, 55%)","hsl(33.75599999999999, 85%, 55%)","hsl(15.444000000000004, 85%, 55%)","hsl(33.396, 85%, 55%)","hsl(19.691999999999997, 85%, 55%)","hsl(84.38399999999999, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'large-simple-collection to string',
font: {
size: 20
},
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Chart Configuration for Object to String Benchmark
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/simple-object to string.chart.html
Configures a bar chart to display benchmark results for object-to-string serialization methods. The tooltip is customized to show formatted operations per second.
```javascript
const ctx1762140093773 = document
.getElementById('chart1762140093773')
.getContext('2d')
const chart1762140093773 = new Chart(ctx1762140093773, {
type: 'bar',
data: {
labels: ["devalue","flatted","next-json","o-son","seroval","superjson","turbo-stream","warp10"],
datasets: [
{
data: [1632403,2661621,1595226,3160003,2469273,1346877,81766,141995],
backgroundColor: ["hsl(61.99199999999999, 85%, 55%)","hsl(101.07600000000001, 85%, 55%)","hsl(60.57599999999999, 85%, 55%)","hsl(120, 85%, 55%)","hsl(93.768, 85%, 55%)","hsl(51.144, 85%, 55%)","hsl(3.108000000000004, 85%, 55%)","hsl(5.387999999999994, 85%, 55%)"],
borderColor: ["hsl(61.99199999999999, 85%, 55%)","hsl(101.07600000000001, 85%, 55%)","hsl(60.57599999999999, 85%, 55%)","hsl(120, 85%, 55%)","hsl(93.768, 85%, 55%)","hsl(51.144, 85%, 55%)","hsl(3.108000000000004, 85%, 55%)","hsl(5.387999999999994, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'simple-object to string',
font: { size: 20 },
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Create and use a stream with Seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Use `createStream` to buffer and emit streaming data. Listen for `next`, `throw`, and `return` events. This primitive is serializable for async operations.
```javascript
import { createStream } from 'seroval';
const stream = createStream();
// Push early
stream.next('foo');
stream.next('bar');
// Add a listener
stream.on({
next(data) {
console.log('NEXT', data);
},
throw(data) {
console.log('THROW', data);
},
return(data) {
console.log('RETURN', data);
},
});
// Immediately logs `NEXT foo` and `NEXT bar`
stream.return('baz'); // RETURN baz
```
--------------------------------
### Render Small Collection to String Benchmark Chart
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/small-collection to string.chart.html
This JavaScript code initializes and renders a bar chart using the Chart.js library to visualize the 'small-collection to string' benchmark results. It configures chart appearance, tooltips, and scales.
```javascript
const ctx1762140157719 = document
.getElementById('chart1762140157719')
.getContext('2d')
const chart1762140157719 = new Chart(ctx1762140157719, {
type: 'bar',
data: {
labels: ["devalue","flatted","JSON","next-json","o-son","serialize-javascript","seroval","superjson","tosource","turbo-stream","warp10"],
datasets: [
{
data: [180493,167946,1386546,236134,421765,517773,316062,158928,334216,69952,600405],
backgroundColor: ["hsl(15.623999999999995, 85%, 55%)","hsl(14.532, 85%, 55%)","hsl(120, 85%, 55%)","hsl(20.436, 85%, 55%)","hsl(36.504000000000005, 85%, 55%)","hsl(44.808, 85%, 55%)","hsl(27.34800000000001, 85%, 55%)","hsl(13.751999999999992, 85%, 55%)","hsl(28.91999999999999, 85%, 55%)","hsl(6.059999999999996, 85%, 55%)","hsl(51.96, 85%, 55%)"],
borderColor: ["hsl(15.623999999999995, 85%, 55%)","hsl(14.532, 85%, 55%)","hsl(120, 85%, 55%)","hsl(20.436, 85%, 55%)","hsl(36.504000000000005, 85%, 55%)","hsl(44.808, 85%, 55%)","hsl(27.34800000000001, 85%, 55%)","hsl(13.751999999999992, 85%, 55%)","hsl(28.91999999999999, 85%, 55%)","hsl(6.059999999999996, 85%, 55%)","hsl(51.96, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'small-collection to string',
font: { size: 20 },
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Serialize Blob with Seroval plugins
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Extend Seroval's serialization capabilities using plugins, such as the `BlobPlugin` for handling Blob objects. Ensure the plugin is imported and passed in the `plugins` option.
```javascript
import { serializeAsync } from 'seroval';
import { BlobPlugin } from 'seroval-plugins/web';
const example = new Blob(['Hello, World!'], { type: 'text/plain '});
console.log(await serializeAsync(example, {
plugins: [
BlobPlugin,
],
})); // new Blob([new Uint8Array([72,101,108,108,111,44,32,87,111,114,108,100,33]).buffer],{type:"text/plain "})
```
--------------------------------
### Render Circular Simple to String Benchmark Chart
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/circular-simple to string.chart.html
Initializes and renders a bar chart using Chart.js to visualize the performance of different serialization libraries. The chart displays operations per second and uses custom formatting for tooltips.
```javascript
const ctx1762139719450 = document.getElementById('chart1762139719450').getContext('2d')
const chart1762139719450 = new Chart(ctx1762139719450, {
type: 'bar',
data: {
labels: ["devalue","flatted","next-json","o-son","seroval","superjson","turbo-stream","warp10"],
datasets: [
{
data: [563428,973379,564204,1600701,742545,528863,79409,709932],
backgroundColor: ["hsl(42.24, 85%, 55%)","hsl(72.972, 85%, 55%)","hsl(42.3, 85%, 55%)","hsl(120, 85%, 55%)","hsl(55.668, 85%, 55%)","hsl(39.64800000000001, 85%, 55%)","hsl(5.951999999999992, 85%, 55%)","hsl(53.22, 85%, 55%)"],
borderColor: ["hsl(42.24, 85%, 55%)","hsl(72.972, 85%, 55%)","hsl(42.3, 85%, 55%)","hsl(120, 85%, 55%)","hsl(55.668, 85%, 55%)","hsl(39.64800000000001, 85%, 55%)","hsl(5.951999999999992, 85%, 55%)","hsl(53.22, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'circular-simple to string',
font: {
size: 20
},
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Serialize JavaScript Objects
Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md
Demonstrates serializing an object containing various data types and cyclic references.
```js
import { serialize } from 'seroval';
const object = {
number: [Math.random(), -0, NaN, Infinity, -Infinity],
string: ['hello world', ''],
boolean: [true, false],
null: null,
undefined: undefined,
bigint: 9007199254740991n,
array: [,,,], // holes
regexp: /[a-z0-9]+/i,
date: new Date(),
map: new Map([['hello', 'world']]),
set: new Set(['hello', 'world']),
};
// self cyclic references
// recursive objects
object.self = object;
// recursive arrays
object.array.push(object.array);
// recursive maps
object.map.set('self', object.map);
// recursive sets
object.set.add(object.set);
// mutual cyclic references
object.array.push(object.map);
object.map.set('mutual', object.set);
object.set.add(object.array);
const result = serialize(object);
console.log(result);
```
--------------------------------
### Chart Configuration for Large Complex Collection to String Benchmark
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-complex-collection to string.chart.html
Configures a bar chart using Chart.js to visualize the 'large-complex-collection to string' benchmark results. It includes custom tooltip formatting and axis labels.
```javascript
const ctx1762139872378 = document
.getElementById('chart1762139872378')
.getContext('2d')
const chart1762139872378 = new Chart(ctx1762139872378, {
type: 'bar',
data: {
labels: ["devalue","flatted","JSON","next-json","o-son","serialize-javascript","seroval","superjson","tosource","turbo-stream","warp10"],
datasets: [
{
data: [12118,10796,57974,11362,20744,26382,15406,7308,16449,8680,28413],
backgroundColor: ["hsl(25.080000000000005, 85%, 55%)","hsl(22.344000000000005, 85%, 55%)","hsl(120, 85%, 55%)","hsl(23.519999999999996, 85%, 55%)","hsl(42.936, 85%, 55%)","hsl(54.612, 85%, 55%)","hsl(31.883999999999993, 85%, 55%)","hsl(15.131999999999998, 85%, 55%)","hsl(34.04400000000001, 85%, 55%)","hsl(17.964, 85%, 55%)","hsl(58.812, 85%, 55%)"],
borderColor: ["hsl(25.080000000000005, 85%, 55%)","hsl(22.344000000000005, 85%, 55%)","hsl(120, 85%, 55%)","hsl(23.519999999999996, 85%, 55%)","hsl(42.936, 85%, 55%)","hsl(54.612, 85%, 55%)","hsl(31.883999999999993, 85%, 55%)","hsl(15.131999999999998, 85%, 55%)","hsl(34.04400000000001, 85%, 55%)","hsl(17.964, 85%, 55%)","hsl(58.812, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'large-complex-collection to string',
font: {
size: 20
},
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Basic Serialization with Seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Use `serialize` for basic synchronous serialization of JavaScript objects. Ensure the object does not contain asynchronous values or complex reference patterns.
```javascript
import { serialize } from 'seroval';
console.log(serialize({ foo: 'bar' })); // {foo:"bar"}
```
--------------------------------
### Chart Configuration for Dedupe Object to String Benchmark
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/dedupe-object to string.chart.html
Configures a bar chart using the Chart.js library to visualize benchmark results. It sets up data, labels, colors, and tooltip callbacks for displaying 'operations per second'.
```javascript
const ctx1762139767002 = document
.getElementById('chart1762139767002')
.getContext('2d')
const chart1762139767002 = new Chart(ctx1762139767002, {
type: 'bar',
data: {
labels: ["devalue","flatted","next-json","o-son","seroval","superjson","turbo-stream","warp10"],
datasets: [
{
data: [373909,375333,302866,794698,502909,250949,53800,443623],
backgroundColor: ["hsl(56.459999999999994, 85%, 55%)","hsl(56.675999999999995, 85%, 55%)","hsl(45.732, 85%, 55%)","hsl(120, 85%, 55%)","hsl(75.936, 85%, 55%)","hsl(37.895999999999994, 85%, 55%)","hsl(8.123999999999995, 85%, 55%)","hsl(66.98400000000001, 85%, 55%)"],
borderColor: ["hsl(56.459999999999994, 85%, 55%)","hsl(56.675999999999995, 85%, 55%)","hsl(45.732, 85%, 55%)","hsl(120, 85%, 55%)","hsl(75.936, 85%, 55%)","hsl(37.895999999999994, 85%, 55%)","hsl(8.123999999999995, 85%, 55%)","hsl(66.98400000000001, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'dedupe-object to string',
font: {
size: 20
},
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Render Large Circular Collection Benchmark Chart
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-circular-collection to string.chart.html
This JavaScript code initializes and renders a bar chart using the Chart.js library. It visualizes the performance of different libraries for converting large circular collections to strings, with custom tooltip formatting.
```javascript
const ctx1762139812356 = document
.getElementById('chart1762139812356')
.getContext('2d')
const chart1762139812356 = new Chart(ctx1762139812356, {
type: 'bar',
data: {
labels: ["devalue","flatted","next-json","o-son","seroval","superjson","turbo-stream","warp10"],
datasets: [
{
data: [1788,2142,1550,3630,1917,1160,1730,6125],
backgroundColor: ["hsl(35.028, 85%, 55%)","hsl(41.964, 85%, 55%)","hsl(30.372000000000007, 85%, 55%)","hsl(71.124, 85%, 55%)","hsl(37.559999999999995, 85%, 55%)","hsl(22.727999999999998, 85%, 55%)","hsl(33.88799999999999, 85%, 55%)","hsl(120, 85%, 55%)"],
borderColor: ["hsl(35.028, 85%, 55%)","hsl(41.964, 85%, 55%)","hsl(30.372000000000007, 85%, 55%)","hsl(71.124, 85%, 55%)","hsl(37.559999999999995, 85%, 55%)","hsl(22.727999999999998, 85%, 55%)","hsl(33.88799999999999, 85%, 55%)","hsl(120, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'large-circular-collection to string',
font: {
size: 20
},
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Create and Serialize Isomorphic Function Reference
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/isomorphic-refs.md
Use `createReference` to map a unique identifier to a function. This allows the function to be serialized and deserialized across different environments. The reference can only be serialized for objects, functions, and symbols.
```javascript
import { createReference } from 'seroval';
const thisIsAnIsomorphicFunction = createReference(
// This is (ideally) a unique identifier
// that is used to map the serialized value
// to its actual reference (and vice versa)
'my-function',
() => {
// Ideally this function should exist on both
// server and client, but we want to add the ability
// to serialize and deserialize this reference on
// both sides
}
);
// we can now serialize this
const serialized = toJSON(thisIsAnIsomorphicFunction); // or any of the serializer
thisIsAnIsomorphicFunction === fromJSON(serialized); // true
```
--------------------------------
### Serialize a stream asynchronously with Seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Seroval's `createStream` instances can be serialized asynchronously. The output represents the stream's state and behavior for later reconstruction.
```javascript
console.log(await serializeAsync(stream));
// which logs
((h,j)=>((j=((b,a,s,l,p,f,e,n)=>(b=[],a=!0,s=!1,l=[],s=0,f=(v,m,x)=>{for(x=0;x{for(x=0,z=b.length;x(a&&(l[t=p++]=o),n(o),()=>{a&&(l[t]=void 0)}),{__SEROVAL_STREAM__:!0,on:o=>e(o),next:v=>{a&&(b.push(v),f(v,"next"))},throw:v=>{a&&(b.push(v),f(v,"throw"),a=s=!1,l.length=0)},return:v=>{a&&(b.push(v),f(v,"return"),a=!1,s=!0,l.length=0)}}))(),j.next("foo"),j.next("bar"),j.return("baz"),j)))()
```
--------------------------------
### Circular Dedupe to String Benchmark Chart Configuration
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/circular-dedupe to string.chart.html
Configures and renders a bar chart using Chart.js to visualize the 'circular-dedupe to string' benchmark results. It includes custom tooltip formatting and axis labels.
```javascript
const ctx1762139673364 = document
.getElementById('chart1762139673364')
.getContext('2d')
const chart1762139673364 = new Chart(ctx1762139673364, {
type: 'bar',
data: {
labels: ["devalue","flatted","o-son","seroval","turbo-stream","warp10"],
datasets: [
{
data: [196692,234198,409737,259812,54723,505142],
backgroundColor: ["hsl(46.727999999999994, 85%, 55%)","hsl(55.632000000000005, 85%, 55%)","hsl(97.33200000000001, 85%, 55%)","hsl(61.715999999999994, 85%, 55%)","hsl(12.995999999999997, 85%, 55%)","hsl(120, 85%, 55%)"],
borderColor: ["hsl(46.727999999999994, 85%, 55%)","hsl(55.632000000000005, 85%, 55%)","hsl(97.33200000000001, 85%, 55%)","hsl(61.715999999999994, 85%, 55%)","hsl(12.995999999999997, 85%, 55%)","hsl(120, 85%, 55%)"],
borderWidth: 2,
},
],
},
options: {
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'circular-dedupe to string',
font: { size: 20 },
padding: 20,
},
legend: {
display: false,
},
tooltip: {
callbacks: {
label: (context) => {
return format(context.parsed.y) + ' ops/s'
},
},
displayColors: false,
backgroundColor: '#222222',
padding: 10,
cornerRadius: 5,
intersect: false,
},
},
scales: {
x: {
grid: {
color: '#888888',
},
},
y: {
title: {
display: true,
text: 'Operations per second',
padding: 10,
},
grid: {
color: '#888888',
},
},
},
},
})
```
--------------------------------
### Cross-Reference Serialization
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Use `crossSerialize` and `crossSerializeAsync` to share references across multiple scripts. This relies on a global `$R` array, which can be managed manually or via `getCrossReferenceHeader`.
```javascript
import { crossSerialize } from 'seroval';
const nodeA = {};
const nodeB = {};
nodeA.next = nodeB;
nodeB.prev = nodeA;
// keeps track of the shared references
const refs = new Map();
console.log(crossSerialize(nodeA, { refs })); // ($R[0]={next:$R[1]={}},$R[1].prev=$R[0],$R[0])
console.log(crossSerialize(nodeB, { refs })); // $R[1]
```
```javascript
import { getCrossReferenceHeader } from 'seroval';
console.log(getCrossReferenceHeader()) // self.$R=self.$R||[]
```
--------------------------------
### Format Numbers for Chart Tooltips
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/circular-simple to string.chart.html
Formats large numbers into a more readable string with commas as thousands separators, suitable for chart tooltips. It handles both whole numbers and fractions.
```javascript
const format = (num) => {
const [whole, fraction] = String(num).split('.')
const chunked = []
whole
.split('')
.reverse()
.forEach((char, index) => {
if (index % 3 === 0) {
chunked.unshift([char])
} else {
chunked[0].unshift(char)
}
})
const fractionStr = fraction !== undefined ? '.' + fraction : ''
return (
chunked.map((chunk) => chunk.join('')).join(' ')
+ fractionStr
)
}
```
--------------------------------
### Cross-serialize a stream with Seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Use `crossSerializeStream` for streaming serialization, which logs the serialized output. This is useful for environments where direct async serialization might not be suitable.
```javascript
crossSerializeStream(stream, {
onSerialize(data) {
console.log(data);
},
});
// which logs
$R[0]=($R[1]=(b,a,s,l,p,f,e,n)=>(b=[],a=!0,s=!1,l=[],s=0,f=(v,m,x)=>{for(x=0;x{for(x=0,z=b.length;x(a&&(l[t=p++]=o),n(o),()=>{a&&(l[t]=void 0)}),{__SEROVAL_STREAM__:!0,on:o=>e(o),next:v=>{a&&(b.push(v),f(v,"next"))},throw:v=>{a&&(b.push(v),f(v,"throw"),a=s=!1,l.length=0)},return:v=>{a&&(b.push(v),f(v,"return"),a=!1,s=!0,l.length=0)}}))()
$R[0].next("foo")
$R[0].next("bar")
$R[0].return("baz")
```
--------------------------------
### Async Serialization with Seroval
Source: https://github.com/lxsmnsyc/seroval/blob/main/docs/serialization.md
Employ `serializeAsync` to handle asynchronous values like Promises. This function returns a Promise that resolves with the serialized string.
```javascript
import { serializeAsync } from 'seroval';
console.log(await serializeAsync(Promise.resolve({ foo: 'bar'}))); // Promise.resolve({foo:"bar"})
```
--------------------------------
### Format Number for Display
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-invalid-keys-collection to string.chart.html
Formats a number by adding spaces as thousands separators for better readability. It handles both whole and fractional parts of a number.
```javascript
const format = (num) => {
const [whole, fraction] = String(num).split('.')
const chunked = []
whole
.split('')
.reverse()
.forEach((char, index) => {
if (index % 3 === 0) {
chunked.unshift([char])
} else {
chunked[0].unshift(char)
}
})
const fractionStr = fraction !== undefined ? '.' + fraction : ''
return (
chunked.map((chunk) => chunk.join('')).join(' ')
+ fractionStr
)
}
```
--------------------------------
### Chart Configuration for Large Dedupe Collection
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-dedupe-collection to string.chart.html
This JavaScript code configures a bar chart using the Chart.js library to visualize benchmark results. It includes data for various libraries, custom tooltips for formatting values, and axis labels.
```javascript
const format = (num) => { const [whole, fraction] = String(num).split('.') const chunked = [] whole .split('') .reverse() .forEach((char, index) => { if (index % 3 === 0) { chunked.unshift([char]) } else { chunked[0].unshift(char) } }) const fractionStr = fraction !== undefined ? '.' + fraction : '' return ( chunked.map((chunk) => chunk.join('')).join(' ') + fractionStr ) }
```
```javascript
const ctx1762139931377 = document .getElementById('chart1762139931377') .getContext('2d')
```
```javascript
const chart1762139931377 = new Chart(ctx1762139931377, { type: 'bar', data: { labels: ["devalue","flatted","JSON","next-json","o-son","serialize-javascript","seroval","superjson","tosource","turbo-stream","warp10"], datasets: [ { data: [2078,2160,3210,1861,3437,1700,2303,811,850,1583,5397], backgroundColor: ["hsl(46.2, 85%, 55%)","hsl(48.02400000000001, 85%, 55%)","hsl(71.376, 85%, 55%)","hsl(41.376000000000005, 85%, 55%)","hsl(76.416, 85%, 55%)","hsl(37.8, 85%, 55%)","hsl(51.204, 85%, 55%)","hsl(18.036, 85%, 55%)","hsl(18.9, 85%, 55%)","hsl(35.196, 85%, 55%)","hsl(120, 85%, 55%)"], borderColor: ["hsl(46.2, 85%, 55%)","hsl(48.02400000000001, 85%, 55%)","hsl(71.376, 85%, 55%)","hsl(41.376000000000005, 85%, 55%)","hsl(76.416, 85%, 55%)","hsl(37.8, 85%, 55%)","hsl(51.204, 85%, 55%)","hsl(18.036, 85%, 55%)","hsl(18.9, 85%, 55%)","hsl(35.196, 85%, 55%)","hsl(120, 85%, 55%)"], borderWidth: 2, }, ], }, options: { maintainAspectRatio: false, plugins: { title: { display: true, text: 'large-dedupe-collection to string', font: { size: 20 }, padding: 20, }, legend: { display: false, }, tooltip: { callbacks: { label: (context) => { return format(context.parsed.y) + ' ops/s' }, }, displayColors: false, backgroundColor: '#222222', padding: 10, cornerRadius: 5, intersect: false, }, }, scales: { x: { grid: { color: '#888888', }, }, y: { title: { display: true, text: 'Operations per second', padding: 10, }, grid: { color: '#888888', }, }, }, }, })
```
--------------------------------
### Format Number for Chart Tooltip
Source: https://github.com/lxsmnsyc/seroval/blob/main/benchmark/results/charts/large-simple-collection to string.chart.html
Formats a number with commas as thousands separators and appends ' ops/s' for chart tooltips. Handles both whole and fractional parts.
```javascript
const format = (num) => {
const [whole, fraction] = String(num).split('.')
const chunked = []
whole
.split('')
.reverse()
.forEach((char, index) => {
if (index % 3 === 0) {
chunked.unshift([char])
} else {
chunked[0].unshift(char)
}
})
const fractionStr = fraction !== undefined ? '.' + fraction : ''
return (
chunked.map((chunk) => chunk.join('')).join(' ')
+ fractionStr
)
}
```