feat: add SkSL Runner entry

seven332 · seven332 · commit 184c6808cf17 · 2023-12-02T00:35:36.000+08:00
diff --git a/package.json b/package.json
@@ -54,6 +54,21 @@
                 "path": "./build/grammar.json"
             }
         ],
+        "commands": [
+            {
+                "command": "sksl.showRunner",
+                "title": "Show SkSL Runner"
+            }
+        ],
+        "menus": {
+            "editor/context": [
+                {
+                    "when": "resourceLangId == sksl",
+                    "command": "sksl.showRunner",
+                    "group": "navigation"
+                }
+            ]
+        },
         "walkthroughs": [
             {
                 "id": "skslWelcome",
@@ -90,8 +105,8 @@
         "@types/vscode": "^1.77.0",
         "@typescript-eslint/eslint-plugin": "^6.7.4",
         "@typescript-eslint/parser": "^6.7.4",
-        "@vscode/test-electron": "^2.3.6",
         "@vscode/test-cli": "^0.0.4",
+        "@vscode/test-electron": "^2.3.6",
         "@vscode/vsce": "^2.21.1",
         "eslint": "^8.38.0",
         "jest": "^29.5.0",
diff --git a/src/html-builder.test.ts b/src/html-builder.test.ts
@@ -0,0 +1,12 @@
+import { HtmlBuilder } from './html-builder'
+
+describe('HtmlBuilder', () => {
+    it('build', () => {
+        const html = HtmlBuilder.build((b) => {
+            b.html({
+                lang: 'en',
+            })
+        })
+        expect(html).toBe('<!DOCTYPE html><html lang="en"></html>')
+    })
+})
diff --git a/src/html-builder.ts b/src/html-builder.ts
@@ -0,0 +1,78 @@
+type Attributes = { [key: string]: string }
+type Block = (builder: HtmlBuilder) => void
+const emptyBlock: Block = () => {}
+
+export class HtmlBuilder {
+    public static build(block: (builder: HtmlBuilder) => void): string {
+        const builder = new HtmlBuilder()
+        builder.result += '<!DOCTYPE html>'
+        block(builder)
+        return builder.result
+    }
+
+    public element(tag: string, attributes: Attributes, block: Block = emptyBlock) {
+        this.result += '<'
+        this.result += tag
+
+        for (const [key, value] of Object.entries(attributes)) {
+            this.result += ' '
+            this.result += key
+            if (value.length > 0) {
+                this.result += '='
+                this.result += '"'
+                this.result += value
+                this.result += '"'
+            }
+        }
+
+        this.result += '>'
+
+        if (block) {
+            block(this)
+        }
+
+        this.result += '</'
+        this.result += tag
+        this.result += '>'
+    }
+
+    public body(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('body', attributes, block)
+    }
+
+    public html(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('html', attributes, block)
+    }
+
+    public head(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('head', attributes, block)
+    }
+
+    public meta(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('meta', attributes, block)
+    }
+
+    public title(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('title', attributes, block)
+    }
+
+    public img(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('img', attributes, block)
+    }
+
+    public input(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('input', attributes, block)
+    }
+
+    public h1(attributes: Attributes, block: Block = emptyBlock) {
+        this.element('h1', attributes, block)
+    }
+
+    public text(value: string) {
+        this.result += value
+    }
+
+    private result: string = ''
+
+    private constructor() {}
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1,10 +1,13 @@
 import * as path from 'path'
-import { ExtensionContext } from 'vscode'
+import * as vscode from 'vscode'
 import { LanguageClient, TransportKind } from 'vscode-languageclient/node'
+import { showRunner } from './runner'
 
 let client: LanguageClient | undefined
 
-export async function activate(context: ExtensionContext) {
+export async function activate(context: vscode.ExtensionContext) {
+    context.subscriptions.push(vscode.commands.registerCommand('sksl.showRunner', showRunner))
+
     const module = context.asAbsolutePath(path.join('build', 'server.js'))
     const skslWasmPath = context.asAbsolutePath(path.join('build', 'sksl-wasm.wasm'))
     const transport = TransportKind.ipc
@@ -23,7 +26,6 @@ export async function activate(context: ExtensionContext) {
             initializationOptions: { skslWasmPath },
         },
     )
-
     await client.start()
 }
 
diff --git a/src/runner.ts b/src/runner.ts
@@ -0,0 +1,26 @@
+import * as vscode from 'vscode'
+import { HtmlBuilder } from './html-builder'
+
+export function showRunner() {
+    const panel = vscode.window.createWebviewPanel('sksl.runner', 'SkSL Runner', vscode.ViewColumn.Beside, {})
+    panel.webview.html = getWebviewContent()
+}
+
+function getWebviewContent() {
+    return HtmlBuilder.build((_) => {
+        _.html({ lang: 'en' }, () => {
+            _.head({}, () => {
+                _.meta({ charset: 'UTF-8' })
+                _.meta({ name: 'viewport', content: 'width=device-width, initial-scale=1.0' })
+                _.title({}, () => {
+                    _.text('SkSL Runner')
+                })
+            })
+            _.body({}, () => {
+                _.h1({}, () => {
+                    _.text('SkSL Runner')
+                })
+            })
+        })
+    })
+}
