Gerar Web Components

Instalação

Certifique-se de incluir likec4 nas dependências do projeto:

npm i likec4

pnpm add likec4

yarn add likec4

bun add likec4

Gere um bundle JavaScript contendo o Web Component:

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

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

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

bunx likec4 codegen 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:

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

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

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

bunx likec4 codegen 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>

Propriedade	Descrição
`view-id`	ID da visão
`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)