diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index 7012ad37f6..d21b2aea1a 100644
--- a/build-scripts/bundle.js
+++ b/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,
};
},
diff --git a/build-scripts/env.js b/build-scripts/env.js
index 8980d3bf92..8b2dea2eb4 100644
--- a/build-scripts/env.js
+++ b/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()
diff --git a/build-scripts/gulp/app.js b/build-scripts/gulp/app.js
index 9429260617..39d98b1b75 100644
--- a/build-scripts/gulp/app.js
+++ b/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"
)
);
diff --git a/build-scripts/gulp/entry-html.js b/build-scripts/gulp/entry-html.js
index e95f2f6091..eeb1b57ecc 100644
--- a/build-scripts/gulp/entry-html.js
+++ b/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",
- latestCoreJS: "/frontend_latest/core.js",
- latestCustomPanelJS: "/frontend_latest/custom-panel.js",
+ latestAppJS,
+ latestCoreJS,
+ latestCustomPanelJS,
es5AppJS: "/frontend_es5/app.js",
es5CoreJS: "/frontend_es5/core.js",
diff --git a/build-scripts/gulp/wds.js b/build-scripts/gulp/wds.js
new file mode 100644
index 0000000000..d70afd1a9a
--- /dev/null
+++ b/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,
+ },
+ });
+});
diff --git a/build-scripts/rollup.js b/build-scripts/rollup.js
index 8cd680361d..c5f8972854 100644
--- a/build-scripts/rollup.js
+++ b/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({
- publicPath,
- }),
- worker(),
- dontHashPlugin({ dontHash }),
- isProdBuild && terser(bundle.terserOptions(latestBuild)),
- isStatsBuild &&
+ !isWDS &&
+ manifest({
+ publicPath,
+ }),
+ !isWDS && worker(),
+ !isWDS && dontHashPlugin({ dontHash }),
+ !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,
})
);
};
diff --git a/package.json b/package.json
index 4431314d52..1fa7c9b1c0 100644
--- a/package.json
+++ b/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",
diff --git a/src/html/index.html.template b/src/html/index.html.template
index f5d8be97d1..4628170fe9 100644
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -1,8 +1,10 @@
+ <% if (!useWDS) { %>
+ <% } %>
<%= renderTemplate('_header') %>
Home Assistant
@@ -63,7 +65,7 @@
<%= renderTemplate('_js_base') %>
<%= renderTemplate('_preload_roboto') %>
-