Skip to content

Fix #358: implement ag view — lightweight ejected-component viewer#361

Merged
roblevintennis merged 2 commits intomasterfrom
issue-358/ag-view-command
Mar 10, 2026
Merged

Fix #358: implement ag view — lightweight ejected-component viewer#361
roblevintennis merged 2 commits intomasterfrom
issue-358/ag-view-command

Conversation

@roblevintennis
Copy link
Copy Markdown
Contributor

Summary

Implements the ag view command as planned in issue #358.

  • New command: ag view [--port 7173] [--clean] [--no-open]
  • Generates .agnosticui-viewer/ — a Vite mini-app using the project's framework (React, Vue, or Lit/vanilla)
  • React: ReactHeader + ReactTabs + ReactCopyButton from @ag-ref; installed components rendered via inline JSX
  • Vue: VueHeader + VueTabs + VueCopyButton from @ag-ref; installed components via dynamic component map + per-component v-if blocks
  • Lit/vanilla: ag-header + ag-tabs + ag-copy-button from @ag-ref; pure DOM / innerHTML approach
  • App entry always regenerated on each run (keeps component list current); node_modules cached for fast restarts
  • ag view --clean nukes .agnosticui-viewer/ and rebuilds fully
  • CSS tokens (ag-tokens.css, ag-tokens-dark.css) auto-imported; ag-theme.css picked up automatically if present
  • ag init now adds .agnosticui-viewer/ to .gitignore
  • Docs added to installation.md and cli/README.md

Testing

Before spot-check verification: bump CLI version in v2/cli/package.json, build, and npm publish --tag alpha. Then run verification in v2/examples/{react,vue,lit}-test/ per the checklist in issue #358.

Closes #358

…iewer

- New command: ag view [--port 7173] [--clean] [--no-open]
- Generates .agnosticui-viewer/ Vite app per framework (React/Vue/Lit)
- Always regenerates App entry on each run (keeps component list current)
- Caches node_modules between runs; --clean for full rebuild
- Two-pane layout: sidebar nav + main Preview/HTML/Info tabs using ag-*
- Auto-imports ag-tokens.css, ag-tokens-dark.css, and ag-theme.css if present
- Registers .agnosticui-viewer/ in .gitignore via ag init
- Docs: ag view section added to installation.md and CLI README
…n ag view

- Alias user component imports that conflict with viewer chrome (CopyButton,
  Header, Tabs) to avoid duplicate identifier errors in generated App files
- Add REACT_EXPORT_OVERRIDES and VUE_EXPORT_OVERRIDES for components whose
  main React/Vue export name differs from React{Name}/Vue{Name} (e.g. Flex
  uses ReactFlexRow/VueFlexRow, not ReactFlex/VueFlex which don't exist)
- Fall back to react/index when React{Name}.tsx/ts is missing in components dir
- Prevent double custom element registration in Lit viewer by only importing
  chrome components from @ag-ref if they are not already in user components
- Bump CLI version to 2.0.0-alpha.17
@roblevintennis roblevintennis merged commit 1304e5b into master Mar 10, 2026
1 of 5 checks passed
@roblevintennis roblevintennis deleted the issue-358/ag-view-command branch March 10, 2026 18:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ejected Components Viewer

1 participant