Using webshim in grails

Question

I'm having a lot of issues running webshims in grails. I believe the problem is that when I include the polyfiller.js file in my .gsp page the polyfiller.js can't access any other of the js files in the library... Does any one know a work around ? can the whole library be in one file so I just include one file in the .gsp so there's no access problems.

in gsp....

        <r:require module="IE6_8"/>
    <r:layoutResources />
    <script>
        $.webshims.polyfill('forms');
        $(function(){
    });
        </script>

IE6_8 is a module that includes all of the js files in the directory, but that still doesn't work...

IE6_8 Module:

    IE6_8{
    resource url: 'js/js-webshim/dev/extras/modernizr-custom.js'
    resource url: 'js/js-webshim/dev/extras/mousepress.js'
    resource url: 'js/js-webshim/dev/polyfiller.js'
    resource url: 'js/js-webshim/dev/shims/color-picker.js'
    resource url: 'js/js-webshim/dev/shims/combos/1.js'
    resource url: 'js/js-webshim/dev/shims/combos/10.js'
    resource url: 'js/js-webshim/dev/shims/combos/11.js'
    resource url: 'js/js-webshim/dev/shims/combos/12.js'
    resource url: 'js/js-webshim/dev/shims/combos/13.js'
    resource url: 'js/js-webshim/dev/shims/combos/14.js'
    resource url: 'js/js-webshim/dev/shims/combos/15.js'
    resource url: 'js/js-webshim/dev/shims/combos/16.js'
    resource url: 'js/js-webshim/dev/shims/combos/17.js'
    resource url: 'js/js-webshim/dev/shims/combos/18.js'
    resource url: 'js/js-webshim/dev/shims/combos/19.js'
    resource url: 'js/js-webshim/dev/shims/combos/2.js'
    resource url: 'js/js-webshim/dev/shims/combos/20.js'
    resource url: 'js/js-webshim/dev/shims/combos/21.js'
    resource url: 'js/js-webshim/dev/shims/combos/22.js'
    resource url: 'js/js-webshim/dev/shims/combos/23.js'
    resource url: 'js/js-webshim/dev/shims/combos/24.js'
    resource url: 'js/js-webshim/dev/shims/combos/25.js'
    resource url: 'js/js-webshim/dev/shims/combos/26.js'
    resource url: 'js/js-webshim/dev/shims/combos/27.js'
    resource url: 'js/js-webshim/dev/shims/combos/28.js'
    resource url: 'js/js-webshim/dev/shims/combos/29.js'
    resource url: 'js/js-webshim/dev/shims/combos/3.js'
    resource url: 'js/js-webshim/dev/shims/combos/30.js'
    resource url: 'js/js-webshim/dev/shims/combos/31.js'
    resource url: 'js/js-webshim/dev/shims/combos/4.js'
    resource url: 'js/js-webshim/dev/shims/combos/5.js'
    resource url: 'js/js-webshim/dev/shims/combos/6.js'
    resource url: 'js/js-webshim/dev/shims/combos/7.js'
    resource url: 'js/js-webshim/dev/shims/combos/8.js'
    resource url: 'js/js-webshim/dev/shims/combos/9.js'
    resource url: 'js/js-webshim/dev/shims/details.js'
    resource url: 'js/js-webshim/dev/shims/dom-extend.js'
    resource url: 'js/js-webshim/dev/shims/es5.js'
    resource url: 'js/js-webshim/dev/shims/excanvas.js'
    resource url: 'js/js-webshim/dev/shims/filereader.js'
    resource url: 'js/js-webshim/dev/shims/FlashCanvas/canvas2png.js'
    resource url: 'js/js-webshim/dev/shims/FlashCanvas/flashcanvas.js'
    resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/canvas2png.js'
    resource url: 'js/js-webshim/dev/shims/FlashCanvasPro/flashcanvas.js'
    resource url: 'js/js-webshim/dev/shims/form-core.js'
    resource url: 'js/js-webshim/dev/shims/form-datalist-lazy.js'
    resource url: 'js/js-webshim/dev/shims/form-datalist.js'
    resource url: 'js/js-webshim/dev/shims/form-message.js'
    resource url: 'js/js-webshim/dev/shims/form-native-extend.js'
    resource url: 'js/js-webshim/dev/shims/form-number-date-api.js'
    resource url: 'js/js-webshim/dev/shims/form-number-date-ui.js'
    resource url: 'js/js-webshim/dev/shims/form-shim-extend.js'
    resource url: 'js/js-webshim/dev/shims/form-validation.js'
    resource url: 'js/js-webshim/dev/shims/form-validators.js'
    resource url: 'js/js-webshim/dev/shims/forms-picker.js'
    resource url: 'js/js-webshim/dev/shims/geolocation.js'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/AlphaBar.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/bar-opacity.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/Bars.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/map-opacity.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/mappoint.gif'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/Maps.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/NoColor.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/picker.gif'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/preview-opacity.png'
    resource url: 'js/js-webshim/dev/shims/jpicker/images/rangearrows.gif'
    resource url: 'js/js-webshim/dev/shims/jpicker/jpicker.css'
    resource url: 'js/js-webshim/dev/shims/json-storage.js'
    resource url: 'js/js-webshim/dev/shims/mediaelement-core.js'
    resource url: 'js/js-webshim/dev/shims/mediaelement-jaris.js'
    resource url: 'js/js-webshim/dev/shims/mediaelement-native-fix.js'
    resource url: 'js/js-webshim/dev/shims/mediaelement-yt.js'
    resource url: 'js/js-webshim/dev/shims/range-ui.js'
    resource url: 'js/js-webshim/dev/shims/styles/details-arrows.png'
    resource url: 'js/js-webshim/dev/shims/styles/forms.png'
    resource url: 'js/js-webshim/dev/shims/styles/polyfill-loader.gif'
    resource url: 'js/js-webshim/dev/shims/styles/range-track.png'
    resource url: 'js/js-webshim/dev/shims/styles/shim.css'
    resource url: 'js/js-webshim/dev/shims/styles/vertical-range.png'
    resource url: 'js/js-webshim/dev/shims/swfmini.js'
    resource url: 'js/js-webshim/dev/shims/track-ui.js'
    resource url: 'js/js-webshim/dev/shims/track.js'

}

