gmaps requires the sensor param, so we need to do some check if it is trying to load gmaps and append the param or simple allow passing more params to the plugin..

PS: you can use the async plugin to load gmaps (check example files..)

Hi,

When using the async plugin to load google maps it become impossible to build and minify the project with the requirejs optimizer.

I've found a partial solution but it is missing something to be complete:
http://techblog.realestate.com.au/loading-google-maps-with-requirejs/

In the case that the url fails to load from an async! call, it appears that it blocks the entire page from loading. Shouldn't the onLoad function be called if the module times out?

Load the following URL in your browser...

http://api.flickr.com/services/feeds/photos_public.gne?id=49297289@N08&lang=en-us&format=json - this wraps the json response with a function called jsonFlickrFeed.

If I try to do...

window.jsonFlickrFeed = function(data) { 
    console.log(data);
}

require(['async!http://api.flickr.com/services/feeds/photos_public.gne?id=49297289@N08&lang=en-us&format=json']);

...I get the data but I then get a timeout error Uncaught Error: Load timeout for modules: async!http://api.flickr.com/services/feeds/photos_public.gne?id=49297289@N08&lang=en-us&format=json

If I try a different URL format (e.g. just return plain JSON data)...

http://api.flickr.com/services/feeds/photos_public.gne?id=49297289@N08&lang=en-us&format=json&nojsoncallback=1

...then I get the error Uncaught SyntaxError: Unexpected token : (followed by the same timeout error above) as the browser considers the returned JSON data to be invalid. But yet if I run the returned data through a validator it passes?

Any ideas?

I noticed this on my own JSONP plugin (https://github.com/Integralist/RequireJs-Example/blob/master/Assets/Scripts/Plugins/jsonp.js) and then thought I would check yours to see if it had the same issues and it did.

Please consider pulling in the modification to font.js that @spalax recently made. One of my projects recently started throwing a ReferenceError: Can't find variable: WebFont exception, and his change fixed the issue for me.

milsdev@f3dace3

I'm having issues successfully authenticating users to allow access to protected URLs with the Google APIs plugin. Having loaded the GData API with the Calendar package, calling google.accounts.user.login('https://www.google.com/calendar/feeds'); redirects the user to the logon page and then back to the source page with the auth token in the URL. Usually, this auth token isn't present. I think the script normally parses the URL and redirects to the page without it.

I've created a gist outlining the issue here, https://gist.github.com/2401041

is it possible to exclude the mdown! in the optimized build so that it get's loaded dynamically even in production?

Let's say you want to load a font with specific weights. You could in theory do this:

require(["font!google,families:['Roboto+Condensed:300italic,400italic,400,300:latin']"]);

However, the problem is that propertyParser will split the string inside of the array brackets instead of preserving the string. So instead of the propertyParser returning an array like so:

CORRECT
["Roboto+Condensed:300italic,400italic,400,300:latin"]

it returns

CURRENT IMPLEMENTATION (BUG)
["'Roboto+Condensed:300italic", "400italic", "400", "300:latin'"]

The workaround was for me to modify the propertyParser and in the line which splits the string by comma, instead of doing that, I just pass the string into JSON.parse. Of course that means you will have to wrap each family inside quotations.

There is a problem when using urlArgs along with callback parameter. The following use case seems to be not supported:

requirejs.config({
    urlArgs: 'bust=v2',
    // ...
});

define(['async!https://apis.google.com/js/client.js!onload'], function() {
    // ...
});

Following happens in this case: async plugin receives as a name https://apis.google.com/js/client.js!onload?bust=v2, thus the entire string onload?bust=v2 is taken as a parameter name, which is incorrect

The Firefox web developer toolbar, version 1.2.5, indicates a JavaScript warning when using the async plugin to load the Google Maps API with additional libraries.

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?libraries=geometry,weather&sensor=false'], function() {
return window.google;
});

Warning from web developer error console:
Warning: Error: Support for eval(code, scopeObject) has been removed. Use |with (scopeObject) eval(code);| instead.
Source File: http://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/13/12/%7Bmain,geometry,weather%7D.js
Line: 9

As I said, its just a warning but it still bothers me. I tried using the goog plugin, but that causes the same warning:
define('gmaps', ['goog!maps,3,other_params:sensor=false&libraries=geometry'], function() {
return window.google;
});

Hey, thank you so much for your json plugin.

Would you be willing to publish your pluglins on npm as well?

best regards
Philipp

