Merge pull request #12734 from ahocevar/still-ie11-why-oh-why

Continue supporting IE11 in examples and legacy build

config/webpack-config-legacy-build.mjs

@@ -1,33 +1,28 @@
 import TerserPlugin from 'terser-webpack-plugin';
-import path, {dirname} from 'path';
+import path from 'path';
-import {fileURLToPath} from 'url';
-
-const baseDir = dirname(fileURLToPath(import.meta.url));
 
 export default {
-  entry: './build/index.js',
+  entry: ['regenerator-runtime/runtime', './build/index.js'],
   devtool: 'source-map',
   mode: 'production',
   target: ['web', 'es5'],
   module: {
     rules: [
       {
-        test: /^((?!es2015-)[\s\S])*\.js$/,
+        test: /\.m?js$/,
         use: {
-          loader: 'buble-loader',
+          loader: 'babel-loader',
           options: {
-            transforms: {dangerousForOf: true},
+            presets: [
+              [
+                '@babel/preset-env',
+                {
+                  targets: 'last 2 versions, not dead',
+                },
+              ],
+            ],
           },
         },
-        include: [
-          path.join(
-            baseDir,
-            '..',
-            'node_modules',
-            '@mapbox',
-            'mapbox-gl-style-spec'
-          ),
-        ],
       },
     ],
   },

examples/webpack/config.mjs

@@ -18,7 +18,7 @@ export default {
       .filter((name) => /^(?!index).*\.html$/.test(name))
       .map((name) => name.replace(/\.html$/, ''))
       .forEach((example) => {
-        entry[example] = `./${example}.js`;
+        entry[example] = ['regenerator-runtime/runtime', `./${example}.js`];
       });
     return entry;
   },
@@ -28,25 +28,13 @@ export default {
       {
         test: /^((?!es2015-)[\s\S])*\.js$/,
         use: {
-          loader: 'buble-loader',
+          loader: 'babel-loader',
           options: {
-            transforms: {
+            presets: [
-              dangerousForOf: true,
+              ['@babel/preset-env', {targets: 'last 2 versions, not dead'}],
-            },
+            ],
           },
         },
-        include: [
-          path.join(baseDir, '..', '..', 'src'),
-          path.join(baseDir, '..'),
-          path.join(
-            baseDir,
-            '..',
-            '..',
-            'node_modules',
-            '@mapbox',
-            'mapbox-gl-style-spec'
-          ),
-        ],
       },
       {
         test: /\.js$/,
@@ -63,10 +51,6 @@ export default {
         // Do not minify examples that inject code into workers
         exclude: [/(color-manipulation|region-growing|raster)\.js/],
         extractComments: false,
-        terserOptions: {
-          // Mangle private members convention with underscore suffix
-          mangle: {properties: {regex: /_$/}},
-        },
       }),
     ],
     runtimeChunk: {

package-lock.json

@@ -27,8 +27,6 @@
         "@types/pbf": "^3.0.2",
         "@types/topojson-specification": "^1.0.1",
         "babel-loader": "^8.2.2",
-        "buble": "^0.20.0",
-        "buble-loader": "^0.5.1",
         "chaikin-smooth": "^1.0.4",
         "clean-css-cli": "5.3.3",
         "copy-webpack-plugin": "^9.0.0",
@@ -2323,6 +2321,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
       "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
       "dev": true,
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2330,15 +2329,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-dynamic-import": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
-      "dev": true,
-      "peerDependencies": {
-        "acorn": "^6.0.0"
-      }
-    },
     "node_modules/acorn-jsx": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
@@ -2848,54 +2838,6 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
-    "node_modules/buble": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/buble/-/buble-0.20.0.tgz",
-      "integrity": "sha512-/1gnaMQE8xvd5qsNBl+iTuyjJ9XxeaVxAMF86dQ4EyxFJOZtsgOS8Ra+7WHgZTam5IFDtt4BguN0sH0tVTKrOw==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^6.4.1",
-        "acorn-dynamic-import": "^4.0.0",
-        "acorn-jsx": "^5.2.0",
-        "chalk": "^2.4.2",
-        "magic-string": "^0.25.7",
-        "minimist": "^1.2.5",
-        "regexpu-core": "4.5.4"
-      },
-      "bin": {
-        "buble": "bin/buble"
-      }
-    },
-    "node_modules/buble-loader": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/buble-loader/-/buble-loader-0.5.1.tgz",
-      "integrity": "sha512-ytp2BqL4NfyImoXQUFcIkM2EgKJI2e8KEc9R5/7MbUmdu952CYkhkwydZcKreuC6VAUBp9R7rxS88TZ7RQq/3A==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^1.1.0"
-      },
-      "peerDependencies": {
-        "buble": "*",
-        "webpack": "*"
-      }
-    },
-    "node_modules/buble/node_modules/regexpu-core": {
-      "version": "4.5.4",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz",
-      "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==",
-      "dev": true,
-      "dependencies": {
-        "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.0.2",
-        "regjsgen": "^0.5.0",
-        "regjsparser": "^0.6.0",
-        "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -13225,14 +13167,8 @@
       "version": "6.4.2",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
       "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-      "dev": true
-    },
-    "acorn-dynamic-import": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz",
-      "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==",
       "dev": true,
-      "requires": {}
+      "peer": true
     },
     "acorn-jsx": {
       "version": "5.3.1",
@@ -13627,46 +13563,6 @@
         "node-releases": "^1.1.71"
       }
     },
