fix(extension): setup CI and minor improvements (#142)

Author: Nemikolh

.github/workflows/ci.yaml

@@ -47,3 +47,15 @@ jobs:
         run: |
           pnpm run docs:build
           pnpm run demo:build
+
+  extension:
+    name: VSCode Extension
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup-and-build
+      - name: Build extension
+        run: |
+          pnpm run extension:build

extensions/vscode/.vscode-test.mjs

@@ -109,9 +109,9 @@
     "__dev": "pnpm run esbuild-base -- --sourcemap --watch",
     "__vscode:prepublish": "pnpm run esbuild-base -- --minify",
     "__build": "vsce package",
-    "compile": "pnpm run check-types && node build.mjs",
-    "check-types": "tsc --noEmit",
     "dev": "node build.mjs --watch",
+    "build": "pnpm run check-types && node build.mjs",
+    "check-types": "tsc --noEmit",
     "vscode:prepublish": "pnpm run package",
     "package": "pnpm run check-types && node build.mjs --production"
   },
@@ -123,8 +123,6 @@
     "@types/mocha": "^10.0.6",
     "@types/node": "20.14.11",
     "@types/vscode": "^1.80.0",
-    "@vscode/test-cli": "^0.0.9",
-    "@vscode/test-electron": "^2.4.0",
     "esbuild": "^0.21.5",
     "execa": "^9.2.0",
     "typescript": "^5.4.5"

extensions/vscode/package.json

