jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 06:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate Babel 6 -> 7 (#1762)

Browse Source 
* Migrate Babel 6 -> 7

* Update babel-eslint
This commit is contained in:
Paulus Schoutsen 2018-10-13 11:25:03 +02:00 committed by GitHub
parent ca93c2cfcd
commit 3bcd0ddc46
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 831 additions and 701 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
gallery/webpack.config.js
View File

@ -22,9 +22,9 @@ module.exports = {
options: { options: {
plugins: [ plugins: [
// Only support the syntax, Webpack will handle it. // Only support the syntax, Webpack will handle it.
"syntax-dynamic-import", "@babel/syntax-dynamic-import",
[ [
"transform-react-jsx", "@babel/transform-react-jsx",
{ {
pragma: "h", pragma: "h",
}, },

4
hassio/webpack.config.js
View File

@ -19,11 +19,11 @@ module.exports = {
loader: "babel-loader", loader: "babel-loader",
options: { options: {
presets: [ presets: [
[require("babel-preset-env").default, { modules: false }], [require("@babel/preset-env").default, { modules: false }],
], ],
plugins: [ plugins: [
// Only support the syntax, Webpack will handle it. // Only support the syntax, Webpack will handle it.
"syntax-dynamic-import", "@babel/syntax-dynamic-import",
], ],
}, },
}, },

15
package.json
View File

@ -89,16 +89,15 @@
"xss": "^1.0.3" "xss": "^1.0.3"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-external-helpers": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@gfx/zopfli": "^1.0.9", "@gfx/zopfli": "^1.0.9",
"babel-core": "^6.26.3", "babel-eslint": "^10",
"babel-eslint": "^9.0.0", "babel-loader": "^8.0.4",
"babel-loader": "^7.1.4",
"babel-minify-webpack-plugin": "^0.3.1", "babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2", "chai": "^4.1.2",
"compression-webpack-plugin": "^2.0.0", "compression-webpack-plugin": "^2.0.0",
"copy-webpack-plugin": "^4.5.2", "copy-webpack-plugin": "^4.5.2",

247
webpack.config.js
View File

@ -1,17 +1,17 @@
const fs = require('fs'); const fs = require("fs");
const path = require('path'); const path = require("path");
const webpack = require('webpack'); const webpack = require("webpack");
const BabelMinifyPlugin = require('babel-minify-webpack-plugin'); const BabelMinifyPlugin = require("babel-minify-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require("copy-webpack-plugin");
const WorkboxPlugin = require('workbox-webpack-plugin'); const WorkboxPlugin = require("workbox-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin"); const CompressionPlugin = require("compression-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require("html-webpack-plugin");
const zopfli = require('@gfx/zopfli'); const zopfli = require("@gfx/zopfli");
const translationMetadata = require('./build-translations/translationMetadata.json'); const translationMetadata = require("./build-translations/translationMetadata.json");
const version = fs.readFileSync('setup.py', 'utf8').match(/\d{8}[^']*/); const version = fs.readFileSync("setup.py", "utf8").match(/\d{8}[^']*/);
if (!version) { if (!version) {
throw Error('Version not found'); throw Error("Version not found");
} }
const VERSION = version[0]; const VERSION = version[0];
@ -25,57 +25,61 @@ const generateJSPage = (entrypoint, latestBuild) => {
latestBuild, latestBuild,
compatibility: assets.chunks.compatibility.entry, compatibility: assets.chunks.compatibility.entry,
entrypoint: assets.chunks[entrypoint].entry, entrypoint: assets.chunks[entrypoint].entry,
hassIconsJS: assets.chunks['hass-icons'].entry, hassIconsJS: assets.chunks["hass-icons"].entry,
}), }),
filename: `${entrypoint}.html`, filename: `${entrypoint}.html`,
}); });
} };
function createConfig(isProdBuild, latestBuild) { function createConfig(isProdBuild, latestBuild) {
let buildPath = latestBuild ? 'hass_frontend/' : 'hass_frontend_es5/'; let buildPath = latestBuild ? "hass_frontend/" : "hass_frontend_es5/";
const publicPath = latestBuild ? '/frontend_latest/' : '/frontend_es5/'; const publicPath = latestBuild ? "/frontend_latest/" : "/frontend_es5/";
const entry = { const entry = {
app: './src/entrypoints/app.js', app: "./src/entrypoints/app.js",
authorize: './src/entrypoints/authorize.js', authorize: "./src/entrypoints/authorize.js",
onboarding: './src/entrypoints/onboarding.js', onboarding: "./src/entrypoints/onboarding.js",
core: './src/entrypoints/core.js', core: "./src/entrypoints/core.js",
compatibility: './src/entrypoints/compatibility.js', compatibility: "./src/entrypoints/compatibility.js",
'custom-panel': './src/entrypoints/custom-panel.js', "custom-panel": "./src/entrypoints/custom-panel.js",
'hass-icons': './src/entrypoints/hass-icons.js', "hass-icons": "./src/entrypoints/hass-icons.js",
}; };
if (latestBuild) { if (latestBuild) {
entry['service-worker-hass'] = './src/entrypoints/service-worker-hass.js'; entry["service-worker-hass"] = "./src/entrypoints/service-worker-hass.js";
} }
const chunkFilename = isProdBuild ? const chunkFilename = isProdBuild
'[chunkhash].chunk.js' : '[name].chunk.js'; ? "[chunkhash].chunk.js"
: "[name].chunk.js";
return { return {
mode: isProdBuild ? 'production' : 'development', mode: isProdBuild ? "production" : "development",
devtool: isProdBuild ? 'cheap-source-map ' : 'inline-cheap-module-source-map', devtool: isProdBuild
? "cheap-source-map "
: "inline-cheap-module-source-map",
entry, entry,
module: { module: {
rules: [ rules: [
{ {
test: /\.m?js$/, test: /\.m?js$/,
use: { use: {
loader: 'babel-loader', loader: "babel-loader",
options: { options: {
presets: [ presets: [
!latestBuild && [ !latestBuild && [
require('babel-preset-env').default, { modules: false } require("@babel/preset-env").default,
{ modules: false },
], ],
].filter(Boolean), ].filter(Boolean),
plugins: [ plugins: [
// Only support the syntax, Webpack will handle it. // Only support the syntax, Webpack will handle it.
"syntax-dynamic-import", "@babel/syntax-dynamic-import",
[ [
'transform-react-jsx', "@babel/transform-react-jsx",
{ {
pragma: 'h' pragma: "h",
} },
], ],
], ],
}, },
@ -84,84 +88,106 @@ function createConfig(isProdBuild, latestBuild) {
{ {
test: /\.(html)$/, test: /\.(html)$/,
use: { use: {
loader: 'html-loader', loader: "html-loader",
options: { options: {
exportAsEs6Default: true, exportAsEs6Default: true,
} },
} },
} },
] ],
}, },
optimization: { optimization: {
minimizer: [ minimizer: [
// Took options from Polymer build tool // Took options from Polymer build tool
// https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts // https://github.com/Polymer/tools/blob/master/packages/build/src/js-transform.ts
new BabelMinifyPlugin({ new BabelMinifyPlugin(
// Disable the minify-constant-folding plugin because it has a bug relating to {
// invalid substitution of constant values into export specifiers: // Disable the minify-constant-folding plugin because it has a bug relating to
// https://github.com/babel/minify/issues/820 // invalid substitution of constant values into export specifiers:
evaluate: false, // https://github.com/babel/minify/issues/820
evaluate: false,
// TODO(aomarks) Find out why we disabled this plugin. // TODO(aomarks) Find out why we disabled this plugin.
simplifyComparisons: false, simplifyComparisons: false,
// Disable the simplify plugin because it can eat some statements preceeding // Disable the simplify plugin because it can eat some statements preceeding
// loops. https://github.com/babel/minify/issues/824 // loops. https://github.com/babel/minify/issues/824
simplify: false, simplify: false,
// This is breaking ES6 output. https://github.com/Polymer/tools/issues/261 // This is breaking ES6 output. https://github.com/Polymer/tools/issues/261
mangle: false, mangle: false,
}, {}), },
] {}
),
],
}, },
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
__DEV__: JSON.stringify(!isProdBuild), __DEV__: JSON.stringify(!isProdBuild),
__BUILD__: JSON.stringify(latestBuild ? 'latest' : 'es5'), __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
__VERSION__: JSON.stringify(VERSION), __VERSION__: JSON.stringify(VERSION),
__STATIC_PATH__: '/static/', __STATIC_PATH__: "/static/",
'process.env.NODE_ENV': JSON.stringify(isProdBuild ? 'production' : 'development'), "process.env.NODE_ENV": JSON.stringify(
isProdBuild ? "production" : "development"
),
}), }),
new CopyWebpackPlugin([ new CopyWebpackPlugin(
latestBuild && 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', [
latestBuild && { from: 'public', to: '.' }, latestBuild &&
latestBuild && { from: 'build-translations/output', to: `translations` }, "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
latestBuild && { from: 'node_modules/@polymer/font-roboto-local/fonts', to: 'fonts' }, latestBuild && { from: "public", to: "." },
latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js', latestBuild && {
latestBuild && 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map', from: "build-translations/output",
latestBuild && { from: 'node_modules/react-big-calendar/lib/css/react-big-calendar.css', to: 'panels/calendar/' }, to: `translations`,
latestBuild && { from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` }, },
latestBuild && { from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` }, latestBuild && {
!latestBuild && 'public/__init__.py', from: "node_modules/@polymer/font-roboto-local/fonts",
].filter(Boolean)), to: "fonts",
},
latestBuild &&
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
latestBuild &&
"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js.map",
latestBuild && {
from:
"node_modules/react-big-calendar/lib/css/react-big-calendar.css",
to: "panels/calendar/",
},
latestBuild && {
from: "node_modules/leaflet/dist/leaflet.css",
to: `images/leaflet/`,
},
latestBuild && {
from: "node_modules/leaflet/dist/images",
to: `images/leaflet/`,
},
!latestBuild && "public/__init__.py",
].filter(Boolean)
),
// Ignore moment.js locales // Ignore moment.js locales
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// Color.js is bloated, it contains all color definitions for all material color sets. // Color.js is bloated, it contains all color definitions for all material color sets.
new webpack.NormalModuleReplacementPlugin( new webpack.NormalModuleReplacementPlugin(
/@polymer\/paper-styles\/color\.js$/, /@polymer\/paper-styles\/color\.js$/,
path.resolve(__dirname, 'src/util/empty.js') path.resolve(__dirname, "src/util/empty.js")
), ),
// Ignore roboto pointing at CDN. We use local font-roboto-local. // Ignore roboto pointing at CDN. We use local font-roboto-local.
new webpack.NormalModuleReplacementPlugin( new webpack.NormalModuleReplacementPlugin(
/@polymer\/font-roboto\/roboto\.js$/, /@polymer\/font-roboto\/roboto\.js$/,
path.resolve(__dirname, 'src/util/empty.js') path.resolve(__dirname, "src/util/empty.js")
), ),
isProdBuild && new CompressionPlugin({ isProdBuild &&
cache: true, new CompressionPlugin({
exclude: [ cache: true,
/\.js\.map$/, exclude: [/\.js\.map$/, /\.LICENSE$/, /\.py$/, /\.txt$/],
/\.LICENSE$/, algorithm(input, compressionOptions, callback) {
/\.py$/, return zopfli.gzip(input, compressionOptions, callback);
/\.txt$/, },
], }),
algorithm(input, compressionOptions, callback) {
return zopfli.gzip(input, compressionOptions, callback);
},
}),
new WorkboxPlugin.InjectManifest({ new WorkboxPlugin.InjectManifest({
swSrc: './src/entrypoints/service-worker-bootstrap.js', swSrc: "./src/entrypoints/service-worker-bootstrap.js",
swDest: 'service_worker.js', swDest: "service_worker.js",
importWorkboxFrom: 'local', importWorkboxFrom: "local",
include: [ include: [
/core.js$/, /core.js$/,
/app.js$/, /app.js$/,
@ -170,17 +196,24 @@ function createConfig(isProdBuild, latestBuild) {
/\.chunk\.js$/, /\.chunk\.js$/,
], ],
templatedUrls: { templatedUrls: {
[`/static/translations/${translationMetadata['translations']['en']['fingerprints']['en']}`]: 'build-translations/output/en.json', [`/static/translations/${
'/static/icons/favicon-192x192.png': 'public/icons/favicon-192x192.png', translationMetadata["translations"]["en"]["fingerprints"]["en"]
'/static/fonts/roboto/Roboto-Light.ttf': 'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Light.ttf', }`]: "build-translations/output/en.json",
'/static/fonts/roboto/Roboto-Medium.ttf': 'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Medium.ttf', "/static/icons/favicon-192x192.png":
'/static/fonts/roboto/Roboto-Regular.ttf': 'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Regular.ttf', "public/icons/favicon-192x192.png",
'/static/fonts/roboto/Roboto-Bold.ttf': 'node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf', "/static/fonts/roboto/Roboto-Light.ttf":
} "node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Light.ttf",
"/static/fonts/roboto/Roboto-Medium.ttf":
"node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Medium.ttf",
"/static/fonts/roboto/Roboto-Regular.ttf":
"node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Regular.ttf",
"/static/fonts/roboto/Roboto-Bold.ttf":
"node_modules/@polymer/font-roboto-local/fonts/roboto/Roboto-Bold.ttf",
},
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
inject: false, inject: false,
template: './src/html/index.html.template', template: "./src/html/index.html.template",
// Default templateParameterGenerator code // Default templateParameterGenerator code
// https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719 // https://github.com/jantimon/html-webpack-plugin/blob/master/index.js#L719
templateParameters: (compilation, assets, option) => ({ templateParameters: (compilation, assets, option) => ({
@ -188,20 +221,20 @@ function createConfig(isProdBuild, latestBuild) {
compatibility: assets.chunks.compatibility.entry, compatibility: assets.chunks.compatibility.entry,
appJS: assets.chunks.app.entry, appJS: assets.chunks.app.entry,
coreJS: assets.chunks.core.entry, coreJS: assets.chunks.core.entry,
customPanelJS: assets.chunks['custom-panel'].entry, customPanelJS: assets.chunks["custom-panel"].entry,
hassIconsJS: assets.chunks['hass-icons'].entry, hassIconsJS: assets.chunks["hass-icons"].entry,
}), }),
filename: `index.html`, filename: `index.html`,
}), }),
generateJSPage('onboarding', latestBuild), generateJSPage("onboarding", latestBuild),
generateJSPage('authorize', latestBuild), generateJSPage("authorize", latestBuild),
].filter(Boolean), ].filter(Boolean),
output: { output: {
filename: ({ chunk }) => { filename: ({ chunk }) => {
const dontHash = new Set([ const dontHash = new Set([
// This is loaded from service-worker-bootstrap.js // This is loaded from service-worker-bootstrap.js
// which is processed by Workbox, not Webpack // which is processed by Workbox, not Webpack
'service-worker-hass', "service-worker-hass",
]); ]);
if (!isProdBuild || dontHash.has(chunk.name)) return `${chunk.name}.js`; if (!isProdBuild || dontHash.has(chunk.name)) return `${chunk.name}.js`;
return `${chunk.name}-${chunk.hash.substr(0, 8)}.js`; return `${chunk.name}-${chunk.hash.substr(0, 8)}.js`;
@ -212,21 +245,19 @@ function createConfig(isProdBuild, latestBuild) {
}, },
resolve: { resolve: {
alias: { alias: {
'react': 'preact-compat', react: "preact-compat",
'react-dom': 'preact-compat', "react-dom": "preact-compat",
// Not necessary unless you consume a module using `createClass` // Not necessary unless you consume a module using `createClass`
'create-react-class': 'preact-compat/lib/create-react-class', "create-react-class": "preact-compat/lib/create-react-class",
// Not necessary unless you consume a module requiring `react-dom-factories` // Not necessary unless you consume a module requiring `react-dom-factories`
'react-dom-factories': 'preact-compat/lib/react-dom-factories' "react-dom-factories": "preact-compat/lib/react-dom-factories",
} },
} },
} };
} }
const isProdBuild = process.env.NODE_ENV === 'production' const isProdBuild = process.env.NODE_ENV === "production";
const configs = [ const configs = [createConfig(isProdBuild, /* latestBuild */ true)];
createConfig(isProdBuild, /* latestBuild */ true),
];
if (isProdBuild) { if (isProdBuild) {
configs.push(createConfig(isProdBuild, /* latestBuild */ false)); configs.push(createConfig(isProdBuild, /* latestBuild */ false));
} }

1262
yarn.lock
View File

File diff suppressed because it is too large Load Diff