[chore] Migrate from cra to vite

sfc-gh-bnisco · sfc-gh-bnisco · commit 26a1518034db · 2025-11-21T13:20:06.000-08:00
diff --git a/NOTICES b/NOTICES
diff --git a/streamlit_bokeh/frontend/.env b/streamlit_bokeh/frontend/.env
@@ -1,6 +1,3 @@
 # Run the component's dev server on :3001
 # (The Streamlit dev server already runs on :3000)
-PORT=3001
-
-# Don't automatically open the web browser on `npm run start`.
-BROWSER=none
+VITE_PORT=3001
diff --git a/streamlit_bokeh/frontend/index.html b/streamlit_bokeh/frontend/index.html
@@ -43,13 +43,14 @@
       type="font/woff2"
       crossorigin
     />
-    <link rel="stylesheet" href="index.css" />
-    <script src="bokeh/bokeh-3.8.0.min.js"></script>
-    <script src="bokeh/bokeh-widgets-3.8.0.min.js"></script>
-    <script src="bokeh/bokeh-tables-3.8.0.min.js"></script>
-    <script src="bokeh/bokeh-api-3.8.0.min.js"></script>
-    <script src="bokeh/bokeh-gl-3.8.0.min.js"></script>
-    <script src="bokeh/bokeh-mathjax-3.8.0.min.js"></script>
+    <link rel="stylesheet" href="/src/v1/index.css" />
+    <script src="%BASE_URL%bokeh/bokeh-3.8.0.min.js"></script>
+    <script src="%BASE_URL%bokeh/bokeh-widgets-3.8.0.min.js"></script>
+    <script src="%BASE_URL%bokeh/bokeh-tables-3.8.0.min.js"></script>
+    <script src="%BASE_URL%bokeh/bokeh-api-3.8.0.min.js"></script>
+    <script src="%BASE_URL%bokeh/bokeh-gl-3.8.0.min.js"></script>
+    <script src="%BASE_URL%bokeh/bokeh-mathjax-3.8.0.min.js"></script>
+    <script type="module" src="/src/v1/index.ts"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/streamlit_bokeh/frontend/package.json b/streamlit_bokeh/frontend/package.json
@@ -4,39 +4,39 @@
   "version": "3.8.0",
   "private": true,
   "dependencies": {
+    "@streamlit/component-v2-lib": "^0.1.0",
     "color2k": "^2.0.3",
-    "react-scripts": "^5.0.1",
     "streamlit-component-lib": "^2.0.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "format": "prettier --write src/**/*.ts",
-    "build": "react-scripts build",
-    "test": "react-scripts test --transformIgnorePatterns='node_modules/(?!streamlit-component-lib)/'",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "build:v1": "yarn clean && yarn typecheck && cross-env NODE_ENV=production vite build --config vite.v1.config.ts && yarn copy:bokeh",
+    "build:v2": "yarn clean && yarn typecheck && cross-env NODE_ENV=production vite build --config vite.v2.config.ts && yarn copy:bokeh",
+    "build": "yarn clean && yarn typecheck && cross-env NODE_ENV=production vite build --config vite.v1.config.ts && cross-env NODE_ENV=production vite build --config vite.v2.config.ts && yarn copy:bokeh",
+    "clean": "rimraf build",
+    "copy:bokeh": "mkdir -p build && cp -R public/bokeh build/",
+    "dev:v1": "cross-env DEV=1 NODE_ENV=development vite --config vite.v1.config.ts",
+    "dev:v2": "yarn copy:bokeh && cross-env DEV=1 NODE_ENV=development vite build --config vite.v2.config.ts --watch",
+    "format": "prettier --write src/**/*.ts vite.*.config.ts vitest.config.ts tsconfig.json index.html",
+    "test:dev": "vitest",
+    "test": "vitest --run",
+    "typecheck": "tsc --noEmit"
   },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "homepage": ".",
   "devDependencies": {
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
+    "@types/node": "^24.9.2",
+    "cross-env": "^10.1.0",
+    "jsdom": "^26.1.0",
     "prettier": "^3.4.2",
-    "typescript": "^4.2.0",
-    "util": "^0.12.5"
+    "rimraf": "^6.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.2.6",
+    "vitest": "^3.2.4"
   },
   "packageManager": "yarn@4.6.0"
 }
diff --git a/streamlit_bokeh/frontend/src/setupTests.js b/streamlit_bokeh/frontend/src/setupTests.js
@@ -14,27 +14,25 @@
  * limitations under the License.
  */
 
-import { TextEncoder, TextDecoder } from 'util';
+import { vi } from "vitest"
 
-Object.assign(global, { TextDecoder, TextEncoder });
-
-const useTheme = jest.fn()
+const useTheme = vi.fn()
 
 window.Bokeh = {
   Themes: {
-    "caliber": null,
-    "dark_minimal": null,
-    "light_minimal": null,
-    "contrast": null,
-    "night_sky": null,
+    caliber: null,
+    dark_minimal: null,
+    light_minimal: null,
+    contrast: null,
+    night_sky: null,
   },
-  require: (name) => {
+  require: name => {
     if (name === "core/properties") {
       return {
-        use_theme: useTheme
+        use_theme: useTheme,
       }
     }
 
     return {}
-  }
+  },
 }
