### Install Seroval with pnpm

Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md

Use this command to install Seroval using pnpm.

```bash
pnpm add seroval
```

--------------------------------

### Install Seroval with npm

Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md

Use this command to install Seroval using npm.

```bash
npm install --save seroval
```

--------------------------------

### Install Seroval with yarn

Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md

Use this command to install Seroval using yarn.

```bash
yarn 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
```

--------------------------------

### 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
```

--------------------------------

### Serialize JavaScript values with Seroval

Source: https://github.com/lxsmnsyc/seroval/blob/main/README.md

Import the `serialize` function and use it to stringify various JavaScript data types, including primitives, objects, arrays, Maps, Sets, Dates, RegExps, and BigInts. This example also demonstrates handling self and mutual cyclic references within objects, arrays, Maps, and Sets.

```javascript
import { serialize } from 'seroval';

const object = {
  number: [Math.random(), -0, NaN, Infinity, -Infinity],
  string: ['hello world', '<script>Hello World</script>'],
  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);
```

```javascript
((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))()
```

```javascript
((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
))();
```

--------------------------------

### 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',
        },
      },
    },
  },
})
```

--------------------------------

### 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<s;x++)l[x]&&l[x][m](v)},n=(o,x,z,c)=>{for(x=0,z=b.length;x<z;x++)(c=b[x],x===z-1?o[s?"return":"throw"](c):o.next(c))},e=(o,t)=>(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<s;x++)l[x]&&l[x][m](v)},n=(o,x,z,c)=>{for(x=0,z=b.length;x<z;x++)(c=b[x],x===z-1?o[s?"return":"throw"](c):o.next(c))},e=(o,t)=>(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', }, }, }, }, })
```