Add support for unsupported var declaration

Author: jonathanKingston

integration-test/test-pages/runtime-checks/config/script-overload.json

@@ -24,6 +24,10 @@
                     "navigator.mediaSession.playbackState": {
                         "type": "string",
                         "value": "playing"
+                    },
+                    "navigator.mediaSession.doesNotExist.depth.a.lot": {
+                        "type": "string",
+                        "value": "boop"
                     }
                 }
             }

integration-test/test-pages/runtime-checks/pages/script-overload.html

@@ -27,6 +27,7 @@
                     pb: navigator.mediaSession.playbackState,
                     wpb: window.navigator.mediaSession.playbackState,
                     gpb: globalThis.navigator.mediaSession.playbackState,
+                    undef: navigator.mediaSession.doesNotExist.depth.a.lot
                 }
             `;
             scriptElement.id = 'overloadedScript';
@@ -51,7 +52,8 @@
                     g: expectedUserAgentOverload,
                     pb: expectedPlaybackState,
                     wpb: expectedPlaybackState,
-                    gpb: expectedPlaybackState
+                    gpb: expectedPlaybackState,
+                    undef: 'boop'
                 } },
                 { name: 'user agent doesnt match parent context', result: doesntMatchParentContext, expected: true }
             ];

src/features/runtime-checks.js

@@ -187,11 +187,20 @@ class DDGRuntimeChecks extends HTMLElement {
             for (const [key, value] of scope) {
                 const varOutName = [...scopePath, key].join('_')
                 if (value instanceof Map) {
+                    const proxyName = `_proxyFor_${varOutName}`
+                    output += `
+                    let ${proxyName}
+                    if (${scopePath.join('?.')}?.${key} === undefined) {
+                        ${proxyName} = Object.bind(null);
+                    } else {
+                        ${proxyName} = ${scopePath.join('.')}.${key};
+                    }
+                    `
                     const keys = Array.from(value.keys())
                     output += stringifyScope(value, [...scopePath, key])
                     const proxyOut = keys.map((keyName) => `${keyName}: ${[...scopePath, key, keyName].join('_')}`)
                     output += `
-                    let ${varOutName} = constructProxy(${scopePath.join('.')}.${key}, {${proxyOut.join(', ')}});
+                    let ${varOutName} = constructProxy(${proxyName}, {${proxyOut.join(', ')}});
                     `
                     // If we're at the top level, we need to add the window and globalThis variables (Eg: let navigator = parentScope_navigator)
                     if (scopePath.length === 1) {