Code Group (Multi-Runtime Tabs)

<CodeGroup> mostra um único conceito através de abas sincronizadas em vez de empilhar três blocos de código separados. Ele é construído para ecossistemas inerentemente multi-superfície -- um recurso Solana é um programa Rust on-chain e um cliente TypeScript e uma invocação de CLI, e um leitor quer alternar entre eles no local em vez de rolar por todos os três.

A escolha de idioma ativa do leitor é lembrada e sincronizada entre todos os grupos na página (e no site) para a sessão, então escolher "TypeScript" uma vez mantém todos os grupos mostrando TypeScript.

Aba padrão do leitor (recurso opcional). Quando o site habilita preferências de aba padrão, cada grupo distinto aparece em Configurações → "Padrões de exemplo de código" com um dropdown para escolher a aba em que ele abre por padrão. Essa escolha é salva no dispositivo do leitor e na conta dele quando logado. A sincronização por sessão acima ainda se aplica, mas nunca sobrescreve o padrão salvo. Autores não fazem nada extra -- qualquer <CodeGroup> que você escrever é capturado automaticamente.

Casos de Uso

• Solana -- o mesmo recurso como um programa Rust on-chain, um cliente TypeScript e um comando CLI, lado a lado.
• Node.js -- CommonJS vs ESM, ou JS puro vs TypeScript.
• Rust -- cargo vs rustc bruto, ou variantes síncronas vs assíncronas de uma API.
• Qualquer documentação onde uma ideia tem múltiplas superfícies equivalentes e empilhar blocos é uma leitura ruim.

Como Escrever

Envolva dois ou mais blocos de código delimitados em <CodeGroup> e passe labels como uma string separada por vírgulas, na mesma ordem dos blocos. Deixe uma linha em branco em volta de cada bloco delimitado.

<CodeGroup labels="Rust, TypeScript client, CLI">
 
```rust
// on-chain program
```
 
```ts
// client
```
 
```bash
solana balance ADDRESS
```
 
</CodeGroup>

Sempre use a forma de string (labels="A, B, C"). Este repositório renderiza MDX através de next-mdx-remote/rsc, que não passa atributos de expressão JSX -- então labels={["A", "B"]} (e qualquer outro prop {...}) é silenciosamente descartado e cada aba volta para Tab 1, Tab 2, e assim por diante. Pela mesma razão, opte por não sincronizar com a string sync="false", nunca sync={false}. Mantenha vírgulas fora de um rótulo, pois a string é dividida por vírgulas.

Qualquer bloco sem um rótulo correspondente volta para Tab 1, Tab 2, e assim por diante.

Exemplo Ao Vivo: Solana (o caso matador)

O mesmo recurso "ler o saldo de uma conta" em todas as três superfícies Solana. Escolha uma aba -- os outros grupos nesta página seguem sua escolha.

// programs/balance/src/lib.rs -- on-chain Anchor program
use anchor_lang::prelude::*;
 
declare_id!("Ba1anceReader1111111111111111111111111111111");
 
#[program]
pub mod balance {
    use super::*;
 
    pub fn read(ctx: Context<Read>) -> Result<()> {
        let lamports = ctx.accounts.wallet.lamports();
        msg!("balance: {} lamports", lamports);
        Ok(())
    }
}
 
#[derive(Accounts)]
pub struct Read<'info> {
    /// CHECK: read-only balance lookup
    pub wallet: AccountInfo<'info>,
}

// client.ts -- TypeScript client (@solana/web3.js)
import { Connection, PublicKey, LAMPORTS_PER_SOL } from "@solana/web3.js";
 
const connection = new Connection("https://api.mainnet-beta.solana.com");
const wallet = new PublicKey("So11111111111111111111111111111111111111112");
 
const lamports = await connection.getBalance(wallet);
console.log(`balance: ${lamports / LAMPORTS_PER_SOL} SOL`);

# CLI -- Solana command line
solana balance So11111111111111111111111111111111111111112 \
  --url mainnet-beta

Exemplo Ao Vivo: Node.js (CJS vs ESM)

// index.cjs
const { readFile } = require("node:fs/promises");
 
async function main() {
  const pkg = await readFile("package.json", "utf8");
  console.log(JSON.parse(pkg).name);
}
 
main();

// index.mjs
import { readFile } from "node:fs/promises";
 
const pkg = await readFile("package.json", "utf8");
console.log(JSON.parse(pkg).name);

Exemplo Ao Vivo: Rust (sync vs async, sync="false")

Este grupo usa sync="false" porque "sync vs async" é uma distinção única que não deve sequestrar a preferência de idioma do site definida pelos grupos acima.

// blocking read with std
use std::fs;
 
fn main() -> std::io::Result<()> {
    let contents = fs::read_to_string("Cargo.toml")?;
    println!("{}", contents.lines().count());
    Ok(())
}

// async read with tokio
use tokio::fs;
 
#[tokio::main]
async fn main() -> std::io::Result<()> {
    let contents = fs::read_to_string("Cargo.toml").await?;
    println!("{}", contents.lines().count());
    Ok(())
}

Props

Armadilhas

• Deixe linhas em branco em volta de cada bloco de código delimitado dentro de <CodeGroup>, ou o MDX não os analisará como blocos separados.
• A ordem dos rótulos importa -- os rótulos mapeiam para os blocos posicionalmente, não por idioma.
• A sincronização é por texto do rótulo (case-insensitive). Um grupo só segue uma escolha compartilhada se tiver uma aba com esse rótulo exato; caso contrário, mantém sua própria seleção.
• Defina sync="false" (a string, não sync={false}) para distinções que não são uma escolha de idioma (sync/async, antes/depois) para que não sobrescrevam o idioma preferido do leitor.
• Use apenas atributos de string. next-mdx-remote/rsc descarta atributos de expressão JSX (labels={[...]}, sync={false}), então as formas de string simples labels="A, B, C" e sync="false" são a única sintaxe confiável.

Alternativas

• Três blocos de código empilhados -- o mais simples, mas a leitura é ruim e força a rolagem por superfícies irrelevantes.
• Um componente <Tabs> genérico -- funciona para conteúdo arbitrário, mas não dá tratamento de primeira classe aos blocos de código (botão de cópia por aba, memória de idioma compartilhada, layout ciente de monospace).
• Páginas separadas por runtime -- apropriado quando as superfícies divergem substancialmente, mas divide um conceito pela navegação.

Relacionado

• Tabs -- o componente de conteúdo em abas de propósito geral.