ce-autoloader/vite.vi-components.config.js at main · vitocal/ce-autoloader · 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
// Vite configuration for building individual web components in src/components/vi
// Each component will be compiled as a separate chunk.
import { defineConfig } from "vite";
import path from "path";
import { readdirSync, statSync } from "fs";

import { hmrPlugin, presets } from "vite-plugin-web-components-hmr";

// Helper – collect every *.ts file under src/components/vi (recursively)
function collectEntries(dir, fileExt = `.ts`) {
  const entries = {};
  readdirSync(dir).forEach((file) => {
    const full = path.resolve(dir, file);
    if (statSync(full).isDirectory()) {
      Object.assign(entries, collectEntries(full, fileExt));
    } else if (file.endsWith(fileExt)) {
      // entry name without extension & without the leading path
      const name = path.relative(path.resolve(__dirname, dir), full).replace(/filExt$/, "");
      entries[name] = full;
    }
  });
  return entries;
}

export default defineConfig({
  plugins: [
    hmrPlugin({
      include: [
        "pages/components/**/*.ts",
        "pages/components/**/*.js",
        "pages/components/**/*.tsx",
        "pages/components/**/*.jsx",
        "pages/components/*.js",
        "pages/components/*.tsx",
        "pages/components/*.jsx",
      ],
      presets: [presets.lit],
    }),
  ],
  build: {
    lib: {
      // We'll use a custom rollupOptions to create a chunk per file
      name: "vi-components",
      formats: ["es"],
      entry: {
        ...collectEntries("pages/components/vi", ".ts"),
        ...collectEntries("pages/components/vi", ".tsx"),
      },
    },
    rollupOptions: {
      output: {
        // Ensure each component is emitted as its own file
        preserveModules: true,
        // Keep the folder hierarchy under dist/components/vi
        assetFileNames: "[name][extname]",
        entryFileNames: "[name].js",
        chunkFileNames: "[name]-[hash].js",
      },
      external: [
        // Externalize these to avoid bundling them in main,
        // they will be provided by vendor.js via import map
        "lit-html",
        "lit-html/is-server.js",
        "lit-element",
        "@lit/reactive-element",
        "lit",
        "lit/static-html.js",
        "lit/decorators.js",
        "lit/directives/ref.js",
        "lit/directives/if-defined.js",
        "lit/directives/unsafe-html.js",
        "lit/directives/style-map.js",
        "lit/directives/class-map.js",
        "lit/directives/repeat.js",

        "globe.gl",
        "three.js",
        "canvas-confetti",
        "syntax-highlight-element",
        "@google/model-viewer",
      ],
    },
    outDir: "docs/assets/components/vi",
    emptyOutDir: false,
    manifest: true,
  },
});