FunctionSection() — supabase Function Reference

Source Code

apps/docs/features/docs/Reference.sections.tsx lines 451–574

async function FunctionSection({
  sdkId,
  version,
  link,
  section,
  useTypeSpec,
}: FunctionSectionProps) {
  const fns = await getFunctionsList(sdkId, version)

  const fn = fns?.find((fn) => fn.id === section.id)
  if (!fn) return null

  let types: MethodTypes | VariableTypes | undefined
  if (useTypeSpec && '$ref' in fn) {
    types = await getTypeSpec(fn['$ref'] as string)
  }

  const fullDescription = [
    types?.comment?.shortText,
    'description' in fn && (fn.description as string),
    'notes' in fn && (fn.notes as string),
  ]
    .filter(Boolean)
    .map(normalizeMarkdown)
    .join('\n\n')

  return (
    <RefSubLayout.Section columns="double" link={link} {...section}>
      <StickyHeader {...section} className="col-[1_/_-1]" />

      {/* Display method signature below title */}
      {types && 'params' in types && formatMethodSignature(types) && (
        <div className="col-[1_/_-1] -mt-2 mb-4">
          <code className="text-sm text-foreground-muted font-mono">
            {formatMethodSignature(types)}
          </code>
        </div>
      )}

      <div className="overflow-hidden flex flex-col gap-8">
        <div className="prose break-words text-sm">
          <MDXRemoteRefs source={fullDescription} />
        </div>
        <FnParameterDetails
          parameters={
            'overwriteParams' in fn
              ? (fn.overwriteParams as Array<object>).map((overwrittenParams) => ({
                  ...overwrittenParams,
                  __overwritten: true,
                }))
              : 'params' in fn
                ? (fn.params as Array<object>).map((param) => ({ ...param, __overwritten: true }))
                : types && 'params' in types
                  ? types.params
                  : undefined
          }
          altParameters={
            types && 'altSignatures' in types
              ? types.altSignatures?.map(({ params }) => params)
              : undefined
          }
          className="max-w-[80ch]"
        />
        {types && 'ret' in types && !!types.ret && <ReturnTypeDetails returnType={types.ret} />}
      </div>
      <div className="overflow-auto">
        {(() => {
          // Prefer YAML examples, fallback to TypeDoc examples
          const yamlExamples =
            'examples' in fn && Array.isArray(fn.examples) && fn.examples.length > 0
              ? fn.examples
              : []
          const examples = yamlExamples.length > 0 ? yamlExamples : types?.comment?.examples || []

          if (examples.length === 0) return null

          return (
            <Tabs_Shadcn_ defaultValue={examples[0].id}>
              <TabsList_Shadcn_ className="flex-wrap gap-2 border-0">
                {examples.map((example) => (
                  <TabsTrigger_Shadcn_
                    key={example.id}
                    value={example.id}
                    className={cn(
                      'px-2.5 py-1 rounded-full',
                      'border-0 bg-surface-200 hover:bg-surface-300',
                      'text-xs text-foreground-lighter',
                      // Undoing styles from primitive component
                      'data-[state=active]:border-0 data-[state=active]:shadow-0',
                      'data-[state=active]:bg-foreground data-[state=active]:text-background',
                      'transition'
                    )}
                  >
                    {example.name}
                  </TabsTrigger_Shadcn_>
                ))}
              </TabsList_Shadcn_>
              {examples.map((example) => (
                <TabsContent_Shadcn_ key={example.id} value={example.id}>
                  <MDXRemoteRefs source={example.code} />
                  <div className="flex flex-col gap-2 mt-2">
                    {/* Only YAML examples have data/response/description fields */}
                    {'data' in example && !!example.data?.sql && (
                      <CollapsibleDetails title="Data source" content={example.data.sql} />
                    )}
                    {'response' in example && !!example.response && (
                      <CollapsibleDetails title="Response" content={example.response} />
                    )}
                    {'description' in example && !!example.description && (
                      <CollapsibleDetails
                        title="Notes"
                        content={normalizeMarkdown(example.description)}
                      />
                    )}
                  </div>
                </TabsContent_Shadcn_>
              ))}
            </Tabs_Shadcn_>
          )
        })()}
      </div>
    </RefSubLayout.Section>
  )
}