Parcel: Incomplete refactoring of function names

Created on 4 Oct 2018  ·  5Comments  ·  Source: parcel-bundler/parcel

🐛 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|

Bug ✨ Parcel 2
Source
picture pizzafox
👍1

Most helpful comment

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.

picture 9oelM on 15 Oct 2018
❤3

All 5 comments

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.

9oelM picture 9oelM on 15 Oct 2018
❤3

Issue is still present in Parcel v1.12.4

pizzafox picture pizzafox on 17 Jan 2020

Issue is still present.

pizzafox picture pizzafox on 17 Jul 2020

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

DeMoorJasper picture DeMoorJasper on 17 Jul 2020

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>
pizzafox picture pizzafox on 17 Jul 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

davidnagli picture davidnagli  ·  3Comments
Niggler picture Niggler  ·  3Comments
donaldallen picture donaldallen  ·  3Comments
adamreisnz picture adamreisnz  ·  3Comments
algebraic-brain picture algebraic-brain  ·  3Comments