chore: use reactive vscode initial

Author: junners

.vscode/launch.json

@@ -63,7 +63,10 @@
       ],
       "outFiles": [
         "${workspaceFolder}/dist/**/*.js"
-      ]
+      ],
+			"env": {
+				"LFS_USE_REACTIVE_VSCE": "true"
+			}
     }
   ]
 }

.vscodeignore

@@ -10,4 +10,5 @@ vsc-extension-quickstart.md
 **/*.ts
 node_modules
 .wdio-vscode-service
-**.vsix
+**.vsix
+media/demo.gif

package.json

@@ -46,7 +46,7 @@
     },
     "commands": [
       {
-        "command": "lightningflowscanner.viewDefaulFlowRules",
+        "command": "lightningflowscanner.viewDefaultFlowRules",
         "title": "Default Flow Rules"
       },
       {

src/extension.ts

@@ -4,7 +4,35 @@ import Commands from './commands/handlers';
 import { CacheProvider } from './providers/cache-provider';
 import { OutputChannel } from './providers/outputChannel';
 
+import {
+  defineExtension,
+  useCommand,
+  useIsDarkTheme,
+  useLogger,
+  watchEffect,
+} from 'reactive-vscode';
+
 export async function activate(context: vscode.ExtensionContext) {
+  const useVue = process.env.LFS_USE_REACTIVE_VSCE === 'true';
+  vscode.window.showInformationMessage(`LFS_USE_REACTIVE_VSCE: ${useVue}`);
+  if (useVue) {
+    const { activate: vueActivate } = defineExtension(() => {
+      const logger = useLogger('Lightning Flow Scanner');
+      logger.info('Extension Activated');
+      logger.show();
+
+      useCommand('lightningflowscanner.viewDefaultFlowRules', () => {
+        // window.showInformationMessage(message.value);
+        vscode.window.showInformationMessage('Hello World');
+      });
+
+      const isDark = useIsDarkTheme();
+      watchEffect(() => {
+        logger.info('Is Dark Theme:', isDark.value);
+      });
+    });
+    return vueActivate(context);
+  }
   OutputChannel.getInstance().logChannel.debug('initialize');
 
   CacheProvider.init(context, { results: [], ruleconfig: {} });

src/services/message-service.ts

@@ -19,23 +19,25 @@ export default class MessageService {
   }
 
   viewRules(query: any) {
-    vscode.commands.executeCommand("lightningflowscanner.viewDefaulFlowRules");
+    vscode.commands.executeCommand('lightningflowscanner.viewDefaulFlowRules');
   }
 
   scanFlows(query: any) {
-    vscode.commands.executeCommand("lightningflowscanner.scanFlows");
+    vscode.commands.executeCommand('lightningflowscanner.scanFlows');
   }
 
   fixFlows(query: any) {
-    vscode.commands.executeCommand("lightningflowscanner.fixFlows");
+    vscode.commands.executeCommand('lightningflowscanner.fixFlows');
   }
 
   runTests(query: any) {
-    vscode.commands.executeCommand("lightningflowscanner.calculateFlowTestCoverage");
+    vscode.commands.executeCommand(
+      'lightningflowscanner.calculateFlowTestCoverage'
+    );
   }
- 
+
   configRules(query: any) {
-    vscode.commands.executeCommand("lightningflowscanner.configRules");
+    vscode.commands.executeCommand('lightningflowscanner.configRules');
   }
 
   // Todo implement Cache in Front end components

test/specs/test.e2e.ts

@@ -1,31 +1,30 @@
-import { browser, expect } from "@wdio/globals";
+import { browser, expect } from '@wdio/globals';
 import { Workbench } from 'wdio-vscode-service';
 
-describe("LFS VSCE Side Bar Smoke Tests", () => {
-
+describe('LFS VSCE Side Bar Smoke Tests', () => {
   let workbench: Workbench;
 
   beforeEach(async () => {
     workbench = await browser.getWorkbench();
   });
 
-  it("Extension is accessible in the Side Bar", async () => {
+  it('Extension is accessible in the Side Bar', async () => {
     // Verify if Lightning Flow Scanner is in the side bar
     const viewControls = await workbench.getActivityBar().getViewControls();
     expect(
       await Promise.all(viewControls.map((vc) => vc.getTitle()))
-    ).toContain("Lightning Flow Scanner");
+    ).toContain('Lightning Flow Scanner');
 
     // Verify if Lightning Flow Scanner can be opened in the side bar
     const lfsViewContainer = await workbench
       .getActivityBar()
-      .getViewControl("Lightning Flow Scanner");
+      .getViewControl('Lightning Flow Scanner');
     await lfsViewContainer?.wait();
     await lfsViewContainer?.openView();
     const selectedView = await workbench
       .getActivityBar()
       .getSelectedViewAction();
-    expect(await selectedView.getTitle()).toBe("Lightning Flow Scanner");
+    expect(await selectedView.getTitle()).toBe('Lightning Flow Scanner');
 
     // // TODO Verify some content of the Lightning Flow Scanner side bar
     /*  
@@ -38,16 +37,14 @@ describe("LFS VSCE Side Bar Smoke Tests", () => {
     */
   });
 
-  it("The Get Rules command results in opening the Flow Rules view", async () => {
-
+  it('The Get Rules command results in opening the Flow Rules view', async () => {
     // Run the View Default Flow Rules via the Command Prompt
     const commandInput = await workbench.openCommandPrompt();
-    await workbench.executeCommand("lightningflowscanner.viewDefaulFlowRules");
+    await workbench.executeCommand('lightningflowscanner.viewDefaultFlowRules');
     const editorView = workbench.getEditorView();
     const activeTab = await editorView.getActiveTab();
     const title = await activeTab?.getTitle();
     console.log('title = ', title);
     expect(title).toBe('Flow Rules');
   });
-
 });