XF 2.3 Minify JS breaking code?

[mjda]

I've got an add-on that is utilizing JS to count characters in a text input form, so I can display the remaining characters.

Here is the full JS:

((window, document) =>
{
    XF.MyAddonCharCount = XF.Element.newHandler({
       
        textInput: null,
        maxLength: null,
        charCount: null,
       
        init ()
        {
            const textInput = this.target
            const charCount = textInput.parentElement.querySelector('div.formRow-explain span')

            if (!textInput || !charCount)
            {
                console.error('Cannot initialize, no text input and/or char counter.')
                return
            }
           
            this.textInput = textInput
            this.maxLength = textInput.maxLength
            this.charCount = charCount
           
            XF.on(textInput, 'input', this.updateRemainingchars.bind(this))
        },
       
        updateRemainingchars()
        {
            textInput = this.textInput
            maxLength = this.maxLength
            charCount = this.charCount
           
            const remainingChars = maxLength - textInput.value.length
           
            charCount.textContent = remainingChars
        }
    })
   
    XF.Element.register('character-counter', 'XF.MyAddonCharCount');
})(window, document)

In my build.json, I'm minifying this. Here is the minified code:

'use strict';((c,d)=>{XF.MyAddonCharCount=XF.Element.newHandler({textInput:null,maxLength:null,charCount:null,init(){const a=this.target,b=a.parentElement.querySelector("div.formRow-explain span");a&&b?(this.textInput=a,this.maxLength=a.maxLength,this.charCount=b,XF.on(a,"input",this.updateRemainingchars.bind(this))):console.error("Cannot initialize, no text input and/or char counter.")},updateRemainingchars(){textInput=this.textInput;maxLength=this.maxLength;charCount=this.charCount;charCount.textContent=
maxLength-textInput.value.length}});XF.Element.register("character-counter","XF.MyAddonCharCount")})(window,document);

Here is the code I'm using to call the JS from my template.

<xf:js prod="addon/character-counter.min.js" dev="addon/character-counter.js" />

The script works exactly as it's intended in my development site, but doesn't work at all in my production site. It doesn't give an error, or anything. I can verify that the JS is being called, and that the file does exist. I'm thinking there is a problem with how the code is written, that the minify is breaking it. Can someone tell me how I can figure out what's going on here?

 

[Kirby]

Normally dev / prod are only required for rollup files so I'd use

<xf:js addon="AddOnId" min="1" src="addon/character-counter.js" />

Can you post your build.json?

 

[mjda]

Normally dev / prod are only required for rollup files so I'd use

<xf:js addon="AddOnId" min="1" src="addon/character-counter.js" />

Can you post your build.json?

I can this afternoon when I get home, and I'll definitely change it to what you've posted, but I don't think it has anything to do with that part of it anyways. This is showing up on the page source on the page:

<script src="/js/addon/character-counter.min.js?_v=d1640e75" defer></script>

I can also confirm that src file exists, is publicly accessible, and contains the contents that I posted above.

Again, I'll change the template code to what you recommend, and I'll post the contents of my build.json as soon as I can.

 

[mjda]

I forgot I had my laptop, so I was able to grab that build.json now.

{
    "minify": [
        "js/addon/box.js",
        "js/addon/character-counter.js"
    ],
    "additional_files": [
        "js/addon/index.html",
        "js/addon/box.js",
        "js/addon/character-counter.js"
    ]
}

 

[mjda]

I think I may have found the issue. When the js code is minified, the minifier adds 'use strict'; to the beginning of the script. If I add that line to the beginning of my default file, then the code doesn't work in my dev site either. So, I'm assuming it's because of that. Now I just need to figure out what that even does and why it causes my code to break.

 

[mjda]

Turns out there was something wrong with how I was setting the variables that wouldn't work with the 'use strict';. I'm not sure why it wasn't working but once I added that to my dev site it threw enough errors that I could track down what was causing the problem. I thought I was pretty doing it how XF devs did it somewhere but I guess now. Anyways, changed the code to the following and it works now, even on the production site:

'use strict';
((window, document) =>
{
    XF.MyAddonCharCount = XF.Element.newHandler(
    {
        init ()
        {
            const textInput = this.target
            const charCount = textInput.parentElement.querySelector('div.formRow-explain span')

            if (!textInput || !charCount)
            {
                console.error('Cannot initialize, no text input and/or char counter.')
                return
            }
           
            this.textInput = textInput
            this.maxLength = textInput.maxLength
            this.charCount = charCount
           
            XF.on(textInput, 'input', this.updateRemainingchars.bind(this))
        },
       
        updateRemainingchars()
        {
            const textInput = this.textInput
            const maxLength = this.maxLength
            const charCount = this.charCount
           
            const remainingChars = maxLength - textInput.value.length
           
            charCount.textContent = remainingChars
        }
    })
   
    XF.Element.register('character-counter', 'XF.MyAddonCharCount');
})(window, document)

@Kirby, thanks for your help, especially the tip on how to properly add the js to my templates.

 

[Jaxel]

This is something I discovered with my own addons:

XF2 [8WR] XenMedio 2 (Media) PRO - Updates

xenforo.com

 

[mjda]

This is something I discovered with my own addons:

XF2 [8WR] XenMedio 2 (Media) PRO - Updates

xenforo.com

This is only my 2nd time ever writing JS for an add-on and I won't even begin to pretend like I know what I'm doing. I guess I got lucky and did it right the first time.