AppFabric Web
UX Fabric VS Code Extension providing quicker access to widget creation and Sandbox capabilities, autocomplete and suggest features.
Features
This plugin includes the following major features:
- Widget Generator
- Intellisense code-completion for UX Fabric Sandbox capabilities
- Jest runner integration to run/debug unit tests
- Snippets/boiler-plate code with quick commands for UX Fabric Sandbox capabilities
Cmd + Shift + P --> AppFabric: Create new widget
 - Enter widget name or leave it blank to use defaults.
- Select whether the widget needs to be exposed as a route.
- You should see new
widget.yaml and <Widget>.jsx files created under src/js/widgets/<widget>.
- You should see a new unit test under
test/unit/widgets/<widget>.
- You should see widget related config added to
src/config.json.
- If plugin-cli server was running at the time of widget creation, the server will be restarted.
Intellisense code-completion
Jest Runner
- Pre-requisite: plugin-cli v3 should be installed
Cmd + Shift + P --> AppFabric: Setup Jest- Choose whether you want to setup jest for current workspace or all workspaces.
- To run/debug unit tests,
- Open the test file in editor.
- Click on
Run/Debug codelens buttons or right click and click on Run Jest/Debug Jest.
Removing Jest Runner
Cmd + Shift + P --> AppFabric: Remove Jest- This will undo all changes to user settings and settings for the open workspace.
Jest runner extension will be uninstalled automatically when the AppFabric extension is uninstalled.
Snippets
The list of all snippets for reference. Following are some examples.
Prefixes
To access any appfabric snippet, just type appf:. There are categories of snippets that can be accessed by appf:<prefix>.
Following are the prefixes:
| Category |
Prefix |
Example |
Example |
| RUM |
appf:rum |
appf:rum:prof |
appf:rum:ci/rumci --> new customer interaction marker to capture RUM/FCIappf:rum:prof/rumprof --> new RUM profiler to track performance
|
| React |
appf:r |
appf:r:fc |
appf:r:w/rw --> react widgetappf:r:fc/rfc --> react functional component
|
| JS |
appf:js |
appf:js:forin |
appf:js:lmd/jslmd --> lambda functionappf:js:forin/jsforin --> For-IN loop
|
| Unit test |
appf:ut |
appf:ut:spyon |
utspyon/appf:ut:spyon --> Jest spyOnuttest/appf:ut:test -> test suite template
|
Run in Local or Remote Server
Pre-requisite: plugin-cli v3 should be installed
Open any web plugin.
Click on Start Server button on the status bar.
Select Local/Remote server.
- Local server will host the plugin in a local web app.
- Remote server will deploy assets at the URL and one can use the URL to override plugin config JSON in the associated web app.
After the server is up, click on the URL to navigate to local server.
To stop the server, click on Stop Server
Note: The AppFabric Web extension is in beta stage. In future, there can be feature which will require you to re-install the extension.
| |
