Merge pull request Budibase#15072 from Budibase/client-vite

Convert client to use vite instead of rollup

packages/client/package.json

@@ -15,8 +15,8 @@
     "./manifest.json": "./manifest.json"
   },
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -cw"
+    "build": "vite build",
+    "dev": "vite build --watch"
   },
   "dependencies": {
     "@budibase/bbui": "0.0.0",
@@ -36,19 +36,9 @@
     "svelte-spa-router": "^4.0.1"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-image": "^3.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "postcss": "^8.4.35",
-    "rollup": "^4.9.6",
-    "rollup-plugin-json": "^4.0.0",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-svelte": "^7.1.6",
-    "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^5.12.0"
+    "@sveltejs/vite-plugin-svelte": "1.4.0",
+    "vite": "^4.5.0",
+    "vite-plugin-css-injected-by-js": "3.5.2"
   },
   "resolutions": {
     "loader-utils": "1.4.1"

packages/client/src/index.js

@@ -10,7 +10,7 @@ import {
   eventStore,
   hoverStore,
 } from "./stores"
-import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
+import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 import { get } from "svelte/store"
 import { initWebsocket } from "./websocket.js"
 

packages/client/tsconfig.json

@@ -3,6 +3,10 @@
     "allowJs": true,
     "strict": true,
     "outDir": "dist",
+    "allowSyntheticDefaultImports": true,
+    "target": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
     "paths": {
       "@budibase/*": [
         "../*/src/index.ts",
@@ -12,6 +16,5 @@
       ],
       "*": ["./src/*"]
     }
-  },
-  "include": ["src/**/*"]
+  }
 }

packages/client/vite.config.mjs

@@ -0,0 +1,89 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte"
+import { defineConfig } from "vite"
+import path from "path"
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
+
+const ignoredWarnings = [
+  "unused-export-let",
+  "css-unused-selector",
+  "module-script-reactive-declaration",
+  "a11y-no-onchange",
+  "a11y-click-events-have-key-events",
+]
+
+export default defineConfig(({ mode }) => {
+  const isProduction = mode === "production"
+
+  return {
+    server: {
+      open: false,
+    },
+    build: {
+      lib: {
+        entry: "src/index.js",
+        formats: ["iife"],
+        outDir: "dist",
+        name: "budibase_client",
+        fileName: () => "budibase-client.js",
+        minify: isProduction,
+      },
+    },
+    plugins: [
+      svelte({
+        emitCss: true,
+        onwarn: (warning, handler) => {
+          // Ignore some warnings
+          if (!ignoredWarnings.includes(warning.code)) {
+            handler(warning)
+          }
+        },
+      }),
+      cssInjectedByJsPlugin(),
+    ],
+    resolve: {
+      dedupe: ["svelte", "svelte/internal"],
+      alias: [
+        {
+          find: "manifest.json",
+          replacement: path.resolve("./manifest.json"),
+        },
+        {
+          find: "api",
+          replacement: path.resolve("./src/api"),
+        },
+        {
+          find: "components",
+          replacement: path.resolve("./src/components"),
+        },
+        {
+          find: "stores",
+          replacement: path.resolve("./src/stores"),
+        },
+        {
+          find: "utils",
+          replacement: path.resolve("./src/utils"),
+        },
+        {
+          find: "constants",
+          replacement: path.resolve("./src/constants"),
+        },
+        {
+          find: "sdk",
+          replacement: path.resolve("./src/sdk"),
+        },
+        {
+          find: "@budibase/types",
+          replacement: path.resolve("../types/src"),
+        },
+        {
+          find: "@budibase/shared-core",
+          replacement: path.resolve("../shared-core/src"),
+        },
+        {
+          find: "@budibase/bbui",
+          replacement: path.resolve("../bbui/src"),
+        },
+      ],
+    },
+  }
+})