rehype.ts — astro Source File

Source Code

import type { RehypePlugin } from '@astrojs/markdown-remark';
import type { RootContent } from 'hast';
import type {} from 'mdast-util-mdx';
import type {
	MdxJsxAttribute,
	MdxJsxFlowElementHast,
	MdxJsxTextElementHast,
} from 'mdast-util-mdx-jsx';
import { visit } from 'unist-util-visit';
import type { VFile } from 'vfile';
import { AstroError } from '../core/errors/errors.js';
import { AstroErrorData } from '../core/errors/index.js';
import { resolvePath } from '../core/viteUtils.js';
import { createDefaultAstroMetadata } from '../vite-plugin-astro/metadata.js';
import type { PluginMetadata } from '../vite-plugin-astro/types.js';

const ClientOnlyPlaceholder = 'astro-client-only';

export const rehypeAnalyzeAstroMetadata: RehypePlugin = () => {
	return (tree, file) => {
		// Initial metadata for this MDX file, it will be mutated as we traverse the tree
		const metadata = createDefaultAstroMetadata();

		// Parse imports in this file. This is used to match components with their import source
		const imports = parseImports(tree.children);

		visit(tree, (node) => {
			if (node.type !== 'mdxJsxFlowElement' && node.type !== 'mdxJsxTextElement') return;

			const tagName = node.name;
			if (
				!tagName ||
				!isComponent(tagName) ||
				!(hasClientDirective(node) || hasServerDeferDirective(node))
			)
				return;

			// From this point onwards, `node` is confirmed to be an island component

			// Match this component with its import source
			const matchedImport = findMatchingImport(tagName, imports);
			if (!matchedImport) {
				throw new AstroError({
					...AstroErrorData.NoMatchingImport,
					message: AstroErrorData.NoMatchingImport.message(node.name!),
				});
			}

			// If this is an Astro component, that means the `client:` directive is misused as it doesn't
			// work on Astro components as it's server-side only. Warn the user about this.
			if (matchedImport.path.endsWith('.astro')) {
				const clientAttribute = node.attributes.find(
					(attr) => attr.type === 'mdxJsxAttribute' && attr.name.startsWith('client:'),
				) as MdxJsxAttribute | undefined;
				if (clientAttribute) {
					console.warn(
						`You are attempting to render <${node.name!} ${
							clientAttribute.name
						} />, but ${node.name!} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.`,
					);
// ... (316 more lines)