@@ -19,10 +19,11 @@ export async function addLesson(parent: Lesson) {
   const lessonFolderPath = await createUnitFolder(parent.path, lessonNumber, lessonName, 'lesson');
 
   await vscode.workspace.fs.createDirectory(vscode.Uri.file(`${lessonFolderPath}/_files`));
+  await vscode.workspace.fs.createDirectory(vscode.Uri.file(`${lessonFolderPath}/_solution`));
 
   await cmd.refresh();
 
-  return navigateToUnit(lessonFolderPath, 'lesson', lessonName);
+  return navigateToUnit(lessonFolderPath, 'lesson');
 }
 
 export async function addChapter(parent: Lesson) {
@@ -32,7 +33,7 @@ export async function addChapter(parent: Lesson) {
 
   const chapterFolderPath = await createUnitFolder(parent.path, chapterNumber, chapterName, 'chapter');
 
-  await navigateToUnit(chapterFolderPath, 'chapter', chapterName);
+  await navigateToUnit(chapterFolderPath, 'chapter');
 
   await cmd.refresh();
 }
@@ -57,22 +58,14 @@ async function createUnitFolder(parentPath: string, unitNumber: number, unitName
 
   await vscode.workspace.fs.writeFile(
     vscode.Uri.file(`${unitFolderPath}/${metaFile}`),
-    new TextEncoder().encode(`---\ntitle: ${unitName}\ntype: ${unitType}\n---\n`),
+    new TextEncoder().encode(`---\ntype: ${unitType}\ntitle: ${unitName}\n---\n`),
   );
 
   return unitFolderPath;
 }
 
-async function navigateToUnit(path: string, unitType: LessonType, title: string) {
+async function navigateToUnit(path: string, unitType: LessonType) {
   const metaFile = unitType === 'lesson' ? 'content.mdx' : 'meta.md';
 
-  return cmd.goto(
-    path,
-    {
-      _path: `${path}/${metaFile}`,
-      type: unitType,
-      title,
-    },
-    true,
-  );
+  return cmd.goto(`${path}/${metaFile}`);
 }

extensions/vscode/src/commands/tutorialkit.add.ts

@@ -1,22 +1,13 @@
 import * as vscode from 'vscode';
-import { Lesson } from '../models/Lesson';
 
-export default (path: string, meta: Lesson['metadata'], openFile = false) => {
-  vscode.commands
-    .executeCommand('revealInExplorer', vscode.Uri.file(path))
-    .then(() => {
-      if (openFile) {
-        vscode.workspace.openTextDocument(meta!._path).then((document) => {
-          vscode.window.showTextDocument(document);
-        });
-      }
-    })
-    .then(() => {
-      setTimeout(
-        () => {
-          vscode.commands.executeCommand('tutorialkit-lessons-tree.focus');
-        },
-        meta?.type === 'lesson' ? 30 : 0,
-      );
-    });
+export default async (path: string | undefined) => {
+  if (!path) {
+    return;
+  }
+
+  const document = await vscode.workspace.openTextDocument(path);
+
+  await vscode.window.showTextDocument(document, {
+    preserveFocus: true,
+  });
 };

extensions/vscode/src/commands/tutorialkit.goto.ts

@@ -6,9 +6,8 @@ import { cmd } from '../commands';
 import { Lesson } from '../models/Lesson';
 import { getIcon } from '../utils/getIcon';
 
-// import isTutorialKitWorkspace from '../utils/isTutorialKit';
-
 const metadataFiles = ['meta.md', 'meta.mdx', 'content.md', 'content.mdx'];
+
 export const tutorialMimeType = 'application/tutorialkit.unit';
 
 let lessonsTreeDataProvider: LessonsTreeDataProvider;
@@ -22,7 +21,6 @@ export function setLessonsTreeDataProvider(provider: LessonsTreeDataProvider) {
 
 export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson> {
   private _lessons: Lesson[] = [];
-  private _isTutorialKitWorkspace = false;
 
   constructor(
     private readonly _workspaceRoot: vscode.Uri,
@@ -34,10 +32,9 @@ export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson>
   private _loadLessons(): void {
     try {
       const tutorialFolderPath = vscode.Uri.joinPath(this._workspaceRoot, 'src', 'content', 'tutorial').fsPath;
-      this._isTutorialKitWorkspace = true;
       this._lessons = this._loadLessonsFromFolder(tutorialFolderPath);
     } catch {
-      this._isTutorialKitWorkspace = false;
+      // do nothing
     }
   }
 
@@ -91,12 +88,10 @@ export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson>
 
     treeItem.contextValue = lesson.metadata?.type;
 
-    const shouldOpenFile = lesson.metadata?.type === 'lesson';
-
     treeItem.command = {
       command: cmd.goto.command,
       title: 'Go to the lesson',
-      arguments: [lesson.path, lesson.metadata, shouldOpenFile],
+      arguments: [lesson.metadata?._path],
     };
 
     treeItem.iconPath =
@@ -115,52 +110,5 @@ export class LessonsTreeDataProvider implements vscode.TreeDataProvider<Lesson>
 }
 
 export async function useLessonTree() {
-  /**
-   * `
-   * vscode.workspace.onDidChangeWorkspaceFolders((event) => {
-   *   event.added.forEach((folder) => {
-   *     if (isTutorialKitWorkspace(folder)) {
-   *     }
-   *   });
-   * });
-   */
-
-  // vscode.commands.executeCommand('setContext', 'tutorialkit:tree', true);
-
   cmd.initialize();
-
-  /**
-   * `
-   * const tutorialWorkpaces = (vscode.workspace.workspaceFolders || []).filter(
-   *   isTutorialKitWorkspace,
-   * );
-   * const selectedWorkspace =
-   *   tutorialWorkpaces.length === 1
-   *     ? tutorialWorkpaces[0]
-   *     : await vscode.window
-   *         .showQuickPick(
-   *           tutorialWorkpaces.map((workspace) => workspace.name),
-   *           {
-   *             placeHolder: 'Select a workspace',
-   *           },
-   *         )
-   *         .then((selected) =>
-   *           tutorialWorkpaces.find((workspace) => workspace.name === selected),
-   *         );
-   */
-
-  /**
-   * `
-   * if (selectedWorkspace) {
-   *   setLessonsTreeDataProvider(
-   *     new LessonsTreeDataProvider(selectedWorkspace.uri, context),
-   *   );
-   *   context.subscriptions.push(
-   *     vscode.window.createTreeView('tutorialkit-lessons-tree', {
-   *       treeDataProvider: getLessonsTreeDataProvider(),
-   *       canSelectMany: true,
-   *     }),
-   *   );
-   * }
-   */
 }

extensions/vscode/src/test/extension.test.ts

@@ -1,15 +1,12 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "module": "Node16",
     "target": "ES2022",
-    "outDir": "out",
+    "outDir": "dist",
     "lib": ["ES2022"],
+    "verbatimModuleSyntax": false,
     "sourceMap": true,
-    "rootDir": "src",
-    "strict": true /* enable all strict type-checking options */
-    /* Additional Checks */
-    // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-    // "noUnusedParameters": true,  /* Report errors on unused parameters. */
+    "rootDir": "src"
   }
 }

extensions/vscode/src/views/lessonsTree.ts

@@ -7,6 +7,7 @@
     "clean": "./scripts/clean.sh",
     "prepare": "is-ci || husky install",
     "extension:dev": "pnpm run --filter=tutorialkit-vscode dev",
+    "extension:build": "pnpm run --filter=tutorialkit-vscode build",
     "template:dev": "TUTORIALKIT_DEV=true pnpm run build && pnpm run --filter=tutorialkit-starter dev",
     "template:build": "pnpm run build && pnpm run --filter=tutorialkit-starter build",
     "cli:build-release": "pnpm run --filter=tutorialkit build-release",