fix(vite-plugin): apply manual layouts in codegen React hooks by ckeller42 · Pull Request #2876 · likec4/likec4

ckeller42 · 2026-04-11T11:32:54Z

Summary

Fix for #2553 — codegen React hooks (useLikeC4Views, useLikeC4View) were not applying manual layouts.

Root Cause

The hooks in packages/vite-plugin/src/internal.ts read raw view data directly from $atom.views, bypassing LikeC4ViewModel.$layouted which applies manual layout overrides.

Fix

$likec4views now derives from $likec4model and maps through v.$layouted
useLikeC4View uses computed($likec4model, ...) with $layouted, wrapped in useMemo for stable atom identity
Removed unused useState/useEffect imports

This matches the pattern already used in packages/likec4/app/src/hooks.ts.

Files changed

packages/vite-plugin/src/internal.ts — hooks use $layouted via LikeC4ViewModel
.changeset/fix-codegen-manual-layout.md — patch changeset for @likec4/vite-plugin

🤖 Generated with Claude Code

ckeller42 · 2026-04-11T11:33:02Z

@coderabbitai review

changeset-bot · 2026-04-11T11:33:05Z

🦋 Changeset detected

Latest commit: f815c66

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 21 packages

Name	Type
@likec4/vite-plugin	Patch
likec4	Patch
likec4-vscode	Patch
@likec4/docs-astro	Patch
@likec4/playground	Patch
@likec4/style-preset	Patch
@likec4/styles	Patch
@likec4/config	Patch
@likec4/core	Patch
@likec4/diagram	Patch
@likec4/generators	Patch
@likec4/language-server	Patch
@likec4/language-services	Patch
@likec4/layouts	Patch
@likec4/leanix-bridge	Patch
@likec4/log	Patch
@likec4/lsp	Patch
@likec4/mcp	Patch
@likec4/react	Patch
@likec4/tsconfig	Patch
@likec4/vscode-preview	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-04-11T11:33:08Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai · 2026-04-11T11:36:17Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2afc239e-a8e3-4d5c-8699-8d639c622820

📥 Commits

Reviewing files that changed from the base of the PR and between 0479afc and f815c66.

📒 Files selected for processing (2)

.changeset/fix-codegen-manual-layout.md
packages/vite-plugin/src/internal.ts

✅ Files skipped from review due to trivial changes (1)

.changeset/fix-codegen-manual-layout.md

🚧 Files skipped from review as they are similar to previous changes (1)

packages/vite-plugin/src/internal.ts

📝 Walkthrough

Walkthrough

Refactors the vite-plugin to derive generated view hooks from the computed $likec4model's $layouted view representations instead of raw views, and replaces React useState/useEffect subscription logic with nanostores computed atoms consumed via useStore.

Changes

Cohort / File(s)	Summary
Implementation Fix `packages/vite-plugin/src/internal.ts`	`createHooksForModel` now computes `$likec4views` from the computed `$likec4model`, mapping each view to `v.$layouted`. `useLikeC4View(viewId)` was refactored to use a nanostores `computed` atom selecting `model.findView(viewId)?.$layouted ?? null` and consumed via `useStore`; React hook imports updated accordingly.
Release Documentation `.changeset/fix-codegen-manual-layout.md`	Adds a changeset declaring a patch release for `@likec4/vite-plugin`, noting the fix so generated React/view hooks use `$layouted` via `LikeC4ViewModel` (manual layouts applied).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main fix: applying manual layouts in codegen React hooks for the vite-plugin package.
Description check	✅ Passed	The description provides a clear summary, identifies the root cause, explains the fix, and lists files changed. However, the PR description provided by the author is missing completion of the required checklist template items.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/codegen-react-manual-layout

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

ckeller42 · 2026-04-11T11:40:19Z

@coderabbitai review

