JSFiddle - React, Tailwind, and code Playground

by John Kane

HTML

<sup><em>Note that jQuery is included here <u>only</u> to produce demo page output for this script - jQuery is <b>not</b> a dependency of global context resolution; demo output is also sent to the console using console.dir(..) if available.</em></sup>


<h1>Global Context Resolver for Script</h1>


<h2>Overview</h2>

<p>An example of script global context is the <em>window</em> variable for browsers, or the <em>global</em> variable for NodeJs. This script grabs a handle to the environment's global context, which can be overridden to return a custom context if necessary.</p>
<p>The main problem this script solves is the script error <em>'Uncaught ReferenceError: x is not defined'</em> when trying to resolve the global context - it also adds some smart support for global context resolution.</p>
<p>See the <b>getGlobalContext()</b> method - it will resolve the global context in the following order:
    <ol>
        <li>If defined, the <em>globalContextResolver</em> variable will be used (as a function call),</li>
        <li>or else it will try to automatically return the global context for common script environments,</li>
        <li>otherwise it will throw an error that custom resolution is needed.</li>
    </ol>
</p>
<p>
     <h3>Demo output proving Custom context resolution:</h3>

    <div id="custom"></div>
</p>
<p>
     <h3>Demo output proving Environmental context resolution:</h3>

    <div id="environment"></div>
</p>
<p>
     <h3>Demo output for unresolvable context:</h3>

    <div id="unresolvable"></div>
</p>

JavaScript

// ========================
// Main Resolution Method ... 

// Returns a global context for the environment or throws an error if it's not resolvable. 
var getGlobalContext = function () {
    var gc = undefined;
    // if a custom resolver exists then use it 
    if (typeof globalContextResolver !== 'undefined') {
        gc = globalContextResolver();
    } else {
        // otherwise try for common script environments... 
        gc = (typeof global !== 'undefined' && global) || // node 
        (typeof window !== 'undefined' && window) || // browser
        (typeof self !== 'undefined' && self); // web workers, etc
    }
    if (!gc) {
        throw 'Global context unresolved - you can add a custom global context resolver via variable: globalContextResolver = function() { return your_global_context;};'
    }
    return gc;
}

// ========================
// Sample Output

    function CustomContext() {
        //for the sake of having a custom global context to test with 
    };

// If defined, the globalContextResolver variable is used by the getGlobalContext() function first and foremost. 
var globalContextResolver = function () {
    return new CustomContext();
};

// 1. get the global context when a custom resolver is defined (see var globalContextResolver)
var g = getGlobalContext();
// will report the global context object is of type CustomContext
var msg = 'global context (of custom resolver): ' + g;
console && console.dir && console.dir({
    _msg: msg,
    g: g
});
$('#custom').text(msg);

// 2. undefine the custom context resolver 
globalContextResolver = undefined;
g = getGlobalContext();
// will report the global context object is of the current environment
msg = 'global context (of environment): ' + g;
console && console.dir && console.dir({
    _msg: msg,
    g: g
});
$('#environment').text(msg);

// 3. mock an unresolvable context 
globalContextResolver = function () {
    return null; // through a custom resolver that returns null 
};
try {
   ...