snapcraft.io/vite.config.js at 2f98b813ef4a4a3b873ebfd87e2d09aa52943c49 · canonical/snapcraft.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import react from "@vitejs/plugin-react-swc";
import { defineConfig, loadEnv } from "vite";
import autoprefixer from "autoprefixer";
import { execSync } from "node:child_process";

/**
 * Plugin that automatically detects and injects entry points based on the
 */
const flaskViteImportPlugin = () => ({
  name: "flask-build-input-config",
  config(config, env) {
    // In dev mode we don't need to define entry points
    if (env.mode === "development") return config;

    let input = [];

    try {
      // In production mode the entry points are the arguments of all the
      // `vite_import(...)` calls in templates/
      const viteImports =
        execSync(
          // TODO: do it in Node to make it truly portable`
          `grep -rnoh --include '*.html' -e 'vite_import\\((.*)\\)'`,
        ).toString() || ""; // big multi-line string wit the format
      // `vite_import(<filename>)`

      // filenames are contained in strings with either " or ' as delimiters
      const imports = viteImports
        .replaceAll(`"`, `'`) // replace all " with '
        .split(`'`) // split on '
        .filter((_, i) => i % 2 === 1); // the filenames sit at odd indices

      // remove possible duplicate imports, sort just for clarity
      input = Array.from(new Set(imports)).sort();

      console.info("Building bundles for the following entry points:", input);
    } catch (e) {
      throw new Error(
        "Vite: Couldn't find any entry points for production build\n" +
          e.toString(),
      );
    }

    // this will be deep-merged with the current config
    return defineConfig({
      build: {
        rollupOptions: {
          input,
        },
      },
    });
  },
});

const env = loadEnv("all", process.cwd());

export default defineConfig({
  plugins: [flaskViteImportPlugin(), react()],
  server: {
    port: env?.VITE_PORT || 5173,
    host: true,
    cors: {
      origin: [
        "http://localhost:8004",
        "http://127.0.0.1:8004",
        "http://0.0.0.0:8004",
      ], // needed for backend integration with Flask
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true,
        silenceDeprecations: ["import", "global-builtin"],
      },
    },
    postcss: {
      plugins: [autoprefixer()],
      map: false,
    },
  },
  define: {
    global: "globalThis", // in dev mode "randomstring" uses `global` rather than `globalThis`
  },
  resolve: {
    alias: [
      // by default react-components exports a CJS module that can't be tree-shaken, we consume the ESM instead
      {
        find: /^@canonical\/react-components$/,
        replacement: "@canonical/react-components/dist/esm",
      },
    ],
  },
  build: {
    manifest: true,
    modulePreload: false,
    emptyOutDir: true,
    sourcemap: "hidden",
    outDir: env?.VITE_OUTDIR || "static/js/dist/vite",
    rollupOptions: {
      output: {
        entryFileNames: `[name]--[hash].js`,
        chunkFileNames: `chunks/[name]--[hash].js`,
        assetFileNames: `assets/[name]--[hash][extname]`,
      },
    },
  },
});