diff --git a/streamlit_bokeh/frontend/src/v1/index.css b/streamlit_bokeh/frontend/src/v1/index.css
@@ -22,19 +22,19 @@ body {
   font-family: "Source Sans Pro";
   font-weight: 400;
   font-style: normal;
-  src: url("./fonts/SourceSansPro-Regular.woff2") format("woff2");
+  src: url("../fonts/SourceSansPro-Regular.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Source Sans Pro";
   font-weight: 600;
   font-style: normal;
-  src: url("./fonts/SourceSansPro-SemiBold.woff2") format("woff2");
+  src: url("../fonts/SourceSansPro-SemiBold.woff2") format("woff2");
 }
 
 @font-face {
   font-family: "Source Sans Pro";
   font-weight: 700;
   font-style: normal;
-  src: url("./fonts/SourceSansPro-Bold.woff2") format("woff2");
+  src: url("../fonts/SourceSansPro-Bold.woff2") format("woff2");
 }
diff --git a/streamlit_bokeh/frontend/src/v1/index.test.ts b/streamlit_bokeh/frontend/src/v1/index.test.ts
@@ -15,6 +15,7 @@
  */
 
 import { Theme } from "streamlit-component-lib"
+import { describe, beforeEach, test, expect } from "vitest"
 
 import {
   getChartDataGenerator,
diff --git a/streamlit_bokeh/frontend/src/v1/index.ts b/streamlit_bokeh/frontend/src/v1/index.ts
diff --git a/streamlit_bokeh/frontend/src/v1/streamlit-theme.ts b/streamlit_bokeh/frontend/src/v1/streamlit-theme.ts
@@ -24,7 +24,7 @@ type AttrValue = string | number
 // Bokeh does not export their Theme Class, so we
 // simulate close to the class provided by Bokeh
 // The relevant class is located here:
-// https://github.com/bokeh/bokeh/blob/3.6.2/bokehjs/src/lib/api/themes.ts#L17
+// https://github.com/bokeh/bokeh/blob/3.8.0/bokehjs/src/lib/api/themes.ts#L17
 class BokehTheme {
   readonly attrs: Record<BokehObjectType, Record<AttrName, AttrValue>>
 
diff --git a/streamlit_bokeh/frontend/src/v2/index.ts b/streamlit_bokeh/frontend/src/v2/index.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Snowflake Inc. (2025)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default function () {
+  // This is a placeholder.
+}
diff --git a/streamlit_bokeh/frontend/src/vite-env.d.ts b/streamlit_bokeh/frontend/src/vite-env.d.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Snowflake Inc. (2025)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// <reference types="vite/client" />
diff --git a/streamlit_bokeh/frontend/tsconfig.json b/streamlit_bokeh/frontend/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -12,7 +12,9 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "noEmit": true
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "types": ["vite/client"]
   },
   "include": ["src"]
 }
diff --git a/streamlit_bokeh/frontend/vite.v1.config.ts b/streamlit_bokeh/frontend/vite.v1.config.ts
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Snowflake Inc. (2025)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { defineConfig, UserConfig } from "vite"
+
+/**
+ * Vite configuration for Streamlit React Component development
+ *
+ * @see https://vitejs.dev/config/ for complete Vite configuration options
+ */
+export default defineConfig(() => {
+  const port = process.env.VITE_PORT ? parseInt(process.env.VITE_PORT) : 3001
+
+  return {
+    base: "./",
+    server: {
+      port,
+    },
+    build: {
+      outDir: "build",
+      copyPublicDir: true,
+    },
+  } satisfies UserConfig
+})
diff --git a/streamlit_bokeh/frontend/vite.v2.config.ts b/streamlit_bokeh/frontend/vite.v2.config.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Snowflake Inc. (2025)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import process from "node:process"
+import { defineConfig, UserConfig } from "vite"
+
+/**
+ * Vite configuration for Streamlit Custom Component v2 development (no React).
+ */
+export default defineConfig(() => {
+  const isProd = process.env.NODE_ENV === "production"
+  const isDev = !isProd
+
+  return {
+    base: "./",
+    define: {
+      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
+    },
+    build: {
+      minify: isDev ? false : "esbuild",
+      outDir: "build/v2",
+      sourcemap: isDev,
+      copyPublicDir: false,
+      lib: {
+        entry: "./src/v2/index.ts",
+        name: "MyComponent",
+        formats: ["es"],
+        fileName: "index-[hash]",
+      },
+      ...(!isDev && {
+        esbuild: {
+          drop: ["console", "debugger"],
+        },
+      }),
+    },
+  } satisfies UserConfig
+})
diff --git a/streamlit_bokeh/frontend/vitest.config.ts b/streamlit_bokeh/frontend/vitest.config.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Snowflake Inc. (2025)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, mergeConfig } from "vitest/config"
+import viteConfig from "./vite.v2.config"
+
+export default defineConfig(configEnv =>
+  mergeConfig(
+    viteConfig(configEnv),
+    defineConfig({
+      test: {
+        environment: "jsdom",
+        setupFiles: ["./src/setupTests.js"],
+      },
+    })
+  )
+)
diff --git a/streamlit_bokeh/frontend/yarn.lock b/streamlit_bokeh/frontend/yarn.lock
