Web Components

Um Web Component renderiza uma visão LikeC4 como um elemento HTML personalizado, como <likec4-view view-id="index">. Ele funciona em qualquer página HTML ou framework, sem código React. Você pode obtê-lo pela CLI, que gera um script independente, ou pelo plugin Vite, se o seu site for construído com Vite.

Com a CLI

Instalação

Adicione likec4 às dependências de desenvolvimento:

npm

npm i -D likec4

pnpm

pnpm add -D likec4

yarn

yarn add -D likec4

bun

bun add -d likec4

O comando precisa de react e react-dom para gerar o script e oferece instalá-los se estiverem ausentes. O script gerado inclui tudo, então a página não precisa de mais nada em tempo de execução.

Gerar o script

Gere um bundle JavaScript contendo o Web Component:

npm

npx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

pnpm

pnpx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

yarn

yarn dlx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

bun

bunx likec4 gen webcomponent -o ./src/likec4-webcomponent.js

Utilize-o assim:

<script src="./src/likec4-webcomponent.js"></script>
<likec4-view view-id="index"></likec4-view>

Por padrão, a CLI gera um Web Component chamado likec4-view.
Você pode alterar o prefixo likec4 com a opção -w, --webcomponent-prefix.

Por exemplo:

npm

npx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

pnpm

pnpx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

yarn

yarn dlx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

bun

bunx likec4 gen webcomponent -w custom-c4 -o ./src/likec4-webcomponent.js

E no HTML:

<custom-c4-view view-id="index" browser="true" dynamic-variant="sequence"></custom-c4-view>

Com --customization <arquivo>, a personalização da interface é incluída nos Web Components gerados (experimental). O comando também lê a configuração da aplicação (webcomponentPrefix, customization); use --app-config <arquivo> para indicá-la, ou --no-app-config para ignorá-la.

Nota

O comando build da CLI sempre gera JavaScript com Web Components.
Confira o botão Share na parte superior deste exemplo.

Com o plugin Vite

Se o seu site for construído com Vite, o plugin LikeC4 para Vite fornece Web Components pelo módulo virtual likec4:webcomponents/<projeto>, sem etapa de geração e com HMR. Importe defineWebcomponent desse módulo e registre o elemento personalizado com o nome que preferir:

src/main.ts

import { defineWebcomponent } from 'likec4:webcomponents/project-a'

defineWebcomponent('likec4-view-project-a')

Depois, utilize-o no HTML:

<likec4-view-project-a
  view-id="index"
  browser="true"
  dynamic-variant="sequence"
  color-scheme="dark">
</likec4-view-project-a>

• O módulo é sempre específico de um projeto: project-a deve corresponder a um projeto do workspace LikeC4. Um workspace sem configuração de projeto tem um único projeto, com o ID default.
• O nome do elemento é o que você passa, então a opção webcomponentPrefix do plugin não se aplica aqui. Ele deve seguir as regras de nomenclatura de elementos personalizados, incluindo pelo menos um hífen.
• O elemento renderiza o LikeC4View de likec4:react/<projeto>, então a opção customization do plugin se aplica a ele.
• Com TypeScript, adicione as referências de tipos do plugin.

Atributos

Os dois tipos de Web Components oferecem os mesmos atributos:

Atributo	Descrição
view-id	ID da visão (padrão: index)
browser	Indica se a janela de navegação entre visões deve ser exibida (padrão: true)
dynamic-variant	Define a renderização da visão dinâmica Valores possíveis: diagram ou sequence (padrão: diagram)
color-scheme	Força o esquema de cores claro ou escuro Valores possíveis: light ou dark (padrão: acompanha o sistema)