rehypeOptimizeStatic() — astro Function Reference

Source Code

packages/integrations/mdx/src/rehype-optimize-static.ts lines 33–175

export const rehypeOptimizeStatic: RehypePlugin<[OptimizeOptions?]> = (options) => {
	return (tree) => {
		// A set of non-static components to avoid collapsing when walking the tree
		// as they need to be preserved as JSX to be rendered dynamically.
		const ignoreElementNames = new Set<string>(options?.ignoreElementNames);

		// Find `export const components = { ... }` and get it's object's keys to be
		// populated into `ignoreElementNames`. This configuration is used to render
		// some HTML elements as custom components, and we also want to avoid collapsing them.
		for (const child of tree.children) {
			if (child.type === 'mdxjsEsm' && exportConstComponentsRe.test(child.value)) {
				const keys = getExportConstComponentObjectKeys(child);
				if (keys) {
					for (const key of keys) {
						ignoreElementNames.add(key);
					}
				}
				break;
			}
		}

		// All possible elements that could be the root of a subtree
		const allPossibleElements = new Set<OptimizableNode>();
		// The current collapsible element stack while traversing the tree
		const elementStack: Node[] = [];
		// Metadata used by `findElementGroups` later
		const elementMetadatas = new WeakMap<OptimizableNode, ElementMetadata>();

		/**
		 * A non-static node causes all its parents to be non-optimizable
		 */
		const isNodeNonStatic = (node: Node) => {
			return (
				node.type.startsWith('mdx') ||
				// @ts-expect-error `node` should never have `type: 'root'`, but in some cases plugins may inject it as children,
				// which MDX will render as a fragment instead (an MDX fragment is a `mdxJsxFlowElement` type).
				node.type === 'root' ||
				// @ts-expect-error Access `.tagName` naively for perf
				ignoreElementNames.has(node.tagName)
			);
		};

		visit(tree as any, {
			// @ts-expect-error Force coerce node as hast node
			enter(node: Node, key, index, parents: ParentNode[]) {
				// `estree-util-visit` may traverse in MDX `attributes`, we don't want that. Only continue
				// if it's traversing the root, or the `children` key.
				if (key != null && key !== 'children') return SKIP;

				// Mutate `node` as a normal hast element node if it's a plain MDX node, e.g. `<kbd>something</kbd>`
				simplifyPlainMdxComponentNode(node, ignoreElementNames);

				// For nodes that are not static, eliminate all elements in the `elementStack` from the
				// `allPossibleElements` set.
				if (isNodeNonStatic(node)) {
					for (const el of elementStack) {
						allPossibleElements.delete(el as OptimizableNode);
					}
					// Micro-optimization: While this destroys the meaning of an element
					// stack for this node, things will still work but we won't repeatedly
					// run the above for other nodes anymore. If this is confusing, you can
					// comment out the code below when reading.
					elementStack.length = 0;
				}
				// For possible subtree root nodes, record them in `elementStack` and
				// `allPossibleElements` to be used in the "leave" hook below.
				if (node.type === 'element' || isMdxComponentNode(node)) {
					elementStack.push(node);
					allPossibleElements.add(node);

					if (index != null && node.type === 'element') {
						// Record metadata for element node to be used for grouping analysis later
						elementMetadatas.set(node, { parent: parents[parents.length - 1], index });
					}
				}
			},
			// @ts-expect-error Force coerce node as hast node
			leave(node: Node, key, _, parents: ParentNode[]) {
				// `estree-util-visit` may traverse in MDX `attributes`, we don't want that. Only continue
				// if it's traversing the root, or the `children` key.
				if (key != null && key !== 'children') return SKIP;