Native JS Map prototype is overwritten in Visualforce page w/ a header

Question

I've been exploring implementing Angular 2.0 in Salesforce custom pages and found that if I set showHeader=true in the VF page, I run into some issues.

It looks like including the header loads "sfdc/main.js", which defines the browser's Map() function without checking if one already exists. This removes some needed prototype functions that are native to ES5/6 such as "set" (needed in Angular 2) and "delete" (needed for an ES6-shim).

I've found that even including an ES5 shim before the ES6 one in attempts to restore some of these prototype methods does not work. If I set showHeader=false, "sfdc/main.js" is not loaded and everything works fine.

Is there a recommended way around this, or is it possible to update "sfdc/main.js" to conditionally define Map() if one does not already exist? It looks like it leaves out quite a few native functions supported in modern browsers.

Thanks

Answer 1

There isn't any way to modify the JavaScript that the platform includes.

Based on the approach described in “delete” - restore native function not working for changed prototype, how then? this appears to restore the native function:

<apex:page>

<script>
console.log(Map);
</script>

<script>
// Add this before your other JavaScript to restore the native Map
(function() {
    var frame = document.createElement('iframe');
    document.body.appendChild(frame);
    // Intentionally set in global scope
    Map = frame.contentWindow.Map;
    frame.parentNode.removeChild(frame);
})();
</script>

<script>
console.log(Map);
</script>

</apex:page>

with the first console.log outputting:

Map(){this.size=0;this.map={}}

and the second outputting:

Map() { [native code] }