feat(playground): connect browser engine and language server (VirusTotal#606)

This PR connects the playground end to end.

It wires the playground to the official @virustotal/yara-x package for the engine, moves the browser worker glue for the language server into the playground itself, and connects the editor to the wasm language server worker.

Author: kevinmuoz

.github/workflows/site.yaml

@@ -8,6 +8,7 @@ on:
     - '**'
     paths:
     - 'site/**'
+    - 'playground/**'
     - '.github/workflows/site.yaml'
 
   # Allows you to run this workflow manually from the Actions tab
@@ -40,7 +41,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a  # v4.2.0
       with:
-        node-version: '18'
+        node-version: '22'
         cache: 'npm'
         cache-dependency-path: 'site'
     - name: Setup Pages
@@ -50,6 +51,10 @@ jobs:
       run: |
         cd site
         [[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true
+    - name: Install playground dependencies
+      run: |
+        cd playground
+        npm install
     - name: Build production website
       env:
         # For maximum backward compatibility with Hugo modules
@@ -62,6 +67,15 @@ jobs:
           --gc \
           --minify \
           --environment production
+    - name: Build playground
+      run: |
+        cd playground
+        npm run build
+    - name: Merge playground into Pages artifact
+      run: |
+        rm -rf site/public/playground
+        mkdir -p site/public/playground
+        cp -R playground/dist/. site/public/playground/
     - name: Upload artifact
       uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa  # v3.0.1
       with:

playground/.prettierignore

@@ -0,0 +1,3 @@
+pnpm-lock.yaml
+dist
+node_modules

playground/README.MD

@@ -1,20 +1,11 @@
 # YARA-X Playground
 
-This folder contains the browser playground for YARA-X. The goal of the
-playground is to provide a lightweight web interface for writing, formatting,
-and eventually testing YARA rules directly in the browser.
+This folder contains the browser playground for YARA-X.
 
-The current version is `0.0.0`. At this stage, the focus is on establishing the
-front-end foundation of the playground:
-
-- TypeScript for the application code
-- Lit for the UI
-- Vite for development and builds
-- Monaco-based editor integration for the rule and sample panes
-
-This version is intentionally limited. It is expected to compile and provide
-the basic UI structure, but it is not expected to be fully functional end to
-end yet.
+The playground provides a web interface for writing, formatting, and testing
+YARA rules directly in the browser. It uses the official `@virustotal/yara-x`
+package for the scanning engine and runs the YARA-X language server inside a
+dedicated web worker for editor features.
 
 ## Requirements
 
@@ -42,23 +33,3 @@ pnpm build
 pnpm preview
 pnpm format
 ```
-
-## Project status
-
-At the moment, this folder contains:
-
-- the application shell and layout
-- the editor setup
-- the styling and interaction base
-- the first browser-facing service contracts for the engine and the language
-  server
-
-What is still missing:
-
-- a working browser engine integration
-- a working browser language server integration
-- the final packaging strategy for browser artifacts
-- deployment workflows
-
-The intention is to connect those pieces once the browser packages are ready
-and their public interfaces are stable.

playground/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@codingame/monaco-vscode-editor-api": "^25.1.2",
+    "@virustotal/yara-x": "^0.1.1",
     "lit": "^3.3.2",
     "monaco-languageclient": "^10.7.0",
     "vscode-languageclient": "^9.0.1",