feat: runner package with vue

seven332 · Dec 4, 2023 · 7a9a663 · 7a9a663
1 parent 647866b
commit 7a9a663
Show file tree

Hide file tree

Showing 14 changed files with 752 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,3 +14,5 @@ packages/extension/README.md
 packages/extension/sksl.vsix
 
 packages/integration-test/build
+
+packages/runner/dist
diff --git a/packages/extension/src/index.ts b/packages/extension/src/index.ts
@@ -1,12 +1,12 @@
 import * as path from 'path'
 import * as vscode from 'vscode'
 import { LanguageClient, TransportKind } from 'vscode-languageclient/node'
-import { showRunner } from './runner'
+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.subscriptions.push(vscode.commands.registerCommand('sksl.showRunner', () => showRunner(context)))
 
     const module = context.asAbsolutePath(path.join('build', 'server.js'))
     const skslWasmPath = context.asAbsolutePath(path.join('build', 'sksl-wasm.wasm'))
@@ -35,3 +35,11 @@ export async function deactivate() {
         client = undefined
     }
 }
+
+function showRunner(context: vscode.ExtensionContext) {
+    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()
+}
diff --git a/packages/extension/src/runner.ts b/packages/extension/src/runner.ts
diff --git a/packages/runner/env.d.ts b/packages/runner/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/runner/index.html b/packages/runner/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>SkSL Runner</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>
diff --git a/packages/runner/package.json b/packages/runner/package.json
@@ -0,0 +1,25 @@
+{
+    "name": "@workspace/runner",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "run-p type-check \"build-only {@}\" --",
+        "preview": "vite preview",
+        "build-only": "vite build",
+        "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+    },
+    "dependencies": {
+        "vue": "^3.3.4"
+    },
+    "devDependencies": {
+        "@tsconfig/node18": "^18.2.2",
+        "@types/node": "^18.18.5",
+        "@vitejs/plugin-vue": "^4.4.0",
+        "@vue/tsconfig": "^0.4.0",
+        "npm-run-all2": "^6.1.1",
+        "vite": "^4.4.11",
+        "vite-plugin-singlefile": "^0.13.5",
+        "vue-tsc": "^1.8.19"
+    }
+}
diff --git a/packages/runner/src/App.vue b/packages/runner/src/App.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>SkSL Runner</h1>
+</template>
diff --git a/packages/runner/src/main.ts b/packages/runner/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/packages/runner/tsconfig.app.json b/packages/runner/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
+    "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+    "exclude": ["src/**/__tests__/*"],
+    "compilerOptions": {
+        "composite": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["./src/*"]
+        }
+    }
+}
diff --git a/packages/runner/tsconfig.json b/packages/runner/tsconfig.json
@@ -0,0 +1,11 @@
+{
+    "files": [],
+    "references": [
+        {
+            "path": "./tsconfig.node.json"
+        },
+        {
+            "path": "./tsconfig.app.json"
+        }
+    ]
+}
diff --git a/packages/runner/tsconfig.node.json b/packages/runner/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+    "extends": "@tsconfig/node18/tsconfig.json",
+    "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "types": ["node"]
+    }
+}
diff --git a/packages/runner/vite.config.ts b/packages/runner/vite.config.ts
@@ -0,0 +1,15 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { viteSingleFile } from 'vite-plugin-singlefile'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), viteSingleFile()],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+        },
+    },
+})