refactor: node:fs -> vscode:workspace.fs (#160)

* refactor: `node:fs` -> `vscode:workspace.fs`

* fix: `generateThemes` hook

* style: use explicit `import type`

* chore: pin `@types/vscode`

* chore: prevent node APIs in eslint

* refactor: use `ctx.subscriptions`, optimize types

* fix: await checking for fs stat

.eslintrc.js

@@ -0,0 +1,35 @@
+const { error } = require("node:console");
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  env: {
+    es2021: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended",
+  ],
+  overrides: [],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    project: ["tsconfig.json", "stories/tsconfig.json"],
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "prettier"],
+  rules: {
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-restricted-imports": [
+      "error",
+      { paths: require("node:module").builtinModules },
+    ],
+    "no-restricted-modules": [
+      "error",
+      { paths: require("node:module").builtinModules },
+    ],
+  },
+};

package.json

@@ -16,7 +16,7 @@
     "workspace"
   ],
   "activationEvents": [
-    "*"
+    "onStartupFinished"
   ],
   "capabilities": {
     "untrustedWorkspaces": {
@@ -168,7 +168,7 @@
     "@storybook/react": "^7.4.0",
     "@storybook/react-vite": "^7.4.0",
     "@types/node": "^18.17.12",
-    "@types/vscode": "^1.70.0",
+    "@types/vscode": "~1.70.0",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
     "@vscode/vsce": "^2.21.0",

src/browser.ts

@@ -1,14 +1,18 @@
-import { workspace, ConfigurationChangeEvent, window } from "vscode";
+import {
+  workspace,
+  ConfigurationChangeEvent,
+  window,
+  ExtensionContext,
+} from "vscode";
 
-export const activate = () => {
-  // regenerate the theme files when the config changes
-  workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => {
-    if (event.affectsConfiguration("catppuccin")) {
-      window.showInformationMessage(
-        "VSCode Web doesn't support advanced Catppuccin options at the moment.",
-      );
-    }
-  });
+export const activate = (ctx: ExtensionContext) => {
+  ctx.subscriptions.push(
+    workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => {
+      if (event.affectsConfiguration("catppuccin")) {
+        window.showErrorMessage(
+          "VSCode Web doesn't support advanced Catppuccin options at the moment.",
+        );
+      }
+    }),
+  );
 };
-
-export const deactivate = () => {};

src/hooks/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "no-restricted-imports": "off",
+    "no-restricted-modules": "off"
+  }
+}

src/hooks/generateThemes.ts

@@ -1,18 +1,20 @@
-import * as fs from "fs";
-import path = require("path");
+import * as fs from "fs/promises";
+import * as path from "path";
 import { variants } from "@catppuccin/palette";
 
-import { getThemePaths } from "../helpers";
 import { compileTheme, defaultOptions } from "../theme";
-import { CatppuccinFlavour } from "../types";
+import type { CatppuccinFlavour } from "../types";
 
