mirror of
https://github.com/supabase/supabase.git
synced 2026-10-07 18:35:07 +03:00
Charis
2709fa4a3e
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.
119 lines
2.8 KiB
TypeScript
119 lines
2.8 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
|
|
import { mdxToMarkdown } from 'mdast-util-mdx'
|
|
import { toMarkdown } from 'mdast-util-to-markdown'
|
|
|
|
import { partialsRemark } from './Partial'
|
|
import { fromDocsMarkdown } from './utils.server'
|
|
|
|
describe('$Partial', () => {
|
|
it('should replace partial marker with partial contents', async () => {
|
|
const markdown = `
|
|
# Embed partial
|
|
|
|
<$Partial path="/_fixtures/test.mdx" />
|
|
|
|
Some more text.
|
|
`.trim()
|
|
|
|
const mdast = fromDocsMarkdown(markdown)
|
|
const transformed = await partialsRemark()(mdast)
|
|
const output = toMarkdown(transformed, { extensions: [mdxToMarkdown()] })
|
|
|
|
const expected = `
|
|
# Embed partial
|
|
|
|
Here is some content to embed as a partial.
|
|
|
|
## A heading
|
|
|
|
Some more stuff, including:
|
|
|
|
* A list
|
|
* With two items
|
|
|
|
And some custom components:
|
|
|
|
<Admonition type="note">
|
|
Some stuff.
|
|
|
|
In two paragraphs.
|
|
</Admonition>
|
|
|
|
<Component />
|
|
|
|
An entire paragraph: It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way...
|
|
|
|
Some more text.
|
|
`.trimStart()
|
|
|
|
expect(output).toEqual(expected)
|
|
})
|
|
|
|
it('should replace nested partials', async () => {
|
|
const markdown = `
|
|
# Embed partial
|
|
|
|
<$Partial path="/_fixtures/nested1.mdx" />
|
|
|
|
Some more text.
|
|
`.trim()
|
|
|
|
const mdast = fromDocsMarkdown(markdown)
|
|
const transformed = await partialsRemark()(mdast)
|
|
const output = toMarkdown(transformed, { extensions: [mdxToMarkdown()] })
|
|
|
|
const expected = `
|
|
# Embed partial
|
|
|
|
First level of nesting:
|
|
|
|
{/* prettier-ignore */}
|
|
|
|
Second level of nesting.
|
|
|
|
Some more text.
|
|
`.trimStart()
|
|
|
|
expect(output).toEqual(expected)
|
|
})
|
|
|
|
it('should substitute variables', async () => {
|
|
const markdown = `
|
|
# Embed partial
|
|
|
|
<$Partial path="/_fixtures/variables.mdx" variables={{ "var": "string replacement" }} />
|
|
|
|
Some more text.
|
|
`.trim()
|
|
|
|
const mdast = fromDocsMarkdown(markdown)
|
|
const transformed = await partialsRemark()(mdast)
|
|
|
|
const output = toMarkdown(transformed, { extensions: [mdxToMarkdown()] })
|
|
|
|
const expected = `
|
|
# Embed partial
|
|
|
|
Here is a partial that takes a string replacement.
|
|
|
|
Some more text.
|
|
`.trimStart()
|
|
|
|
expect(output).toEqual(expected)
|
|
})
|
|
|
|
it('should error on invalid substitutions', async () => {
|
|
const markdown = `
|
|
# Embed partial
|
|
|
|
<$Partial path="/_fixtures/variables.mdx" variables={{ "var": [0, 1, 2, 3] }} />
|
|
|
|
Some more text.
|
|
`.trim()
|
|
|
|
const mdast = fromDocsMarkdown(markdown)
|
|
await expect(partialsRemark()(mdast)).rejects.toThrowError(/valid JSON/)
|
|
})
|
|
})
|