Load "on the fly" code with requirejs

StackOverflow https://stackoverflow.com/questions/23113693

  •  04-07-2023
  •  | 
  •  

Question

I'm trying to create an online interactive js programming test-bed. I have a code window and a target iframe where the code gets loaded to execute. I wrap the code in html and load it into the iframe. The problem is that the code I want to be testing is normally loaded via requirejs using a data-main parameter. It appears that the code needs to be loaded from a separate file so that I can't include it in the html itself.

What works but doesn't help me is creating a file on the server to use as the target of the data-main parameter and sending html to the iframe that requires requirejs and then loads my code.

html:

<html>
 ....
 <script type="text/javascript" src="lib/requirejs/require.js" data-main="src/requireConfigTest"></script>
 ....
</html>

contents of requireConfigTest.js:

/*globals require*/
require.config({
    shim: {

    },
    paths: {
        famous: 'lib/famous',
        requirejs: 'lib/requirejs/require',
        almond: 'lib/almond/almond',
        'famous-polyfills': 'lib/famous-polyfills/index'
    }
});
// this is the injection point where the dynamic code starts
define(function (require,exports,module) {
    var Engine = require("famous/core/Engine");
    var Surface = require("famous/core/Surface");

    var mainContext = Engine.createContext();

    var surface = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            textAlign: "center",
            lineHeight: "20px"
        }
    });
    alert('hi');
    mainContext.add(surface);

});
//this is the end of the dynamic code

This requires writing the dynamic code back to the server, not a reasonable solution. I'm trying to implement something like this...

html:

<html>
 ....
<script type="text/javascript" src="lib/requirejs/require.js"</script>
<script type="text/javascript">
/*globals require*/
require.config({
    shim: {

    },
    paths: {
        famous: 'lib/famous',
        requirejs: 'lib/requirejs/require',
        almond: 'lib/almond/almond',
        'famous-polyfills': 'lib/famous-polyfills/index'
    }
});
// this is the injection point where the dynamic code starts
define(function (require,exports,module) {
    var Engine = require("famous/core/Engine");
    var Surface = require("famous/core/Surface");

    var mainContext = Engine.createContext();

    var surface = new Surface({
        size: [100, 100],
        content: "Hello World",
        classes: ["red-bg"],
        properties: {
            textAlign: "center",
            lineHeight: "20px"
        }
    });
alert('hi');
    mainContext.add(surface);

});
//this is the end of the dynamic code
</script>

This fails with the message:

Uncaught Error: Mismatched anonymous define() module: function (require, exports, module) {...

My hope is to either find a way to reformat the code above in the second script tag or find a way to pass the actual contents of requireConfigTest.js via data-main instead of passing the name of the file to load.

Any help here would be greatly appreciated.

Was it helpful?

Solution

Since you are not actually defining a module with your define call, you could just use require:

require(["famous/core/Engine", "famous/core/Surface"], function (Engine, Surface) {
    var mainContext = Engine.createContext();
    // Etc...

You can think of define as being a require call which additionally defines a module. The way you are using define it is defining a module that does not have a name because you did not give it a name (which is generally the right thing to do) but it is not loaded from a .js file. When you don't give a name to a module as the first argument of define, RequireJS assigns a name from the .js file it loads the module from.

Another thing to keep in mind is that require schedules its callback for execution right away. (The callback is not executed right away but it scheduled for execution right away.) Whereas define does not schedule anything. It just records the callback and then when a require call (or something equivalent) requires it, the callback is executed.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top