website-and-documentation/resources/LIKEC4-REGENERATION.md

# Regenerating LikeC4 Webcomponents

After modifying LikeC4 models (`.c4` files), you need to regenerate the webcomponents.

## Automatic Regeneration

Add to `Taskfile.yml`:

```yaml
  likec4:generate:
    desc: Generate LikeC4 webcomponents from both projects
    cmds:
      - cd resources/edp-likec4 && npx likec4 codegen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-webcomponent.js
      - cd resources/doc-likec4 && npx likec4 codegen webcomponent --webcomponent-prefix likec4 --outfile ../../static/js/likec4-doc-webcomponent.js
```

Then run:

```bash
task likec4:generate
```

## Manual Regeneration

### EDP Platform Architecture

```bash
cd resources/edp-likec4
npx likec4 codegen webcomponent \
  --webcomponent-prefix likec4 \
  --outfile ../../static/js/likec4-webcomponent.js
```

### Documentation Platform Architecture

```bash
cd resources/doc-likec4
npx likec4 codegen webcomponent \
  --webcomponent-prefix likec4 \
  --outfile ../../static/js/likec4-doc-webcomponent.js
```

## When to Regenerate

Regenerate webcomponents when you:

- ✅ Add new elements or relationships
- ✅ Modify existing models
- ✅ Create new views
- ✅ Change element properties (colors, shapes, etc.)

## File Sizes

The webcomponents are large (~6MB total):

- `likec4-webcomponent.js` - ~3.1MB (EDP architecture)
- `likec4-doc-webcomponent.js` - ~2.9MB (Documentation platform)

This is normal as they contain:

- React runtime
- Complete model data
- Diagram rendering engine
- Interactive controls

## Note

Both webcomponents are loaded in `layouts/partials/hooks/head-end.html` as ES modules:

```html
<script type="module" src="{{ "js/likec4-webcomponent.js" | relURL }}"></script>
<script type="module" src="{{ "js/likec4-doc-webcomponent.js" | relURL }}"></script>
```