fix: Incorrect UMD sourcemaps (#1043)

Author: rschristian

.changeset/violet-falcons-dream.md

@@ -0,0 +1,5 @@
+---
+'microbundle': patch
+---
+
+Fixes positioning bug with UMD sourcemaps

.github/workflows/size.yml

@@ -21,5 +21,7 @@ jobs:
         uses: preactjs/compressed-size-action@v2
         with:
           pattern: 'test/fixtures/**/dist/!(*.map)'
-          build-script: 'test'
+          # We're using this to report size differences, not test, so update snapshots if they fail.
+          # The CI can catch the test failures instead.
+          build-script: 'test -- -u'
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

package-lock.json

@@ -97,6 +97,7 @@
 		"gzip-size": "^6.0.0",
 		"kleur": "^4.1.3",
 		"lodash.merge": "^4.6.2",
+		"magic-string": "^0.25.9",
 		"postcss": "^8.2.1",
 		"pretty-bytes": "^5.4.1",
 		"rollup": "^2.35.1",

package.json

@@ -39,6 +39,7 @@ import {
 import { getConfigFromPkgJson, getName } from './lib/package-info';
 import { shouldCssModules, cssModulesConfig } from './lib/css-modules';
 import { EOL } from 'os';
+import MagicString from 'magic-string';
 
 // Extensions to use when resolving modules
 const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.es6', '.es', '.mjs'];
@@ -653,17 +654,36 @@ function createConfig(options, entry, format, writeMeta) {
 						// So we remove the globalThis check, replacing it with `this||self` to match Rollup 1's output:
 						renderChunk(code, chunk, opts) {
 							if (opts.format === 'umd') {
-								// minified:
-								code = code.replace(
+								// Can swap this out with MagicString.replace() when we bump it:
+								// https://github.com/developit/microbundle/blob/f815a01cb63d90b9f847a4dcad2a64e6b2f8596f/src/index.js#L657-L671
+								const s = new MagicString(code);
+
+								const minified = code.match(
 									/([a-zA-Z$_]+)="undefined"!=typeof globalThis\?globalThis:(\1\|\|self)/,
-									'$2',
 								);
-								// unminified:
-								code = code.replace(
+								if (minified) {
+									s.overwrite(
+										minified.index,
+										minified.index + minified[0].length,
+										minified[2],
+									);
+								}
+
+								const unminified = code.match(
 									/(global *= *)typeof +globalThis *!== *['"]undefined['"] *\? *globalThis *: *(global *\|\| *self)/,
-									'$1$2',
 								);
-								return { code, map: null };
+								if (unminified) {
+									s.overwrite(
+										unminified.index,
+										unminified.index + unminified[0].length,
+										unminified[1] + unminified[2],
+									);
+								}
+
+								return {
+									code: s.toString(),
+									map: s.generateMap({ hires: true }),
+								};
 							}
 						},
 						// Grab size info before writing files to disk:

src/index.js

@@ -1930,7 +1930,7 @@ exports[`fixtures build inline-source-map with microbundle 4`] = `
 
 exports[`fixtures build inline-source-map with microbundle 5`] = `
 "!function(e,n){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?module.exports=n():\\"function\\"==typeof define&&define.amd?define(n):(e||self).inlineSourceMap=n()}(this,function(){var e=function(){try{var e=arguments;return Promise.resolve([].slice.call(e).reduce(function(e,n){return e+n},0))}catch(e){return Promise.reject(e)}};return function(){try{var n=arguments,r=[].slice.call(n);return Promise.resolve(e.apply(void 0,r)).then(function(n){return Promise.resolve(e.apply(void 0,r)).then(function(e){return[n,e]})})}catch(e){return Promise.reject(e)}}});
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLXNvdXJjZS1tYXAudW1kLmpzIiwic291cmNlcyI6WyIuLi9zcmMvdHdvLmpzIiwiLi4vc3JjL2luZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBhc3luYyBmdW5jdGlvbiB0d28oLi4uYXJncykge1xuXHRyZXR1cm4gYXJncy5yZWR1Y2UoKHRvdGFsLCB2YWx1ZSkgPT4gdG90YWwgKyB2YWx1ZSwgMCk7XG59XG4iLCJpbXBvcnQgeyB0d28gfSBmcm9tICcuL3R3byc7XG5cbmV4cG9ydCBkZWZhdWx0IGFzeW5jIGZ1bmN0aW9uKC4uLmFyZ3MpIHtcblx0cmV0dXJuIFthd2FpdCB0d28oLi4uYXJncyksIGF3YWl0IHR3byguLi5hcmdzKV07XG59XG4iXSwibmFtZXMiOlsidHdvIiwicmVkdWNlIiwidG90YWwiLCJ2YWx1ZSIsImFyZ3MiXSwibWFwcGluZ3MiOiJzT0FBc0JBLGlDQUNyQix1QkFBTyxpQkFBS0MsT0FBTyxTQUFDQyxFQUFPQyxVQUFVRCxFQUFRQyxHQUFPLElBRHJELDBFQ0VpQ0MsMENBQ2xCSixlQUFPSSw0Q0FBYUosZUFBT0kscUJBQXpDLE1BQU8sVUFEUiJ9
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5saW5lLXNvdXJjZS1tYXAudW1kLmpzIiwic291cmNlcyI6WyIuLi9zcmMvdHdvLmpzIiwiLi4vc3JjL2luZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBhc3luYyBmdW5jdGlvbiB0d28oLi4uYXJncykge1xuXHRyZXR1cm4gYXJncy5yZWR1Y2UoKHRvdGFsLCB2YWx1ZSkgPT4gdG90YWwgKyB2YWx1ZSwgMCk7XG59XG4iLCJpbXBvcnQgeyB0d28gfSBmcm9tICcuL3R3byc7XG5cbmV4cG9ydCBkZWZhdWx0IGFzeW5jIGZ1bmN0aW9uKC4uLmFyZ3MpIHtcblx0cmV0dXJuIFthd2FpdCB0d28oLi4uYXJncyksIGF3YWl0IHR3byguLi5hcmdzKV07XG59XG4iXSwibmFtZXMiOlsidHdvIiwicmVkdWNlIiwidG90YWwiLCJ2YWx1ZSIsImFyZ3MiXSwibWFwcGluZ3MiOiIwTEFBc0JBLGlDQUNyQix1QkFBTyxpQkFBS0MsT0FBTyxTQUFDQyxFQUFPQyxVQUFVRCxFQUFRQyxHQUFPLElBRHJELDBFQ0VpQ0MsMENBQ2xCSixlQUFPSSw0Q0FBYUosZUFBT0kscUJBQXpDLE1BQU8sVUFEUiJ9
 "
 `;