caspervonb / amok-loader Goto Github PK

The default webpack require essentially looks like the following

(function(modules) {
  var cache = {};

  function require(id) {
    if(cache[id]) {
      return cache[id].exports;
    }

    var module = cache[id] = {
      exports: {},
      id: id,
      loaded: false
    };

    modules[id].call(module.exports, module, module.exports, require);
    module.loaded = true;

    return module.exports;
  }

  require.modules = modules;
  require.cache = cache;
})([
  function module_0(module, exports, require) {
  },
  function module_1(module, exports, require) {
  },
]);

The issue with this, is that you can't add new modules on the fly, despite modules being added to the arguments, it is doing just that, adding to the arguments.

So to allow new modules being included on the fly, we need to change the pattern here very slightly to have the modules returned from a function.

(function() {
  var cache = {};

  function modules() {
    return [
      function module_0(module, exports, require) {
      },
      function module_1(module, exports, require) {
      },
    ]
  };

  function require(id) {
    if(cache[id]) {
      return cache[id].exports;
    }

    var module = cache[id] = {
      exports: {},
      id: id,
      loaded: false
    };

    modules()[id].call(module.exports, module, module.exports, require);
    module.loaded = true;

    return module.exports;
  }

  require.modules = modules;
  require.cache = cache;
})();

This way, all the modules defined in a bundle can be hot.

So, it occurred to me that the hole I've been digging is a dead end, which was evaluating code based on AST nodes after a little bit of code molding.

The problem is that, evaluated code can't be reached in the debugger, they are not apart of the source after all. That meant that after evaluation they would not be live like other functions when using amok. Also breakpoints won't work as expected, etc.

Another thing is that it was getting incredibly slow, partly to me adding the entire AST tree and source code as properties of the module, which would be exponential.

However, since functions are kept up to date via setScriptSource, all we really need to do is stick our module code into some re-occurring function and we effectively have re-evaluation.

window.addEventListener('patch', function(event) {
  console.log('my module');
});