-    "buble": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/buble/-/buble-0.20.0.tgz",
-      "integrity": "sha512-/1gnaMQE8xvd5qsNBl+iTuyjJ9XxeaVxAMF86dQ4EyxFJOZtsgOS8Ra+7WHgZTam5IFDtt4BguN0sH0tVTKrOw==",
-      "dev": true,
-      "requires": {
-        "acorn": "^6.4.1",
-        "acorn-dynamic-import": "^4.0.0",
-        "acorn-jsx": "^5.2.0",
-        "chalk": "^2.4.2",
-        "magic-string": "^0.25.7",
-        "minimist": "^1.2.5",
-        "regexpu-core": "4.5.4"
-      },
-      "dependencies": {
-        "regexpu-core": {
-          "version": "4.5.4",
-          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz",
-          "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==",
-          "dev": true,
-          "requires": {
-            "regenerate": "^1.4.0",
-            "regenerate-unicode-properties": "^8.0.2",
-            "regjsgen": "^0.5.0",
-            "regjsparser": "^0.6.0",
-            "unicode-match-property-ecmascript": "^1.0.4",
-            "unicode-match-property-value-ecmascript": "^1.1.0"
-          }
-        }
-      }
-    },
-    "buble-loader": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/buble-loader/-/buble-loader-0.5.1.tgz",
-      "integrity": "sha512-ytp2BqL4NfyImoXQUFcIkM2EgKJI2e8KEc9R5/7MbUmdu952CYkhkwydZcKreuC6VAUBp9R7rxS88TZ7RQq/3A==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.1.0"
-      }
-    },
     "buffer": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",

package.json

@@ -23,7 +23,7 @@
     "build-package": "npm run transpile && npm run copy-css && npm run generate-types && node tasks/prepare-package.js",
     "build-index": "shx rm -f build/index.js && npm run build-package && node tasks/generate-index.js",
     "build-legacy": "shx rm -rf build/legacy && npm run build-index && webpack --config config/webpack-config-legacy-build.mjs && cleancss --source-map src/ol/ol.css -o build/legacy/ol.css",
-    "build-site": "shx rm -rf build/site && npm run build-examples && npm run apidoc && shx mkdir -p build/site && shx cp site/index.html build/site/ && shx mv build/apidoc build/examples build/site/",
+    "build-site": "shx rm -rf build/site && npm run build-examples && npm run apidoc && npm run build-legacy && shx mkdir -p build/site && shx cp site/index.html build/site/ && shx mv build/apidoc build/examples build/legacy build/site/",
     "copy-css": "shx cp src/ol/ol.css build/ol/ol.css",
     "generate-types": "npx --package=typescript@3.8.3 -y -- tsc --project config/tsconfig-build.json --declaration --declarationMap --emitDeclarationOnly --outdir build/ol",
     "transpile": "shx rm -rf build/ol && shx mkdir -p build/ol && shx cp -rf src/ol build/ol/src && node tasks/serialize-workers.cjs && npx --package=typescript@4.3.5 -y -- tsc --project config/tsconfig-build.json",
@@ -63,8 +63,6 @@
     "@types/pbf": "^3.0.2",
     "@types/topojson-specification": "^1.0.1",
     "babel-loader": "^8.2.2",
-    "buble": "^0.20.0",
-    "buble-loader": "^0.5.1",
     "chaikin-smooth": "^1.0.4",
     "clean-css-cli": "5.3.3",
     "copy-webpack-plugin": "^9.0.0",

site/index.html

@@ -4,11 +4,32 @@
     <title>OpenLayers</title>
     <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700' rel='stylesheet' type='text/css'>
     <link href='https://openlayers.org/assets/theme/site.css' rel='stylesheet' type='text/css'>
+    <link href="./legacy/ol.css" rel='stylesheet' type='text/css'>
+    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
+    <script src="https://unpkg.com/elm-pep"></script>
+    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>    
   </head>
   <body>
     <ul>
       <li><a href="./apidoc/">API Docs</a></li>
       <li><a href="./examples/">Examples</a></li>
     </ul>
+    <div id="map" style="width:400px;height:400px;"></div>
+    <script src="./legacy/ol.js"></script>
+    <script>
+      new ol.Map({
+        target: 'map',
+        layers: [
+          new ol.layer.Tile({
+            source: new ol.source.OSM()
+          })
+        ],
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        })
+      })
+    </script>
   </body>
 </html>

tasks/serialize-workers.cjs

@@ -28,7 +28,7 @@ async function build(input, {minify = true} = {}) {
           '@babel/preset-env',
           {
             'modules': false,
-            'targets': 'last 2 version, not dead',
+            'targets': 'last 2 versions, not dead',
           },
         ],
       ],