feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

vite.config.ts

@@ -1,9 +1,80 @@
+/// <reference types="vitest" />
+
+/**
+What's going on with library mode?
+
+Glad you asked, here's a quick rundown:
+
+1. vite-plugin-ruby will automatically bring all the entrypoints like dashbord and widget as input to vite.
+2. vite needs to be in library mode to build the SDK as a single file. (UMD) format and set `inlineDynamicImports` to true.
+3. But when setting `inlineDynamicImports` to true, vite will not be able to handle mutliple entrypoints.
+
+This puts us in a deadlock, now there are two ways around this, either add another separate build pipeline to
+the app using vanilla rollup or rspack or something. The second option is to remove sdk building from the main pipeline
+and build it separately using Vite itself, toggled by an ENV variable.
+
+`BUILD_MODE=library bin/vite build` should build only the SDK and save it to `public/packs/js/sdk.js`
+`bin/vite build` will build the rest of the app as usual. But exclude the SDK.
+
+We need to edit the `asset:precompile` rake task to include the SDK in the precompile list.
+*/
+import { defineConfig } from 'vite';
+import ruby from 'vite-plugin-ruby';
 import path from 'path';
-import { defineConfig } from 'vitest/config';
-import Vue2 from '@vitejs/plugin-vue2';
+import vue from '@vitejs/plugin-vue';
+
+const isLibraryMode = process.env.BUILD_MODE === 'library';
+
+const vueOptions = {
+  template: {
+    compilerOptions: {
+      isCustomElement: tag => ['ninja-keys'].includes(tag),
+    },
+  },
+};
 
 export default defineConfig({
-  plugins: [Vue2()],
+  plugins: isLibraryMode ? [] : [ruby(), vue(vueOptions)],
+  build: {
+    rollupOptions: {
+      output: {
+        // [NOTE] when not in library mode, no new keys will be addedd or overwritten
+        // setting dir: isLibraryMode ? 'public/packs' : undefined will not work
+        ...(isLibraryMode
+          ? {
+              dir: 'public/packs',
+              entryFileNames: chunkInfo => {
+                if (chunkInfo.name === 'sdk') {
+                  return 'js/sdk.js';
+                }
+                return '[name].js';
+              },
+            }
+          : {}),
+        inlineDynamicImports: isLibraryMode, // Disable code-splitting for SDK
+      },
+    },
+    lib: isLibraryMode
+      ? {
+          entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'),
+          formats: ['umd'], // UMD format for single file
+          name: 'sdk',
+        }
+      : undefined,
+  },
+  resolve: {
+    alias: {
+      vue: 'vue/dist/vue.esm-bundler.js',
+      components: path.resolve('./app/javascript/dashboard/components'),
+      v3: path.resolve('./app/javascript/v3'),
+      dashboard: path.resolve('./app/javascript/dashboard'),
+      helpers: path.resolve('./app/javascript/shared/helpers'),
+      shared: path.resolve('./app/javascript/shared'),
+      survey: path.resolve('./app/javascript/survey'),
+      widget: path.resolve('./app/javascript/widget'),
+      assets: path.resolve('./app/javascript/dashboard/assets'),
+    },
+  },
   test: {
     environment: 'jsdom',
     include: ['app/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
@@ -27,16 +98,4 @@ export default defineConfig({
     mockReset: true,
     clearMocks: true,
   },
-  resolve: {
-    alias: {
-      dashboard: path.resolve('./app/javascript/dashboard'),
-      widget: path.resolve('./app/javascript/widget'),
-      survey: path.resolve('./app/javascript/survey'),
-      assets: path.resolve('./app/javascript/dashboard/assets'),
-      components: path.resolve('./app/javascript/dashboard/components'),
-      helpers: path.resolve('./app/javascript/shared/helpers'),
-      v3: path.resolve('./app/javascript/v3'),
-      shared: path.resolve('./app/javascript/shared'),
-    },
-  },
 });