From b248d9443b6d4674c2bccb0ef2af19cc7185dd70 Mon Sep 17 00:00:00 2001 From: "Estrada Irribarra, Rodrigo Andres" Date: Mon, 21 Oct 2024 12:49:11 -0300 Subject: [PATCH] fix: Try to load webview locally --- .vscode/launch.js | 4 +- package-lock.json | 6 ++ package.json | 1 + vscode/extension.ts | 17 ++-- vscode/panel.ts | 158 +++++++++--------------------- vscode/webview/components/App.tsx | 57 ++++++----- vscode/webview/index.tsx | 11 +-- 7 files changed, 99 insertions(+), 155 deletions(-) diff --git a/.vscode/launch.js b/.vscode/launch.js index b77b439..ff2e33a 100644 --- a/.vscode/launch.js +++ b/.vscode/launch.js @@ -2,8 +2,10 @@ "version": "0.2.0", "configurations": [ { - "name": "Run Extension", + "name": "Run StoryCraftr Extension", + "program": "${workspaceFolder}/vscode/extension.js", "type": "extensionHost", + "sourceMaps": true, "request": "launch", "runtimeExecutable": "${execPath}", "args": [ diff --git a/package-lock.json b/package-lock.json index bcc5596..e9931d3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@types/vscode": "^1.75.0", + "@types/vscode-webview": "^1.57.5", "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -558,6 +559,11 @@ "resolved": "https://registry.npmjs.org/@types/vscode/-/vscode-1.94.0.tgz", "integrity": "sha512-UyQOIUT0pb14XSqJskYnRwD2aG0QrPVefIfrW1djR+/J4KeFQ0i1+hjZoaAmeNf3Z2jleK+R2hv+EboG/m8ruw==" }, + "node_modules/@types/vscode-webview": { + "version": "1.57.5", + "resolved": "https://registry.npmjs.org/@types/vscode-webview/-/vscode-webview-1.57.5.tgz", + "integrity": "sha512-iBAUYNYkz+uk1kdsq05fEcoh8gJmwT3lqqFPN7MGyjQ3HVloViMdo7ZJ8DFIP8WOK74PjOEilosqAyxV2iUFUw==" + }, "node_modules/@types/webpack": { "version": "4.41.39", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.39.tgz", diff --git a/package.json b/package.json index 583235e..5e2d659 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ }, "dependencies": { "@types/vscode": "^1.75.0", + "@types/vscode-webview": "^1.57.5", "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/vscode/extension.ts b/vscode/extension.ts index d634348..8bb8238 100644 --- a/vscode/extension.ts +++ b/vscode/extension.ts @@ -1,12 +1,13 @@ -import * as vscode from "vscode"; -import PanelClass from "./panel"; +import * as vscode from 'vscode'; +import { createPanel } from './panel'; // Importing the panel function -export function activate(extContext: vscode.ExtensionContext) { - extContext.subscriptions.push( - vscode.commands.registerCommand("extensionnamegoeshere.start", () => { - PanelClass.createOrShow(extContext); - }), - ); +export function activate(context: vscode.ExtensionContext) { + // Register the command that triggers the webview panel + const disposable = vscode.commands.registerCommand('storycraftr.openPanel', () => { + createPanel(context); // Call the createPanel function + }); + + context.subscriptions.push(disposable); } export function deactivate() {} diff --git a/vscode/panel.ts b/vscode/panel.ts index 569b0f9..dcb3a0d 100644 --- a/vscode/panel.ts +++ b/vscode/panel.ts @@ -1,120 +1,56 @@ -import * as vscode from "vscode"; -import { getNonce } from "./getNonce"; - -export default class PanelClass { - public static currentPanel: PanelClass | undefined; - - private static readonly viewType = "PanelNameGoesHere"; - - private readonly _panel: vscode.WebviewPanel; - private readonly _extensionUri: vscode.Uri; - private readonly _extContext: vscode.ExtensionContext; - private _disposables: vscode.Disposable[] = []; - - public static createOrShow(extContext: vscode.ExtensionContext) { - const column = vscode.window.activeTextEditor - ? vscode.window.activeTextEditor.viewColumn - : undefined; - - // If we already have a panel, show it. - // Otherwise, create a new panel. - if (PanelClass.currentPanel) { - PanelClass.currentPanel._panel.reveal(column); - } else { - // ReactPanel.currentPanel = new ReactPanel(extensionPath, column || vscode.ViewColumn.One); - PanelClass.currentPanel = new PanelClass( - extContext, - vscode.ViewColumn.Two, - ); - } - } - //temporarily setting extcontext to any type - private constructor( - _extContext: vscode.ExtensionContext, - column: vscode.ViewColumn, - ) { - this._extContext = _extContext; - this._extensionUri = _extContext.extensionUri; - - // Create and show a new webview panel - this._panel = vscode.window.createWebviewPanel( - PanelClass.viewType, - "ReacTree", - column, - { - // Enable javascript in the webview - enableScripts: true, - localResourceRoots: [this._extensionUri], - }, - ); - - // Set the webview's initial html content - this._panel.webview.html = this._getHtmlForWebview(this._panel.webview); - - // Listen for when the panel is disposed - // This happens when the user closes the panel or when the panel is closed programatically - this._panel.onDidDispose(() => this.dispose(), null, this._disposables); - - //Listen to messages - this._panel.webview.onDidReceiveMessage( - async (msg: any) => { - switch (msg.command) { - case "startup": - console.log("message received"); - break; - case "testing": - console.log("reachedBrain"); - this._panel!.webview.postMessage({ command: "refactor" }); - break; +import * as vscode from 'vscode'; +import { getNonce } from './getNonce'; + +// This method is called to create the webview panel +export function createPanel(context: vscode.ExtensionContext) { + const panel = vscode.window.createWebviewPanel( + 'storycraftrPanel', // Identifies the type of the webview + 'StoryCraftr Control Panel', // Title of the panel + vscode.ViewColumn.One, // Editor column to show the new webview panel in. + { + // Enable scripts in the webview + enableScripts: true, + localResourceRoots: [ + vscode.Uri.file(context.extensionPath) + ] } - }, - null, - this._disposables, ); - } - public dispose() { - PanelClass.currentPanel = undefined; - this._panel.dispose(); - while (this._disposables.length) { - const x = this._disposables.pop(); - if (x) { - x.dispose(); - } - } - } - - private _getHtmlForWebview(webview: vscode.Webview) { - const scriptUri = webview.asWebviewUri( - vscode.Uri.joinPath(this._extensionUri, "out", "main.wv.js"), + // Set the HTML content for the webview + panel.webview.html = getWebviewContent(panel.webview, context); + + // Set up the message listener for communication between webview and extension + panel.webview.onDidReceiveMessage( + message => { + switch (message.command) { + case 'runCommand': + vscode.window.showInformationMessage(`Running command: ${message.text}`); + break; + } + }, + undefined, + context.subscriptions ); +} - const styleUri = webview.asWebviewUri( - vscode.Uri.joinPath(this._extensionUri, "media", "styles.css"), +// Function to define the HTML and load the React app from the webview folder +function getWebviewContent(webview: vscode.Webview, context: vscode.ExtensionContext): string { + const scriptUri = webview.asWebviewUri( + vscode.Uri.joinPath(context.extensionUri, 'webview', 'dist', 'bundle.js') ); - + const nonce = getNonce(); - + return ` - - - - - Panel Title Goes Here - - - -
- - - - - `; - } + + + + + StoryCraftr Panel + + + +
+ + `; } diff --git a/vscode/webview/components/App.tsx b/vscode/webview/components/App.tsx index 7a9aa56..c284e2c 100644 --- a/vscode/webview/components/App.tsx +++ b/vscode/webview/components/App.tsx @@ -1,35 +1,34 @@ -import * as React from "react"; +import * as vscode from 'vscode'; +import * as React from 'react'; +import { useState, useEffect } from 'react'; -interface vscode { - postMessage(message: any): void; -} -declare const vscode: vscode; - -const sendMessage = () => { - console.log("button clicked"); - vscode.postMessage({ command: "testing" }); -}; +function App() { + const [output, setOutput] = useState(''); -const App = () => { - const [buttonText, setButtonText] = React.useState("The brain is pending"); + const sendCommand = (command: string) => { + const vscode = acquireVsCodeApi(); + vscode.postMessage({ command: 'runCommand', text: command }); + }; - React.useEffect(() => { - window.addEventListener("message", (event) => { - const message = event.data; // The json data that the extension sent - switch (message.command) { - case "refactor": - setButtonText("The brain is working"); - break; - } - }); - }); + useEffect(() => { + window.addEventListener('message', event => { + const { result } = event.data; + setOutput(prev => prev + result + '\n'); + }); + }, []); - return ( -
-

Functional Components Work!

- -
- ); -}; + return ( +
+

StoryCraftr Control Panel

+ + + 
{output}
+
+ ); +} export default App; diff --git a/vscode/webview/index.tsx b/vscode/webview/index.tsx index 1055d66..d7d76cd 100644 --- a/vscode/webview/index.tsx +++ b/vscode/webview/index.tsx @@ -1,7 +1,6 @@ -const React = require("react"); -const ReactDOM = require("react-dom"); +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './components/App'; // Import the App component -// Component import -import App from "./components/App"; - -ReactDOM.render(, document.getElementById("root") as HTMLElement); +// Render the App component inside the root div of the webview HTML +ReactDOM.render(, document.getElementById('root'));