Skip to content

Refactor visual designer: improve folder structure, bundling, and dev tooling#19025

Merged
shenglol merged 2 commits into
mainfrom
shenglol/visual-designer-code-hygiene
Feb 18, 2026
Merged

Refactor visual designer: improve folder structure, bundling, and dev tooling#19025
shenglol merged 2 commits into
mainfrom
shenglol/visual-designer-code-hygiene

Conversation

@shenglol
Copy link
Copy Markdown
Contributor

@shenglol shenglol commented Feb 18, 2026

Refactoring of the visual designer app to improve code organization and bundle performance. No behavioral changes.

Changes

Feature module restructuring

  • Extract ELK layout logic into features/layout with custom hooks (useAutoLayout, useResetLayout, useComputeLayout)
  • Move deployment graph handling into features/messaging
  • Move node renderers (ModuleDeclaration, ResourceDeclaration) into features/visualization
  • Add barrel export for features/graph-engine
  • Extract useFitView into graph-engine hooks

Bundle optimization

  • Lazy-load ELK.js (~1.5 MB) via dynamic import() — main bundle drops from ~1,880 kB to ~385 kB
  • Convert elk-layout from Store type to Jotai Getter/Setter for idiomatic usage

Dev tooling improvements

  • Encapsulate dev-only code in features/devtools with loadDevAppShell() (lazy-loaded, tree-shaken in prod via import.meta.env.DEV)
  • Move GraphControlBar to src/components (shared, not feature-specific)
  • Add Vite previewMock plugin for local production build testing
  • Import webview-playground from app code (dev-only, properly tree-shaken)
  • Clean index.html (remove all dev/test scripts)
  • Add vite-env.d.ts for import.meta.env types
  • Update font-family fallback to match VS Code defaults
Microsoft Reviewers: Open in CodeFlow

- Extract ELK layout into features/layout with custom hooks
  (useAutoLayout, useResetLayout, useComputeLayout)
- Lazy-load ELK via dynamic import() for bundle optimization
- Move deployment graph handling into features/messaging
- Move node renderers into features/visualization
- Add graph-engine barrel export (features/graph-engine/index.ts)
- Extract useFitView into graph-engine/hooks
- Convert elk-layout from Store type to Jotai Getter/Setter
- Rename useTheme.ts to use-theme.ts (kebab-case convention)
- Encapsulate DevToolbar and FakeMessageChannel in features/devtools
- Add loadDevAppShell() with lazy loading and import.meta.env.DEV guard
- Move GraphControlBar to src/components (shared, not feature-specific)
- Simplify App.tsx: DevAppShell wrapper pattern, cleaner imports
- Add Vite previewMock plugin for local production build testing
- Import webview-playground from index.tsx (dev-only, tree-shaken)
- Clean index.html (remove all dev/test scripts)
- Add vite-env.d.ts for import.meta.env types
- Update font-family fallback to match VS Code defaults
- Add html-to-image dependency for future export feature
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Feb 18, 2026

Test this change out locally with the following install scripts (Action run 22161039354)

VSCode
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-vsix.sh) --run-id 22161039354
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-vsix.ps1) } -RunId 22161039354"
Azure CLI
  • Mac/Linux
    bash <(curl -Ls https://aka.ms/bicep/nightly-cli.sh) --run-id 22161039354
  • Windows
    iex "& { $(irm https://aka.ms/bicep/nightly-cli.ps1) } -RunId 22161039354"

@shenglol shenglol merged commit c5b2d5f into main Feb 18, 2026
41 of 42 checks passed
@shenglol shenglol deleted the shenglol/visual-designer-code-hygiene branch February 18, 2026 22:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants