Format files

Author: sfc-gh-kmcgrady

.pre-commit-config.yaml

@@ -40,7 +40,7 @@ repos:
         pass_filenames: false
       - id: format-ts-js
         name: Checks that all JS/TS files are formatted correctly
-        entry: cd streamlit_bokeh/frontend && npm run format
+        entry: bash -c 'cd streamlit_bokeh/frontend && npm run format'
         language: system
         always_run: true
         pass_filenames: false

streamlit_bokeh/frontend/package-lock.json

@@ -10,9 +10,6 @@
     "streamlit-component-lib": "^2.0.0",
     "typescript": "^4.2.0"
   },
-  "devDependencies": {
-    "prettier": "^3.4.2"
-  },
   "scripts": {
     "start": "react-scripts start",
     "format": "prettier --write src/**/*.ts",
@@ -37,6 +34,7 @@
   },
   "homepage": ".",
   "devDependencies": {
+    "prettier": "^3.4.2",
     "util": "^0.12.5"
   }
 }

streamlit_bokeh/frontend/package.json

@@ -14,120 +14,120 @@
  * limitations under the License.
  */
 
-import { Theme } from "streamlit-component-lib";
+import { Theme } from "streamlit-component-lib"
 
 import {
   getChartDataGenerator,
   setChartThemeGenerator,
   getChartDimensions,
-} from "./index";
+} from "./index"
 
 describe("getChartDataGenerator", () => {
   let getChartData: (figure: string) => {
-    data: object | null;
-    hasChanged: boolean;
-  };
+    data: object | null
+    hasChanged: boolean
+  }
 
   beforeEach(() => {
-    getChartData = getChartDataGenerator();
-  });
+    getChartData = getChartDataGenerator()
+  })
 
   test("should return parsed data and hasChanged true on first call", () => {
-    const figure = JSON.stringify({ key: "value" });
-    const result = getChartData(figure);
+    const figure = JSON.stringify({ key: "value" })
+    const result = getChartData(figure)
 
-    expect(result).toEqual({ data: { key: "value" }, hasChanged: true });
-  });
+    expect(result).toEqual({ data: { key: "value" }, hasChanged: true })
+  })
 
   test("should return hasChanged false for the same figure", () => {
-    const figure = JSON.stringify({ key: "value" });
-    getChartData(figure);
-    const result = getChartData(figure);
+    const figure = JSON.stringify({ key: "value" })
+    getChartData(figure)
+    const result = getChartData(figure)
 
-    expect(result).toEqual({ data: { key: "value" }, hasChanged: false });
-  });
+    expect(result).toEqual({ data: { key: "value" }, hasChanged: false })
+  })
 
   test("should return hasChanged true for a different figure", () => {
-    getChartData(JSON.stringify({ key: "value" }));
-    const newFigure = JSON.stringify({ key: "newValue" });
-    const result = getChartData(newFigure);
+    getChartData(JSON.stringify({ key: "value" }))
+    const newFigure = JSON.stringify({ key: "newValue" })
+    const result = getChartData(newFigure)
 
-    expect(result).toEqual({ data: { key: "newValue" }, hasChanged: true });
-  });
-});
+    expect(result).toEqual({ data: { key: "newValue" }, hasChanged: true })
+  })
+})
 
 // Unit tests for setChartThemeGenerator
 describe("setChartThemeGenerator", () => {
-  let setChartTheme: (newTheme: string, newAppTheme: Theme) => boolean;
+  let setChartTheme: (newTheme: string, newAppTheme: Theme) => boolean
 
   beforeEach(() => {
-    setChartTheme = setChartThemeGenerator();
-  });
+    setChartTheme = setChartThemeGenerator()
+  })
 
   test("should apply the theme when theme changes", () => {
-    const newTheme = "dark";
+    const newTheme = "dark"
     const newAppTheme = {
       textColor: "white",
       backgroundColor: "black",
       secondaryBackgroundColor: "gray",
-    } as Theme;
-    const result = setChartTheme(newTheme, newAppTheme);
+    } as Theme
+    const result = setChartTheme(newTheme, newAppTheme)
     const { use_theme: useTheme } =
-      global.window.Bokeh.require("core/properties");
+      global.window.Bokeh.require("core/properties")
 
-    expect(result).toBe(true);
-    expect(useTheme).toHaveBeenCalled();
-  });
+    expect(result).toBe(true)
+    expect(useTheme).toHaveBeenCalled()
+  })
 
   test("should not reapply the theme if it's the same", () => {
-    const newTheme = "dark";
+    const newTheme = "dark"
     const newAppTheme = {
       textColor: "white",
       backgroundColor: "black",
       secondaryBackgroundColor: "gray",
-    } as Theme;
-    setChartTheme(newTheme, newAppTheme);
-    const result = setChartTheme(newTheme, newAppTheme);
+    } as Theme
+    setChartTheme(newTheme, newAppTheme)
+    const result = setChartTheme(newTheme, newAppTheme)
 
-    expect(result).toBe(false);
-  });
+    expect(result).toBe(false)
+  })
 
   test("should apply Streamlit theme when appropriate", () => {
-    const newTheme = "streamlit";
+    const newTheme = "streamlit"
     const newAppTheme = {
       textColor: "white",
       backgroundColor: "black",
       secondaryBackgroundColor: "gray",
-    } as Theme;
-    const result = setChartTheme(newTheme, newAppTheme);
+    } as Theme
+    const result = setChartTheme(newTheme, newAppTheme)
 
-    expect(result).toBe(true);
-  });
-});
+    expect(result).toBe(true)
+  })
+})
 
 describe("getChartDimensions", () => {
   test("should return default dimensions when no width/height attributes are provided", () => {
-    const plot = { attributes: {} };
-    const result = getChartDimensions(plot, false);
-    expect(result).toEqual({ width: 600, height: 600 });
-  });
+    const plot = { attributes: {} }
+    const result = getChartDimensions(plot, false)
+    expect(result).toEqual({ width: 600, height: 600 })
+  })
 
   test("should return provided dimensions when width/height attributes are set", () => {
-    const plot = { attributes: { width: 800, height: 400 } };
-    const result = getChartDimensions(plot, false);
-    expect(result).toEqual({ width: 800, height: 400 });
-  });
+    const plot = { attributes: { width: 800, height: 400 } }
+    const result = getChartDimensions(plot, false)
+    expect(result).toEqual({ width: 800, height: 400 })
+  })
 
   test("should calculate new dimensions based on container width", () => {
     Object.defineProperty(document.documentElement, "clientWidth", {
       configurable: true,
       writable: true,
       value: 1200, // Set the desired value
-    });
-
-    const plot = { attributes: { width: 800, height: 400 } };
-    const result = getChartDimensions(plot, true);
-    expect(result.width).toBe(1200);
-    expect(result.height).toBeCloseTo(600);
-  });
-});
+    })
+
+    const plot = { attributes: { width: 800, height: 400 } }
+    const result = getChartDimensions(plot, true)
+    expect(result.width).toBe(1200)
+    expect(result.height).toBeCloseTo(600)
+  })
+})