bitrise-io · AndrasEszes · Feb 21, 2025 · Feb 21, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
     "build": "webpack --bail",
     "build:website": "MODE=WEBSITE ANALYTICS=true CLARITY=true DATADOG_RUM=true npm run build",
     "build:plugin": "MODE=CLI ANALYTICS=true npm run build && ./_scripts/compile_api.sh",
-    "start:dev": "webpack-dev-server",
+    "start:dev": "vite",
     "start:base": "concurrently \"npm:start:dev\" \"DEV=true ./_scripts/run_api.sh 4000\"",
     "start": "NODE_ENV=development MODE=CLI npm run start:base",
     "start:website": "NODE_ENV=development MODE=WEBSITE PUBLIC_URL_ROOT=http://localhost:4000 npm run start:base",
@@ -124,6 +124,8 @@
     "@types/underscore": "^1.13.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react-swc": "^3.8.0",
     "@webpack-cli/serve": "^2.0.5",
     "angular-mocks": "1.8.3",
     "compression-webpack-plugin": "^11.1.0",
@@ -167,6 +169,11 @@
     "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.3",
+    "vite": "^6.1.1",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-static-copy": "^2.2.0",
     "webpack": "^5.98.0",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",

diff --git a/source/index.html b/source/index.html
@@ -6,13 +6,15 @@
   <title>Bitrise Workflow Editor</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
   <base href="/" target="_parent" />
-  <link href="<%= htmlWebpackPlugin.options.publicPath %>images/favicons/favicon.ico" rel="icon" sizes="32x32"
-    crossorigin="anonymous" />
-  <link href="<%= htmlWebpackPlugin.options.publicPath %>images/favicons/apple-touch-icon.png" rel="apple-touch-icon"
-    crossorigin="anonymous" />
+
+  <link href="/stylesheets/main.css" rel="stylesheet" crossorigin="anonymous" />
+  <link href="/images/favicons/favicon.ico" rel="icon" sizes="32x32" crossorigin="anonymous" />
+  <link href="/images/favicons/apple-touch-icon.png" rel="apple-touch-icon" crossorigin="anonymous" />
+
+  <script src="/javascripts/index.js" crossorigin="anonymous" type="module"></script>
 </head>
 
-<body ng-app="BitriseWorkflowEditor" ng-cloak>
+<body ng-cloak>
   <r-root-component></r-root-component>
 
   <div class="layout" ng-controller="MainController as mainCtrl" ng-init="mainCtrl.init()" style="display: contents">

diff --git a/source/javascripts/index.js b/source/javascripts/index.js
@@ -3,16 +3,29 @@ import './_apihandler';
 import './_componentRegister';
 import './_serviceRegister';
 
+// Load styles
 import '../stylesheets/main.css';
 
-const ctxs = [
-  // app
-  require.context('./controllers', true),
-  require.context('./components', true),
-  require.context('./services', true),
-  require.context('./directives', true),
-];
+import.meta.glob('./vendor.js', { eager: true });
 
-ctxs.forEach(function (ctx) {
-  ctx.keys().forEach(ctx);
+// Load Angular components in order
+const loadModules = async () => {
+  // Load services first
+  await Promise.all(Object.values(import.meta.glob('./services/*.js')).map((load) => load()));
+
+  // Then components
+  await Promise.all(Object.values(import.meta.glob('./components/*.js')).map((load) => load()));
+
+  // Then directives
+  await Promise.all(Object.values(import.meta.glob('./directives/*.js')).map((load) => load()));
+
+  // Controllers last
+  await Promise.all(Object.values(import.meta.glob('./controllers/*.js')).map((load) => load()));
+};
+
+// Initialize after DOM is ready
+global.$(() => {
+  loadModules().then(() => {
+    angular.bootstrap(document, ['BitriseWorkflowEditor']);
+  });
 });
diff --git a/source/javascripts/vendor.js b/source/javascripts/vendor.js
@@ -18,6 +18,8 @@ import 'esprima';
 
 global.$ = $;
 global._ = _;
+window.$ = $;
+window._ = _;
 
 $(document).ready(function () {
   document.body.addEventListener('DOMSubtreeModified', function () {

diff --git a/source/stylesheets/main.css b/source/stylesheets/main.css
@@ -8,7 +8,7 @@
 @import "_notification-progress-indicator.css";
 @import "_order-by-drag.css";
 
-@import "~monaco-editor/min/vs/editor/editor.main.css";
+@import "monaco-editor/min/vs/editor/editor.main.css";
 
 :focus {
   outline: none;

diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
@@ -7,6 +7,7 @@
     ".eslintrc.js",
     ".storybook/**/*",
     "jest.config.js",
+    "vite.config.ts",
     "webpack.config.js"
   ]
-}
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -0,0 +1,64 @@
+/* eslint-disable no-console */
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+import path from 'path';
+import { readFileSync, existsSync } from 'fs';
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const { version: WFE_VERSION } = require('./package.json');
+
+const CODEBASE = path.resolve(__dirname, 'source');
+const OUTPUT_FOLDER = path.resolve(__dirname, 'build');
+const LD_LOCAL_FILE = path.resolve(__dirname, 'ld.local.json');
+
+const { ANALYTICS, NODE_ENV, MODE, PUBLIC_URL_ROOT, DEV_SERVER_PORT } = process.env;
+const isWebsiteMode = MODE === 'WEBSITE';
+const urlPrefix = isWebsiteMode ? PUBLIC_URL_ROOT : '';
+const publicPath = `${urlPrefix}/${WFE_VERSION}/`;
+
+export default defineConfig({
+  root: CODEBASE,
+  base: publicPath,
+  build: {
+    target: 'es5',
+    outDir: OUTPUT_FOLDER,
+    commonjsOptions: { transformMixedEsModules: true },
+  },
+  server: {
+    port: Number(DEV_SERVER_PORT || 4567),
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'source/javascripts'),
+    },
+    extensions: ['.html', '.js', '.ts', '.tsx', '.css'],
+  },
+  plugins: [react()],
+  define: {
+    global: '{}',
+    'process.env.MODE': JSON.stringify(MODE),
+    'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+    'process.env.ANALYTICS': JSON.stringify(ANALYTICS),
+    'process.env.PUBLIC_URL': JSON.stringify(publicPath),
+    'process.env.WFE_VERSION': JSON.stringify(WFE_VERSION),
+    'window.localFeatureFlags': (() => {
+      if (existsSync(LD_LOCAL_FILE)) {
+        try {
+          return JSON.stringify(JSON.parse(readFileSync(LD_LOCAL_FILE, 'utf-8')));
+        } catch (error) {
+          console.warn('Failed to parse ld.local.json:', error);
+          return '{}';
+        }
+      }
+
+      return '{}';
+    })(),
+  },
+});