coderabbitai · 2026-04-11T11:40:24Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/vite-plugin/src/virtuals/model.ts`:
- Around line 6-10: projectModelCode() only patches views in this virtual
module, so callers of layoutedModel() (e.g. likec4.layoutedModel(project.id))
still receive unpatched auto-layout results; move the manual-layout correction
into the shared layoutedModel() flow instead. Update the layoutedModel()
implementation so that before returning it applies the same transformation used
here (build views = indexBy([...model.views()].map(v => v.$layouted),
prop('id')) and sets model.$data.views accordingly) or make layoutedModel()
delegate to diagrams()/the canonical layout routine that already applies
$layouted; ensure model.$data and any returned model object contain the patched
views so all callers (not just projectModelCode) observe _layout: 'manual' where
appropriate.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4444f869-01a5-4b7e-9b6b-30110085da85

📥 Commits

Reviewing files that changed from the base of the PR and between b9833b1 and 665c5dc.

📒 Files selected for processing (1)

packages/vite-plugin/src/virtuals/model.ts

davydkov · 2026-04-11T12:05:32Z

Good catch!!
But I think better to change it here, like it is done here correctly

@davydkov

The useLikeC4Views and useLikeC4View hooks in the vite-plugin internal module returned raw data views without manual layouts applied. This caused codegen react to produce views missing _layout: "manual". The fix uses $layouted from LikeC4ViewModel (which applies manual layouts lazily) instead of reading raw views from the data atom. This matches the pattern in packages/likec4/app/src/hooks.ts. Suggested by @davydkov: #2876 (comment) Closes #2553 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@davydkov

The useLikeC4Views and useLikeC4View hooks in the vite-plugin internal module returned raw data views without manual layouts applied. This caused codegen react to produce views missing _layout: "manual". The fix uses $layouted from LikeC4ViewModel (which applies manual layouts lazily) instead of reading raw views from the data atom. This matches the pattern in packages/likec4/app/src/hooks.ts. Suggested by @davydkov: #2876 (comment) Closes #2553 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai

🧹 Nitpick comments (1)

packages/vite-plugin/src/internal.ts (1)

90-94: Memoize the computed store to avoid recreation on every hook call.

The computed() store is created during each useLikeC4View call, causing unnecessary subscribe/unsubscribe churn. Use useMemo to create the store once per viewId within a component instance.

Proposed fix

+import { useMemo } from 'react'
 import { isDeepEqual, mapValues } from 'remeda'

 function useLikeC4View(viewId: string): DiagramView | null {
-  const $view = computed($likec4model, (model) => {
-    return model.findView(viewId)?.$layouted ?? null
-  })
+  const $view = useMemo(
+    () =>
+      computed($likec4model, (model) => {
+        return model.findView(viewId)?.$layouted ?? null
+      }),
+    [viewId],
+  )
   return useStore($view)
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/vite-plugin/src/internal.ts` around lines 90 - 94, The computed
store $view created inside useLikeC4View is rebuilt on every hook call causing
subscribe/unsubscribe churn; wrap the computed(...) creation in a memo so it's
only created once per viewId (e.g., useMemo(() => computed($likec4model, model
=> model.findView(viewId)?.$layouted ?? null), [viewId])) and then pass that
memoized store to useStore($view) so subsequent renders reuse the same computed
instance; update useLikeC4View to reference the memoized $view instead of
creating a new computed each call.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/vite-plugin/src/internal.ts`:
- Around line 90-94: The computed store $view created inside useLikeC4View is
rebuilt on every hook call causing subscribe/unsubscribe churn; wrap the
computed(...) creation in a memo so it's only created once per viewId (e.g.,
useMemo(() => computed($likec4model, model => model.findView(viewId)?.$layouted
?? null), [viewId])) and then pass that memoized store to useStore($view) so
subsequent renders reuse the same computed instance; update useLikeC4View to
reference the memoized $view instead of creating a new computed each call.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 53e920f1-d4f6-4ab0-bc4b-e141234d76c5

📥 Commits

Reviewing files that changed from the base of the PR and between 665c5dc and 31a2357.

📒 Files selected for processing (2)

packages/vite-plugin/src/internal.ts
packages/vite-plugin/src/virtuals/model.ts

🚧 Files skipped from review as they are similar to previous changes (1)

packages/vite-plugin/src/virtuals/model.ts

ckeller42 · 2026-04-11T14:40:40Z

@coderabbitai review

coderabbitai · 2026-04-11T14:40:46Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

ckeller42 · 2026-04-11T14:41:39Z

Thanks for the guidance! Moved the fix to internal.ts as you suggested — $likec4views and useLikeC4View now go through $likec4model → $layouted instead of reading raw $atom.views directly. This matches the pattern in app/src/hooks.ts. The model.ts virtual module is reverted (no changes to serialization).

@davydkov

The useLikeC4Views and useLikeC4View hooks in the vite-plugin internal module returned raw data views without manual layouts applied. This caused codegen react to produce views missing _layout: "manual". The fix uses $layouted from LikeC4ViewModel (which applies manual layouts lazily) instead of reading raw views from the data atom. This matches the pattern in packages/likec4/app/src/hooks.ts. Suggested by @davydkov: #2876 (comment) Closes #2553 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ckeller42 · 2026-04-11T16:10:18Z

@coderabbitai review

coderabbitai · 2026-04-11T16:10:24Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

useLikeC4Views and useLikeC4View hooks were reading raw view data from $atom.views, bypassing LikeC4ViewModel.$layouted which applies manual layout overrides. Changed hooks to derive from $likec4model and use $layouted, matching the pattern in app/src/hooks.ts. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ckeller42 · 2026-04-11T16:15:29Z

@coderabbitai review

coderabbitai · 2026-04-11T16:15:34Z

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

ckeller42 force-pushed the fix/codegen-react-manual-layout branch from b9833b1 to 665c5dc Compare April 11, 2026 11:40

davydkov approved these changes Apr 11, 2026

View reviewed changes

coderabbitai Bot reviewed Apr 11, 2026

View reviewed changes

Comment thread packages/vite-plugin/src/virtuals/model.ts Outdated

ckeller42 force-pushed the fix/codegen-react-manual-layout branch from 665c5dc to 31a2357 Compare April 11, 2026 14:34

ckeller42 force-pushed the fix/codegen-react-manual-layout branch from 31a2357 to 9172345 Compare April 11, 2026 14:39

coderabbitai Bot reviewed Apr 11, 2026

View reviewed changes

ckeller42 force-pushed the fix/codegen-react-manual-layout branch from 9172345 to 57c04b4 Compare April 11, 2026 15:25

ckeller42 changed the title ~~fix(language-server): apply manual layouts in layoutedModel()~~ fix(vite-plugin): apply manual layouts in codegen React hooks Apr 11, 2026

ckeller42 force-pushed the fix/codegen-react-manual-layout branch from 0479afc to f815c66 Compare April 11, 2026 16:13

davydkov approved these changes Apr 13, 2026

View reviewed changes

davydkov merged commit 9ea1bf1 into main Apr 13, 2026
16 checks passed

davydkov deleted the fix/codegen-react-manual-layout branch April 13, 2026 07:34

likec4-ci Bot mentioned this pull request Apr 10, 2026

release: v1.55.0 #2859

Merged

This was referenced Jun 6, 2026

fix(language-server): apply manual layouts in layoutedModel() #3052

Open

fix: preserve manual layouts in layouted model #3054

Open

Bug Report: peerDependencies range ^19.x resolves React 19.1.x, causing runtime crash in @mantine/hooks #3059

Open

Uh oh!

Conversation

ckeller42 commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root Cause

Fix

Files changed

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

changeset-bot Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

davydkov commented Apr 11, 2026

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

ckeller42 commented Apr 11, 2026

Uh oh!

coderabbitai Bot commented Apr 11, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ckeller42 commented Apr 11, 2026 •

edited

Loading

changeset-bot Bot commented Apr 11, 2026 •

edited

Loading

coderabbitai Bot commented Apr 11, 2026 •

edited

Loading