Allow developing with @web/dev-server (#7782)
This commit is contained in:
parent
39ff641be9
commit
0049be7feb
|
@ -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,
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
@ -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()
|
||||
|
|
|
@ -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"
|
||||
)
|
||||
);
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
});
|
||||
});
|
|
@ -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,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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 %>";
|
||||
|
|
|
@ -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,
|
||||
};
|
Loading…
Reference in New Issue