Configuration Pages and String Interoplation

[rhodges 37]

I just started playing around with adding a configuration page to my personal plugin. Been looking at some examples and I haven't seen any use templated/interoplated strings.  I tried and I am getting the ${ and } stripped in the rendered HTML.

 

I have an html file, embedded resource and things are fine.

 

Source:

                        var x = 'hello';
                        const msg = `${x} world!`;
                        alert(msg);

The message I get is "x world!". Here is the javascript that is inside the page (from Chrome developer tools):

                        var x = 'hello';
                        const msg = `x world!`;
                        alert(msg);

Am I missing something simple, some sort of escaping needed due to how things are injected into the page?

Edited February 7, 2019 by rhodges

[Luke 37063]

What are you trying to inject?

[rhodges 37]

What are you trying to inject?

I updated my post. This is just minimal example code that duplicates the issue.

 

It looks like ${ and } gets stripped out what is inserted into the page by whatever you are using to load the page.

[Luke 37063]

You can't inject anything into the html.

[rhodges 37]

You can't inject anything into the html.

I wasn't trying to inject anything. Attached is the entire <script> block that is in the html file (the embeded resource)

 

        <script type="text/javascript">
            (function () {


                var pluginId = "35D33AB6-6F7F-4C88-906F-56639569BF62";


                $('.homeApiConfigurationPage').on('pageshow', function (event) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                        Dashboard.hideLoadingMsg();
                    });
                });


                $('#homeApiRefresh').on('click', function (e) {
                    Dashboard.showLoadingMsg();


                    const url = ApiClient.getUrl('/HomeApi/ThemeInfo', {});


                    ApiClient.getJSON(url).then(function (r) {


                        var x = 'hello';


                        const msg = `${x} world!`;
                        alert(msg);


                        Dashboard.hideLoadingMsg();
                    });
                    
                    return false;
                });


                $('.homeApiConfigurationForm').off('submit.plugin').on('submit.plugin', function (e) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                        ApiClient.updatePluginConfiguration(pluginId, config).then(Dashboard.processPluginConfigurationUpdateResult);
                    });
                    return false;
                });


            })();
        </script>

My expectation, for this test, is that when I press the button, the message 'hello world!' is displayed. What I actually see is 'x world!' in the alert box.

 

When I look at that in the Chrome developer tools, here is what I see:

 

<script type="text/javascript">
            (function () {


                var pluginId = "35D33AB6-6F7F-4C88-906F-56639569BF62";


                $('.homeApiConfigurationPage').on('pageshow', function (event) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                        Dashboard.hideLoadingMsg();
                    });
                });


                $('#homeApiRefresh').on('click', function (e) {
                    Dashboard.showLoadingMsg();


                    const url = ApiClient.getUrl('/HomeApi/ThemeInfo', {});


                    ApiClient.getJSON(url).then(function (r) {


                        var x = 'hello';


                        const msg = `x world!`;
                        alert(msg);


                        Dashboard.hideLoadingMsg();
                    });
                    
                    return false;
                });


                $('.homeApiConfigurationForm').off('submit.plugin').on('submit.plugin', function (e) {
                    Dashboard.showLoadingMsg();
                    ApiClient.getPluginConfiguration(pluginId).then(function (config) {
                        ApiClient.updatePluginConfiguration(pluginId, config).then(Dashboard.processPluginConfigurationUpdateResult);
                    });
                    return false;
                });


            })();
        </script>

See how something mangled const msg = `${x} world!`; into const msg = `x world!`; ?

 

When I referred to injecting, I was referring to whatever method *you* use to display a configuration page. I am not injecting anything. It is just a single HTML page with a <script> block in it.

[samuelqwe 313]

Wouldn’t it be easier to concatenate x to the string within the constant by using the + operator? It seems like it would work in this situation.

[rhodges 37]

Wouldn’t it be easier to concatenate x to the string within the constant by using the + operator? It seems like it would work in this situation.

It would, especially in this situation.

 

It is just I wasn't expecting this issue. What else "doesn't work" the way a web developer wouldn't expect. I posted to document this. If there is some library they are using to manage loading these plugin configuration pages, then maybe it is a limitation of that library. By pointing to the documentation of the library, we would know then what else to watch out for. Then we wouldn't need to both the Emby developers.

[Luke 37063]

I wouldn't use es6 features anyway because you can't predict the environment it will be running in.