Page variable is overwritten when page.js.twig is included in a dynamically loaded component

[alexweissman]

page.js.twig currently sets the page Javascript variable to import page-specific variables from the server into the client JS environment. However it looks like in some cases we load this partial both in the base page as well as dynamic components such as modal forms.

This means that the original value set in the base page gets completely overwritten when the modal form is loaded.

The simplest solution seems to be merging, rather than setting, the page variable by changing page.js.twig:

{# Page variables needed by client-side code (Javascript). #}
{% autoescape 'js' %}
    if (typeof page === 'undefined') {
      var page = {};
    }

    page = $.extend(
        true,               // deep extend
        {{ page | json_encode(constant('JSON_PRETTY_PRINT')) | raw }},
        page
    );
{% endautoescape %}

This doesn't completely guarantee that nested values in page won't be overwritten, of course. But it at least provides a mechanism for easily setting additional client-side variables while keeping them scoped under the top-level page object.

[alexweissman]

We could also consider a system that automatically scopes variables in dynamically loaded components to those specific components, a la Angular and other JS frameworks. Now that I think about it, blindly doing a deep merge doesn't make that much more sense than blindly doing an overwrite.

[Silic0nS0ldier]

IMO the page variable should not be treated as immutable in JS. My thoughts are to reign in scope of the proposed change to conditionally set it.

[alexweissman]

I agree, but the way we have it designed now it is too easy to accidentally overwrite it by including page.js.twig more than once. A lot of that honestly is my fault in the way I set up the base modal template, which reuses the page variable to communicate validation rules to modal forms.

[Silic0nS0ldier]

Ugh. I spotted a type.

I meant it should be treated as immutable in JS.

[alexweissman]

Ah ok. Well in that case we definitely should be using separate variables for different components, then.