-const paths = getThemePaths();
+const themeDir = path.join(__dirname, "../../themes");
 const flavours = Object.keys(variants) as CatppuccinFlavour[];
 
 flavours.map((flavour) => {
   const theme = compileTheme(flavour, defaultOptions);
   // ignore error if directory exists
-  fs.mkdir(path.dirname(paths[flavour]), () => {
-    fs.writeFileSync(paths[flavour], JSON.stringify(theme, null, 2));
+  fs.mkdir(themeDir, { recursive: true }).then(() => {
+    fs.writeFile(
+      path.join(themeDir, `${flavour}.json`),
+      JSON.stringify(theme, null, 2),
+    );
   });
 });

src/main.ts

@@ -1,48 +1,64 @@
-import { workspace, ConfigurationChangeEvent, extensions } from "vscode";
-import { getThemePaths } from "./helpers";
+import {
+  ConfigurationChangeEvent,
+  ExtensionContext,
+  Uri,
+  extensions,
+  workspace,
+} from "vscode";
 import utils, { UpdateTrigger } from "./utils";
+import type { ThemePaths } from "./types";
 
-export const activate = () => {
-  const paths = getThemePaths();
+export const activate = async (ctx: ExtensionContext) => {
+  const base = ctx.extensionUri;
+  const paths: ThemePaths = {
+    latte: Uri.joinPath(base, "themes", "latte.json"),
+    frappe: Uri.joinPath(base, "themes", "frappe.json"),
+    macchiato: Uri.joinPath(base, "themes", "macchiato.json"),
+    mocha: Uri.joinPath(base, "themes", "mocha.json"),
+  };
 
   // regenerate on a fresh install if non-default config is set
-  if (utils.isFreshInstall() && !utils.isDefaultConfig()) {
+  if ((await utils.isFreshInstall(ctx)) && !utils.isDefaultConfig()) {
     utils.updateThemes(
       utils.getConfiguration(),
       paths,
       UpdateTrigger.FRESH_INSTALL,
     );
   }
 
-  // regenerate the theme files when the config changes
-  workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => {
-    if (
-      event.affectsConfiguration("workbench.colorTheme") &&
-      extensions.getExtension("catppuccin.catppuccin-vsc-icons")
-    ) {
-      const theme = workspace
+  ctx.subscriptions.push(
+    // regenerate the theme files when the config changes
+    workspace.onDidChangeConfiguration((event) => handler(event, paths)),
+  );
+};
+
+const handler = (event: ConfigurationChangeEvent, paths: ThemePaths) => {
+  const id = "catppuccin.catppuccin-vsc-icons";
+  const iconsInstalled = extensions.getExtension(id).isActive;
+  const iconsAffected = event.affectsConfiguration("workbench.colorTheme");
+
+  if (iconsInstalled && iconsAffected) {
+    const theme = workspace
+      .getConfiguration("workbench")
+      .get<string>("colorTheme");
+    const ctp_themes = {
+      "Catppuccin Latte": "catppuccin-latte",
+      "Catppuccin Frappé": "catppuccin-frappe",
+      "Catppuccin Macchiato": "catppuccin-macchiato",
+      "Catppuccin Mocha": "catppuccin-mocha",
+    };
+    if (Object.keys(ctp_themes).includes(theme)) {
+      workspace
         .getConfiguration("workbench")
-        .get<string>("colorTheme");
-      const ctp_themes = {
-        "Catppuccin Latte": "catppuccin-latte",
-        "Catppuccin Frappé": "catppuccin-frappe",
-        "Catppuccin Macchiato": "catppuccin-macchiato",
-        "Catppuccin Mocha": "catppuccin-mocha",
-      };
-      if (Object.keys(ctp_themes).includes(theme)) {
-        workspace
-          .getConfiguration("workbench")
-          .update("iconTheme", ctp_themes[theme], true);
-      }
+        .update("iconTheme", ctp_themes[theme], true);
     }
-    if (event.affectsConfiguration("catppuccin")) {
-      utils.updateThemes(
-        utils.getConfiguration(),
-        paths,
-        UpdateTrigger.CONFIG_CHANGE,
-      );
-    }
-  });
-};
+  }
 
-export const deactivate = () => {};
+  if (event.affectsConfiguration("catppuccin")) {
+    utils.updateThemes(
+      utils.getConfiguration(),
+      paths,
+      UpdateTrigger.CONFIG_CHANGE,
+    );
+  }
+};

src/theme/extensions/error-lens.ts

@@ -1,4 +1,4 @@
-import { ThemeContext } from "../../types";
+import type { ThemeContext } from "../../types";
 import { opacity } from "../utils";
 
 export default function colors(context: ThemeContext) {

src/theme/extensions/index.ts

@@ -1,4 +1,4 @@
-import { ThemeContext } from "../../types";
+import type { ThemeContext } from "../../types";
 import errorLens from "./error-lens";
 
 export default function (context: ThemeContext) {

src/types/index.d.ts

@@ -1,8 +1,12 @@
+import { labels, variants } from "@catppuccin/palette";
+
+import type { Uri } from "vscode";
+
 export type * from "./textmate-colors";
 export type * from "./workbench-colors";
 export type * from "./token-styling";
 
-export type CatppuccinFlavour = "latte" | "frappe" | "macchiato" | "mocha";
+export type CatppuccinFlavour = keyof typeof variants;
 export type CatppuccinAccent =
   | "rosewater"
   | "flamingo"
@@ -25,35 +29,11 @@ export type CatppuccinBracketMode =
   | "monochromatic"
   | "neovim";
 
-export interface CatppuccinPalette {
+export type CatppuccinPalette = {
   name: CatppuccinFlavour;
-  rosewater: string;
-  flamingo: string;
-  pink: string;
-  mauve: string;
-  red: string;
-  maroon: string;
-  peach: string;
-  yellow: string;
-  green: string;
-  teal: string;
-  sky: string;
-  sapphire: string;
-  blue: string;
-  lavender: string;
-  text: string;
-  subtext1: string;
-  subtext0: string;
-  overlay2: string;
-  overlay1: string;
-  overlay0: string;
-  surface2: string;
-  surface1: string;
-  surface0: string;
-  base: string;
-  mantle: string;
-  crust: string;
-}
+} & {
+  [k in keyof typeof labels]: string;
+};
 
 export type ColorOverrides = {
   all?: Partial<CatppuccinPalette>;
@@ -84,10 +64,10 @@ export type ThemeOptions = {
 };
 
 export type ThemePaths = {
-  latte: string;
-  frappe: string;
-  macchiato: string;
-  mocha: string;
+  latte: Uri;
+  frappe: Uri;
+  macchiato: Uri;
+  mocha: Uri;
 };
 
 export type ThemeContext = {