From 802a7eb1bea932a2cca7918c6a356bd787de5cc6 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 6 Oct 2018 21:05:33 +0100 Subject: [PATCH] Updated babel/webpack --- .babelrc | 15 ++++- config/webpack.config.js | 3 +- config/webpack.loaders.js | 51 ++++++++-------- config/webpack.production.config.js | 10 +-- package.json | 61 +++++++++---------- src/components/App.jsx | 6 +- src/components/filter/FilterEditor.jsx | 4 +- src/components/layers/LayerIdBlock.jsx | 4 +- src/components/layers/LayerSourceBlock.jsx | 4 +- .../layers/LayerSourceLayerBlock.jsx | 4 +- src/components/layers/LayerTypeBlock.jsx | 4 +- src/components/layers/MaxZoomBlock.jsx | 10 +-- src/components/layers/MinZoomBlock.jsx | 10 +-- src/components/modals/ExportModal.jsx | 4 +- src/components/modals/SettingsModal.jsx | 8 +-- src/components/modals/SourcesModal.jsx | 4 +- src/components/sources/SourceTypeEditor.jsx | 18 +++--- src/libs/diffmessage.js | 4 +- src/libs/filterops.js | 4 +- src/libs/layer.js | 6 +- 20 files changed, 117 insertions(+), 117 deletions(-) diff --git a/.babelrc b/.babelrc index 27baf2a0..c3f767b6 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,15 @@ { - "presets": ["env", "react"], - "plugins": ["transform-object-rest-spread", "transform-class-properties"], + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": [ + "react-hot-loader/babel", + "@babel/plugin-proposal-class-properties", + [ + "@babel/plugin-proposal-decorators", + { + "legacy": true + } + ], + ], "env": { "test": { "plugins": [ @@ -10,4 +19,4 @@ ] } } -} \ No newline at end of file +} diff --git a/config/webpack.config.js b/config/webpack.config.js index aa74a29c..efcbd6c4 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -10,6 +10,7 @@ const PORT = process.env.PORT || "8888"; module.exports = { target: 'web', + mode: 'development', entry: [ `webpack-dev-server/client?http://${HOST}:${PORT}`, `webpack/hot/only-dev-server`, @@ -27,7 +28,7 @@ module.exports = { noParse: [ /mapbox-gl\/dist\/mapbox-gl.js/ ], - loaders: loaders + rules: loaders }, node: { fs: "empty", diff --git a/config/webpack.loaders.js b/config/webpack.loaders.js index 44215cd0..c4b0d4b8 100644 --- a/config/webpack.loaders.js +++ b/config/webpack.loaders.js @@ -1,54 +1,53 @@ +const path = require("path"); + module.exports = [ { test: /\.jsx?$/, - exclude: /(node_modules|bower_components|public)/, - loaders: ['react-hot-loader/webpack'] + exclude: [ + path.resolve(__dirname, '../node_modules') + ], + use: 'babel-loader' }, // HACK: This is a massive hack and reaches into the mapbox-gl private API. // We have to include this for access to `normalizeSourceURL`. We should // remove this ASAP, see - { - test: /.*node_modules[\/\\]mapbox-gl[\/\\]src[\/\\]util[\/\\].*\.js/, - loader: 'babel-loader', - query: { - presets: ['env', 'react', 'flow'], - plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], - } - }, { test: /\.jsx?$/, - // Note: These modules aren't ES5 therefore we much compile them. - exclude: /(.*node_modules(?![\/\\](@mapbox[\/\\]mapbox-gl-style-spec|ol|mapbox-to-ol-style))|bower_components|public)/, - loader: 'babel-loader', - query: { - presets: ['env', 'react'], - plugins: ['transform-runtime', 'transform-decorators-legacy', 'transform-class-properties'], + include: [ + path.resolve(__dirname, '../node_modules/mapbox-gl/src/util/') + ], + use: { + loader: 'babel-loader', + options: { + presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'], + plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'], + } } }, { test: /\.(eot|ttf|woff|woff2)$/, - loader: 'file-loader?name=fonts/[name].[ext]' + use: 'file-loader?name=fonts/[name].[ext]' }, { test: /\.ico$/, - loader: 'file-loader?name=[name].[ext]' + use: 'file-loader?name=[name].[ext]' }, { test: /\.(svg|gif|jpg|png)$/, - loader: 'file-loader?name=img/[name].[ext]' - }, - { - test: /\.json$/, - loader: 'json-loader' + use: 'file-loader?name=img/[name].[ext]' }, { test: /[\/\\](node_modules|global|src)[\/\\].*\.scss$/, - loaders: ["style-loader", "css-loader", "sass-loader"] + use: [ + 'style-loader', + "css-loader", + "sass-loader" + ] }, { test: /[\/\\](node_modules|global|src)[\/\\].*\.css$/, - loaders: [ - 'style-loader?sourceMap', + use: [ + 'style-loader', 'css-loader' ] } diff --git a/config/webpack.production.config.js b/config/webpack.production.config.js index a1e1e588..025040fe 100644 --- a/config/webpack.production.config.js +++ b/config/webpack.production.config.js @@ -1,7 +1,6 @@ var webpack = require('webpack'); var path = require('path'); var loaders = require('./webpack.loaders'); -var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var WebpackCleanupPlugin = require('webpack-cleanup-plugin'); var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; @@ -17,8 +16,8 @@ module.exports = { }, output: { path: OUTPATH, - filename: '[name].[chunkhash].js', - chunkFilename: '[chunkhash].js' + filename: '[name].[contenthash].js', + chunkFilename: '[contenthash].js' }, resolve: { extensions: ['.js', '.jsx'] @@ -27,7 +26,7 @@ module.exports = { noParse: [ /mapbox-gl\/dist\/mapbox-gl.js/ ], - loaders + rules: loaders }, node: { fs: "empty", @@ -43,9 +42,6 @@ module.exports = { } }), new UglifyJsPlugin(), - new ExtractTextPlugin('[contenthash].css', { - allChunks: true - }), new HtmlWebpackPlugin({ template: './src/template.html', title: 'Maputnik' diff --git a/package.json b/package.json index 5c93a8e6..3489294f 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "license": "MIT", "homepage": "https://github.com/maputnik/editor#readme", "dependencies": { + "@babel/runtime": "^7.1.2", "@mapbox/mapbox-gl-rtl-text": "^0.2.1", "@mapbox/mapbox-gl-style-spec": "^13.1.0", "classnames": "^2.2.6", @@ -96,56 +97,50 @@ } }, "devDependencies": { - "babel-core": "^6.26.3", - "babel-eslint": "^8.2.3", - "babel-loader": "7.1.4", + "@babel/core": "^7.1.2", + "@babel/plugin-proposal-class-properties": "^7.1.0", + "@babel/plugin-proposal-decorators": "^7.1.2", + "@babel/plugin-transform-runtime": "^7.1.0", + "@babel/preset-env": "^7.1.0", + "@babel/preset-flow": "^7.0.0", + "@babel/preset-react": "^7.0.0", + "babel-eslint": "^10.0.1", + "babel-loader": "8.0.4", "babel-plugin-istanbul": "^4.1.6", - "babel-plugin-transform-class-properties": "^6.24.1", - "babel-plugin-transform-decorators-legacy": "^1.3.4", - "babel-plugin-transform-flow-strip-types": "^6.22.0", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-plugin-transform-runtime": "^6.23.0", - "babel-preset-env": "^1.6.1", - "babel-preset-es2015": "^6.24.1", - "babel-preset-flow": "^6.23.0", - "babel-preset-react": "^6.24.1", - "babel-register": "^6.26.0", - "babel-runtime": "^6.26.0", - "copy-webpack-plugin": "^4.5.1", + "copy-webpack-plugin": "^4.5.2", "cors": "^2.8.4", "cross-env": "^5.2.0", - "css-loader": "^0.28.11", + "css-loader": "^1.0.0", "eslint": "^4.19.1", "eslint-plugin-react": "^7.4.0", "express": "^4.16.3", - "extract-text-webpack-plugin": "^3.0.2", - "file-loader": "^1.1.5", + "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "is-docker": "^1.1.0", "istanbul": "^0.4.5", - "istanbul-lib-coverage": "^1.2.0", - "json-loader": "^0.5.7", + "istanbul-lib-coverage": "^2.0.1", "mkdirp": "^0.5.1", "mocha": "^5.2.0", - "node-sass": "^4.9.0", + "node-sass": "^4.9.3", "raw-loader": "^0.5.1", - "react-hot-loader": "^3.1.1", - "sass-loader": "^7.0.1", - "selenium-standalone": "^6.14.0", - "style-loader": "^0.20.3", - "stylelint": "^9.2.0", + "react-hot-loader": "^4.3.11", + "sass-loader": "^7.1.0", + "selenium-standalone": "^6.15.3", + "style-loader": "^0.23.0", + "stylelint": "^9.6.0", "stylelint-config-recommended-scss": "^3.2.0", - "stylelint-scss": "^3.0.0", + "stylelint-scss": "^3.3.1", "transform-loader": "^0.2.4", "uglifyjs-webpack-plugin": "^1.2.4", "uuid": "^3.3.2", - "wdio-mocha-framework": "^0.5.13", + "wdio-mocha-framework": "^0.6.3", "wdio-selenium-standalone-service": "0.0.10", - "wdio-spec-reporter": "^0.1.2", - "webdriverio": "^4.12.0", - "webpack": "^3.8.1", - "webpack-bundle-analyzer": "^2.9.0", + "wdio-spec-reporter": "^0.1.5", + "webdriverio": "^4.13.2", + "webpack": "^4.20.2", + "webpack-bundle-analyzer": "^3.0.2", "webpack-cleanup-plugin": "^0.5.1", - "webpack-dev-server": "^2.9.4" + "webpack-cli": "^3.1.2", + "webpack-dev-server": "^3.1.9" } } diff --git a/src/components/App.jsx b/src/components/App.jsx index 274e6664..3b6a3a6a 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -21,7 +21,7 @@ import ShortcutsModal from './modals/ShortcutsModal' import SurveyModal from './modals/SurveyModal' import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata' -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest, validate} from '@mapbox/mapbox-gl-style-spec' import style from '../libs/style' import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen' import { undoMessages, redoMessages } from '../libs/diffmessage' @@ -168,7 +168,7 @@ export default class App extends React.Component { sources: {}, vectorLayers: {}, inspectModeEnabled: false, - spec: styleSpec.latest, + spec: latest, isOpen: { settings: false, sources: false, @@ -238,7 +238,7 @@ export default class App extends React.Component { onStyleChanged = (newStyle, save=true) => { - const errors = styleSpec.validate(newStyle, styleSpec.latest) + const errors = validate(newStyle, latest) if(errors.length === 0) { if(newStyle.glyphs !== this.state.mapStyle.glyphs) { diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index a4c25d86..8073f57b 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { combiningFilterOps } from '../../libs/filterops.js' -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest} from '@mapbox/mapbox-gl-style-spec' import DocLabel from '../fields/DocLabel' import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' @@ -89,7 +89,7 @@ export default class CombiningFilterEditor extends React.Component {
} diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index 6729f5bc..06b0d28d 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/src/components/layers/MinZoomBlock.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest} from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import NumberInput from '../inputs/NumberInput' @@ -12,15 +12,15 @@ class MinZoomBlock extends React.Component { } render() { - return } diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index 2a96e220..f20f0df1 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { saveAs } from 'file-saver' -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {format} from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import CheckboxInput from '../inputs/CheckboxInput' @@ -36,7 +36,7 @@ class ExportModal extends React.Component { } downloadStyle() { - const tokenStyle = styleSpec.format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle))); + const tokenStyle = format(stripAccessTokens(style.replaceAccessTokens(this.props.mapStyle))); const blob = new Blob([tokenStyle], {type: "application/json;charset=utf-8"}); saveAs(blob, this.props.mapStyle.id + ".json"); diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 69726f3f..6d38b2dc 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest} from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' @@ -44,7 +44,7 @@ class SettingsModal extends React.Component { title={'Style Settings'} >
- + - + - + this.setState({ sourceId: v})} /> - + - + this.props.onChange({ @@ -50,7 +50,7 @@ class TileURLSourceEditor extends React.Component { const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] const tiles = this.props.source.tiles || [] return tiles.map((tileUrl, tileIndex) => { - return + return {this.renderTileUrls()} - + this.props.onChange({ @@ -71,7 +71,7 @@ class TileURLSourceEditor extends React.Component { })} /> - + this.props.onChange({ @@ -93,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component { } render() { - return + return this.props.onChange({ @@ -125,14 +125,14 @@ class SourceTypeEditor extends React.Component { case 'tilexyz_raster': return case 'tilejson_raster-dem': return case 'tilexyz_raster-dem': return - + this.props.onChange({ ...this.props.source, encoding: encoding })} - value={this.props.source.encoding || styleSpec.latest.source_raster_dem.encoding.default} + value={this.props.source.encoding || latest.source_raster_dem.encoding.default} /> diff --git a/src/libs/diffmessage.js b/src/libs/diffmessage.js index 1cb32668..81c839b3 100644 --- a/src/libs/diffmessage.js +++ b/src/libs/diffmessage.js @@ -1,7 +1,7 @@ -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {diff} from '@mapbox/mapbox-gl-style-spec' export function diffMessages(beforeStyle, afterStyle) { - const changes = styleSpec.diff(beforeStyle, afterStyle) + const changes = diff(beforeStyle, afterStyle) return changes.map(cmd => cmd.command + ' ' + cmd.args.join(' ')) } diff --git a/src/libs/filterops.js b/src/libs/filterops.js index 156669c0..e30470aa 100644 --- a/src/libs/filterops.js +++ b/src/libs/filterops.js @@ -1,6 +1,6 @@ -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest} from '@mapbox/mapbox-gl-style-spec' export const combiningFilterOps = ['all', 'any', 'none'] export const setFilterOps = ['in', '!in'] export const otherFilterOps = Object - .keys(styleSpec.latest.filter_operator.values) + .keys(latest.filter_operator.values) .filter(op => combiningFilterOps.indexOf(op) < 0) diff --git a/src/libs/layer.js b/src/libs/layer.js index 8e5edf34..8d913ba2 100644 --- a/src/libs/layer.js +++ b/src/libs/layer.js @@ -1,16 +1,16 @@ -import * as styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec' +import {latest} from '@mapbox/mapbox-gl-style-spec' export function changeType(layer, newType) { const changedPaintProps = { ...layer.paint } Object.keys(changedPaintProps).forEach(propertyName => { - if(!(propertyName in styleSpec.latest['paint_' + newType])) { + if(!(propertyName in latest['paint_' + newType])) { delete changedPaintProps[propertyName] } }) const changedLayoutProps = { ...layer.layout } Object.keys(changedLayoutProps).forEach(propertyName => { - if(!(propertyName in styleSpec.latest['layout_' + newType])) { + if(!(propertyName in latest['layout_' + newType])) { delete changedLayoutProps[propertyName] } })