Umd globals not working ?

[MohamedLamineAllal]

Describe the bug

globals in the moduleoption of type: umd is there to remap the module name asigned to global. That's how it is used in babel @babel/plugin-transform-modules-umd

{
  "plugins": [
    [
      "@babel/plugin-transform-modules-umd",
      {
        "globals": {
          "es6-promise": "Promise"
        }
      }
    ]
  ]
}

exposing global.Promise rather than the default global.es6Promise.

swc seeming to go with global.fileName. Which normally a config like:

{
  "$schema": "http://json.schemastore.org/swcrc",
  "module": {
    "type": "umd",
    "globals": {
      "index": "HeroJs"
    }
  },
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dts": true,
      "dynamicImport": true
    },
    "baseUrl": ".",
    "paths": {
      "/*": ["./src/*"]
    }
  },
  "sourceMaps": true
}

Should replace the global.index with global.HeroJs for an index.js module file. That's not happening:

The output still went as:

    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {});

Full output file:

(function(global, factory) {
    if (typeof module === "object" && typeof module.exports === "object") factory(exports);
    else if (typeof define === "function" && define.amd) define([
        "exports"
    ], factory);
    else if (global = typeof globalThis !== "undefined" ? globalThis : global || self) factory(global.index = {});
})(this, function(exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    function _export(target, all) {
        for(var name in all)Object.defineProperty(target, name, {
            enumerable: true,
            get: all[name]
        });
    }
    _export(exports, {
        Class1: function() {
            return Class1;
        },
        Class2: function() {
            return Class2;
        },
        Hero: function() {
            return Hero;
        }
    });
    function _instanceof(left, right) {
        if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
            return !!right[Symbol.hasInstance](left);
        } else {
            return left instanceof right;
        }
    }
    function _classCallCheck(instance, Constructor) {
        if (!_instanceof(instance, Constructor)) {
            throw new TypeError("Cannot call a class as a function");
        }
    }
    var Class1 = function() {
        "use strict";
        function Class1() {
            _classCallCheck(this, Class1);
        }
        var _proto = Class1.prototype;
        _proto.go = function go() {
            return 1;
        };
        return Class1;
    }();
    var Class2 = function() {
        "use strict";
        function Class2() {
            _classCallCheck(this, Class2);
        }
        var _proto = Class2.prototype;
        _proto.start = function start() {
            return 1;
        };
        return Class2;
    }();
    var Hero = function Hero() {
        "use strict";
        _classCallCheck(this, Hero);
        this.c1 = new Class1();
        this.c2 = new Class2();
    };
});

//# sourceMappingURL=index.swc.umd.js.map

Input code

File name index.js


function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}
var Class1 = function() {
    "use strict";
    function Class1() {
        _classCallCheck(this, Class1);
    }
    var _proto = Class1.prototype;
    _proto.go = function go() {
        return 1;
    };
    return Class1;
}();
var Class2 = function() {
    "use strict";
    function Class2() {
        _classCallCheck(this, Class2);
    }
    var _proto = Class2.prototype;
    _proto.start = function start() {
        return 1;
    };
    return Class2;
}();
var Hero = function Hero() {
    "use strict";
    _classCallCheck(this, Hero);
    this.c1 = new Class1();
    this.c2 = new Class2();
};
export { Class1 as Class1 };
export { Class2 as Class2 };
export { Hero as Hero };

Config

{
  "$schema": "http://json.schemastore.org/swcrc",
  "module": {
    "type": "umd",
    "globals": {
      "index": "HeroJs"
    }
  },
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": false,
      "decorators": true,
      "dts": true,
      "dynamicImport": true
    },
    "baseUrl": ".",
    "paths": {
      "/*": ["./src/*"]
    }
  },
  "sourceMaps": true
}

Playground link

https://play.swc.rs/?version=1.3.23&code=H4sIAAAAAAAAA52S3WqEMBCF732KqVdZWITN7dIrKfQB9n4JIa5SycgYuy2L796JSST2vxUxP%2BckZz6TZrLadWjhrHs1jrXq%2B7o1%2Bkl0dnTKarOHGrlLk3ZIO7gVwE%2FXgLhbLZA62GzMye0f1xJewZornF4H80CEJMpaWYsONIeCgqUAUPxCE6sqd8dlh7mYi2dFUHvLAe5Xg0gZ5TQa4OROuzKsSZa4SOTVvId1bTfuo3GN9F8feh4IHXJo0Ktl6JgiGINcXTArCy64ySPjJrJwiFuHJk6GXY%2FFLDh5hZT%2FgZS%2FhZQ%2FQMovIPmYyeWcy8TfUGWG%2Bmho89v8%2BBvaz4n8osjjJyrtL4i%2Faengc03mmvQal2heBmSuW7pffAdj74MoV1FuxIWEpaVl4Q2cY2xrWAMAAA%3D%3D&config=H4sIAAAAAAAAA0WNTQoDIQxG75K1227mBKXQQ1gnM1j8I1GoiHdvMli6Svi%2Bl5cBb3awDSiWGEk37qnaD2yALlp25EsFI5hEhw2M00C1dGJVhG%2FShZwZV2sg%2BuSPriaXYyFk%2Flc2neFHThHFvDcNBtReZEKLuwjPkF%2BCaO5TafrpjpQfDNfRerCknp%2FLUqnh%2FAIpHc%2BU0gAAAA%3D%3D

Expected behavior

globs to work like with babel and allow renaming (mapping).

Actual behavior

globals not working.

Version

"@swc/cli": "^0.1.57", "@swc/core": "^1.3.23"

Additional context

No response

[MohamedLamineAllal]

I can see that the functionality is not implemented here:

swc/crates/swc_ecma_transforms_module/src/umd/config.rs

Line 75 in d8fc029

Some(stem) => self.global_name(&stem.to_string_lossy().into()),

swc/crates/swc_ecma_transforms_module/src/umd.rs

Line 117 in d8fc029

let exported_name = self.config.determine_export_name(filename);

And i can create a PR for this.

I have some inquiries about how it should be implemented:

• If filename have no / we map directly against the globals map with exact match
• else if / exists => what should we do ?

Exact match ?
partial match at the end ?

And for

Some(stem) => self.global_name(&stem.to_string_lossy().into())

What is the expected src format ? => Absolute, relative, any of the two ?

[kdy1]

The format depends on the input.
About decisions, let's follow one from other tools.

[MohamedLamineAllal]

@kdy1 PR: #6717

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.