mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Anthony Lio
6d08a747f1
## What kind of change does this PR introduce? follow-up to #50235 to reduce reference page payloads and cold rendering overhead ## What is the current behavior? reference pages ship a large rsc payload inside the html _ most of it is duplication rather than content along with shiki that writes ~30 character css variable name for every syntax token making the page heavy in some cases ## What is the new behavior? - moves repeated styles into shared css and uses compact, namespaced token classes - renders details icons inside the client trigger - follows shiki’s guidance to [reuse one highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance) and [load languages on demand](https://shiki.style/guide/best-performance#use-shorthands) `page size` page | before | after | change -- | -- | -- | -- javascript | 10.61 mb | 8.28 mb | -21.9% dart | 4.59 mb | 4.13 mb | -10.1% python | 4.38 mb | 3.73 mb | -14.9% swift | 2.87 mb | 2.56 mb | -10.9% server | 1.59 mb | 1.35 mb | -15.2% kotlin | 3.42 mb | 3.17 mb | -7.2% `cold initialization` language | before | after | reduction -- | -- | -- | -- bash | 2,180 ms | 23 ms | 98.95% javascript | 2,245 ms | 38 ms | 98.29% ## Additional context measured on a local production build which uses the checked in generated content _ production has larger sdk data, so absolute sizes there will be higher <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added reusable expand/collapse controls for API reference details, with updated icons, labels, and styling. * Improved code block rendering with class-based syntax highlighting, wrapped-code support, responsive layouts, and lazy language loading. * **Style** * Added theme-aware syntax-token colors, line-number styling, and configurable code-block shadows. * Consolidated expandable reference panel and item styling. * **Tests** * Added coverage for syntax highlighting, code block rendering, language support, token stability, and reference details. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { readFileSync } from 'node:fs'
|
|
import { describe, expect, it } from 'vitest'
|
|
|
|
import { getCodeBlockLabel, getTokenClassName } from './CodeBlock.utils'
|
|
import theme from './supabase-2.json' with { type: 'json' }
|
|
|
|
const themeColors = (): Array<string> => {
|
|
const colors = new Set<string>()
|
|
|
|
const walk = (node: unknown) => {
|
|
if (Array.isArray(node)) {
|
|
node.forEach(walk)
|
|
return
|
|
}
|
|
if (node === null || typeof node !== 'object') return
|
|
|
|
for (const [key, value] of Object.entries(node)) {
|
|
if ((key === 'foreground' || key === 'background') && typeof value === 'string') {
|
|
colors.add(value)
|
|
}
|
|
walk(value)
|
|
}
|
|
}
|
|
|
|
walk(theme)
|
|
return [...colors]
|
|
}
|
|
|
|
describe('token class names', () => {
|
|
it('maps every theme color to a class', () => {
|
|
const colors = themeColors()
|
|
expect(colors.length).toBeGreaterThan(0)
|
|
|
|
const css = readFileSync(new URL('../../../styles/code-block.css', import.meta.url), 'utf8')
|
|
for (const color of colors) {
|
|
expect(getTokenClassName(color, 0), `${color} is missing from the class table`).toMatch(
|
|
/^s-[a-z]$/
|
|
)
|
|
expect(css).toContain(`.shiki .${getTokenClassName(color, 0)} {\n color: ${color};`)
|
|
}
|
|
})
|
|
|
|
it('appends font style classes', () => {
|
|
expect(getTokenClassName('var(--code-token-comment)', 1)).toBe('s-c s-i')
|
|
expect(getTokenClassName(undefined, 2 | 4)).toBe('s-b s-l')
|
|
expect(getTokenClassName(undefined, 0)).toBeUndefined()
|
|
expect(getTokenClassName(undefined, -1)).toBeUndefined()
|
|
})
|
|
})
|
|
|
|
describe('code block labels', () => {
|
|
it('names language aliases and singular or plural line counts', () => {
|
|
expect(getCodeBlockLabel('ts', 1)).toBe('TypeScript, 1 line')
|
|
expect(getCodeBlockLabel('sh', 2)).toBe('Shell, 2 lines')
|
|
expect(getCodeBlockLabel('rust', 3)).toBe('rust, 3 lines')
|
|
expect(getCodeBlockLabel(null, 1)).toBe('1 line')
|
|
})
|
|
})
|