mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 21:47:46 +00:00
Add WIP Vite config
This commit is contained in:
parent
e37b7bd73f
commit
5a5cb4f891
27
VITE_NOTES.md
Normal file
27
VITE_NOTES.md
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
# Vite
|
||||||
|
|
||||||
|
Vite is a new type of compiler that compiles each file as they come in.
|
||||||
|
|
||||||
|
## Running Vite
|
||||||
|
|
||||||
|
- Checkout this branch
|
||||||
|
- `yarn`
|
||||||
|
- Run `script/develop` until it finishes first webpack build. Then turn it off. We use this right now to prepare the static files + auth/onboarding pages.
|
||||||
|
- Update `hass_frontend/index.html`, find where we import the scripts and replace with:
|
||||||
|
```html
|
||||||
|
<script>
|
||||||
|
// Define in vite config doesn't work.
|
||||||
|
window.__DEV__ = true;
|
||||||
|
window.__DEMO__ = false;
|
||||||
|
window.__BACKWARDS_COMPAT__ = false;
|
||||||
|
window.__BUILD__ = "latest";
|
||||||
|
window.__VERSION__ = "dev";
|
||||||
|
// Temporary to stop an error
|
||||||
|
document.adoptedStyleSheets = [];
|
||||||
|
// Load scripts from Vite dev server
|
||||||
|
import("http://localhost:3000/src/entrypoints/core.ts");
|
||||||
|
import("http://localhost:3000/src/entrypoints/app.ts");
|
||||||
|
```
|
||||||
|
If Vite transforms would work correctly, we would just have to drop the "use-credentials" part in dev and update the import URLs to import from Vite dev server.
|
||||||
|
- Start vite `vite serve -c build-scripts/vite/vite.config.ts`
|
||||||
|
- Open Home Assistant as usual.
|
61
build-scripts/vite/vite.config.ts
Normal file
61
build-scripts/vite/vite.config.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import * as path from "path";
|
||||||
|
import * as vite from "vite";
|
||||||
|
|
||||||
|
// https://github.com/vitejs/vite/blob/master/src/node/config.ts
|
||||||
|
|
||||||
|
const ignore = new Set(["/src/resources/compatibility.ts"]);
|
||||||
|
|
||||||
|
const conf: vite.ServerConfig = {
|
||||||
|
root: path.resolve(__dirname, "../.."),
|
||||||
|
optimizeDeps: {
|
||||||
|
// We don't automatically optimize dependencies because
|
||||||
|
// that causes duplicate imports of custom elements
|
||||||
|
auto: false,
|
||||||
|
},
|
||||||
|
resolvers: [
|
||||||
|
// This resolver is meant to filter out files that we don't
|
||||||
|
// need in latest build, like compatibility.
|
||||||
|
// But resolving it to an empty file doesn't yield expected
|
||||||
|
// results.
|
||||||
|
// {
|
||||||
|
// requestToFile(publicPath: string, root: string) {
|
||||||
|
// console.log("requestToFile", {
|
||||||
|
// publicPath,
|
||||||
|
// root,
|
||||||
|
// match: ignore.has(publicPath),
|
||||||
|
// resolved:
|
||||||
|
// ignore.has(publicPath) &&
|
||||||
|
// path.resolve(conf.root!, "src/util/empty.js"),
|
||||||
|
// });
|
||||||
|
// if (ignore.has(publicPath)) {
|
||||||
|
// return path.resolve(conf.root!, "src/util/empty.js");
|
||||||
|
// }
|
||||||
|
// return undefined;
|
||||||
|
// },
|
||||||
|
// fileToRequest(filePath: string, root: string) {
|
||||||
|
// if (!filePath.endsWith("/src/util/empty.js")) {
|
||||||
|
// return undefined;
|
||||||
|
// }
|
||||||
|
// console.log("fileToRequest", {
|
||||||
|
// filePath,
|
||||||
|
// root,
|
||||||
|
// match: filePath.endsWith("/src/util/empty.js"),
|
||||||
|
// });
|
||||||
|
// return "/src/util/empty.js";
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// These don't seem to be picked up. Workaround is to manually
|
||||||
|
// add them to hass_frontend/index.html for now.
|
||||||
|
define: {
|
||||||
|
__DEV__: true,
|
||||||
|
__BUILD__: "latest",
|
||||||
|
__VERSION__: "dev",
|
||||||
|
__DEMO__: false,
|
||||||
|
__BACKWARDS_COMPAT__: false,
|
||||||
|
__STATIC_PATH__: "/static/",
|
||||||
|
},
|
||||||
|
cors: true,
|
||||||
|
};
|
||||||
|
console.log(conf);
|
||||||
|
export default conf;
|
@ -209,6 +209,7 @@
|
|||||||
"typescript": "^4.0.3",
|
"typescript": "^4.0.3",
|
||||||
"vinyl-buffer": "^1.0.1",
|
"vinyl-buffer": "^1.0.1",
|
||||||
"vinyl-source-stream": "^2.0.0",
|
"vinyl-source-stream": "^2.0.0",
|
||||||
|
"vite": "^1.0.0-rc.9",
|
||||||
"webpack": "5.1.3",
|
"webpack": "5.1.3",
|
||||||
"webpack-cli": "4.1.0",
|
"webpack-cli": "4.1.0",
|
||||||
"webpack-dev-server": "^3.11.0",
|
"webpack-dev-server": "^3.11.0",
|
||||||
|
@ -15,6 +15,7 @@
|
|||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"experimentalDecorators": true,
|
"experimentalDecorators": true,
|
||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"isolatedModules": true,
|
||||||
"plugins": [
|
"plugins": [
|
||||||
{
|
{
|
||||||
"name": "ts-lit-plugin",
|
"name": "ts-lit-plugin",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user