The javascript console responds with this:

    Uncaught TypeError: Cannot call method 'polyfill' of undefined auth:43
    can't find module: color-picker bundle-bundle_IE6_8_defer.js:1222
    18 extendNative configuration will be set to false by default with next release. In case you rely on it set it to 'true' otherwise to 'false'. See http://bit.ly/16OOTQO bundle-bundle_IE6_8_defer.js:1222
    can't find module: form-datalist-lazy bundle-bundle_IE6_8_defer.js:1222
    form-validators already included. please remove custom-validity.js bundle-bundle_IE6_8_defer.js:1222
    can't find module: forms-picker bundle-bundle_IE6_8_defer.js:1222
    can't find module: mediaelement-native-fix bundle-bundle_IE6_8_defer.js:1222
    can't find module: mediaelement-yt bundle-bundle_IE6_8_defer.js:1222
    Failed to load resource: the server responded with a status of 404 (Not Found)   http://localhost:8080/AppName/static/shims/styles/shim.css

Since grails combines modules into one file, All of the .js files are contained in bundle-bundle_IE6_8_defer.js

    <!DOCTYPE html>
    <html>
        <head>
            <title>Login</title>
            <script src="/AppName/static/plugins/jquery-1.8.3/js/jquery/jquery-1.8.3.min.js" type="text/javascript" ></script>
            <link href="/AppName/static/bundle-APPStyleSheet_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
            <script src="/AppName/static/bundle-bundle_IE6_8_head.js" type="text/javascript" ></script>

            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/AlphaBar.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/bar-opacity.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Bars.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/map-opacity.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/mappoint.gif" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/Maps.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/NoColor.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/picker.gif" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/preview-opacity.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/jpicker/images/rangearrows.gif" rel="shortcut icon" />
            <link href="/AppName/static/bundle-bundle_IE6_8_head.css" type="text/css" rel="stylesheet" media="screen, projection" />
            <link href="/AppName/static/js/js-webshim/dev/shims/styles/details-arrows.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/styles/forms.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/styles/polyfill-loader.gif" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/styles/range-track.png" rel="shortcut icon" />
            <link href="/AppName/static/js/js-webshim/dev/shims/styles/vertical-range.png" rel="shortcut icon" />


            <script>
                $.webshims.setOptions({ basePath: "/js/js-webshim/dev/shims" });
                $.webshims.polyfill('forms');       
                $(function(){ });
            </script>       

</head>

Answer 1

If the polyfiller does not find the scripts, you can configure the shims base path. Before you call webshims.polyfill.

$.webshims.setOptions({ basePath: "/yourFolderTo/shims/" });
$.webshims.polyfill('forms');

Simply look into the net tab of your developer tool to make sure, that the scripts are found and the basePath is configured properly.

Answer 2

I suggest you to exclude all resources managed by webshims from grails resources management

In your config.groovy put something like this

def excludeAll = [ 'js/js-webshim/dev/shims/combos/1.jsjs/js-webshim/dev/shims/combos/10.js', 'js/js-webshim/dev/extras/mousepress.js', ... ]
grails.resources.mappers.yuicssminify.excludes = excludeAll
grails.resources.mappers.yuijsminify.excludes = excludeAll
grails.resources.mappers.hashandcache.excludes = excludeAll
grails.resources.mappers.zip.excludes = excludeAll
grails.resources.mappers.bundle.excludes = excludeAll
grails.resources.mappers.csspreprocessor.excludes = excludeAll
grails.resources.mappers.cssrewriter.excludes.excludes = excludeAll
grails.resources.mappers.fontawesomeplugin.excludes = excludeAll
grails.resources.mappers.baseurl.excludes = excludeAll

And remove the resources from the IE6_8 module. In IE6_8 module put only base modernizer and polifill files, not other resources.

Answer 3

Probably I'm missing something about your complete issue, but I solved the problem of finding the scripts simply by putting the shims directory into the web-app/js folder in your grails directory.

And then I configured it, as suggested by Alexander, in this way:

webshim.setOptions({basePath: "js/shims/" });