Files
supabase/apps/docs/features/directives
Charis 2709fa4a3e feat: pre-compile-time partials (#34028)
Partials are currently defined via MDX includes. This PR switches to pre-compile-time partials, which have a new syntax:

```
<$Partial path="path/to/file.mdx" />
```

## Rationale

This produces two improvements:

1. Partial substitution can occur in pipelines that don't use MDX compilation. For example, we can now do partial substitution before building the search index, so partial content will also be indexed.
2. After the App Router migration, the MDXProviders should've been deprecated, but were kept around for the sole reason of making partials work, and leading to us shipping unnecessary client-side code. We get a minor decrease in overall client bundle size (5.74 MB to 5.6 MB) by getting rid of the Providers.

## Breaking changes

Besides the change to partial syntax, the arguments are also less powerful than before because we are doing string substitution and don't have the full power of JS. Defining string variables is still possible (documented in the Contributing guide), and since that's all we actually do in practice, this shouldn't be too cumbersome. There is always the escape hatch of making a custom component for more complex content reuse cases.
2025-03-18 10:37:39 -04:00
..

Directives

Directives are a custom feature of the Supabase docs content system, which allows you to extend MDX to provide custom functionality.

Why not a React component?

MDX supports React components, and that is the preferred way to add new features. If your use case is supported by a React component alone, use that instead.

Custom directives are used to implement features that need low-level parse or compile-time control over the MDX AST.

Syntax

We reserve a special syntax for directives, which start with a $ sign. For example:

<$CodeSample />

This syntax was chosen because it is both:

  • Sufficiently standard to be supported by MDX parsers without needing to build a custom extension.
  • Sufficiently uncommon to avoid collisions with other React components used in docs.