Merge pull request #1018 from zed-industries/generate-themes-on-build

Remove checked-in theme JSON files

.github/workflows/ci.yml

@@ -31,6 +31,11 @@ jobs:
           target: x86_64-apple-darwin
           profile: minimal
 
+      - name: Install Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
       - name: Checkout repo
         uses: actions/checkout@v2
         with:

.gitignore

@@ -6,3 +6,4 @@
 /crates/collab/.env.toml
 /crates/collab/static/styles.css
 /vendor/bin
+/assets/themes/*.json

assets/keymaps/default.json

@@ -210,7 +210,6 @@
         "bindings": {
             "cmd-shift-F": "project_search::Deploy",
             "cmd-k cmd-t": "theme_selector::Toggle",
-            "cmd-k t": "theme_selector::Reload",
             "cmd-k cmd-s": "zed::OpenKeymap",
             "cmd-t": "project_symbols::Toggle",
             "cmd-p": "file_finder::Toggle",

crates/theme_selector/src/theme_selector.rs

@@ -23,7 +23,6 @@ actions!(theme_selector, [Toggle, Reload]);
 
 pub fn init(cx: &mut MutableAppContext) {
     cx.add_action(ThemeSelector::toggle);
-    cx.add_action(ThemeSelector::reload);
     Picker::<ThemeSelector>::init(cx);
 }
 
@@ -73,9 +72,9 @@ impl ThemeSelector {
         });
     }
 
-    fn reload(workspace: &mut Workspace, _: &Reload, cx: &mut ViewContext<Workspace>) {
+    #[cfg(debug_assertions)]
+    pub fn reload(themes: Arc<ThemeRegistry>, cx: &mut MutableAppContext) {
         let current_theme_name = cx.global::<Settings>().theme.name.clone();
-        let themes = workspace.themes();
         themes.clear();
         match themes.get(&current_theme_name) {
             Ok(theme) => {

crates/zed/build.rs

@@ -1,3 +1,31 @@
+use std::process::Command;
+
 fn main() {
     println!("cargo:rustc-env=MACOSX_DEPLOYMENT_TARGET=10.14");
+
+    let output = Command::new("npm")
+        .current_dir("../../styles")
+        .args(["ci"])
+        .output()
+        .expect("failed to run npm");
+    if !output.status.success() {
+        panic!(
+            "failed to install theme dependencies {}",
+            String::from_utf8_lossy(&output.stderr)
+        );
+    }
+
+    let output = Command::new("npm")
+        .current_dir("../../styles")
+        .args(["run", "build-themes"])
+        .output()
+        .expect("failed to run npm");
+    if !output.status.success() {
+        panic!(
+            "build-themes script failed {}",
+            String::from_utf8_lossy(&output.stderr)
+        );
+    }
+
+    println!("cargo:rerun-if-changed=../../styles");
 }

crates/zed/src/main.rs

@@ -162,6 +162,8 @@ fn main() {
             cx.font_cache().clone(),
         );
 
+        cx.spawn(|cx| watch_themes(fs.clone(), themes.clone(), cx))
+            .detach();
         cx.spawn(|cx| watch_keymap_file(keymap_file, cx)).detach();
 
         let settings = cx.background().block(settings_rx.next()).unwrap();
@@ -440,6 +442,43 @@ fn load_embedded_fonts(app: &App) {
         .unwrap();
 }
 
+#[cfg(debug_assertions)]
+async fn watch_themes(
+    fs: Arc<dyn Fs>,
+    themes: Arc<ThemeRegistry>,
+    mut cx: AsyncAppContext,
+) -> Option<()> {
+    let mut events = fs
+        .watch("styles/src".as_ref(), Duration::from_millis(100))
+        .await;
+    while let Some(_) = events.next().await {
+        let output = Command::new("npm")
+            .current_dir("styles")
+            .args(["run", "build-themes"])
+            .output()
+            .await
+            .log_err()?;
+        if output.status.success() {
+            cx.update(|cx| theme_selector::ThemeSelector::reload(themes.clone(), cx))
+        } else {
+            eprintln!(
+                "build-themes script failed {}",
+                String::from_utf8_lossy(&output.stderr)
+            );
+        }
+    }
+    Some(())
+}
+
+#[cfg(not(debug_assertions))]
+async fn watch_themes(
+    _fs: Arc<dyn Fs>,
+    _themes: Arc<ThemeRegistry>,
+    _cx: AsyncAppContext,
+) -> Option<()> {
+    None
+}
+
 fn load_config_files(
     app: &App,
     fs: Arc<dyn Fs>,

script/build-themes

@@ -1,7 +0,0 @@
-#!/bin/bash
-
-set -e
-
-cd styles
-npm install
-npm run build

styles/nodemon.json

@@ -1,8 +0,0 @@
-{
-    "watch": [
-        "./**/*"
-    ],
-    "ext": "ts",
-    "ignore": [],
-    "exec": "ts-node src/buildThemes.ts"
-}

styles/package.json

@@ -6,8 +6,7 @@
     "scripts": {
         "build": "npm run build-themes && npm run build-tokens",
         "build-themes": "ts-node ./src/buildThemes.ts",
-        "build-tokens": "ts-node ./src/buildTokens.ts",
-        "watch": "nodemon"
+        "build-tokens": "ts-node ./src/buildTokens.ts"
     },
     "author": "",
     "license": "ISC",
@@ -16,7 +15,6 @@
         "@types/node": "^17.0.23",
         "case-anything": "^2.1.10",
         "chroma-js": "^2.4.2",
-        "ts-node": "^10.7.0",
-        "nodemon": "^2.0.15"
+        "ts-node": "^10.7.0"
     }
 }

styles/src/buildThemes.ts

@@ -1,23 +1,30 @@
 import * as fs from "fs";
 import * as path from "path";
+import { tmpdir } from 'os';
 import app from "./styleTree/app";
 import themes from "./themes";
 import snakeCase from "./utils/snakeCase";
 
 const themeDirectory = `${__dirname}/../../assets/themes/`;
+const tempDirectory = fs.mkdtempSync(path.join(tmpdir(), 'build-themes'));
 
 // Clear existing themes
 for (const file of fs.readdirSync(themeDirectory)) {
-  fs.unlinkSync(path.join(themeDirectory, file));
+  if (file.endsWith('.json')) {
+    const name = file.replace(/\.json$/, '');
+    if (!themes.find(theme => theme.name === name)) {
+      fs.unlinkSync(path.join(themeDirectory, file));
+    }
+  }
 }
 
 // Write new themes to theme directory
 for (let theme of themes) {
   let styleTree = snakeCase(app(theme));
   let styleTreeJSON = JSON.stringify(styleTree, null, 2);
-  let outPath = path.resolve(
-    `${__dirname}/../../assets/themes/${theme.name}.json`
-  );
-  fs.writeFileSync(outPath, styleTreeJSON);
+  let tempPath = path.join(tempDirectory, `${theme.name}.json`);
+  let outPath = path.join(themeDirectory, `${theme.name}.json`);
+  fs.writeFileSync(tempPath, styleTreeJSON);
+  fs.renameSync(tempPath, outPath);
   console.log(`- ${outPath} created`);
 }