I have a file called map-places.json and I'm using json! to import the document. I had it in the same directory next to my main.js file and I used the following to call it.

define('places', ["json!./map-places.json", "underscore"], function(places, _){…

I just put the map.places.json file in a folder called map. The structure looks like this.

/main.json
/map
    /map-places.json

So logically I did the following

define('places', ["json!./map/map-places.json", "underscore"], function(places, _){…

I'm getting an error, you can see that it's looking in map/map not just one /map

GET http://reggi.dev/reggi.com/assets/javascripts/map/map/map-places.json 404 (Not Found)

When I put it back to how it was originally I get

GET http://reggi.dev/reggi.com/assets/javascripts/map-places.json 404 (Not Found) 

Any ideas how to define a nested json document?

To confirm, the absolute path does work

define('places', ["json!http://reggi.dev/reggi.com/assets/javascripts/map/map-places.json", "underscore"], function(places, _){

This botched absolute works.. which is very strange...

define('places', ["json!javascript/../map/map-places.json", "underscore"], function(places, _){

I have a web app, hosted on bar.com. require-js plugins are in foo.com/requirejs-plugin/src

image plugin path is image: 'lib/requirejs-plugins/src/image'

Later, I load a plugin with require.js. The plugin is located, for example, at bar.com/plugins/plugin.js. I want to load an image from there, relative to bar.com/plugins/.

If I do:
define(['image!assets/images/myimage.png!rel'])

The image is looked for at foo.com/assets/images/myimage.png, while I'm really looking for it at bar.com/plugins/assets/images/myimage.png

Hi,

I've not had a problem before with the 'async' plugin but I've recently noticed that if I try and load my twitter feed using it (e.g. http://twitter.com/statuses/user_timeline/integralist.json) then RequireJs will just 'timeout'...

Error: Load timeout for modules: async!http://twitter.com/statuses/user_timeline/integralist.json http://requirejs.org/docs/errors.html#timeout

I have a basic module...

define(["async!http://twitter.com/statuses/user_timeline/integralist.json"], function (tweets) {

    console.log("Twitter: ", tweets);

});

...and I'm loading it using...

require.config({ 
    catchError: {
        define: true
    },
    paths: {
        async: "../Plugins/async"
    }
});

require(["../ErrorHandler/errors"], function (handler) {
    console.log("error handler loaded");
    require.onError = handler;
});

require(["twitter"]);

...and my site structure is as follows...

+Assets
    + Scripts
        + App
            - main.js
            - twitter.js
        + Plugins        
            - async.js

...and finally I'm loading the script using: <script data-main="Assets/Scripts/App/main" src="Assets/Scripts/require.js"></script>

Any help you give me as to why this would not work is greatly appreciated, as the twitter feed loads practically instantly when accessed via browser?

Thanks.

Please create a tag for 1.0.3 to allow bower to load your plugin. Thanks!

In this function

function injectScript(src){
var s, t;
s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = src;
t = document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s,t);
}

t is currently 'Undefined' so I cannot get the parentNode of it.

I am trying to use it like this

define([ 'jquery', 'jasmineJquery', 'require', 'async!http://maps.google.com/maps/api/js?sensor=false'], function(){
describe("Google test", function () {
it("should not throw exception ", function () {
.................
})
})
});

and run using sbt jasmine command

This project meets the requirements (ie 50+ stars).

Hosting it from the CDN will save some of us time from having to host this lib locally.

Note: require.js is already on cdnjs.

Hi

I am currently using tpl plugin under jsp pages.

So I normally I have to set up _.templateSettings in this way:

_.templateSettings = {
    interpolate:/\<\@\=(.+?)\@\>/gim,
    evaluate:/\<\@([\s\S]+?)\@\>/gim,
    escape:/\<\@\-(.+?)\@\>/gim
};

Is there anyway I can set this setting without putting it inside tpl.js?

Thanks
Ian Lim

Are these still valid?
I see them used in the example but it was udpated ~2 years ago

Hi!

I have a little trouble loading the YouTube Iframe API using the !async plugin, any help appreciated! (Hope it's ok to highight this here).

The maps example works, so I am currently assuming the basic setup must be ok:

define('something', [
'async!http://maps.google.com/maps/api/js?sensor=false'
], function () { console.log('loaded..'); } 
);

// doesn't work
define('something', [
'async!https://www.youtube.com/iframe_api!callback'
], function () { console.log('loaded..'); } 
);

// doesn't work
define('something', [
'async!https://www.youtube.com/iframe_api!onYouTubeIframeAPIready'
], function () { console.log('loaded..'); } 
);

// doesn't work
define('something', [
'async!https://www.youtube.com/iframe_api'
], function () { console.log('loaded..'); } 
);

They all get me the Uncaught Error: Load timeout for modules: async!https://www.youtube.com/iframe_api!onload_unnormalized2,async!https://www.youtube.com/iframe_api!onload
http://requirejs.org/docs/errors.html#timeout or similar (depeding on setting after the second !)

which probably means the callback function is never called. If I defined the callback function myself it works.. but still getting the timeout error.

window.onYouTubeIframeAPIready = function () {
console.log('youtube api usual callback');
}

@millermedeiros I am considering using your plugins on a project as they're incredibly useful, but I haven't seen any recent activity on issues.

Would you consider reaching out for maintainers for this repository? I wouldn't mind contributing every now and then.

Thank ya!

http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx
tornadoweb/tornado#1009 (comment)
https://docs.angularjs.org/api/ng/service/$http

Long story short, due to a JSON security vulnerability, sites can output their json in the form of

{"d": ["Philha", "my-confession-to-crimes", 7423.42]}

Which represents the original json value of

["Philha", "my-confession-to-crimes", 7423.42]

Alternately (and my webserver does this), it can prelude the original JSON with the following string

)]}',\n

So the previous example would look like

)]}',
["Philha", "my-confession-to-crimes", 7423.42]

The require.js JSON plugin should account for this, currently it fails parsing with the following error message

SyntaxError: JSON Parse error: Unexpected token ')'

(when using the prelude version)

RequireJS v2 supports passing in another parameter to the require() function that acts as a error handler. Currently this is not being passed down to text so attempting to use the error handling feature with your JSON plugin does not work. Below "replacement" code for the load function solves this.

        load : function(name, req, onLoad, config) {
            if ( config.isBuild && (config.inlineJSON === false || name.indexOf(CACHE_BUST_QUERY_PARAM +'=') !== -1) ) {
                //avoid inlining cache busted JSON or if inlineJSON:false
                onLoad(null);
            } else {
                text.get(req.toUrl(name), function(data){
                    if (config.isBuild) {
                        buildMap[name] = data;
                        onLoad(data);
                    } else {
                        onLoad(jsonParse(data));
                    }
                },
                  onLoad.error
                );
            }
        },

Hi,

im working with your plugins and i found a little mistake in your regexp in goog plugin,

it fails in google modules like "chrome-frame" ...

tryit :

define(["goog!chrome-frame,1.0.2"], function () {
  // pass
});

the current regexp:

var rParts = /^(^\w+)(?:,([^,]+))?(?:,\[([^\]]+)\])?/

returns only the firs part of module name "chrome" ...

thks !

was asked here: http://blog.millermedeiros.com/requirejs-2-0-delayed-module-evaluation-and-google-maps/#comment-89531

The plugin uses the requirejs/text plugin to get the data, but by default that does not set the correct content-type for accepts - which causes issues when the json plugin is being used with restful servers that can return different content type based upon request headers (eg, return xml unless you send accepts: application/json.

To address this, a new optional argument has been added to the requirejs/text plugin, see requirejs/text#38

This is a fix that adds the accepts object to the json.js plugin.

I will make a pull request once @jrburke accepts the PR on the other repo and / or possibly releases.

I downloaded the goog.html example and made sure all my paths were correct. I downloaded the newest require.js (2.1.8) and used that.

When I open the page in the newest version of Chrome on a mac, in the console I get:
Uncaught Error: Load timeout for modules: goog!visualization,1,packages:[corechart,geochart]_unnormalized2,goog!search,1_unnormalized3,goog!visualization,1,packages:[corechart,geochart],goog!search,1,async!http://www.google.com/jsapi
http://requirejs.org/docs/errors.html#timeout

No charts show up.

Hi, I'm new to RequireJS so maybe I'm missing something. I had two issues with the noext plugin. First, it was adding noext=1 which was causing a bad request with my web service. Second, when adding my own query parameter to the module name it no longer used the paths config.

So I removed the bit of code that added the noext parameter and it produced the correct path without the .js extension. Maybe this was a recent fix to requirejs but it appears that you no longer need to add this parameter.

I've learned that the query problem is caused by request.toUrl() so now i split the name before sending to toUrl and then join afterwards. This is what I ended up with:

define({
    load: function (name, require, onload, config) {
        var query = name.split('?');
        query[0] = require.toUrl(query[0]);
        require([query.join('?')], onload, onload.error);
    }
});

Are you interested in including it in your code? I was thinking about creating a plugin called 'path' but I don't want to have to set up a project.

as semper.cras posted on the requirejs group Google JS API if loaded asynchronously should be done only after DOM ready.

didn't actually see the bug since I always place my scripts at the bottom of the page and by using "data-main" when main is loaded DOM is always ready. (single blocking script tag at the bottom of the page..)

maybe integrate with the domReady plugin.

bower.json ( https://github.com/millermedeiros/requirejs-plugins/blob/master/bower.json#L4 ) does not follow bower specfications ( https://github.com/bower/spec/blob/master/json.md#main ). Namely, this: "The entry-point files necessary to use your package. Only one file per filetype."

With plugin text I could do the following

text!../some/relative/path/file.json

but with json plugin this not work.

I got the error

Uncaught SyntaxError: Unexpected token /

Hi,
I tried async.html in Chrome / Safari and I get the asyc errors below :(
Do you know a working way to integrate Gmaps + RequireJS ?

Uncaught Error: Load timeout for modules: async!http://maps.google.com/maps...

in safari:

Error: Load timeout for modules: async!http://twitter.com/statuses/user_timeline/millermedeiros.json async!http://maps.google.com/maps/api/js?sensor=false 
http://requirejs.org/docs/errors.html#timeout

maybe a flag like "!rel" at the end of the string.

just need to toggle:

img.src = name;

with:

img.src = req.toUrl(name);

to load images relative to baseUrl...

someone please help with a good name :D

Make it easy for people to copy-paste the command:

bower install --save requirejs-plugins

Thanks :)

using:
goog!visualization,1.1,packages:[bar]

via goog plugin breaks requirejs:
define(["d3", "./CommonND", "goog!visualization,1.1,packages:[bar]"], factory);

Error: Mismatched anonymous define() module: function (){return $}

on second load only 1st load and 3rd,4th,5th ... loads are fine; meaning second require[] block code causes that error but a 3rd 4th ... etc are fine

It would be nice, if the json plugin would recognize the 'empty:' directive during the build. I know about inlineJSON: false, but it would be cool to inline some JSONs and others not.

Is github's markdown flavor going to be supported, started to be worked on? Or is it something that one can contribute to?

Hi once again,

im post while ago an issue with "chrome-frame" lib and regexp used in goog.js ...

testing a simple scenario i found an issue with the "time" when dependency artifacts are loaded ...

take a look,

var require = {
  deps: ["desktop"],
  callback: function(desktop) {
    desktop.start();
  }
};

// load require.js

// desktop.js

define(["goog!chrome-frame,1.0.2"], function() {
  return {
    start: function () {
      // cool
    }
  }
});

after execution google loader (jsapi) throws ...

Module: 'chrome-frame' must be loaded before DOM onLoad!

this issue is related to #2???

thks!!

Hi, wondering if I'm just making an edge case for the parser but
"define([
'jquery',
'underscore',
'backbone',
'goog!maps,3,other_params:libraries=drawing,sensor=false'
]..."
yields this error down the line:
"k.google.maps.Load is not a function" and eventually leads to a timeout
To load this normally would be something like:
"<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing&sensor=false">
</script>"

Thanks!

I understand that your intention is not to support the google maps api v3 with the goog plugin, but for the most part it seems to work. The following code works for me:

define('gmaps', ['goog!maps,3,other_params:sensor=false&libraries=geometry'], function() {
return window.google;
});

However, the use of commas as delimiters in the goog syntax is causing issues with loading more than one google maps library. Google maps api expected additional libraries to be separated by commas, thus breaking the goog syntax.

For example (weather library is never loaded):

define('gmaps', ['goog!maps,3,other_params:sensor=false&libraries=geometry,weather'], function() {
return window.google;
});

Is it possible to use another delimiter besides a comma?

Not sure if this is the right place but here goes anyway:)
I was referencing this SO post : http://stackoverflow.com/questions/18067650/load-async-resource-with-requirejs-timeout

However the solution there doesn't seem to work for me.

This is what I have:

(function () {
require.config({
paths: {
async: '/dist/async',
}
});
require(
["gapiModule"],
function (gapiModule) {
}
);
})();

// gapiModule
define(["async!http://maps.google.com/maps/api/js?//sensor=false&libraries=geometry,places!callback"], /* this works */
['async!https://apis.google.com/js/client.js!onload'],
function () {
console.log('google client added');
}
);

No matter what I try I get a script timeout error, any ideas?
Thanks very much

Just a question, I'm noticing some strange behavior when encountering JS errors in my code.

It seems that the goog! plugin has extreme problems, even if I get the slightest JS error in my code.

It seems to always throw a timeout RequireJS error.

I am wondering if there's a better way to handle this, rather than just pretty much not working at the slightest JS error.

Hi,

I've found that if I load your Google Maps example (Mac/Chrome 15) then it works all the time...

require(['async!http://maps.google.com/maps/api/js?sensor=false!callback', 'Utils/random'], function(empty, rand) {

    // async is undefined but still loads the random.js utility script
    console.log(rand);

    //Google maps is available and all components are ready to use
    var mapDiv = document.getElementById('map-canvas'),
    map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    });

});

