diff --git a/.circleci/config.yml b/.circleci/config.yml
deleted file mode 100644
index e383b053ee..0000000000
--- a/.circleci/config.yml
+++ /dev/null
@@ -1,231 +0,0 @@
-version: 2.1
-orbs:
- aws-cli: circleci/aws-cli@0.1.16
-
-workflows:
- version: 2
- default:
- jobs:
- - prepare:
- filters:
- tags:
- only: /.*/
- - lint:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - build:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - check-size:
- requires:
- - build
- filters:
- tags:
- only: /.*/
- - collect-stats:
- requires:
- - build
- filters:
- tags:
- ignore: /.*/
- branches:
- only: main
- - test-flow:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - test-unit:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - test-render:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - test-query:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - test-expressions:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
- - test-browser:
- requires:
- - prepare
- filters:
- tags:
- only: /.*/
-
-defaults: &defaults
- docker:
- - image: circleci/node:10.16-browsers
- working_directory: ~/mapbox-gl-js
-
-jobs:
- prepare:
- <<: *defaults
- steps:
- - checkout
- - restore_cache:
- keys:
- - v3-yarn-{{ checksum "yarn.lock" }}
- - run: yarn
- - save_cache:
- key: v3-yarn-{{ checksum "yarn.lock" }}
- paths:
- - '~/.yarn'
- - 'node_modules'
- - persist_to_workspace:
- root: .
- paths:
- - .
-
- lint:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - restore_cache:
- keys:
- - v2-lint-{{ .Branch }}
- - v2-lint
- - run: yarn run lint
- - run: yarn run lint-docs
- - run: yarn run lint-css
- - save_cache:
- key: v2-lint-{{ .Branch }}-{{ .Revision }}
- paths:
- - '.eslintcache'
-
- build:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run build-prod-min
- - run: yarn run build-prod
- - run: yarn run build-csp
- - run: yarn run build-dev
- - run: yarn run build-css
- - run: yarn run build-style-spec
- - run: yarn run build-flow-types
- - run: yarn run test-build
- - deploy:
- name: Trigger memory metrics when merging to main
- command: |
- if [ -n "${WEB_METRICS_TOKEN}" ]; then
- if [[ $CIRCLE_BRANCH == main ]]; then
- curl -X POST https://circleci.com/api/v1.1/project/github/mapbox/web-metrics/build?circle-token=${WEB_METRICS_TOKEN}
- fi
- fi
- - store_artifacts:
- path: "dist"
- - store_artifacts:
- path: "test/release"
- - persist_to_workspace:
- root: .
- paths:
- - dist
-
- check-size:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run:
- name: Check bundle size
- command: |
- node build/check-bundle-size.js "dist/mapbox-gl.js" "JS"
- node build/check-bundle-size.js "dist/mapbox-gl.css" "CSS"
-
- collect-stats:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run:
- name: Collect performance stats
- command: node bench/gl-stats.js
- - aws-cli/install
- - run:
- name: Upload performance stats
- command: aws s3 cp data.json.gz s3://mapbox-loading-dock/raw/gl_js.perf_metrics_staging/ci/`git show -s --date=short --format=%cd-%h HEAD`.json.gz
-
- test-flow:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run test-flow
-
- test-unit:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run test-unit
-
- test-render:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run test-render
- - store_artifacts:
- path: "test/integration/render-tests/index.html"
-
- test-query:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run test-query
- - store_test_results:
- path: test/integration/query-tests
- - store_artifacts:
- path: "test/integration/query-tests/index.html"
-
- test-browser:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run build-dev
- - run: yarn run build-token
- - run:
- name: Test Chrome
- environment:
- SELENIUM_BROWSER: chrome
- TAP_COLORS: 1
- command: yarn run test-browser
- - run:
- name: Test Firefox
- environment:
- SELENIUM_BROWSER: firefox
- TAP_COLORS: 1
- command: yarn run test-browser
-
- test-expressions:
- <<: *defaults
- steps:
- - attach_workspace:
- at: .
- - run: yarn run test-expressions
-
diff --git a/.eslintrc b/.eslintrc
index b17f3bafc2..8a01d2b260 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,19 +1,29 @@
{
"extends": [
"mourner",
- "plugin:flowtype/recommended",
- "plugin:import/recommended"
+ "plugin:import/recommended",
+ "plugin:import/typescript"
],
- "parser": "babel-eslint",
+ "parser": "@typescript-eslint/parser",
"parserOptions": {
- "sourceType": "module"
+ "sourceType": "module",
+ "createDefaultProgram": true
},
"plugins": [
- "flowtype",
+ "@typescript-eslint",
"import",
"jsdoc"
],
"rules": {
+ "no-dupe-class-members": "off",
+ "@typescript-eslint/no-dupe-class-members": ["error"],
+ "@typescript-eslint/no-unused-vars": [
+ "warn",
+ { "argsIgnorePattern": "^_" }
+ ],
+ "@typescript-eslint/member-delimiter-style": ["error"],
+ // Disable no-undef. It's covered by @typescript-eslint
+ "no-undef": "off",
// temporarily disabled due to https://github.com/babel/babel-eslint/issues/485
"no-use-before-define": "off",
@@ -33,13 +43,6 @@
"array-bracket-spacing": "off",
"consistent-return": "off",
- "flowtype/define-flow-type": 1,
- "flowtype/require-valid-file-annotation": [
- 2,
- "always", {
- "annotationStyle": "line"
- }
- ],
"global-require": "off",
"import/no-commonjs": "error",
"key-spacing": "off",
@@ -50,13 +53,15 @@
"object": "Object",
"property": "assign"
}],
- "no-unused-vars": ["error", {"argsIgnorePattern": "^_$"}],
+ "no-unused-vars": "off",
"no-warning-comments": "error",
"object-curly-spacing": ["error", "never"],
"prefer-arrow-callback": "error",
"prefer-const": ["error", {"destructuring": "all"}],
"prefer-template": "error",
+ // @typescript-eslint/quotes requires standard quotes rule to be turned off
"quotes": "off",
+ "@typescript-eslint/quotes": ["error", "single"],
"space-before-function-paren": "off",
"template-curly-spacing": "error",
"no-useless-escape": "off",
@@ -72,7 +77,7 @@
"parameters": "off"
}
}],
- "no-multiple-empty-lines": [ "error", {
+ "no-multiple-empty-lines": [ "error", {
"max": 1
}],
"jsdoc/check-param-names": "warn",
@@ -87,6 +92,7 @@
"ignorePrivate": true
}
},
+ "ignorePatterns": ["build/*.js", "*.json"],
"overrides": [
{
"files": ["debug/**", "bench/**", "test/**", "src/style-spec/**"],
diff --git a/.flowconfig b/.flowconfig
deleted file mode 100644
index 5eac8c94d0..0000000000
--- a/.flowconfig
+++ /dev/null
@@ -1,61 +0,0 @@
-[ignore]
-.*\.svg
-.*\.png
-.*/\.nyc_output/.*
-.*/docs/.*
-.*/node_modules/.cache/.*
-.*/node_modules/.*/tests?/.*
-.*/node_modules/@mapbox/jsonlint-lines-primitives/.*
-.*/node_modules/@mapbox/mvt-fixtures/.*
-.*/node_modules/@mapbox/geojson-types/fixtures/.*
-.*/node_modules/@mapbox/mr-ui/.*
-.*/node_modules/@mapbox/dr-ui/.*
-.*/node_modules/@mapbox/batfish/.*
-.*/node_modules/browserify/.*
-.*/node_modules/browser-sync.*/.*
-.*/node_modules/nyc/.*
-.*/node_modules/fbjs/.*
-.*/node_modules/es5-ext/.*
-.*/node_modules/jsdom/.*
-.*/node_modules/eslint.*/.*
-.*/node_modules/highlight.*/.*
-.*/node_modules/rxjs/.*
-.*/node_modules/@?babel.*/.*
-.*/node_modules/react.*/.*
-.*/node_modules/svgo/.*
-.*/node_modules/moment/.*
-.*/node_modules/regenerate-unicode-properties/.*
-.*/node_modules/remark.*/.*
-.*/node_modules/webpack/.*
-.*/node_modules/caniuse-lite/.*
-.*/node_modules/d3.*/.*
-.*/node_modules/css-tree/.*
-.*/node_modules/lodash/.*
-.*/node_modules/fsevents/.*
-.*/node_modules/browser-sync-client/.*
-.*/node_modules/core-js.*/.*
-.*/node_modules/stylelint/.*
-.*/node_modules/postcss.*/.*
-.*/node_modules/prismjs.*/.*
-.*/node_modules/documentation/.*
-.*/node_modules/module-deps/.*
-.*/test/unit/style-spec/fixture/invalidjson.input.json
-.*/render-tests/.*
-.*/query-tests/.*
-.*/expression-tests/.*
-.*/test/build/downstream-flow-fixture/.*
-.*/_batfish_tmp/.*
-.*/_site/.*
-
-[version]
-0.100.0
-
-[options]
-server.max_workers=4
-
-[strict]
-nonstrict-import
-unclear-type
-untyped-import
-untyped-type-import
-sketchy-null
diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml
index 84109b095b..39cdb778cf 100644
--- a/.github/workflows/analyze.yml
+++ b/.github/workflows/analyze.yml
@@ -18,12 +18,12 @@ jobs:
# report status back to pull request
- uses: haya14busa/action-workflow_run-status@v1
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
+ - run: npm ci
- name: Download branch artifact
uses: dawidd6/action-download-artifact@v2
with:
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index c5af5c7cc0..d27df0ac64 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -4,7 +4,6 @@ on:
push:
branches: [main]
pull_request:
- branches: [main]
jobs:
build:
@@ -12,20 +11,19 @@ jobs:
timeout-minutes: 20
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run build-prod-min
- - run: yarn run build-prod
- - run: yarn run build-csp
- - run: yarn run build-dev
- - run: yarn run build-css
- - run: yarn run build-style-spec
- - run: yarn run build-flow-types
- - run: yarn run test-build
+ - run: npm ci
+ - run: npm run build-prod-min
+ - run: npm run build-prod
+ - run: npm run build-csp
+ - run: npm run build-dev
+ - run: npm run build-css
+ - run: npm run build-style-spec
+ - run: npm run test-build
- run: find dist
- run: mkdir build-info
- name: Store build info
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 01b9b847bd..da4877c608 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,7 +6,6 @@ on:
push:
branches: [main]
pull_request:
- branches: [main]
jobs:
lint_build_test:
@@ -17,7 +16,7 @@ jobs:
- macos-latest
- windows-latest
node_version:
- - 10
+ - 14
architecture:
- x64
@@ -31,66 +30,55 @@ jobs:
with:
node-version: ${{ matrix.node_version }}
architecture: ${{ matrix.architecture }}
- - run: yarn install --frozen-lockfile
+ - run: npm ci
- - run: yarn run lint
- - run: yarn run build-dev
- - run: yarn test-unit
+ - run: npm run lint
+ - run: npm run build-dev
+ - run: npm run test-unit
lint:
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
- uses: actions/setup-node@v2-beta
- with:
- node-version: 10
- architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run lint
- - run: yarn run lint-docs
- - run: yarn run lint-css
-
- test-flow:
- runs-on: ubuntu-latest
- timeout-minutes: 20
- steps:
- - uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run test-flow
+ - run: npm ci
+ - run: npm run lint
+ - run: npm run lint-docs
+ - run: npm run lint-css
test-unit:
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
+ - run: npm ci
+ - run: npm run build-dev
# see: https://github.com/stackgl/headless-gl#how-can-headless-gl-be-used-on-a-headless-linux-machine
- - run: xvfb-run -s "-ac -screen 0 1280x1024x24" yarn run test-unit
+ - run: xvfb-run -s "-ac -screen 0 1280x1024x24" npm run test-unit
test-query:
runs-on: ubuntu-latest
timeout-minutes: 20
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run test-query
+ - run: npm ci
+ - run: npm run build-dev
+ - run: npm run test-query
- uses: actions/upload-artifact@v2
with:
path: ./test/integration/query-tests
@@ -105,13 +93,14 @@ jobs:
timeout-minutes: 20
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run test-expressions
+ - run: npm ci
+ - run: npm run build-dev
+ - run: npm run test-expressions
test-browser:
timeout-minutes: 20
@@ -120,25 +109,25 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2-beta
with:
- node-version: 10
+ node-version: 14
architecture: x64
- - run: yarn install --frozen-lockfile
- - run: yarn run build-dev
- - run: DETECT_CHROMEDRIVER_VERSION=true yarn global add chromedriver
- - run: yarn global add geckodriver@^1.22.3
+ - run: npm ci
+ - run: npm run build-dev
+ - run: DETECT_CHROMEDRIVER_VERSION=true npm install -g chromedriver
+ - run: npm install -g geckodriver@^1.22.3
- name: Test Chrome
env:
SELENIUM_BROWSER: chrome
TAP_COLORS: 1
- run: xvfb-run -s "-ac -screen 0 1280x1024x24" yarn run test-browser
+ run: xvfb-run -s "-ac -screen 0 1280x1024x24" npm run test-browser
- name: Test Firefox
env:
SELENIUM_BROWSER: firefox
TAP_COLORS: 1
- run: xvfb-run -s "-ac -screen 0 1280x1024x24" yarn run test-browser
+ run: xvfb-run -s "-ac -screen 0 1280x1024x24" npm run test-browser
# TODO need a data provider for these:
# collect-stats:
@@ -146,12 +135,12 @@ jobs:
# needs: [build]
# steps:
# - uses: actions/checkout@v2
- # - name: Use Node.js 10 x64
+ # - name: Use Node.js 14 x64
# uses: actions/setup-node@v2-beta
# with:
- # node-version: 10
+ # node-version: 14
# architecture: x64
- # - run: yarn install --frozen-lockfile
+ # - run: npm ci
# - uses: actions/download-artifact@v2
# with:
# name: dist
@@ -166,13 +155,13 @@ jobs:
# test-render:
# runs-on: ubuntu-latest
# steps:
- # - name: Use Node.js 10 x64
+ # - name: Use Node.js 14 x64
# uses: actions/setup-node@v2-beta
# with:
- # node-version: 10
+ # node-version: 14
# architecture: x64
- # - run: yarn install --frozen-lockfile
- # - run: yarn run test-render
+ # - run: npm ci
+ # - run: npm run test-render
# - uses: actions/upload-artifact@v2
# with:
# path: test/integration/render-tests/index.html
diff --git a/.github/workflows/publish-style-spec.yml b/.github/workflows/publish-style-spec.yml
index f9c573d84d..b22abcaf5a 100644
--- a/.github/workflows/publish-style-spec.yml
+++ b/.github/workflows/publish-style-spec.yml
@@ -12,26 +12,25 @@ jobs:
with:
fetch-depth: 0
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2
with:
- node-version: 10
+ node-version: 14
architecture: x64
registry-url: 'https://registry.npmjs.org'
- name: Install GL JS
- run: yarn install --frozen-lockfile
+ run: npm ci
- name: Build GL JS
run: |
- yarn run build-prod-min
- yarn run build-css
+ npm run build-prod-min
+ npm run build-css
- name: Build style spec
run: |
- cd src/style-spec
- yarn install
- yarn run prepublish
+ npm run build-style-spec
+ cp -r dist/style-spec/ src/style-spec/dist
- name: Check version and publish
run: |
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c5540c96dc..a1dd11a599 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -18,15 +18,15 @@ jobs:
with:
fetch-depth: 0
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2
with:
- node-version: 10
+ node-version: 14
architecture: x64
registry-url: 'https://registry.npmjs.org'
- name: Install
- run: yarn install --frozen-lockfile
+ run: npm ci
- name: Validate version tag
run: |
@@ -45,17 +45,16 @@ jobs:
- name: Lint
run: |
- yarn run lint
- yarn run lint-docs
- yarn run lint-css
+ npm run lint
+ npm run lint-docs
+ npm run lint-css
- name: Test
run: |
- yarn run test-flow
- yarn run test-unit
- yarn run test-render
- yarn run test-query
- yarn run test-expressions
+ npm run test-unit
+ npm run test-render
+ npm run test-query
+ npm run test-expressions
release:
name: Release
@@ -70,15 +69,15 @@ jobs:
with:
fetch-depth: 0
- - name: Use Node.js 10 x64
+ - name: Use Node.js 14 x64
uses: actions/setup-node@v2
with:
- node-version: 10
+ node-version: 14
architecture: x64
registry-url: 'https://registry.npmjs.org'
- name: Install
- run: yarn install --frozen-lockfile
+ run: npm ci
- name: Validate version tag
run: |
@@ -97,8 +96,8 @@ jobs:
- name: Build
run: |
- yarn run build-prod-min
- yarn run build-css
+ npm run build-prod-min
+ npm run build-css
- name: Create Archive
run: |
diff --git a/.gitignore b/.gitignore
index 9dc10d318f..715d1ee3fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,12 +1,12 @@
/rollup/build/
+/types/
/dist/
+/dist_type/
*.es.js
*.js.map
node_modules
-package-lock.json
*.sublime-*
coverage
-flow-coverage
.DS_Store
.nyc_output
*_generated.js
diff --git a/.nvmrc b/.nvmrc
index dc08cc7bd0..0627d197d0 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-10.24.1
+14.17.4
diff --git a/CHANGELOG.md b/CHANGELOG.md
index df54342dc1..fe0aaf4216 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,18 @@
### Features and improvements
+- *...Add new stuff here...*
+### 🐞 Bug fixes
+
+- *...Add new stuff here...*
+
+## 2.0.0
+
+### Features and improvements
+
+- Migrated the production code to typescript
+- ** Breaking Change ** removed `version` from the public API
+- ** Breaking Change ** stopped supporting IE (internet explorer)
- *...Add new stuff here...*
### 🐞 Bug fixes
diff --git a/bench/benchmarks/worker_transfer.js b/bench/benchmarks/worker_transfer.js
index 2c5c37872d..008b9ddd9f 100644
--- a/bench/benchmarks/worker_transfer.js
+++ b/bench/benchmarks/worker_transfer.js
@@ -6,7 +6,6 @@ import fetchStyle from '../lib/fetch_style';
import TileParser from '../lib/tile_parser';
import {OverscaledTileID} from '../../src/source/tile_id';
import {serialize, deserialize} from '../../src/util/web_worker_transfer';
-import {values} from '../../src/util/util';
export default class WorkerTransfer extends Benchmark {
parser: TileParser;
@@ -48,8 +47,8 @@ export default class WorkerTransfer extends Benchmark {
return Promise.all(tiles.map(tile => this.parser.parseTile(tile)));
}).then((tileResults) => {
const payload = tileResults
- .concat(values(this.parser.icons))
- .concat(values(this.parser.glyphs)).map((obj) => serialize(obj, []));
+ .concat(Object.values(this.parser.icons))
+ .concat(Object.values(this.parser.glyphs)).map((obj) => serialize(obj, []));
this.payloadJSON = payload.map(barePayload);
this.payloadTiles = payload.slice(0, tileResults.length);
});
diff --git a/bench/rollup_config_benchmarks.js b/bench/rollup_config_benchmarks.js
index 8ef5437de9..b4ae0e9951 100644
--- a/bench/rollup_config_benchmarks.js
+++ b/bench/rollup_config_benchmarks.js
@@ -2,7 +2,6 @@ import fs from 'fs';
import sourcemaps from 'rollup-plugin-sourcemaps';
import replace from 'rollup-plugin-replace';
import {plugins} from '../build/rollup_plugins';
-import buble from 'rollup-plugin-buble';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
@@ -58,7 +57,6 @@ const viewConfig = {
sourcemap: false
},
plugins: [
- buble({transforms: {dangerousForOf: true}, objectAssign: true}),
resolve({browser: true, preferBuiltins: false}),
commonjs(),
replace(replaceConfig)
diff --git a/build/maplibre-gl-js.dockerfile b/build/maplibre-gl-js.dockerfile
index 91eeea66ca..33f45e69dc 100644
--- a/build/maplibre-gl-js.dockerfile
+++ b/build/maplibre-gl-js.dockerfile
@@ -1,6 +1,6 @@
# see: publish-release.sh to build/run this
-FROM node:10
+FROM node:14
ENV DEBIAN_FRONTEND=noninteractive
diff --git a/build/rollup_plugins.js b/build/rollup_plugins.js
index 156ac68176..664ad1c672 100644
--- a/build/rollup_plugins.js
+++ b/build/rollup_plugins.js
@@ -1,28 +1,31 @@
-import flowRemoveTypes from '@mapbox/flow-remove-types';
-import buble from 'rollup-plugin-buble';
-import resolve from 'rollup-plugin-node-resolve';
-import commonjs from 'rollup-plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import commonjs from '@rollup/plugin-commonjs';
import unassert from 'rollup-plugin-unassert';
-import json from 'rollup-plugin-json';
+import json from '@rollup/plugin-json';
import {terser} from 'rollup-plugin-terser';
-import minifyStyleSpec from './rollup_plugin_minify_style_spec';
-import {createFilter} from 'rollup-pluginutils';
+import minifyStyleSpec from './rollup_plugin_minify_style_spec.js';
import strip from '@rollup/plugin-strip';
// Common set of plugins/transformations shared across different rollup
// builds (main maplibre bundle, style-spec package, benchmarks bundle)
export const plugins = (minified, production) => [
- flow(),
minifyStyleSpec(),
json(),
+ // https://github.com/zaach/jison/issues/351
+ replace({
+ include: /\/jsonlint-lines-primitives\/lib\/jsonlint.js/,
+ delimiters: ['', ''],
+ values: {
+ '_token_stack:': ''
+ }
+ }),
production ? strip({
sourceMap: true,
functions: ['PerformanceUtils.*', 'Debug.*']
}) : false,
- glsl('./src/shaders/*.glsl', production),
- buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
minified ? terser({
compress: {
pure_getters: true,
@@ -40,41 +43,3 @@ export const plugins = (minified, production) => [
ignoreGlobal: true
})
].filter(Boolean);
-
-// Using this instead of rollup-plugin-flow due to
-// https://github.com/leebyron/rollup-plugin-flow/issues/5
-export function flow() {
- return {
- name: 'flow-remove-types',
- transform: (code) => ({
- code: flowRemoveTypes(code).toString(),
- map: null
- })
- };
-}
-
-// Using this instead of rollup-plugin-string to add minification
-function glsl(include, minify) {
- const filter = createFilter(include);
- return {
- name: 'glsl',
- transform(code, id) {
- if (!filter(id)) return;
-
- // barebones GLSL minification
- if (minify) {
- code = code.trim() // strip whitespace at the start/end
- .replace(/\s*\/\/[^\n]*\n/g, '\n') // strip double-slash comments
- .replace(/\n+/g, '\n') // collapse multi line breaks
- .replace(/\n\s+/g, '\n') // strip identation
- .replace(/\s?([+-\/*=,])\s?/g, '$1') // strip whitespace around operators
- .replace(/([;\(\),\{\}])\n(?=[^#])/g, '$1'); // strip more line breaks
- }
-
- return {
- code: `export default ${JSON.stringify(code)};`,
- map: {mappings: ''}
- };
- }
- };
-}
diff --git a/build/run-tap b/build/run-tap
deleted file mode 100755
index e5b300cfed..0000000000
--- a/build/run-tap
+++ /dev/null
@@ -1,8 +0,0 @@
-#!/usr/bin/env bash
-if [ "$#" == 5 ]; then
- arg="${@:1:3} ${4}/${5}"
-else
- arg="${@}"
-fi
-
-node_modules/.bin/tap --node-arg -r --node-arg @mapbox/flow-remove-types/register --node-arg -r --node-arg esm $arg --node-arg
diff --git a/build/test/build-tape.js b/build/test/build-tape.js
index 78f11d8d1e..d32bdf2b2e 100644
--- a/build/test/build-tape.js
+++ b/build/test/build-tape.js
@@ -1,12 +1,10 @@
-/* eslint-disable import/no-commonjs */
-/* eslint-disable flowtype/require-valid-file-annotation */
-const browserify = require('browserify');
-const fs = require('fs');
+import browserify from 'browserify';
+import fs from 'fs';
-module.exports = function() {
+export default function() {
return new Promise((resolve, reject) => {
- browserify(require.resolve('../../test/util/tape_config.js'), { standalone: 'tape' })
- .transform("babelify", {presets: ["@babel/preset-env"], global: true})
+ browserify('./test/util/tape_config.js', { standalone: 'tape' })
+ .transform('babelify', {presets: ['@babel/preset-env'], global: true})
.bundle((err, buff) => {
if (err) { throw err; }
@@ -16,4 +14,4 @@ module.exports = function() {
});
});
});
-};
+}
diff --git a/build/web_worker_replacement.js b/build/web_worker_replacement.js
new file mode 100644
index 0000000000..a8775b89bd
--- /dev/null
+++ b/build/web_worker_replacement.js
@@ -0,0 +1,5 @@
+import maplibregl from '../rollup/build/tsc/index'
+
+export default function () {
+ return new Worker(maplibregl.workerUrl);
+}
\ No newline at end of file
diff --git a/debug/.eslintrc b/debug/.eslintrc
index 62ffd8a1f1..ab4c19add0 100644
--- a/debug/.eslintrc
+++ b/debug/.eslintrc
@@ -15,6 +15,7 @@
"strict": "off",
"no-restricted-properties": "off",
"no-unused-vars": "off",
+ "@typescript-eslint/no-unused-vars": "off",
"prefer-template": "off"
},
"env": {
diff --git a/debug/2762.html b/debug/2762.html
index d2dd80e153..5ffff0b9a4 100644
--- a/debug/2762.html
+++ b/debug/2762.html
@@ -20,35 +20,35 @@
var map = new maplibregl.Map({
container: 'map',
style: {
- "version": 8,
- "sources": {
- "geojson": {
- "type": "geojson",
- "data": {
- "type": "Point",
- "coordinates": [0, 0]
+ 'version': 8,
+ 'sources': {
+ 'geojson': {
+ 'type': 'geojson',
+ 'data': {
+ 'type': 'Point',
+ 'coordinates': [0, 0]
}
}
},
- "transition": {
- "duration": 1000
+ 'transition': {
+ 'duration': 1000
},
- "layers": [
+ 'layers': [
{
- "id": "circle",
- "type": "circle",
- "source": "geojson",
- "paint": {
- "circle-translate": [-50, -50]
+ 'id': 'circle',
+ 'type': 'circle',
+ 'source': 'geojson',
+ 'paint': {
+ 'circle-translate': [-50, -50]
}
}
]
}
});
-map.on('click', function(e) {
- map.setPaintProperty("circle", "circle-color", "red");
- map.setPaintProperty("circle", "circle-translate", [50, 50]);
+map.on('click', function(_) {
+ map.setPaintProperty('circle', 'circle-color', 'red');
+ map.setPaintProperty('circle', 'circle-translate', [50, 50]);
});
diff --git a/debug/7517.html b/debug/7517.html
index 3e3ecbdcff..59deded219 100644
--- a/debug/7517.html
+++ b/debug/7517.html
@@ -62,11 +62,11 @@
];
const maineBBoxPolygon = {
- "type": "Feature",
- "properties": {},
- "geometry": {
- "type": "Polygon",
- "coordinates": [
+ 'type': 'Feature',
+ 'properties': {},
+ 'geometry': {
+ 'type': 'Polygon',
+ 'coordinates': [
[
[-71.08482, 43.08003225358635],
[-66.96466, 43.08003225358635],
diff --git a/debug/animate.html b/debug/animate.html
index 71b558ed2a..e74d952774 100644
--- a/debug/animate.html
+++ b/debug/animate.html
@@ -27,10 +27,10 @@
function line(angle, radius) {
return {
- "type": "Feature",
- "geometry": {
- "type": "LineString",
- "coordinates": [
+ 'type': 'Feature',
+ 'geometry': {
+ 'type': 'LineString',
+ 'coordinates': [
[-Math.cos(angle) * radius, -Math.sin(angle) * radius + 1],
[Math.cos(angle) * radius, Math.sin(angle) * radius + 1],
]
@@ -40,8 +40,8 @@
function crossWithAngle(angle) {
return {
- "type": "FeatureCollection",
- "features": [
+ 'type': 'FeatureCollection',
+ 'features': [
line(angle - Math.PI / 4, radius),
line(angle + Math.PI / 4, radius)
]
@@ -51,27 +51,27 @@
map.on('load', function () {
// Add a source and layer displaying a point which will be animated in a circle.
map.addSource('lines', {
- "type": "geojson",
- "data": crossWithAngle(0)
+ 'type': 'geojson',
+ 'data': crossWithAngle(0)
});
map.addLayer({
- "id": "lines",
- "source": "lines",
- "type": "line",
- "paint": {
- "line-width": 4,
- "line-color": "#007cbf"
+ 'id': 'lines',
+ 'source': 'lines',
+ 'type': 'line',
+ 'paint': {
+ 'line-width': 4,
+ 'line-color': '#007cbf'
}
});
map.addLayer({
- "id": "dot",
- "source": "lines",
- "type": "circle",
- "paint": {
- "circle-radius": 10,
- "circle-color": "#007cbf"
+ 'id': 'dot',
+ 'source': 'lines',
+ 'type': 'circle',
+ 'paint': {
+ 'circle-radius': 10,
+ 'circle-color': '#007cbf'
}
});
diff --git a/debug/bounds.html b/debug/bounds.html
index a99fb2d50c..c7ab8a6272 100644
--- a/debug/bounds.html
+++ b/debug/bounds.html
@@ -49,7 +49,7 @@
type: 'fill',
source: 'bounds',
paint: {
- 'fill-color': "rgba(255,0,0,0.2)"
+ 'fill-color': 'rgba(255,0,0,0.2)'
}
});
diff --git a/debug/cache_api.html b/debug/cache_api.html
index 591ca44818..d68818d587 100644
--- a/debug/cache_api.html
+++ b/debug/cache_api.html
@@ -111,38 +111,38 @@
map.on('style.load', function() {
// add traffic layer that shouldn't be cached because of short expiry
map.addLayer({
- "id": "traffic",
- "source": {
- "url": "mapbox://mapbox.mapbox-traffic-v1",
- "type": "vector"
+ 'id': 'traffic',
+ 'source': {
+ 'url': 'mapbox://mapbox.mapbox-traffic-v1',
+ 'type': 'vector'
},
- "source-layer": "traffic",
- "type": "line",
- "paint": {
- "line-width": 1.5,
- "line-color": "red"
+ 'source-layer': 'traffic',
+ 'type': 'line',
+ 'paint': {
+ 'line-width': 1.5,
+ 'line-color': 'red'
}
});
// add third party source that shouldn't be cached
map.addLayer({
- "id": "mapillary",
- "type": "line",
- "source": {
- "type": "vector",
- "tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
- "minzoom": 6,
- "maxzoom": 14
+ 'id': 'mapillary',
+ 'type': 'line',
+ 'source': {
+ 'type': 'vector',
+ 'tiles': ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
+ 'minzoom': 6,
+ 'maxzoom': 14
},
- "source-layer": "mapillary-sequences",
- "layout": {
- "line-cap": "round",
- "line-join": "round"
+ 'source-layer': 'mapillary-sequences',
+ 'layout': {
+ 'line-cap': 'round',
+ 'line-join': 'round'
},
- "paint": {
- "line-opacity": 0.6,
- "line-color": "rgb(53, 175, 109)",
- "line-width": 2
+ 'paint': {
+ 'line-opacity': 0.6,
+ 'line-color': 'rgb(53, 175, 109)',
+ 'line-width': 2
}
});
@@ -155,25 +155,25 @@
const dontCache = ['traffic', 'style', 'fonts', 'd25uarhxywzl1j.cloudfront.net'];
for (const urlSubstring of dontCache) {
- log(!matchURL(keys, urlSubstring), "Does not cache wrong resource: " + urlSubstring);
+ log(!matchURL(keys, urlSubstring), 'Does not cache wrong resource: ' + urlSubstring);
}
}
function testFirstView(done) {
cache.keys().catch(catchError).then(keys => {
- log(keys.length === 4, "keys.length = 4");
+ log(keys.length === 4, 'keys.length = 4');
// check for expected cache entries
const expected = [
- "mapbox.mapbox-streets-v7/12/1171/1566.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1171/1567.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1172/1566.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1172/1567.vector.pbf",
+ 'mapbox.mapbox-streets-v7/12/1171/1566.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1171/1567.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1172/1566.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1172/1567.vector.pbf',
];
for (const expect of expected) {
- log(matchURL(keys, expect), "Caches correct resource: " + expect);
+ log(matchURL(keys, expect), 'Caches correct resource: ' + expect);
}
checkNotCached(keys);
@@ -191,18 +191,18 @@
cache.keys().catch(catchError).then(keys => {
// some tiles were evicted!
- log(keys.length === 6, "Enforces cache size limit: keys.length = 6");
+ log(keys.length === 6, 'Enforces cache size limit: keys.length = 6');
// all the most recent tiles are in the cache
const expected = [
- "mapbox.mapbox-streets-v7/13/2342/3133.vector.pbf",
- "mapbox.mapbox-streets-v7/13/2342/3134.vector.pbf",
- "mapbox.mapbox-streets-v7/13/2343/3133.vector.pbf",
- "mapbox.mapbox-streets-v7/13/2343/3134.vector.pbf",
+ 'mapbox.mapbox-streets-v7/13/2342/3133.vector.pbf',
+ 'mapbox.mapbox-streets-v7/13/2342/3134.vector.pbf',
+ 'mapbox.mapbox-streets-v7/13/2343/3133.vector.pbf',
+ 'mapbox.mapbox-streets-v7/13/2343/3134.vector.pbf',
];
for (const expect of expected) {
- log(matchURL(keys, expect), "Evicts correct tiles: still has " + expect);
+ log(matchURL(keys, expect), 'Evicts correct tiles: still has ' + expect);
}
checkNotCached(keys);
@@ -220,7 +220,7 @@
cache.keys().catch(catchError).then(keys => {
// some tiles were evicted!
- log(keys.length === 6, "Enforces cache size limit: keys.length = 6");
+ log(keys.length === 6, 'Enforces cache size limit: keys.length = 6');
// check that the cache entries are ordered in order of most least use
@@ -231,14 +231,14 @@
// all the most recent tiles are in the cache
const expected = [
- "mapbox.mapbox-streets-v7/12/1171/1566.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1171/1567.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1172/1566.vector.pbf",
- "mapbox.mapbox-streets-v7/12/1172/1567.vector.pbf",
+ 'mapbox.mapbox-streets-v7/12/1171/1566.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1171/1567.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1172/1566.vector.pbf',
+ 'mapbox.mapbox-streets-v7/12/1172/1567.vector.pbf',
];
for (const expect of expected) {
- log(matchURL(keys, expect), "Evicts correct tiles: still has " + expect);
+ log(matchURL(keys, expect), 'Evicts correct tiles: still has ' + expect);
}
checkNotCached(keys);
diff --git a/debug/canvas.html b/debug/canvas.html
index 461593bdfa..e22544c5c6 100644
--- a/debug/canvas.html
+++ b/debug/canvas.html
@@ -34,13 +34,13 @@
}
var canvasStyle = {
- "version": 8,
- "sources": {
- "canvas": {
- "type": "canvas",
- "canvas": "testCanvasID",
- "animate": false,
- "coordinates": [
+ 'version': 8,
+ 'sources': {
+ 'canvas': {
+ 'type': 'canvas',
+ 'canvas': 'testCanvasID',
+ 'animate': false,
+ 'coordinates': [
[-122.51596391201019, 37.56238816766053],
[-122.51467645168304, 37.56410183312965],
[-122.51309394836426, 37.563391708549425],
@@ -48,20 +48,20 @@
]
}
},
- "layers": [{
- "id": "background",
- "type": "background",
- "paint": {
- "background-color": "rgb(4,7,14)"
+ 'layers': [{
+ 'id': 'background',
+ 'type': 'background',
+ 'paint': {
+ 'background-color': 'rgb(4,7,14)'
}
}, {
- "id": "canvas",
- "type": "raster",
- "source": "canvas"
+ 'id': 'canvas',
+ 'type': 'raster',
+ 'source': 'canvas'
}]
};
-var map = new maplibregl.Map({
+new maplibregl.Map({
container: 'map',
minZoom: 14,
zoom: 17,
diff --git a/debug/chinese.html b/debug/chinese.html
index f971e7880c..c7e664d3cb 100644
--- a/debug/chinese.html
+++ b/debug/chinese.html
@@ -38,23 +38,23 @@
map.addControl(new maplibregl.NavigationControl());
map.on('load', function () {
- map.addSource("points", {
- "type": "geojson",
- "data": '/test/integration/data/chinese.geojson'
+ map.addSource('points', {
+ 'type': 'geojson',
+ 'data': '/test/integration/data/chinese.geojson'
});
map.addLayer({
- "id": "points",
- "type": "symbol",
- "source": "points",
- "layout": {
- "icon-image": "{icon}-15",
- "text-field": "{name}",
- "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
- "text-offset": [0, 0.6],
- "text-anchor": "top",
- "text-allow-overlap": true,
- "icon-allow-overlap": true
+ 'id': 'points',
+ 'type': 'symbol',
+ 'source': 'points',
+ 'layout': {
+ 'icon-image': '{icon}-15',
+ 'text-field': '{name}',
+ 'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+ 'text-offset': [0, 0.6],
+ 'text-anchor': 'top',
+ 'text-allow-overlap': true,
+ 'icon-allow-overlap': true
}
});
});
diff --git a/debug/circles.html b/debug/circles.html
index b74cefc70b..90e0a0bd34 100644
--- a/debug/circles.html
+++ b/debug/circles.html
@@ -31,53 +31,53 @@
map.on('load', function() {
map.addSource('circles', {
- "type": "geojson",
- "data": "/test/integration/data/places.geojson"
+ 'type': 'geojson',
+ 'data': '/test/integration/data/places.geojson'
});
map.addLayer({
- "id": "circles",
- "type": "circle",
- "source": "circles",
- "paint": {
- "circle-radius": [
- "interpolate",
- ["exponential", 2.0],
- ["zoom"],
+ 'id': 'circles',
+ 'type': 'circle',
+ 'source': 'circles',
+ 'paint': {
+ 'circle-radius': [
+ 'interpolate',
+ ['exponential', 2.0],
+ ['zoom'],
0, 5,
- 5, ['*', ["get", "scalerank"], 20],
+ 5, ['*', ['get', 'scalerank'], 20],
],
- "circle-color": [
- "match",
- ["get", "featureclass"],
- "cape", "orange",
- "island", "#0088ff",
- "plain", "yellow",
- "pole", "white",
- "waterfall", "blue",
- "red"
+ 'circle-color': [
+ 'match',
+ ['get', 'featureclass'],
+ 'cape', 'orange',
+ 'island', '#0088ff',
+ 'plain', 'yellow',
+ 'pole', 'white',
+ 'waterfall', 'blue',
+ 'red'
],
- "circle-pitch-scale": "map",
- "circle-pitch-alignment": "map"
+ 'circle-pitch-scale': 'map',
+ 'circle-pitch-alignment': 'map'
}
});
map.addLayer({
- "id": "labels",
- "type": "symbol",
- "source": "circles",
- "minzoom": 1,
- "layout": {
- "text-field": [
- "concat",
- ["get", "name"],
- " (",
+ 'id': 'labels',
+ 'type': 'symbol',
+ 'source': 'circles',
+ 'minzoom': 1,
+ 'layout': {
+ 'text-field': [
+ 'concat',
+ ['get', 'name'],
+ ' (',
[
- "coalesce",
- ["get", "subregion"],
- ["get", "region"]
+ 'coalesce',
+ ['get', 'subregion'],
+ ['get', 'region']
],
- ")"
+ ')'
]
}
});
diff --git a/debug/cluster.html b/debug/cluster.html
index 4fa5f8b5ca..a5eb315f72 100644
--- a/debug/cluster.html
+++ b/debug/cluster.html
@@ -27,67 +27,67 @@
map.on('load', () => {
map.addSource('geojson', {
- "type": "geojson",
- "data": "/test/integration/data/places.geojson",
- "cluster": true,
- "clusterRadius": 50,
- "clusterProperties": {
- "max": ["max", ["get", "scalerank"]],
- "sum": ["+", ["get", "scalerank"]],
- "has_island": ["any", ["==", ["get", "featureclass"], "island"]]
+ 'type': 'geojson',
+ 'data': '/test/integration/data/places.geojson',
+ 'cluster': true,
+ 'clusterRadius': 50,
+ 'clusterProperties': {
+ 'max': ['max', ['get', 'scalerank']],
+ 'sum': ['+', ['get', 'scalerank']],
+ 'has_island': ['any', ['==', ['get', 'featureclass'], 'island']]
}
});
map.addLayer({
- "id": "cluster",
- "type": "circle",
- "source": "geojson",
- "filter": ["==", "cluster", true],
- "paint": {
- "circle-color": ["case", ["get", "has_island"], "orange", "rgba(0, 200, 0, 1)"],
- "circle-radius": 20
+ 'id': 'cluster',
+ 'type': 'circle',
+ 'source': 'geojson',
+ 'filter': ['==', 'cluster', true],
+ 'paint': {
+ 'circle-color': ['case', ['get', 'has_island'], 'orange', 'rgba(0, 200, 0, 1)'],
+ 'circle-radius': 20
}
});
map.addLayer({
- "id": "cluster_label",
- "type": "symbol",
- "source": "geojson",
- "filter": ["==", "cluster", true],
- "layout": {
- "text-field": "{point_count} ({max})",
- "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
- "text-size": 12,
- "text-allow-overlap": true,
- "text-ignore-placement": true
+ 'id': 'cluster_label',
+ 'type': 'symbol',
+ 'source': 'geojson',
+ 'filter': ['==', 'cluster', true],
+ 'layout': {
+ 'text-field': '{point_count} ({max})',
+ 'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
+ 'text-size': 12,
+ 'text-allow-overlap': true,
+ 'text-ignore-placement': true
}
});
map.addLayer({
- "id": "unclustered_point",
- "type": "circle",
- "source": "geojson",
- "filter": ["!=", "cluster", true],
- "paint": {
- "circle-color": "rgb(0, 0, 200)",
- "circle-radius": 10
+ 'id': 'unclustered_point',
+ 'type': 'circle',
+ 'source': 'geojson',
+ 'filter': ['!=', 'cluster', true],
+ 'paint': {
+ 'circle-color': 'rgb(0, 0, 200)',
+ 'circle-radius': 10
}
});
var hoverData = {
- "type": "FeatureCollection",
- "features": []
+ 'type': 'FeatureCollection',
+ 'features': []
};
map.addSource('cluster_children', {
- "type": "geojson",
- "data": hoverData
+ 'type': 'geojson',
+ 'data': hoverData
});
map.addLayer({
- "id": "cluster_children",
- "type": "circle",
- "source": "cluster_children",
- "paint": {
- "circle-color": "rgb(0, 150, 0)",
- "circle-radius": 7
+ 'id': 'cluster_children',
+ 'type': 'circle',
+ 'source': 'cluster_children',
+ 'paint': {
+ 'circle-color': 'rgb(0, 150, 0)',
+ 'circle-radius': 7
}
});
@@ -117,7 +117,7 @@
});
});
- map.on('mouseleave', 'cluster', (e) => {
+ map.on('mouseleave', 'cluster', (_) => {
map.getCanvas().style.cursor = '';
updateHover([]);
});
diff --git a/debug/color_spaces.html b/debug/color_spaces.html
index 466ab836dc..c9fc0df5aa 100644
--- a/debug/color_spaces.html
+++ b/debug/color_spaces.html
@@ -46,19 +46,19 @@
map.on('load', function() {
map.addSource('geojson', {
- "type": "geojson",
- "data": "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson"
+ 'type': 'geojson',
+ 'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson'
});
map.addLayer({
- "id": "countries",
- "type": "fill",
- "source": "geojson",
- "paint": {
- "fill-color": {
- "property": "pop_est",
- "colorSpace": "lab",
- "stops": [
+ 'id': 'countries',
+ 'type': 'fill',
+ 'source': 'geojson',
+ 'paint': {
+ 'fill-color': {
+ 'property': 'pop_est',
+ 'colorSpace': 'lab',
+ 'stops': [
[0, 'blue'],
[140041247, 'red']
]
@@ -69,9 +69,9 @@
function pickInterpolation(input) {
map.setPaintProperty('countries', 'fill-color', {
- "property": "pop_est",
- "colorSpace": input.value,
- "stops": [
+ 'property': 'pop_est',
+ 'colorSpace': input.value,
+ 'stops': [
[0, 'blue'],
[140041247, 'red']
]
diff --git a/debug/csp-static.html b/debug/csp-static.html
index 6db7070814..26b27d4e1f 100644
--- a/debug/csp-static.html
+++ b/debug/csp-static.html
@@ -22,7 +22,7 @@
maplibregl.workerUrl = '/dist/maplibre-gl-csp-worker.js';
-var map = window.map = new maplibregl.Map({
+new maplibregl.Map({
container: 'map',
zoom: 12.5,
center: [-77.01866, 38.888],
diff --git a/debug/csp.html b/debug/csp.html
index 80e56c1772..bc2457c462 100644
--- a/debug/csp.html
+++ b/debug/csp.html
@@ -18,7 +18,7 @@
diff --git a/debug/wms.html b/debug/wms.html
index caeb843dbf..cac0fc1e1d 100644
--- a/debug/wms.html
+++ b/debug/wms.html
@@ -29,17 +29,17 @@
map.on('load', function() {
map.addSource('wms-test', {
- "type": "raster",
- "tiles": ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
+ 'type': 'raster',
+ 'tiles': ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
],
- "tileSize": 256
+ 'tileSize': 256
});
map.addLayer({
- "id": "wms-test-layer",
- "type": "raster",
- "source": "wms-test",
- "paint": {}
+ 'id': 'wms-test-layer',
+ 'type': 'raster',
+ 'source': 'wms-test',
+ 'paint': {}
});
});
diff --git a/docs/life-of-a-tile.md b/docs/life-of-a-tile.md
index ded919dd5d..83f09bd2fa 100644
--- a/docs/life-of-a-tile.md
+++ b/docs/life-of-a-tile.md
@@ -12,67 +12,67 @@ Ideally the event loop and render frame run at 60 frames per second, and all of
-- [Transform](../src/geo/transform.js) holds the current viewport details (pitch, zoom, bearing, bounds, etc.). Two places in the code update transform directly:
- - [Camera](../src/ui/camera.js) (parent class of [Map](../src/ui/map)) in response to explicit calls to [Camera#panTo](../src/ui/camera.js#L211), [Camera#setCenter](../src/ui/camera.js#L173)
- - [HandlerManager](../src/ui/handler_manager.js) in response to DOM events. It forwards those events to interaction processors that live in [src/ui/handler](../src/ui/handler), which accumulate a merged [HandlerResult](../src/ui/handler_manager.js#L70) that kick off a render frame loop, decreasing the inertia and nudging map.transform by that amount on each frame from [HandlerManager#\_updateMapTransform()](../src/ui/handler_manager.js#L412). That loop continues in the inertia decreases to 0.
-- Both camera and handler_manager are responsible for firing `move`, `zoom`, `movestart`, `moveend`, ... events on the map after they update transform. Each of these events (along with style changes and data load events) triggers a call to [Map#\_render()](../src/ui/map.js#L2428) which renders a single frame of the map.
+- [Transform](../src/geo/transform.ts) holds the current viewport details (pitch, zoom, bearing, bounds, etc.). Two places in the code update transform directly:
+ - [Camera](../src/ui/camera.ts) (parent class of [Map](../src/ui/map)) in response to explicit calls to [Camera#panTo](../src/ui/camera.ts#L207), [Camera#setCenter](../src/ui/camera.ts#L169)
+ - [HandlerManager](../src/ui/handler_manager.ts) in response to DOM events. It forwards those events to interaction processors that live in [src/ui/handler](../src/ui/handler), which accumulate a merged [HandlerResult](../src/ui/handler_manager.ts#L64) that kick off a render frame loop, decreasing the inertia and nudging map.transform by that amount on each frame from [HandlerManager#\_updateMapTransform()](../src/ui/handler_manager.ts#L413). That loop continues in the inertia decreases to 0.
+- Both camera and handler_manager are responsible for firing `move`, `zoom`, `movestart`, `moveend`, ... events on the map after they update transform. Each of these events (along with style changes and data load events) triggers a call to [Map#\_render()](../src/ui/map.ts#L2480) which renders a single frame of the map.
## Tile loading
-[Map#\_render()](../src/ui/map.js#L2428) works in 2 different modes based on the value of `Map._sourcesDirty`. When `Map._sourcesDirty === true`, it starts by asking each source if it needs to load any new data:
+[Map#\_render()](../src/ui/map.ts#L2480) works in 2 different modes based on the value of `Map._sourcesDirty`. When `Map._sourcesDirty === true`, it starts by asking each source if it needs to load any new data:
-- Call [SourceCache#update(transform)](../src/source/source_cache.js#L474) on each map data source. This computes the ideal tiles that cover the current viewport and requests missing ones. When a tile is missing, searches child/parent tiles to find the best alternative to show while the ideal tile is loading.
+- Call [SourceCache#update(transform)](../src/source/source_cache.ts#L479) on each map data source. This computes the ideal tiles that cover the current viewport and requests missing ones. When a tile is missing, searches child/parent tiles to find the best alternative to show while the ideal tile is loading.
- Call `Source#loadTile(tile, callback)` on each source to load the missing tile. Each source implements this differently:
- - [RasterTileSource#loadTile](../src/source/raster_tile_source.js#L112) just kicks off a getImage request using [src/util/ajax](../src/util/ajax.js) which keeps a queue of pending requests and limits the number of in-progress requests.
- - [RasterDEMTileSource#loadTile](../src/source/raster_dem_tile_source.js#L42) starts off the same to fetch the image, but then it sends the bytes in a `loadDEMTile` message to a worker to process before returning the results. Getting pixels from the image response requires drawing it to a canvas and reading the pixels back. This can be expensive, so when the browser supports `OffscreenCanvas`, do that in a worker, otherwise do it here before sending.
- - `[in web worker]` [RasterDEMTileWorkerSource#loadTile](../src/source/raster_dem_tile_worker_source.js#L25) loads raw rgb data into a [DEMData](../src/data/dem_data.js) instance. This copies edge pixels out to a 1px border to avoid edge artifacts and passes that back to the main thread.
- - [VectorTileSource#loadTile](../src/source/vector_tile_source.js#L184) sends a `loadTile` or `reloadTile` message to a worker:
- - `[in web worker]` [Worker#loadTile](../src/source/worker.js#L99) handles the message and passes it to [VectorTileWorkerSource#loadTile](../src/source/vector_tile_worker_source.js#L102)
- - Calls [VectorTileWorkerSource#loadVectorTile](../src/source/vector_tile_worker_source.js#L44) which uses
- - [ajax#getArrayBuffer()](../src/util/ajax.js#L271) to fetch raw bytes
+ - [RasterTileSource#loadTile](../src/source/raster_tile_source.ts#L110) just kicks off a getImage request using [src/util/ajax](../src/util/ajax.ts) which keeps a queue of pending requests and limits the number of in-progress requests.
+ - [RasterDEMTileSource#loadTile](../src/source/raster_dem_tile_source.ts#L39) starts off the same to fetch the image, but then it sends the bytes in a `loadDEMTile` message to a worker to process before returning the results. Getting pixels from the image response requires drawing it to a canvas and reading the pixels back. This can be expensive, so when the browser supports `OffscreenCanvas`, do that in a worker, otherwise do it here before sending.
+ - `[in web worker]` [RasterDEMTileWorkerSource#loadTile](../src/source/raster_dem_tile_worker_source.ts#L21) loads raw rgb data into a [DEMData](../src/data/dem_data.ts) instance. This copies edge pixels out to a 1px border to avoid edge artifacts and passes that back to the main thread.
+ - [VectorTileSource#loadTile](../src/source/vector_tile_source.ts#L184) sends a `loadTile` or `reloadTile` message to a worker:
+ - `[in web worker]` [Worker#loadTile](../src/source/worker.ts#L96) handles the message and passes it to [VectorTileWorkerSource#loadTile](../src/source/vector_tile_worker_source.ts#L100)
+ - Calls [VectorTileWorkerSource#loadVectorTile](../src/source/vector_tile_worker_source.ts#L42) which uses
+ - [ajax#getArrayBuffer()](../src/util/ajax.ts#L284) to fetch raw bytes
- [pbf](https://github.com/mapbox/pbf) to decode the protobuf, then
- [@mapbox/vector-tile#VectorTile](https://github.com/mapbox/vector-tile) to parse the vector tile.
- - The result goes into a new [WorkerTile](../src/source/worker_tile.js) instance.
- - Calls [WorkerTile#parse()](../src/source/worker_tile.js#L66) and caches the result in the worker by tile ID:
+ - The result goes into a new [WorkerTile](../src/source/worker_tile.ts) instance.
+ - Calls [WorkerTile#parse()](../src/source/worker_tile.ts#L64) and caches the result in the worker by tile ID:
- For each vector tile source layer, for each style layer that depends on the source layer that is currently visible ("layer family"):
- Calculate layout properties (recalculateLayers)
- - Call style.createBucket, which delegates to a bucket type in [src/data/bucket/\*](../src/data/bucket), which are subclasses of [src/data/bucket](../src/data/bucket.js)
- - Call [Bucket#populate()](../src/data/bucket.js) with the features from this source layer in the vector tile. This precomputes all the data that the main thread needs to load into the GPU to render each frame (ie. buffers containing vertices of all the triangles that compose the shape)
+ - Call style.createBucket, which delegates to a bucket type in [src/data/bucket/\*](../src/data/bucket), which are subclasses of [src/data/bucket](../src/data/bucket.ts)
+ - Call [Bucket#populate()](../src/data/bucket.ts) with the features from this source layer in the vector tile. This precomputes all the data that the main thread needs to load into the GPU to render each frame (ie. buffers containing vertices of all the triangles that compose the shape)
- Most layer types just store triangulated features on that first pass, but some layers have data dependencies, so ask the main thread for:
- Font PBFs (getGlyphs)
- - Handled by [GlyphManager](../src/render/glyph_manager.js) on the main thread which serves as a global cache for glyphs we’ve retrieved. When one is missing it either uses [tinysdf](https://github.com/mapbox/tiny-sdf) to render the character on a canvas, or makes a network request to load the font PBF file for the range that contains the missing glyphs.
+ - Handled by [GlyphManager](../src/render/glyph_manager.ts) on the main thread which serves as a global cache for glyphs we’ve retrieved. When one is missing it either uses [tinysdf](https://github.com/mapbox/tiny-sdf) to render the character on a canvas, or makes a network request to load the font PBF file for the range that contains the missing glyphs.
- Icons and patterns (getImages({type: 'icon' | 'pattern' }))
- - Handled by [ImageManager](../src/render/image_manager.js) on the main thread which caches images we’ve already fetched and fetches them if missing
- - When all data dependencies are available [WorkerTile#maybePrepare()](../src/source/worker_tile.js#L178), create a new [GlyphAtlas](../src/render/glyph_atlas.js) and [ImageAtlas](../src/render/image_atlas.js) that store the used font glyph symbols and icon/pattern images into a square matrix that can be loaded into the GPU using [potpack](https://github.com/mapbox/potpack). Then call [StyleLayer#recalculate()](../src/style/style_layer.js#L198) on each layer that was waiting for a data dependency and:
+ - Handled by [ImageManager](../src/render/image_manager.ts) on the main thread which caches images we’ve already fetched and fetches them if missing
+ - When all data dependencies are available [WorkerTile#maybePrepare()](../src/source/worker_tile.ts#L180), create a new [GlyphAtlas](../src/render/glyph_atlas.ts) and [ImageAtlas](../src/render/image_atlas.ts) that store the used font glyph symbols and icon/pattern images into a square matrix that can be loaded into the GPU using [potpack](https://github.com/mapbox/potpack). Then call [StyleLayer#recalculate()](../src/style/style_layer.ts#L204) on each layer that was waiting for a data dependency and:
- Call `addFeatures` on each bucket waiting for a pattern
- - Call [src/symbol/symbol_layout#performSymbolLayout()](../src/symbol/symbol_layout.js#L150) for each bucket waiting for symbols, which computes text layout properties for the zoom level and places each individual symbol based on character shapes and font layout parameters, and stores the triangulated symbol geometries. Also computes collision boxes that will be used to determine which labels to show to avoid collisions
+ - Call [src/symbol/symbol_layout#performSymbolLayout()](../src/symbol/symbol_layout.ts#L148) for each bucket waiting for symbols, which computes text layout properties for the zoom level and places each individual symbol based on character shapes and font layout parameters, and stores the triangulated symbol geometries. Also computes collision boxes that will be used to determine which labels to show to avoid collisions
- Pass the buckets, featureIndex, collision boxes, glyphAtlasImage, and imageAtlas back to the main thread
- - [GeojsonSource#loadTile()](../src/source/geojson_source.js) also sends a loadTile or reloadTile message to a worker. The handling is almost exactly the same as a vector tile, except [GeojsonWorkerSource](../src/source/geojson_worker_source.js) extends [VectorTileWorkerSource](../src/source/vector_tile_worker_source.js) and overrides `loadVectorData` so that instead of making a network request and parsing the PBF, it loads the initial geojson data into [geojson-vt](https://github.com/mapbox/geojson-vt) and calls the [getTile](https://github.com/mapbox/geojson-vt/blob/35f4ad75feed64e80ff2cd02994976c6335859cd/src/index.js#L161) method to get vector tile data from the geojson for each tile the main thread needs.
- - [ImageSource#loadTile()](../src/source/image_source.js#L245) computes the most-zoomed-in tile that contains the entire bounds of the image being rendered and only returns success if the main thread is requesting that tile (the image was already requested when layer was added to the map)
-- When the vector sources (geojson/vector tile) responses get back to the main thread, it calls [Tile#loadVectorData](../src/source/tile.js#L140) with the result which deserializes and stores the buckets for each style layer, image/glyph atlases, and lazy-loads the RTL text plugin if this is the first tile to contain RTL text.
-- Back up in [SourceCache](../src/source/source_cache.js), now that it has the loaded tile:
- - [SourceCache#\_backfillDEM](../src/source/source_cache.js#L274) copies the edge pixels to and from all neighboring tiles so that there are no rendering artifacts when each tile computes the slope up to the very edge of the tile.
- - Fire a `data {dataType: 'source'}` event on the source, which bubbles up to [SourceCache](../src/source/source_cache.js), [Style](../src/style/style.js), and [Map](../src/ui/map.js), which translates it to a `sourcedata` event and also calls [Map#\_update()](../src/ui/map.js#L2391) which calls [Map#triggerRepaint()](../src/ui/map.js#L2612) then [Map#\_render()](../src/ui/map.js#L2428) which renders a new frame just like when user interaction triggers transform change.
+ - [GeojsonSource#loadTile()](../src/source/geojson_source.ts) also sends a loadTile or reloadTile message to a worker. The handling is almost exactly the same as a vector tile, except [GeojsonWorkerSource](../src/source/geojson_worker_source.ts) extends [VectorTileWorkerSource](../src/source/vector_tile_worker_source.ts) and overrides `loadVectorData` so that instead of making a network request and parsing the PBF, it loads the initial geojson data into [geojson-vt](https://github.com/mapbox/geojson-vt) and calls the [getTile](https://github.com/mapbox/geojson-vt/blob/35f4ad75feed64e80ff2cd02994976c6335859cd/src/index.js#L161) method to get vector tile data from the geojson for each tile the main thread needs.
+ - [ImageSource#loadTile()](../src/source/image_source.ts#L246) computes the most-zoomed-in tile that contains the entire bounds of the image being rendered and only returns success if the main thread is requesting that tile (the image was already requested when layer was added to the map)
+- When the vector sources (geojson/vector tile) responses get back to the main thread, it calls [Tile#loadVectorData](../src/source/tile.ts#L140) with the result which deserializes and stores the buckets for each style layer, image/glyph atlases, and lazy-loads the RTL text plugin if this is the first tile to contain RTL text.
+- Back up in [SourceCache](../src/source/source_cache.ts), now that it has the loaded tile:
+ - [SourceCache#\_backfillDEM](../src/source/source_cache.ts#L275) copies the edge pixels to and from all neighboring tiles so that there are no rendering artifacts when each tile computes the slope up to the very edge of the tile.
+ - Fire a `data {dataType: 'source'}` event on the source, which bubbles up to [SourceCache](../src/source/source_cache.ts), [Style](../src/style/style.ts), and [Map](../src/ui/map.ts), which translates it to a `sourcedata` event and also calls [Map#\_update()](../src/ui/map.ts#L2443) which calls [Map#triggerRepaint()](../src/ui/map.ts#L2664) then [Map#\_render()](../src/ui/map.ts#L2480) which renders a new frame just like when user interaction triggers transform change.
## Render loop
-When `map._sourcesDirty === false`, [map#\_render()](../src/ui/map.js#L2428) just renders a new frame entirely within the main UI thread:
+When `map._sourcesDirty === false`, [map#\_render()](../src/ui/map.ts#L2480) just renders a new frame entirely within the main UI thread:
-- Recompute "paint properties" based on the current zoom and current transition status by calling [Style#update()](../src/style/style.js) with the new transform. This calls `recalculate()` on each style layer to compute the new paint properties.
-- Fetch new tiles by calling [SourceCache#update(transform)](../src/source/source_cache.js#L474) (see above)
-- Call [Painter#render(style)](../src/render/painter.js#L357) with the current style
- - Calls [SourceCache#prepare(context)](../src/source/source_cache.js#L169) on each source
+- Recompute "paint properties" based on the current zoom and current transition status by calling [Style#update()](../src/style/style.ts) with the new transform. This calls `recalculate()` on each style layer to compute the new paint properties.
+- Fetch new tiles by calling [SourceCache#update(transform)](../src/source/source_cache.ts#L479) (see above)
+- Call [Painter#render(style)](../src/render/painter.ts#L359) with the current style
+ - Calls [SourceCache#prepare(context)](../src/source/source_cache.ts#L170) on each source
- Then for each tile in the source:
- - Call [Tile#upload(context)](../src/source/tile.js#L241) which calls [Bucket#upload(context)](../src/data/bucket.js) on the bucket for each layer in the tile, which uploads all of the vertex attributes needed for rendering to the GPU.
- - Call [Tile#prepare(imageManager)](../src/source/tile.js#L261) uploads image textures (patterns, icons) for this tile to the GPU.
+ - Call [Tile#upload(context)](../src/source/tile.ts#L241) which calls [Bucket#upload(context)](../src/data/bucket.ts) on the bucket for each layer in the tile, which uploads all of the vertex attributes needed for rendering to the GPU.
+ - Call [Tile#prepare(imageManager)](../src/source/tile.ts#L261) uploads image textures (patterns, icons) for this tile to the GPU.
- Make 4 passes over each layer, calling `renderLayer()` on the [src/render/draw\_\*](../src/render) file for each kind of layer:
- `offscreen` pass uses the GPU to precompute and cache data to an offscreen framebuffer for custom, hillshading, and heatmap layers. Hillshading precomputes slope using the GPU and heatmap
- `opaque` pass renders fill and background layers with no opacity from top to bottom
- `translucent` pass renders each other layer from bottom to top
- `debug` pass renders debug collision boxes, tile boundaries, etc. on top
- - Each `renderLayer()` call loops through each visible tile to paint and for each binds textures, and uses a vertex and attribute shader program defined in [src/shaders](../src/shaders) and calls [Program#draw()](../src/render/program.js#L123) which sets GPU configuration for the program, sets uniforms needed by the program and calls `gl.drawElements()` which actually renders the layer on the screen for that tile.
+ - Each `renderLayer()` call loops through each visible tile to paint and for each binds textures, and uses a vertex and attribute shader program defined in [src/shaders](../src/shaders) and calls [Program#draw()](../src/render/program.ts#L123) which sets GPU configuration for the program, sets uniforms needed by the program and calls `gl.drawElements()` which actually renders the layer on the screen for that tile.
- Finally, trigger another repaint if there is any more rendering to do. Otherwise trigger an `idle` event because the map is done loading.
diff --git a/flow-typed/gl.js b/flow-typed/gl.js
deleted file mode 100644
index 7fe9f46faa..0000000000
--- a/flow-typed/gl.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// @flow strict
-declare module "gl" {
- declare function gl(width: number, height: number, attributes: WebGLContextAttributes): WebGLRenderingContext;
- declare module.exports: typeof gl;
-}
diff --git a/flow-typed/jsdom.js b/flow-typed/jsdom.js
deleted file mode 100644
index d9aa8c4080..0000000000
--- a/flow-typed/jsdom.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @flow strict
-
-import type Window from '../src/types/window';
-
-declare module "jsdom" {
- declare class JSDOM {
- constructor(content: string, options: Object): JSDOM;
- window: Window;
- }
- declare class VirtualConsole {
- constructor(): VirtualConsole;
- sendTo(console: typeof console): VirtualConsole;
- }
- declare module.exports: {
- JSDOM: typeof JSDOM,
- VirtualConsole: typeof VirtualConsole
- };
-}
diff --git a/flow-typed/mapbox-gl-supported.js b/flow-typed/mapbox-gl-supported.js
deleted file mode 100644
index 71c3430c94..0000000000
--- a/flow-typed/mapbox-gl-supported.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// @flow
-'use strict';
-declare module "@mapbox/mapbox-gl-supported" {
- declare type isSupported = {
- (options?: {failIfMajorPerformanceCaveat: boolean}): boolean,
- webGLContextAttributes: WebGLContextAttributes
- };
- declare module.exports: isSupported;
-}
diff --git a/flow-typed/mapbox-unitbezier.js b/flow-typed/mapbox-unitbezier.js
deleted file mode 100644
index cb127d13a2..0000000000
--- a/flow-typed/mapbox-unitbezier.js
+++ /dev/null
@@ -1,14 +0,0 @@
-'use strict';
-// @flow
-
-declare module "@mapbox/unitbezier" {
- declare class UnitBezier {
- constructor(p1x: number, p1y: number, p2x: number, p2y: number): UnitBezier;
- sampleCurveX(t: number): number;
- sampleCurveY(t: number): number;
- sampleCurveDerivativeX(t: number): number;
- solveCurveX(x: number, epsilon: number | void): number;
- solve(x: number, epsilon: number | void): number;
- }
- declare module.exports: typeof UnitBezier;
-}
diff --git a/flow-typed/offscreen-canvas.js b/flow-typed/offscreen-canvas.js
deleted file mode 100644
index 6c9617dad1..0000000000
--- a/flow-typed/offscreen-canvas.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// @flow strict
-
-declare class OffscreenCanvas {
- width: number;
- height: number;
-
- constructor(width: number, height: number): OffscreenCanvas;
- getContext(contextType: '2d'): CanvasRenderingContext2D;
-}
diff --git a/flow-typed/pbf.js b/flow-typed/pbf.js
deleted file mode 100644
index ca92463be8..0000000000
--- a/flow-typed/pbf.js
+++ /dev/null
@@ -1,25 +0,0 @@
-declare module "pbf" {
- declare type ReadFunction