Export global L in new bundle (#9686)

build/docs-misc.leafdoc

@@ -1,5 +1,27 @@
 Miscellaneous bits of documentation that don't really fit anywhere else
 
+@namespace noConflict
+
+**This is only available when Leaflet is not imported as a module!**
+
+This method restores the `L` global variable to the original value
+it had before Leaflet inclusion, and returns the real Leaflet
+namespace so you can put it elsewhere, like this:
+
+
+```html
+<script src='libs/l.js'>
+<!-- L points to some other library -->
+
+<script src='leaflet.js'>
+<!-- you include Leaflet, it replaces the L variable to Leaflet namespace -->
+
+<script>
+const Leaflet = L.noConflict();
+// now L points to that other library again, and you can use Leaflet.Map etc.
+</script>
+```
+
 @namespace version
 
 A constant that represents the Leaflet version in use.

build/integrity.js

@@ -16,12 +16,16 @@ const getIntegrity = path => new Promise((resolve) => {
 
 const integrityUglified = await getIntegrity('leaflet.js');
 const integritySrc = await getIntegrity('leaflet-src.js');
+const integrityUglifiedGlobal = await getIntegrity('leaflet-global.js');
+const integritySrcGlobal = await getIntegrity('leaflet-global-src.js');
 const integrityCss = await getIntegrity('leaflet.css');
 
 console.log(`Integrity hashes for ${version}:`);
-console.log(`dist/leaflet.js:     ${integrityUglified}`);
-console.log(`dist/leaflet-src.js: ${integritySrc}`);
-console.log(`dist/leaflet.css:    ${integrityCss}`);
+console.log(`dist/leaflet.js:            ${integrityUglified}`);
+console.log(`dist/leaflet-src.js:        ${integritySrc}`);
+console.log(`dist/leaflet-global.js:     ${integrityUglifiedGlobal}`);
+console.log(`dist/leaflet-global-src.js: ${integritySrcGlobal}`);
+console.log(`dist/leaflet.css:           ${integrityCss}`);
 
 let docConfig = readFileSync('docs/_config.yml', 'utf8');
 
@@ -29,6 +33,8 @@ docConfig = docConfig
 	.replace(/latest_leaflet_version:.*/,  `latest_leaflet_version: ${version}`)
 	.replace(/integrity_hash_source:.*/,   `integrity_hash_source: "${integritySrc}"`)
 	.replace(/integrity_hash_uglified:.*/, `integrity_hash_uglified: "${integrityUglified}"`)
+	.replace(/integrity_hash_global_source:.*/,   `integrity_hash_global_source: "${integritySrcGlobal}"`)
+	.replace(/integrity_hash_global_uglified:.*/, `integrity_hash_global_uglified: "${integrityUglifiedGlobal}"`)
 	.replace(/integrity_hash_css:.*/,      `integrity_hash_css: "${integrityCss}"`);
 
 writeFileSync('docs/_config.yml', docConfig);

build/rollup-config.js

@@ -20,6 +20,15 @@ const config = {
 			banner,
 			sourcemap: true,
 			freeze: false
+		},
+		{
+			file: './dist/leaflet-global-src.js',
+			name: 'leaflet',
+			format: 'umd',
+			banner,
+			sourcemap: true,
+			freeze: false,
+			esModule: false
 		}
 	],
 	plugins: [

docs/_config.yml

@@ -13,7 +13,8 @@ latest_leaflet_version: 1.9.4
 integrity_hash_css: "sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
 integrity_hash_source: "sha256-tPonvXioSHRQt1+4ztWR5mz/1KG1X3yHNzVXprP2gLo="
 integrity_hash_uglified: "sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-
+integrity_hash_global_source: ""
+integrity_hash_global_uglified: ""
 
 collections:
   plugins:

docs/download.md

@@ -66,6 +66,13 @@ Then, in your script, import the needed Leaflet Classes as follows:
 	}).addTo(map);
 </script>
 ```
+#### Including Leaflet with a Global Scope
+
+The old (and no longer recommended) way to include Leaflet in your project without using modules is by relying on the global variable `L`.
+
+```html
+<script src="https://unpkg.com/leaflet@{{ site.latest_leaflet_version}}/dist/leaflet-global.js" integrity="{{site.integrity_hash_global_uglified}}" crossorigin=""></script>
+```
 
 Note that the [`integrity` hashes](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) are included for security when using Leaflet from a CDN.
 

package.json

@@ -51,12 +51,13 @@
     "docs": "node ./build/docs.js && node ./build/integrity.js",
     "test": "karma start ./spec/karma.conf.cjs",
     "coverage": "karma start ./spec/karma.conf.cjs --coverage --single-run",
-    "build": "npm run rollup && npm run uglify",
+    "build": "npm run rollup && npm run uglify && npm run uglify-global",
     "lint": "eslint .",
     "lintfix": "npm run lint -- --fix",
     "rollup": "rollup -c build/rollup-config.js",
     "watch": "rollup -w -c build/rollup-config.js",
     "uglify": "uglifyjs dist/leaflet-src.js -c -m -o dist/leaflet.js --source-map filename=dist/leaflet.js.map --source-map content=dist/leaflet-src.js.map --source-map url=leaflet.js.map --comments",
+    "uglify-global": "uglifyjs dist/leaflet-global-src.js -c -m -o dist/leaflet-global.js --source-map filename=dist/leaflet-global.js.map --source-map content=dist/leaflet-global-src.js.map --source-map url=leaflet-global.js.map --comments",
     "bundlemon": "bundlemon --subProject js --defaultCompression none && bundlemon --subProject js-gzip --defaultCompression gzip",
     "serve": "cd docs && bundle exec jekyll serve",
     "prepare": "husky"

src/LeafletWithGlobals.js

@@ -3,7 +3,12 @@ export * from './Leaflet.js';
 
 export default L;
 
+const oldL = getGlobalObject().L;
 getGlobalObject().L = L;
+getGlobalObject().L.noConflict = function () {
+	getGlobalObject().L = oldL;
+	return this;
+};
 
 function getGlobalObject() {
 	if (typeof globalThis !== 'undefined') { return globalThis; }