Updated babel/webpack

This commit is contained in:
orangemug 2018-10-06 21:05:33 +01:00
parent c8d23a534e
commit 802a7eb1be
20 changed files with 117 additions and 117 deletions

View file

@ -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 @@
]
}
}
}
}

View file

@ -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",

View file

@ -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 <https://github.com/mapbox/mapbox-gl-js/issues/2416>
{
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'
]
}

View file

@ -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'

View file

@ -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"
}
}

View file

@ -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) {

View file

@ -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 {
<div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
<DocLabel
label={"Compound Filter"}
doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
doc={latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
/>
<SelectInput
value={combiningOp}

View file

@ -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'
@ -13,7 +13,7 @@ class LayerIdBlock extends React.Component {
}
render() {
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
return <InputBlock label={"ID"} doc={latest.layer.id.doc}
data-wd-key={this.props.wdKey}
>
<StringInput

View file

@ -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 AutocompleteInput from '../inputs/AutocompleteInput'
@ -19,7 +19,7 @@ class LayerSourceBlock extends React.Component {
}
render() {
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
return <InputBlock label={"Source"} doc={latest.layer.source.doc}
data-wd-key={this.props.wdKey}
>
<AutocompleteInput

View file

@ -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 AutocompleteInput from '../inputs/AutocompleteInput'
@ -20,7 +20,7 @@ class LayerSourceLayer extends React.Component {
}
render() {
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
return <InputBlock label={"Source Layer"} doc={latest.layer['source-layer'].doc}
data-wd-key="layer-source-layer"
>
<AutocompleteInput

View file

@ -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 SelectInput from '../inputs/SelectInput'
@ -13,7 +13,7 @@ class LayerTypeBlock extends React.Component {
}
render() {
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
return <InputBlock label={"Type"} doc={latest.layer.type.doc}
data-wd-key={this.props.wdKey}
>
<SelectInput

View file

@ -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 MaxZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
return <InputBlock label={"Max Zoom"} doc={latest.layer.maxzoom.doc}
data-wd-key="max-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={styleSpec.latest.layer.maxzoom.minimum}
max={styleSpec.latest.layer.maxzoom.maximum}
default={styleSpec.latest.layer.maxzoom.maximum}
min={latest.layer.maxzoom.minimum}
max={latest.layer.maxzoom.maximum}
default={latest.layer.maxzoom.maximum}
/>
</InputBlock>
}

View file

@ -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 <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
return <InputBlock label={"Min Zoom"} doc={latest.layer.minzoom.doc}
data-wd-key="min-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}
min={styleSpec.latest.layer.minzoom.minimum}
max={styleSpec.latest.layer.minzoom.maximum}
default={styleSpec.latest.layer.minzoom.minimum}
min={latest.layer.minzoom.minimum}
max={latest.layer.minzoom.maximum}
default={latest.layer.minzoom.minimum}
/>
</InputBlock>
}

View file

@ -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");

View file

@ -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'}
>
<div style={{minWidth: 350}}>
<InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
<InputBlock label={"Name"} doc={latest.$root.name.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.name"
value={this.props.mapStyle.name}
@ -58,7 +58,7 @@ class SettingsModal extends React.Component {
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
<InputBlock label={"Sprite URL"} doc={latest.$root.sprite.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.sprite"
value={this.props.mapStyle.sprite}
@ -66,7 +66,7 @@ class SettingsModal extends React.Component {
/>
</InputBlock>
<InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
<InputBlock label={"Glyphs URL"} doc={latest.$root.glyphs.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.glyphs"
value={this.props.mapStyle.glyphs}

View file

@ -1,6 +1,6 @@
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 Modal from './Modal'
import Button from '../Button'
import InputBlock from '../inputs/InputBlock'
@ -152,7 +152,7 @@ class AddSource extends React.Component {
onChange={v => this.setState({ sourceId: v})}
/>
</InputBlock>
<InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
<InputBlock label={"Source Type"} doc={latest.source_vector.type.doc}>
<SelectInput
options={[
['geojson', 'GeoJSON'],

View file

@ -1,6 +1,6 @@
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 NumberInput from '../inputs/NumberInput'
@ -16,7 +16,7 @@ class TileJSONSourceEditor extends React.Component {
render() {
return <div>
<InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
<InputBlock label={"TileJSON URL"} doc={latest.source_vector.url.doc}>
<StringInput
value={this.props.source.url}
onChange={url => 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 <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={latest.source_vector.tiles.doc}>
<StringInput
value={tileUrl}
onChange={this.changeTileUrl.bind(this, tileIndex)}
@ -62,7 +62,7 @@ class TileURLSourceEditor extends React.Component {
render() {
return <div>
{this.renderTileUrls()}
<InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
<InputBlock label={"Min Zoom"} doc={latest.source_vector.minzoom.doc}>
<NumberInput
value={this.props.source.minzoom || 0}
onChange={minzoom => this.props.onChange({
@ -71,7 +71,7 @@ class TileURLSourceEditor extends React.Component {
})}
/>
</InputBlock>
<InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
<InputBlock label={"Max Zoom"} doc={latest.source_vector.maxzoom.doc}>
<NumberInput
value={this.props.source.maxzoom || 22}
onChange={maxzoom => this.props.onChange({
@ -93,7 +93,7 @@ class GeoJSONSourceEditor extends React.Component {
}
render() {
return <InputBlock label={"GeoJSON Data"} doc={styleSpec.latest.source_geojson.data.doc}>
return <InputBlock label={"GeoJSON Data"} doc={latest.source_geojson.data.doc}>
<StringInput
value={this.props.source.data}
onChange={data => this.props.onChange({
@ -125,14 +125,14 @@ class SourceTypeEditor extends React.Component {
case 'tilexyz_raster': return <TileURLSourceEditor {...commonProps} />
case 'tilejson_raster-dem': return <TileJSONSourceEditor {...commonProps} />
case 'tilexyz_raster-dem': return <TileURLSourceEditor {...commonProps}>
<InputBlock label={"Encoding"} doc={styleSpec.latest.source_raster_dem.encoding.doc}>
<InputBlock label={"Encoding"} doc={latest.source_raster_dem.encoding.doc}>
<SelectInput
options={Object.keys(styleSpec.latest.source_raster_dem.encoding.values)}
options={Object.keys(latest.source_raster_dem.encoding.values)}
onChange={encoding => 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}
/>
</InputBlock>
</TileURLSourceEditor>

View file

@ -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(' '))
}

View file

@ -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)

View file

@ -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]
}
})