Repository navigation
Expand file tree
/
Copy pathvite.config.js
More file actions
130 lines (123 loc) · 3.9 KB
/
Copy pathvite.config.js
File metadata and controls
130 lines (123 loc) · 3.9 KB
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
import { readdirSync } from "node:fs";
import { basename, extname, resolve } from "node:path";
import { defineConfig } from "vite";
import banner from "./vite/banner.js";
import beautifyHtml from "./vite/beautify-html.js";
import classicScript from "./vite/classic-script.js";
import declarations from "./vite/declarations.js";
import handlebarsPages from "./vite/handlebars-pages.js";
import preloadFonts from "./vite/preload-fonts.js";
import stats from "./vite/stats.js";
import data from "./src/data/index.js";
import * as helpers from "./src/helpers/index.js";
const src = (path) => resolve(import.meta.dirname, "src", path);
const pages = Object.fromEntries(
readdirSync(src("pages"))
.filter((file) => extname(file) === ".html")
.map((file) => [basename(file, ".html"), src(`pages/${file}`)])
);
const bundles = {
app: src("js/app.js"),
head: src("js/head.js"),
"icons-all": src("js/icons-all.js"),
};
for (const name of Object.keys(bundles)) {
if (name in pages) {
throw new Error(`src/pages/${name}.html clashes with the ${name} bundle`);
}
}
const assetDirectories = {
".woff": "fonts",
".woff2": "fonts",
".ttf": "fonts",
".eot": "fonts",
".svg": "img",
".png": "img",
".jpg": "img",
".jpeg": "img",
".gif": "img",
};
// The stylesheet keeps its name (templates and the npm package reference css/app.css);
// fonts and images from different packages can share a basename, so they are hashed
const assetFileName = ({ names: [name] }) => {
const extension = extname(name);
if (extension === ".css") {
return "css/[name][extname]";
}
return `${assetDirectories[extension] ?? "assets"}/[name]-[hash][extname]`;
};
export default defineConfig({
root: src("pages"),
publicDir: resolve(import.meta.dirname, "public"),
base: "./",
plugins: [
stats(data),
handlebarsPages({
data,
helpers: { ...helpers },
layoutDirectory: src("layouts"),
partialDirectory: [src("partials")],
compileOptions: { preventIndent: true },
}),
beautifyHtml(),
// Inter's latin regular and semibold faces, which every page uses
preloadFonts(/inter-latin-(400|600)-normal/),
banner(
"css/app.css",
`/*!
* AdminKit v${data.version} (https://adminkit.io/)
* Copyright ${data.year} Paul Laros
* Copyright ${data.year} AdminKit
* Licensed under MIT (https://github.com/adminkit/adminkit/blob/master/LICENSE)
*/`
),
classicScript(Object.keys(bundles)),
declarations({
"js/app.d.ts": src("types/app.d.ts"),
"css/app.d.css.ts": src("types/app.d.css.ts"),
}),
],
resolve: {
// Pages live in src/pages, so the dev server cannot reach ../js and ../scss by relative URL.
// Templates use the output paths (/js/app.js, /css/app.css) and these map them to the sources.
alias: [
{ find: /^\/js\//, replacement: `${src("js")}/` },
{ find: /^\/css\/app\.css/, replacement: src("scss/app.scss") },
],
},
css: {
preprocessorOptions: {
scss: {
// Our own SCSS only triggers "import"; the rest comes from Bootstrap 5.3
silenceDeprecations: [
// @import: Bootstrap 5.3 has no @use entry point, so the whole tree still uses it
"import",
// red(), green(), blue() in Bootstrap's color-contrast()
"color-functions",
// mix(), map-get() and friends without a sass: module prefix in Bootstrap
"global-builtin",
// Sass if() in Bootstrap's mixins
"if-function",
],
},
},
},
build: {
outDir: resolve(import.meta.dirname, "dist"),
emptyOutDir: true,
assetsInlineLimit: 0,
modulePreload: { polyfill: false },
rolldownOptions: {
input: { ...pages, ...bundles },
output: {
entryFileNames: "js/[name].js",
chunkFileNames: "js/[name]-[hash].js",
assetFileNames: assetFileName,
},
},
},
server: {
port: 8080,
strictPort: true,
},
});