Add vscode bicep UI packages #14584
Merged
Add vscode bicep UI packages #14584
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Test this change out locally with the following install scripts (Action run 10063326350) VSCode
Azure CLI
|
...onents/assets/azure-architecture-icons/app-services/00046-icon-service-App-Service-Plans.svg
Outdated
Show resolved
Hide resolved
Merged
shenglol
added a commit
that referenced
this pull request
Jul 19, 2024
Once #14584 is merged we should consider merging `vscode-bicep-ui` and `vscode-bicep` and configure it with npm workspaces. The PR cleans up the `vscode-bicep` project to make sure we have consistent linter rules and formatter settings to make it easier to merge the folders. Changes: - Consolidated TypeScript config files. - Updated ESLint rules. - Made rules less strict overall. - Removed the annoying Prettier formatting related rules. - ⭐**No more yellow or red squiggly line related to formatting violations**. - Cleaned up all stale linter rule disabling comments. - Updated prettier configuration - Changed printWidth from `80` to `120` since we all have modern high-resolution and ultra-wide monitors :p - Added a plugin for automatically sort imports. - ❗**Formatted all code under vscode-bicep, which accounts for 99% of the file changes**. - Fixed a critical Webpack bundling circular dependency warning. - Added CI steps for formatting the `vscode-bicep` folder.
anthony-c-martin
approved these changes
Jul 23, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I'd like to add a new folder src/vscode-bicep-ui to house (React) UI applications and shared packages for reuse in the Bicep extension webviews, such as the deployment pane and the WYSIWYG visual designer (WIP).
The folder is set up with npm workspaces, vite and turborepo to simplify npm dependency management and improves development experience.
This PR introduces two packages, components and messaging, both with comprehensive test coverage. The components package includes various React components like
AzureIconandCodicon, while the messaging package provides aWebviewMessageChanneland related React hooks to simplify communication between a VS Code webview and the UI app managed by the webview.Currently, the apps folder contains only placeholders. Actual implementations will be added in the future, as there is still a lot to do (which is the main reason I want to check in these changes now - to save progress and avoid creating a gigantic all-in-one PR).
It's also worth noting that CI is not enabled yet. It will be set up once the deployment pane is updated to utilize these packages, which will be addressed in my next PR.
To preview the components, go to
src/vscode-bicep-ui/packages/component, runnpm installandnpm run dev.Microsoft Reviewers: Open in CodeFlow