Incomplete refactoring of function names #2107

jonahsnider · 2018-10-04T13:01:12Z

🐛 bug report

Parcel minimizes JavaScript in script tags by renaming functions, but doesn't change the original function names in fields like oninput.

🎛 Configuration

parcel build index.html

🤔 Expected Behavior

Minimize JavaScript and rename exampleFunction to a. Rename references to exampleFunction to a as well.

😯 Current Behavior

Just minimizes exampleFunction, not any references. This causes errors saying how that function doesn't exist.

🔦 Context

I defined a function in a script tag that I wanted to refer to later in oninput fields on HTML tags. Since this doesn't work, I can't minimize my JavaScript with Parcel.

💻 Code Sample

<!DOCTYPE html>
<html>
<head>
  <script>
    function exampleFunction(string) {
      console.log(string.toUpperCase());
    }  
  </script>
</head>
<body>
  <input type="text" oninput="exampleFunction(this.value)">
</body>
</html>

Open up the web inspector console and type some characters in the text box.

Now do the same with the result of parcel build index.html

Here's the compressed code from parcel (I beautified it):

<!DOCTYPE html>
<html>

<head>
  <script>function o(o){console.log(o.toUpperCase())}</script>
</head>

<body> <input type="text" oninput="exampleFunction(this.value)"> </body>

</html>

As you can see, the oninput field was left unchanged, causing it to error.

🌍 Your Environment

Software	Version
Parcel	1.10.1

The text was updated successfully, but these errors were encountered:

9oelM · 2018-10-15T06:21:16Z

I just briefly scanned over the source of parcel and I think it does not process inline javascript expressions put inside tags like <a> or <input> inside an html asset. It seems only to look for script tags inside html assets. Maybe I will have a deeper look when I have some time.

However I found a temporary workaround, which is to just explicitly attach it to window (or any other global, according to your environment):

Workaround code

<!DOCTYPE html>
<html>
<head>
  <script>
    window.exampleFunction = function exampleFunction(string) {
      console.log(string.toUpperCase());
    }  
  </script>
</head>
<body>
  <input type="text" onInput="exampleFunction(this.value)">
</body>
</html>

Transformed code (I beautified it because `parcel build` minifies)

<!DOCTYPE html>
<html>
    <head>
        <script>
            window.exampleFunction = function(o) {
                console.log(o.toUpperCase())
            }
            ;
        </script>
    </head>
    <body>
        <input type="text" oninput="exampleFunction(this.value)">
    </body>
</html>

Now it works!
Hope the workaround helps you.

jonahsnider · 2020-01-17T18:20:41Z

Issue is still present in Parcel v1.12.4

jonahsnider · 2020-07-16T23:22:46Z

Issue is still present.

DeMoorJasper · 2020-07-17T10:09:55Z

@pizzafox I assume this has actually been fixed in Parcel 2 as we now process inline scripts properly

jonahsnider · 2020-07-17T18:08:35Z

Issue is still present in Parcel v2.0.0-nightly.339+1f558665.

The output has now changed to the following (formatted):

<!DOCTYPE html>
<html>
  <head>
    <script>
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJtYXBwaW5ncyI6IiIsInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W10sIm5hbWVzIjpbXSwidmVyc2lvbiI6MywiZmlsZSI6ImluZGV4LkhBU0hfUkVGXzA1ZmIzNmVkNWI2YTU1NTFmNWQ2OTk1YmU4OTI2YzE3LmpzLm1hcCJ9
    </script>
  </head>
  <body>
    <input type="text" oninput="exampleFunction(this.value)" />
  </body>
</html>

devongovett · 2021-07-12T03:56:22Z

Appears to be fixed in the latest nightlies (as of #6247). We now treat script tags without type="module" how the browser does, i.e. top-level variables are globals and won't be renamed or wrapped in a function.

DeMoorJasper added the 🐛 Bug label Oct 4, 2018

github-actions bot added the Stale Inactive issues label Jan 17, 2020

mischnic removed the Stale Inactive issues label Jan 17, 2020

parcel-bundler deleted a comment from github-actions bot Jan 17, 2020

github-actions bot added the Stale Inactive issues label Jul 16, 2020

github-actions bot removed the Stale Inactive issues label Jul 16, 2020

mischnic added the ✨ Parcel 2 label Jul 17, 2020

devongovett closed this as completed Jul 12, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Incomplete refactoring of function names #2107

Incomplete refactoring of function names #2107

jonahsnider commented Oct 4, 2018 •

edited

Loading

9oelM commented Oct 15, 2018 •

edited

Loading

jonahsnider commented Jan 17, 2020

jonahsnider commented Jul 16, 2020

DeMoorJasper commented Jul 17, 2020

jonahsnider commented Jul 17, 2020

devongovett commented Jul 12, 2021

Incomplete refactoring of function names #2107

Incomplete refactoring of function names #2107

Comments

jonahsnider commented Oct 4, 2018 • edited Loading

🐛 bug report

🎛 Configuration

🤔 Expected Behavior

😯 Current Behavior

🔦 Context

💻 Code Sample

🌍 Your Environment

9oelM commented Oct 15, 2018 • edited Loading

Workaround code

Transformed code (I beautified it because parcel build minifies)

jonahsnider commented Jan 17, 2020

jonahsnider commented Jul 16, 2020

DeMoorJasper commented Jul 17, 2020

jonahsnider commented Jul 17, 2020

devongovett commented Jul 12, 2021

jonahsnider commented Oct 4, 2018 •

edited

Loading

9oelM commented Oct 15, 2018 •

edited

Loading

Transformed code (I beautified it because `parcel build` minifies)