...but if I then add a separate require() to a twitter feed directly after the google map require() then the google map/twitter feed only works every other attempt (when refreshing the page)?

require(['async!http://twitter.com/statuses/user_timeline/Integralist.json!callback'], function(feed) {
    console.log('feed: ', feed);
});

If I load the twitter feed on its own then it to loads every time, but doing both together causes inconsistent problems.

The font plugin doesn't load multiple font weights for me if I specify them the following:

require(['font!google,families:[PT Serif,Raleway:100, Raleway:200]']);

The states are the following then: wf-ptserif-n4-active wf-raleway-n1-active wf-raleway-n2-inactive wf-active

Changing the font weight doesn't effect the result. It is loading till the end of my timeout and then says inactive.
Did I mess up the syntax? I didn't find an example other than this.

Thanks for the support

Hi there

What if I am interested in the JSON plugin only? Isn't there a standalone plugin?

Hello, great plugins, although I'm having issues when my Google Feeds HTML5 Application is in offline mode. Here's the error I get:
GET http://www.google.com/jsapi?callback=__mm_asynch_req__1360698411216 Network unavailable

As in any other offline news reader, I want to ignore the API if there's no connection.
I've tried adding if statements to either goog.js or async.js (if(!navigator.onLine) return), but to no luck - I find that my application cannot initialize because of the following error:

Error: Load timeout for modules: goog!feeds_unnormalized2,goog!feeds

What's the quickest way to check if internet connection is available, and if not, continue application initialization?

Thanks,
A.

I am trying to implement a login with Google's API implementation. Looks like the goog plugin uses the old google api instead of the new one. Can we:

1. Change the plugin to use the new api
2. Create a new goog plugin that uses the new api
3. Create a google oauth plugin

quick and dirty

http://en.wikipedia.org/wiki/JSON#JavaScript_eval.28.29

Surely I'm not the only one to have noticed this.

make sure JSON files with !bust aren't inlined during optimization.

Hi

first thanks your our excellent plugins

had a wee issue with aliased modules e.g. with explicit paths

requirejs.config({
    paths: {
        "noext": '../../shared/js/requirejs/plugins/0.3.2/noext',
        "dynamicstripconfig": "../php/domain/config.php"
    }
});

It was breaking the "toUrl" translation between "dynamicstripconfig" to "../php/domain/config.php" inside requirejs

Rewrote "noext" so it now wait till the "load" instead of the "normalize" to inject the query string to interrupt the ".js" postfixing

New noext.js ->

/** @license
 * RequireJS plugin for loading files without adding the JS extension, useful for
 * JSONP services and any other kind of resource that already contain a file
 * extension or that shouldn't have one (like dynamic scripts).
 * Author: Miller Medeiros (0 - 0.3.1)
 * Author: Anthony Mckale (0.3.2)
 * Version: 0.3.2 (2014/03/10)
 * 0.3.2 - Moved parameter add to load, so we could use paths with this extension 
 * 
 * Released under the MIT license
 */
define(function(){
var QUERY_PARAM = 'noext';

//API
return {
    load : function(name, req, onLoad, config) {
        var rawrequireurl = req.toUrl(name);
        rawrequireurl += (rawrequireurl.indexOf('?') < 0)? '?' : '&';
        rawrequireurl += QUERY_PARAM +'=1';
        req([rawrequireurl], function(mod){
            onLoad(mod);
        });
    },
    normalize : function(name, norm){
        return name;
    }

};
});