feat: v2.0.0

[angeloashmore]

This is a rewrite of @prismicio/richtext with a focus on minimizing the bundle size and improving performance.

It is written in TypeScript with a public TypeScript interface in mind. It integrates with @prismicio/types to ensure other libraries and user code will interface properly.

Performance improvements

Benchmark results (compared to v1)

• asTree: ~75x faster
• asText: ~2.5x faster
• serialize: ~40x faster

Bundle size reduction (compared to v1)
~64% smaller minified + gzipped

• v1: ~3.7 kB
• v2: ~1.3 kB

New APIs

The following new APIs are exposed:

wrapMapSerializer

This function allows a user to create a serializer using a map. This is a simpler interface than the existing function-based serializer and can cover most use cases.

An example HTML serializer could look like the following:

export const htmlMapSerializer: RichTextMapSerializer<string> = {
	heading1: ({ children }) => `<h1>${children.join("")}</h1>`,
	heading2: ({ children }) => `<h2>${children.join("")}</h2>`,
	heading3: ({ children }) => `<h3>${children.join("")}</h3>`,
	heading4: ({ children }) => `<h4>${children.join("")}</h4>`,
	heading5: ({ children }) => `<h5>${children.join("")}</h5>`,
	heading6: ({ children }) => `<h6>${children.join("")}</h6>`,
	paragraph: ({ children }) => `<p>${children.join("")}</p>`,
	preformatted: ({ children }) => `<pre>${children.join("")}</pre>`,
	strong: ({ children }) => `<strong>${children.join("")}</strong>`,
	em: ({ children }) => `<em>${children.join("")}</em>`,
	list: ({ children }) => `<ul>${children.join("")}</ul>`,
	oList: ({ children }) => `<ol>${children.join("")}</ol>`,
	listItem: ({ children }) => `<li>${children.join("")}</li>`,
	oListItem: ({ children }) => `<li>${children.join("")}</li>`,
	image: ({ node }) => `<img src="${node.url}" alt="${node.alt}" />`,
	embed: ({ node }) => node.oembed.html,
	hyperlink: ({ node, children }) => {
		switch (node.data.link_type) {
			case LinkType.Web: {
				return `<a href="${node.data.url}" target="${
					node.data.target
				}">${children.join("")}</a>`;
			}

			case LinkType.Document: {
				return `<a href="linkResolver(${node.data.id})">${children.join(
					"",
				)}</a>`;
			}

			case LinkType.Media: {
				return `<a href="${node.data.url}">${children.join("")}</a>`;
			}
		}
	},
	label: ({ node, children }) =>
		`<span class="${node.data.label}">${children.join("")}</span>`,
	span: ({ text }) => (text ? text.replace("\n", "<br/>") : ""),
};

composeSerializers

This function combines two or more serializers into one serializer evaluated in the provided order. If a serializer returns a nullish value, the next serializer in line will be used until a value is found. At least one serializer must return a serialized value.

It looks like this:

const serializer = composeSerializers(serializer1, serializer2, serializer3);

Where serializer1, serializer2, and serializer3 are function serializers.