Allow developing with @web/dev-server (#7782)

build-scripts/bundle.js

@@ -117,7 +117,7 @@ BundleConfig {
 */
 
 module.exports.config = {
-  app({ isProdBuild, latestBuild, isStatsBuild }) {
+  app({ isProdBuild, latestBuild, isStatsBuild, isWDS }) {
     return {
       entry: {
         service_worker: "./src/entrypoints/service_worker.ts",
@@ -132,6 +132,7 @@ module.exports.config = {
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isWDS,
     };
   },
 

build-scripts/env.js

@@ -6,6 +6,9 @@ module.exports = {
   useRollup() {
     return process.env.ROLLUP === "1";
   },
+  useWDS() {
+    return process.env.WDS === "1";
+  },
   isProdBuild() {
     return (
       process.env.NODE_ENV === "production" || module.exports.isStatsBuild()

build-scripts/gulp/app.js

@@ -12,6 +12,7 @@ require("./webpack.js");
 require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
+require("./wds.js");
 
 gulp.task(
   "develop-app",
@@ -28,7 +29,11 @@ gulp.task(
       "build-translations"
     ),
     "copy-static-app",
-    env.useRollup() ? "rollup-watch-app" : "webpack-watch-app"
+    env.useWDS()
+      ? "wds-watch-app"
+      : env.useRollup()
+      ? "rollup-watch-app"
+      : "webpack-watch-app"
   )
 );
 

build-scripts/gulp/entry-html.js

@@ -19,6 +19,7 @@ const renderTemplate = (pth, data = {}, pathFunc = templatePath) => {
   return compiled({
     ...data,
     useRollup: env.useRollup(),
+    useWDS: env.useWDS(),
     renderTemplate,
   });
 };
@@ -90,10 +91,23 @@ gulp.task("gen-pages-prod", (done) => {
 });
 
 gulp.task("gen-index-app-dev", (done) => {
+  let latestAppJS, latestCoreJS, latestCustomPanelJS;
+
+  if (env.useWDS()) {
+    latestAppJS = "http://localhost:8000/src/entrypoints/app.ts";
+    latestCoreJS = "http://localhost:8000/src/entrypoints/core.ts";
+    latestCustomPanelJS =
+      "http://localhost:8000/src/entrypoints/custom-panel.ts";
+  } else {
+    latestAppJS = "/frontend_latest/app.js";
+    latestCoreJS = "/frontend_latest/core.js";
+    latestCustomPanelJS = "/frontend_latest/custom-panel.js";
+  }
+
   const content = renderTemplate("index", {
-    latestAppJS: "/frontend_latest/app.js",
+    latestAppJS,
-    latestCoreJS: "/frontend_latest/core.js",
+    latestCoreJS,
-    latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+    latestCustomPanelJS,
 
     es5AppJS: "/frontend_es5/app.js",
     es5CoreJS: "/frontend_es5/core.js",

build-scripts/gulp/wds.js

@@ -0,0 +1,11 @@
+// Tasks to run Rollup
+const gulp = require("gulp");
+const { startDevServer } = require("@web/dev-server");
+
+gulp.task("wds-watch-app", () => {
+  startDevServer({
+    config: {
+      watch: true,
+    },
+  });
+});

build-scripts/rollup.js

@@ -31,6 +31,7 @@ const createRollupConfig = ({
   isStatsBuild,
   publicPath,
   dontHash,
+  isWDS,
 }) => {
   return {
     /**
@@ -61,7 +62,7 @@ const createRollupConfig = ({
           ...bundle.babelOptions({ latestBuild }),
           extensions,
           exclude: bundle.babelExclude(),
-          babelHelpers: "bundled",
+          babelHelpers: isWDS ? "inline" : "bundled",
         }),
         string({
           // Import certain extensions as strings
@@ -70,19 +71,21 @@ const createRollupConfig = ({
         replace(
           bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
         ),
-        manifest({
+        !isWDS &&
-          publicPath,
+          manifest({
-        }),
+            publicPath,
-        worker(),
+          }),
-        dontHashPlugin({ dontHash }),
+        !isWDS && worker(),
-        isProdBuild && terser(bundle.terserOptions(latestBuild)),
+        !isWDS && dontHashPlugin({ dontHash }),
-        isStatsBuild &&
+        !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
+        !isWDS &&
+          isStatsBuild &&
           visualizer({
             // https://github.com/btd/rollup-plugin-visualizer#options
             open: true,
             sourcemap: true,
           }),
-      ],
+      ].filter(Boolean),
     },
     /**
      * @type { import("rollup").OutputOptions }
@@ -109,12 +112,13 @@ const createRollupConfig = ({
   };
 };
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
   return createRollupConfig(
     bundle.config.app({
       isProdBuild,
       latestBuild,
       isStatsBuild,
+      isWDS,
     })
   );
 };

package.json

@@ -145,6 +145,7 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.2.1",
+    "@koa/cors": "^3.1.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -163,6 +164,9 @@
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
+    "@web/dev-server": "^0.0.21",
+    "@web/dev-server-esbuild": "^0.2.6",
+    "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.1.0",
     "chai": "^4.2.0",
     "cpx": "^1.5.0",

src/html/index.html.template

@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <% if (!useWDS) { %>
     <link rel="preload" href="<%= latestCoreJS %>" as="script" crossorigin="use-credentials" />
     <link rel="preload" href="<%= latestAppJS %>" as="script" crossorigin="use-credentials" />
+    <% } %>
     <%= renderTemplate('_header') %>
     <title>Home Assistant</title>
     <link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#03a9f4" />
@@ -63,7 +65,7 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script crossorigin="use-credentials">
+    <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
       import("<%= latestCoreJS %>");
       import("<%= latestAppJS %>");
       window.customPanelJS = "<%= latestCustomPanelJS %>";

web-dev-server.config.js

@@ -0,0 +1,24 @@
+const cors = require("@koa/cors");
+const { rollupAdapter } = require("@web/dev-server-rollup");
+
+const rollup = require("./build-scripts/rollup");
+
+const rollupWDSPlugins = rollup
+  .createAppConfig({
+    latestBuild: true,
+    isWDS: true,
+  })
+  .inputOptions.plugins.map((rollupPluginConf) =>
+    rollupAdapter(rollupPluginConf, {}, {})
+  );
+
+/** @type import("@web/dev-server/src/config/DevServerConfig.ts") */
+module.exports = {
+  mimeTypes: {
+    "**/*.ts": "js",
+    "**/*.json": "js",
+    "**/*.css": "js",
+  },
+  middleware: [cors()],
+  plugins: rollupWDSPlugins,
+};