trullock / NUglify

NUglify is a HTML, JavaScript and CSS minification Library for .NET (fork of AjaxMin + new features)
Other
398 stars 79 forks source link

brackets removed from optimization results in invalid code when using const #339

Open NGumby opened 2 years ago

NGumby commented 2 years ago

Using latest version

Describe the bug the problem is with the "const left = ...". After nuglifying, it gives error Uncaught SyntaxError: Unexpected token 'const'

If we change it to "let left = ..." then it works fine.

To Reproduce var CS; (function (CS) { var Views; (function (Views) { class General { test(a) { const { IsTransitionDataset } = a; if (IsTransitionDataset) { return; } const left = (3 * 100).toFixed(2); const e = $("

").addClass('test').css({ left: ${left}% }).attr("data-datasetindex", 2); const $marker = $("
").appendTo(e); } constructor() { this.test(''); } } Views.General = General; })(Views = CS.Views || (CS.Views = {})); })(CS || (CS = {}));

Minified output or stack trace var CS;(function(n){var t;(function(n){class t{test(n){const{IsTransitionDataset:t}=n;if(!t)const i=300..toFixed(2),r=$("

").addClass("test").css({left:${i}%}).attr("data-datasetindex",2),u=$("
").appendTo(r)}constructor(){this.test("")}}n.General=t})(t=n.Views||(n.Views={}))})(CS||(CS={}));

Excepted output code var CS;(function(n){var t;(function(n){class t{test(n){const{IsTransitionDataset:t}=n;if(!t){const i=300..toFixed(2),r=$("

").addClass("test").css({left:${i}%}).attr("data-datasetindex",2),u=$("
").appendTo(r)}}constructor(){this.test("")}}n.General=t})(t=n.Views||(n.Views={}))})(CS||(CS={}));

With this code it is fine (changed "const left" to "let left") var CS; (function (CS) { var Views; (function (Views) { class General { test(a) { const { IsTransitionDataset } = a; if (IsTransitionDataset) { return; } let left = (3 * 100).toFixed(2); const e = $("

").addClass('test').css({ left: ${left}% }).attr("data-datasetindex", 2); const $marker = $("
").appendTo(e); } constructor() { this.test(''); } } Views.General = General; })(Views = CS.Views || (CS.Views = {})); })(CS || (CS = {}));

generates this: var CS;(function(n){var t;(function(n){class t{test(n){const{IsTransitionDataset:t}=n;if(!t){let i=300..toFixed(2);const r=$("

").addClass("test").css({left:${i}%}).attr("data-datasetindex",2),u=$("
").appendTo(r)}}constructor(){this.test("")}}n.General=t})(t=n.Views||(n.Views={}))})(CS||(CS={}));

trullock commented 2 years ago

Can you simplify that case case down please and format it nicely in github, cheers

NGumby commented 2 years ago

redo :)

the problem appears to be when there are only const or let or var in a block.

Repro:

function test(a) {
    const { IsTransitionDataset } = a;
    if (IsTransitionDataset) {
        return;
    }
    const left = 3;
    const e = $("a").css('left', left + "px");
}
test('');

Result:

function test(n) {
    const {IsTransitionDataset: t} = n;
    if (!t)
        const i=3,r=$("a").css("left",i+"px")
}
test("");

Result with "let left = 3":

function test(n) {
    const {IsTransitionDataset: t} = n;
    if (!t) {
        let i = 3;
        const r = $("a").css("left", i + "px")
    }
}
test("");

This also repros:

function test(a) {
    const { IsTransitionDataset } = a;
    if (IsTransitionDataset) {
        return;
    }
    let left = 3;
    let e = $("a").css('left', left + "px");
}
test('');
o-serhiichyk commented 1 year ago

One more case.

This code:

define("MyModule", [], () => {
    return {
        myProperty: () => {
            if (someCondition()) {
                const var1 = func1();
                const var2 = func2();
            }
        }
    };
});

Produces this result (formatted):

define("MyModule", [], () => ({
    myProperty: () => {
        if (someCondition()) const n = func1(),
            t = func2()
    }
}))

And this also leads to the error "Unexpected token 'const'".