Merge pull request #34 from georgeistes/ui-ux-patch-1

CI workflow and esbuild

Author: supreme-gg-gg

.github/workflows/publish.yml

@@ -0,0 +1,25 @@
+# .github/workflows/publish.yml
+name: Publish VSCode Extension
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - run: npm install
+
+      - name: Publish Extension
+        run: npm run deploy
+        env:
+          VSCE_PAT: ${{ secrets.VSCE_PAT }}

.github/workflows/test.yml

@@ -0,0 +1,32 @@
+# .github/workflows/test.yml
+name: Test VSCode Extension
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+
+      - run: npm install
+
+      - name: Run tests (Linux)
+        if: runner.os == 'Linux'
+        run: xvfb-run -a npm test
+
+      - name: Run tests (non-Linux)
+        if: runner.os != 'Linux'
+        run: npm test

.vscode/launch.json

@@ -10,7 +10,7 @@
       "type": "extensionHost",
       "request": "launch",
       "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
-      "outFiles": ["${workspaceFolder}/out/**/*.js"],
+      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
       "preLaunchTask": "${defaultBuildTask}"
     }
   ]

.vscodeignore

@@ -4,20 +4,25 @@
 
 # Source code
 src/**
-out/test/**
+out/**
 **/tsconfig.json
 **/.eslintrc.json
 **/*.map
 **/*.ts
+live2d-container/**
+recordings/**
 
 # Development files
 .vscode/**
 .vscode-test.mjs
 .vscode-test/**
-node_modules/**
-test/**
-live2d-container/node_modules/**
+**/node_modules/**
+**/test/**
 .env
+eslint.config.mjs
+esbuild.js
+build.js
+overlay-build.js
 
 # Build tools and config
 .github/**

README.md

@@ -10,7 +10,7 @@
 Cheerleader brings a fun, interactive anime assistant to your VS Code environment that helps you stay motivated, productive, and engaged while coding with editor support and AI mentor.
 
 <p align="center">
-   <img src="assets/screenshots/demo.png" alt="Coding with Cheerleader" width="600">
+   <img src="resources/screenshots/demo.png" alt="Coding with Cheerleader" width="600">
    <br>
    <em>Coding with your anime companion</em>
 </p>
@@ -30,7 +30,7 @@ Cheerleader brings a fun, interactive anime assistant to your VS Code environmen
 Some background features can be configured in the sidebar, refer to the [Setup and Configuration](#setup-and-configuration) section below. Other features can be accessed through the overlay UI:
 
 <p align="center">
-   <img src="assets/screenshots/buttons.png" alt="Try out interactive features" width="600">
+   <img src="resources/screenshots/buttons.png" alt="Try out interactive features" width="600">
    <br>
    <em>Try out interactive features!</em>
 </p>
@@ -67,6 +67,14 @@ You can configure the following settings in the sidebar (with cheerleader icon):
 
 We are officially listed on the VSCode Marketplace. Just search for "Cheerleader" in the extensions tab of VSCode and install it from there.
 
+### From VSIX
+
+We provide a packaged version of the extension for every major and minor release. You can find the latest version and download the `cheerleader-<version>.vsix` file from the [Releases]() page.
+
+Then, open VSCode and go to the extensions tab. Under more options, select "Install from VSIX" and select the `.vsix` file you just built to install it.
+
+<img src="resources/screenshots/install.png" alt="Install from VSIX" width="500">
+
 ### From Source
 
 `node.js` and `npm` are required for installing from source. You can install them from npm's [official website](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).
@@ -102,7 +110,7 @@ We are officially listed on the VSCode Marketplace. Just search for "Cheerleader
    vsce package
    ```
 
-6. Open VSCode and go to the extensions tab. Under more options, select "Install from VSIX" and select the `.vsix` file you just built to install it.
+6. This tool will generate a `.vsix` file in the current directory. You can then install it in VSCode following the instructions in [From VSIX](#from-vsix).
 
 ## Commands Catalog
 

assets/cheerleader_icon.png

@@ -0,0 +1,89 @@
+const esbuild = require("esbuild");
+const fs = require("fs-extra");
+const path = require("path");
+const production = process.argv.includes("--production");
+const watch = process.argv.includes("--watch");
+
+async function main() {
+  // First, clear the dist directory
+  await fs.emptyDir("./dist");
+  
+  // Bundle the main extension
+  const ctx = await esbuild.context({
+    entryPoints: ["src/extension.ts"],
+    bundle: true,
+    format: "cjs",
+    minify: production,
+    sourcemap: !production,
+    sourcesContent: false,
+    platform: "node",
+    outfile: "dist/extension.js",
+    external: [
+      "vscode",
+      "mock-aws-s3",
+      "aws-sdk",
+      "nock",
+      "@mapbox/node-pre-gyp",
+      // "@ffprobe-installer/",
+    ],
+    logLevel: "warning",
+    plugins: [esbuildProblemMatcherPlugin],
+  });
+
+  if (watch) {
+    await ctx.watch();
+  } else {
+    await ctx.rebuild();
+    await ctx.dispose();
+  }
+
+  // Copy package.json and update it if needed
+  await fs.copy("package.json", "dist/package.json");
+  
+  // Build the overlay app using the separate build script
+  console.log("Building overlay app...");
+  const { exec } = require("child_process");
+  return new Promise((resolve, reject) => {
+    exec(`node overlay-build.js${production ? " --production" : ""}`, (error, stdout, stderr) => {
+      if (error) {
+        console.error(`Overlay build error: ${error.message}`);
+        reject(error);
+        return;
+      }
+      if (stderr) {
+        console.error(`Overlay build stderr: ${stderr}`);
+      }
+      console.log(stdout);
+      resolve();
+    });
+  }).then(() => {
+    console.log("Main extension and overlay build complete!");
+  });
+}
+
+/**
+ * @type {import('esbuild').Plugin}
+ */
+const esbuildProblemMatcherPlugin = {
+  name: "esbuild-problem-matcher",
+  setup(build) {
+    build.onStart(() => {
+      console.log("[watch] build started");
+    });
+    build.onEnd((result) => {
+      result.errors.forEach(({ text, location }) => {
+        console.error(`✘ [ERROR] ${text}`);
+        if (location == null) return;
+        console.error(
+          `    ${location.file}:${location.line}:${location.column}:`
+        );
+      });
+      console.log("[watch] build finished");
+    });
+  },
+};
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

