refactor: use runner-data

packages/extension/src/index.ts

@@ -1,14 +1,11 @@
 import * as path from 'path'
 import * as vscode from 'vscode'
 import { LanguageClient, TransportKind } from 'vscode-languageclient/node'
-import * as fs from 'fs'
-import { QueryResult, kQueryUrl } from '@workspace/runner-data'
+import { Runner } from './runner'
 
 let client: LanguageClient | undefined
 
 export async function activate(context: vscode.ExtensionContext) {
-    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'))
     const transport = TransportKind.ipc
@@ -28,6 +25,13 @@ export async function activate(context: vscode.ExtensionContext) {
         },
     )
     await client.start()
+
+    const runner = new Runner(context, client)
+    context.subscriptions.push(
+        vscode.commands.registerCommand(Runner.kCommand, (url) => {
+            runner.run(url)
+        }),
+    )
 }
 
 export async function deactivate() {
@@ -36,43 +40,3 @@ export async function deactivate() {
         client = undefined
     }
 }
-
-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-ui', '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,
-    )
-}
-
-async function selectSkSL(panel: vscode.WebviewPanel, uri: vscode.Uri) {
-    panel.webview.postMessage(uri.toString())
-    const buffer = fs.readFileSync(uri.fsPath)
-    const result: QueryResult | undefined = await client?.sendRequest(kQueryUrl, {
-        source: buffer.toString(),
-    })
-    console.log(result)
-}

packages/extension/src/runner.ts

@@ -0,0 +1,65 @@
+import * as vscode from 'vscode'
+import { LanguageClient } from 'vscode-languageclient/node'
+import * as path from 'path'
+import * as fs from 'fs'
+import { Message, QueryResult, kQueryUrl, MessageType, SelectSkSLResponseMessage, pipe } from '@workspace/runner-data'
+
+export class Runner {
+    public static kCommand = 'sksl.showRunner'
+
+    public constructor(
+        private context: vscode.ExtensionContext,
+        private client: LanguageClient,
+    ) {}
+
+    public run(uri: vscode.Uri | undefined) {
+        const panel = vscode.window.createWebviewPanel('sksl.runner', 'SkSL Runner', vscode.ViewColumn.Beside, {
+            enableScripts: true,
+        })
+
+        const htmlPath = this.context.asAbsolutePath(path.join('build', 'runner-ui', 'index.html'))
+        panel.webview.html = fs.readFileSync(htmlPath).toString()
+
+        if (uri) {
+            this.selectSkSL(panel, uri)
+        }
+
+        panel.webview.onDidReceiveMessage(
+            async (message: Message) => {
+                switch (message.type) {
+                    case MessageType.kSelectSkSL: {
+                        const uris = await vscode.window.showOpenDialog({
+                            canSelectFiles: true,
+                            canSelectFolders: false,
+                            canSelectMany: false,
+                            filters: {
+                                SkSL: ['sksl'],
+                            },
+                        })
+                        if (uris && uris.length >= 1) {
+                            this.selectSkSL(panel, uris[0])
+                        }
+                        break
+                    }
+                }
+            },
+            undefined,
+            this.context.subscriptions,
+        )
+    }
+
+    private async selectSkSL(panel: vscode.WebviewPanel, uri: vscode.Uri) {
+        panel.webview.postMessage(
+            pipe<SelectSkSLResponseMessage>({
+                type: MessageType.kSelectSkSL,
+                path: uri.toString(),
+            }),
+        )
+
+        const buffer = fs.readFileSync(uri.fsPath)
+        const result: QueryResult = await this.client.sendRequest(kQueryUrl, {
+            source: buffer.toString(),
+        })
+        console.log(result)
+    }
+}

packages/runner-data/src/index.ts

@@ -1,27 +1,3 @@
-export const kQueryUrl = 'sksl/query'
-
-export interface QueryParams {
-    source: string
-}
-
-export interface SkSLUniform {
-    type: string
-    name: string
-}
-
-export const dummySkSLUniform: SkSLUniform = {
-    type: '',
-    name: '',
-}
-
-export interface QueryResult {
-    succeed: boolean
-    kind: string
-    uniforms: SkSLUniform[]
-}
-
-export const dummyQueryResult: QueryResult = {
-    succeed: false,
-    kind: '',
-    uniforms: [dummySkSLUniform],
-}
+export * from './message'
+export * from './url'
+export * from './wasm'

packages/runner-data/src/message.ts

@@ -0,0 +1,21 @@
+export enum MessageType {
+    kSelectSkSL,
+    kGetUniforms,
+}
+
+export interface Message {
+    type: MessageType
+}
+
+export interface SelectSkSLRequestMessage extends Message {
+    type: MessageType.kSelectSkSL
+}
+
+export interface SelectSkSLResponseMessage extends Message {
+    type: MessageType.kSelectSkSL
+    path: string
+}
+
+export function pipe<T>(t: T): T {
+    return t
+}

packages/runner-data/src/url.ts

@@ -0,0 +1 @@
+export const kQueryUrl = 'sksl/query'

packages/runner-data/src/wasm.ts

@@ -0,0 +1,25 @@
+export interface QueryParams {
+    source: string
+}
+
+export interface SkSLUniform {
+    type: string
+    name: string
+}
+
+export const dummySkSLUniform: SkSLUniform = {
+    type: '',
+    name: '',
+}
+
+export interface QueryResult {
+    succeed: boolean
+    kind: string
+    uniforms: SkSLUniform[]
+}
+
+export const dummyQueryResult: QueryResult = {
+    succeed: false,
+    kind: '',
+    uniforms: [dummySkSLUniform],
+}

packages/runner-ui/package.json

@@ -13,6 +13,7 @@
         "vue": "^3.3.4"
     },
     "devDependencies": {
+        "@workspace/runner-data": "workspace:*",
         "@tsconfig/node18": "^18.2.2",
         "@types/node": "^18.18.5",
         "@vitejs/plugin-vue": "^4.4.0",

packages/runner-ui/src/App.vue

@@ -1,20 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import './vscode-webview'
+import {
+    type Message,
+    MessageType,
+    pipe,
+    type SelectSkSLRequestMessage,
+    type SelectSkSLResponseMessage,
+} from '@workspace/runner-data'
 
 let skslPath = ref('')
 
-// TODO: message type
-
 window.addEventListener('message', (event) => {
-    const message = event.data
-    skslPath.value = message
+    const message = event.data as Message
+    switch (message.type) {
+        case MessageType.kSelectSkSL:
+            skslPath.value = (message as SelectSkSLResponseMessage).path
+            break
+    }
 })
 
 const vscode = acquireVsCodeApi()
 
 function selectSkSL() {
-    vscode.postMessage('Select SkSL')
+    vscode.postMessage(pipe<SelectSkSLRequestMessage>({ type: MessageType.kSelectSkSL }))
 }
 </script>