require js remove definition to force reload

Question

For testing purposes I am trying to remove some amd modules and reload updated versions from the server - with the goal of not refreshing the browser.

I am currently doing the following but the browser still doesn't reload the items from the network.

var scripts = document.getElementsByTagName('script');
var context = require.s.contexts['_'];
for (var key in context.defined) {
  if(key.indexOf("tests")>-1){
  requirejs.undef(key);
  for (var i = scripts.length - 1; i >= 0; i--) {
  var script = scripts[i];
  var attr = script.getAttribute('data-requiremodule')
    if (attr === key){
    script.parentNode.removeChild(script);
    }
  }}

It deletes the references from the context and removes the script tags successfully. But alas...

Does anyone know the mechanism to clear all the references from requirejs?

Any help much appreciated

Answer 1

We are currently trying out this implementation:

require.onResourceLoad = function(context, map)
{
    require.undef(map.name);
};

No issues has surfaced so far.

Edit: IE doesn't care much about this fix. Chrome and FF is fine however.

Also, you should try live-edit in PhpStorm. Works like a charm. A demo can be seen here. Chrome only though.

Answer 2

this answer is similar to the user1903890 but i think its easy to follow making other implementation.

Basically we have to encapsulate in an init function the main.js requirejs controller specified in our index.html. Once it's defined, then we call to this init function to init requirejs normally

function init_requirejs(){
    console.log("--------------------------- INIT requirejs:");
    require([ "helpers/util"], function(util) {
        var count=0;
        $('#content').empty();

        $('#content').append("<input type='button' id='increment_button' value='click to increment the counter'>");
        $('#content').append("<h1 id='the_counter'>0</h1>");

        $('#content').append("<br><br><input type='button' id='init_button' value='click to initialize requirejs files'>");

        $('#increment_button').on('click', function(){
            count++;
            $('#the_counter').text(count);
        });
        $('#init_button').on('click', function(){
            end();
            init_requirejs();
        });

        util();

    });
};
init_requirejs();

Also we need and use the require.onResourceLoad function to store all the files that participate in the requirejs app

var all=[];
require.onResourceLoad = function (context, map, depArray) {
    all.push(map.name);    
};

And we need a reset requirejs configuration function to delete the actual instance of requirejs, we will do it with the require.undef function:

function end(){
    console.log("--------------------------- END requirejs:");
    all.map(function(item){
        require.undef(item);
    });
};

That's all!

Later from our code we can force the reload app without reload the browser only calling to end() function and init_rquirejs() function. For example inside a jquery click event:

$('#init_button').on('click', function(){
    end();
    init_requirejs();
});

The code of the demo is in https://github.com/juanantonioruz/requirejs-force-reload

And an online version https://dl.dropboxusercontent.com/u/8688858/requirejs-force-reload/project.html

I hope this solution work for you!

Juan