build.js

@@ -0,0 +1,78 @@
+const esbuild = require("esbuild");
+const fs = require("fs-extra");
+const path = require("path");
+const production = process.argv.includes("--production");
+
+async function main() {
+  // Ensure output directory exists
+  await fs.ensureDir("./dist/live2d-container");
+  
+  // Bundle the Electron main process
+  await esbuild.build({
+    entryPoints: ["live2d-container/main.js"],
+    bundle: true,
+    platform: "node",
+    target: ["node16"],
+    minify: production,
+    sourcemap: !production,
+    outfile: "dist/live2d-container/main.js",
+    external: ["electron"],
+    logLevel: "info"
+  });
+
+  // Bundle the Electron preload script
+  await esbuild.build({
+    entryPoints: ["live2d-container/preload.js"],
+    bundle: true,
+    platform: "node",
+    target: ["node16"],
+    minify: production,
+    sourcemap: !production,
+    outfile: "dist/live2d-container/preload.js",
+    external: ["electron"],
+    logLevel: "info"
+  });
+
+  // Bundle the Electron renderer process (named index.js)
+  await esbuild.build({
+    entryPoints: ["live2d-container/index.js"],
+    bundle: true,
+    platform: "browser",
+    target: ["chrome90"],
+    minify: production,
+    sourcemap: !production,
+    outfile: "dist/live2d-container/index.js",
+    external: ["electron"],
+    logLevel: "info"
+  });
+  
+  // Copy any HTML files
+  const htmlFiles = await fs.readdir("live2d-container")
+    .then(files => files.filter(file => file.endsWith(".html")));
+  
+  for (const htmlFile of htmlFiles) {
+    await fs.copy(
+      path.join("live2d-container", htmlFile),
+      path.join("dist/live2d-container", htmlFile)
+    );
+  }
+  
+  // Copy all the .css files
+  const cssFiles = await fs.readdir("live2d-container")
+    .then(files => files.filter(file => file.endsWith(".css")));
+  for (const cssFile of cssFiles) {
+    await fs.copy(
+      path.join("live2d-container", cssFile),
+      path.join("dist/live2d-container", cssFile)
+    );
+  }
+
+  await fs.copy("live2d-container/package.json", "dist/live2d-container/package.json");
+  
+  console.log("Overlay build complete!");
+}
+
+main().catch(error => {
+  console.error("Build failed:", error);
+  process.exit(1);
+});