diff --git a/.gitignore b/.gitignore index 5a628b3c2ba..5e2d75c9807 100644 --- a/.gitignore +++ b/.gitignore @@ -1,9 +1,7 @@ /rollup/build/ /docs/components/api.json /dist/ -/docs/pages/dist/mapbox-gl-dev.js -/docs/pages/dist/mapbox-gl.js -/docs/pages/dist/mapbox-gl-unminified.js +/docs/pages/dist/ *.js.map node_modules package-lock.json diff --git a/build/banner.js b/build/banner.js new file mode 100644 index 00000000000..cb164daba95 --- /dev/null +++ b/build/banner.js @@ -0,0 +1,4 @@ +import fs from 'fs'; + +const version = JSON.parse(fs.readFileSync('package.json')).version; +export default `/* Mapbox GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/mapbox/mapbox-gl-js/blob/v${version}/LICENSE.txt */`; diff --git a/build/rollup_plugins.js b/build/rollup_plugins.js index 610232162fc..575f61055d6 100644 --- a/build/rollup_plugins.js +++ b/build/rollup_plugins.js @@ -9,14 +9,10 @@ import { terser } from 'rollup-plugin-terser'; import minifyStyleSpec from './rollup_plugin_minify_style_spec'; import { createFilter } from 'rollup-pluginutils'; -const {BUILD, MINIFY} = process.env; -const minified = MINIFY === 'true'; -const production = BUILD === 'production'; - // Common set of plugins/transformations shared across different rollup // builds (main mapboxgl bundle, style-spec package, benchmarks bundle) -export const plugins = () => [ +export const plugins = (minified, production) => [ flow(), minifyStyleSpec(), json(), diff --git a/debug/csp-static.html b/debug/csp-static.html new file mode 100644 index 00000000000..952fff40b03 --- /dev/null +++ b/debug/csp-static.html @@ -0,0 +1,36 @@ + + + + Mapbox GL JS debug page + + + + + + + + + + +
+ + + + + + diff --git a/docs/components/quickstart.js b/docs/components/quickstart.js index 15bfaa98d5e..f3ae37a4733 100644 --- a/docs/components/quickstart.js +++ b/docs/components/quickstart.js @@ -142,6 +142,20 @@ export default class extends React.Component {

Requesting styles from Mapbox or other services will require additional directives. For Mapbox, you can use this connect-src directive:

{`connect-src https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com`}
+ +

For strict CSP environments without worker-src blob: ; child-src blob: enabled, there's a separate + Mapbox GL JS bundle (mapbox-gl-csp.js and mapbox-gl-csp-worker.js) which requires setting the path + to the worker manually:

+ + + {highlightMarkup(` + + + `)} +

Mapbox CSS

diff --git a/package.json b/package.json index a25e0845974..bd2db271441 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,7 @@ "watch-dev": "rollup -c --environment BUILD:dev --watch", "build-prod": "rollup -c --environment BUILD:production", "build-prod-min": "rollup -c --environment BUILD:production,MINIFY:true", + "build-csp": "rollup -c rollup.config.csp.js", "build-flow-types": "cp build/mapbox-gl.js.flow dist/mapbox-gl.js.flow && cp build/mapbox-gl.js.flow dist/mapbox-gl-dev.js.flow", "build-css": "postcss -o dist/mapbox-gl.css src/css/mapbox-gl.css", "build-style-spec": "cd src/style-spec && npm run build && cd ../.. && mkdir -p dist/style-spec && cp src/style-spec/dist/* dist/style-spec", @@ -140,7 +141,7 @@ "test-expressions": "build/run-node test/expression.test.js", "test-flow": "build/run-node build/generate-flow-typed-style-spec && flow .", "test-cov": "nyc --require=@mapbox/flow-remove-types/register --reporter=text-summary --reporter=lcov --cache run-s test-unit test-expressions test-query test-render", - "prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-css build-style-spec test-build", + "prepublishOnly": "run-s build-flow-types build-dev build-prod-min build-prod build-csp build-css build-style-spec test-build", "codegen": "build/run-node build/generate-style-code.js && build/run-node build/generate-struct-arrays.js" }, "files": [ diff --git a/rollup.config.csp.js b/rollup.config.csp.js new file mode 100644 index 00000000000..8e1aee8e5e2 --- /dev/null +++ b/rollup.config.csp.js @@ -0,0 +1,24 @@ +import {plugins} from './build/rollup_plugins'; +import banner from './build/banner'; + +// a config for generating a special GL JS bundle with static web worker code (in a separate file) +// https://github.com/mapbox/mapbox-gl-js/issues/6058 + +const config = (input, file, format) => ({ + input, + output: { + name: 'mapboxgl', + file, + format, + sourcemap: true, + indent: false, + banner + }, + treeshake: true, + plugins: plugins(true, true) +}); + +export default [ + config('src/index.js', 'dist/mapbox-gl-csp.js', 'umd'), + config('src/source/worker.js', 'dist/mapbox-gl-csp-worker.js', 'iife') +]; diff --git a/rollup.config.js b/rollup.config.js index f6db3ebd732..b103700d52c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,8 +1,8 @@ import fs from 'fs'; import sourcemaps from 'rollup-plugin-sourcemaps'; import {plugins} from './build/rollup_plugins'; +import banner from './build/banner'; -const version = JSON.parse(fs.readFileSync('package.json')).version; const {BUILD, MINIFY} = process.env; const minified = MINIFY === 'true'; const production = BUILD === 'production'; @@ -10,7 +10,7 @@ const outputFile = !production ? 'dist/mapbox-gl-dev.js' : minified ? 'dist/mapbox-gl.js' : 'dist/mapbox-gl-unminified.js'; -const config = [{ +export default [{ // First, use code splitting to bundle GL JS into three "chunks": // - rollup/build/index.js: the main module, plus all its dependencies not shared by the worker module // - rollup/build/worker.js: the worker module, plus all dependencies not shared by the main module @@ -28,7 +28,7 @@ const config = [{ chunkFileNames: 'shared.js' }, treeshake: production, - plugins: plugins() + plugins: plugins(minified, production) }, { // Next, bundle together the three "chunks" produced in the previous pass // into a single, final bundle. See rollup/bundle_prelude.js and @@ -41,7 +41,7 @@ const config = [{ sourcemap: production ? true : 'inline', indent: false, intro: fs.readFileSync(require.resolve('./rollup/bundle_prelude.js'), 'utf8'), - banner: `/* Mapbox GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/mapbox/mapbox-gl-js/blob/v${version}/LICENSE.txt */` + banner }, treeshake: false, plugins: [ @@ -50,5 +50,3 @@ const config = [{ sourcemaps() ], }]; - -export default config