Add WIP Vite config

VITE_NOTES.md

@@ -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.

build-scripts/vite/vite.config.ts

@@ -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;

package.json

@@ -209,6 +209,7 @@
     "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
+    "vite": "^1.0.0-rc.9",
     "webpack": "5.1.3",
     "webpack-cli": "4.1.0",
     "webpack-dev-server": "^3.11.0",

tsconfig.json

@@ -15,6 +15,7 @@
     "resolveJsonModule": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
     "plugins": [
       {
         "name": "ts-lit-plugin",