JSFiddle - React, Tailwind, and code Playground

by habla

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
   var $jq321 = jQuery.noConflict();
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
   var $jq191 = jQuery.noConflict();
</script>

<div id="widget1"></div>
<div id="widget2"></div>

JavaScript

/* const widget_environment_1 = new Proxy({}, {
  has() { return true },
  get: function (target, name){
    if (name === '$') return $jq191
    return undefined;
  }
});

const widget_environment_2 = new Proxy({}, {
  has() { return true },
  get: function (target, name){
    if (name === '$') return $jq321
    return undefined;
  }
}); */

// This example doesn
with ({'$':$jq191}) {
  $('#widget1').text('I am widget1, using JQ: ' + $.fn.jquery);
	console.log(window);
}
/* 
with (widget_environment_1) {
  $('#widget1').text(`I am widget1, using JQ: ${$.fn.jquery}`);
} */
/* 
with (widget_environment_2) {
  $('#widget2').text(`I am widget2, using JQ: ${$.fn.jquery}`);
  console.log(window);
} */