Duplicate an element as a variant, then compare the variants in the browser.
Try it
Open this folder in VS Code and press F5 (Run Extension). This opens an Extension Development Host window.
In that window, open an HTML file.
Put the cursor inside an element or select it. Click the lightbulb and choose "Duplicate as variant".
The variant is added after the original with data-riffle-group and data-riffle-label attributes.
Above the group, the code lens offers "promote…" to keep one variant and remove the rest.
Preview in the browser
Run Riffle: Open preview in browser from the command palette. The extension starts a local server on 127.0.0.1, serves the workspace, and opens the active page with the dock already in place. Source files are not changed. Each save reloads the page, and the dock keeps the variant you were on.
Angular with npm start
Start your app with npm start. It serves on http://localhost:4200 by default.
In VS Code settings, set riffle.devServerUrl to http://localhost:4200. If the page says it can't reach the server, try http://127.0.0.1:4200.
Run Riffle: Open preview in browser. Riffle proxies the dev server, adds the dock to the app's page, and passes Angular's live reload through, so saves still reload the app as usual.
Duplicate elements in your component templates and the dock picks them up as the app renders.
Riffle does not change your project, and it doesn't add anything to your build. Clear the setting to go back to previewing static HTML.
Tests
node test-extension.js # extension glue, against a mocked vscode API
node ../riffle-core/test.js # transform core (run from the riffle-core folder)
