feat: select sksl in runner

package.json

@@ -8,7 +8,8 @@
         "build": "ts-node script build",
         "test": "ts-node script test",
         "format": "ts-node script format",
-        "package": "ts-node script package"
+        "package": "ts-node script package",
+        "dev:runner": "pnpm -F runner dev"
     },
     "devDependencies": {
         "@types/jest": "^29.5.10",

packages/extension/src/index.ts

@@ -6,7 +6,7 @@ import * as fs from 'fs'
 let client: LanguageClient | undefined
 
 export async function activate(context: vscode.ExtensionContext) {
-    context.subscriptions.push(vscode.commands.registerCommand('sksl.showRunner', () => showRunner(context)))
+    context.subscriptions.push(vscode.commands.registerCommand('sksl.showRunner', (uri) => showRunner(context, uri)))
 
     const module = context.asAbsolutePath(path.join('build', 'server.js'))
     const skslWasmPath = context.asAbsolutePath(path.join('build', 'sksl-wasm.wasm'))
@@ -36,10 +36,37 @@ export async function deactivate() {
     }
 }
 
-function showRunner(context: vscode.ExtensionContext) {
+function showRunner(context: vscode.ExtensionContext, uri: vscode.Uri | undefined) {
     const panel = vscode.window.createWebviewPanel('sksl.runner', 'SkSL Runner', vscode.ViewColumn.Beside, {
         enableScripts: true,
     })
+
     const htmlPath = context.asAbsolutePath(path.join('build', 'runner', 'index.html'))
     panel.webview.html = fs.readFileSync(htmlPath).toString()
+
+    if (uri) {
+        selectSkSL(panel, uri)
+    }
+
+    panel.webview.onDidReceiveMessage(
+        async () => {
+            const uris = await vscode.window.showOpenDialog({
+                canSelectFiles: true,
+                canSelectFolders: false,
+                canSelectMany: false,
+                filters: {
+                    SkSL: ['sksl'],
+                },
+            })
+            if (uris && uris.length >= 1) {
+                selectSkSL(panel, uris[0])
+            }
+        },
+        undefined,
+        context.subscriptions,
+    )
+}
+
+function selectSkSL(panel: vscode.WebviewPanel, uri: vscode.Uri) {
+    panel.webview.postMessage(uri.toString())
 }

packages/runner/src/App.vue

@@ -1,3 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import './vscode-webview'
+
+let skslPath = ref('')
+
+// TODO: message type
+
+window.addEventListener('message', (event) => {
+    const message = event.data
+    skslPath.value = message
+})
+
+function selectSkSL() {
+    const vscode = acquireVsCodeApi()
+    vscode.postMessage('Select SkSL')
+}
+</script>
+
 <template>
-    <h1>SkSL Runner</h1>
+    <div class="body">
+        <h1>SkSL Runner</h1>
+        <button @click="selectSkSL()">Select SkSL</button>
+        <span>{{ skslPath }}</span>
+    </div>
 </template>
+
+<style scoped>
+.body {
+    margin: 0 auto;
+    max-width: 768px;
+}
+</style>

packages/runner/src/vscode-webview.d.ts

@@ -0,0 +1,44 @@
+// https://www.npmjs.com/package/@types/vscode-webview
+
+/**
+ * API exposed to webviews.
+ *
+ * @template StateType Type of the persisted state stored for the webview.
+ */
+export interface WebviewApi<StateType> {
+    /**
+     * Post a message to the owner of the webview.
+     *
+     * @param message Data to post. Must be JSON serializable.
+     */
+    postMessage(message: unknown): void
+
+    /**
+     * Get the persistent state stored for this webview.
+     *
+     * @return The current state or `undefined` if no state has been set.
+     */
+    getState(): StateType | undefined
+
+    /**
+     * Set the persistent state stored for this webview.
+     *
+     * @param newState New persisted state. This must be a JSON serializable object. Can be retrieved
+     * using {@link getState}.
+     *
+     * @return The new state.
+     */
+    setState<T extends StateType | undefined>(newState: T): T
+}
+
+declare global {
+    /**
+     * Acquire an instance of the webview API.
+     *
+     * This may only be called once in a webview's context. Attempting to call `acquireVsCodeApi` after it has already
+     * been called will throw an exception.
+     *
+     * @template StateType Type of the persisted state stored for the webview.
+     */
+    function acquireVsCodeApi<StateType = unknown>(): WebviewApi<StateType>
+}