MiroHibler / meteor-preloader

A Meteor "lazy-loader" for external .js and .css libraries
75 stars 3 forks source link

Not working for Meteor 1.2.1 #29

Closed shkomg closed 8 years ago

shkomg commented 8 years ago

Looks like package isn't working at all with the simplest parameters even:

Router.configure({                                                                                                                                                                        
  loadingTemplate: 'loading',                                                                                                                                                             
  layoutTemplate: 'StaticLayout',                                                                                                                                                         
  notFoundTemplate: 'notFound',                                                                                                                                                           
  preload: {                                                                                                                                                                              
    verbose: true,                                                                                                                                                                        
    async: [                                                                                                                                                                              
      'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',                                                                                                                          
      'https://oss.maxcdn.com/respond/1.4.2/respond.min.js'                                                                                                                               
    ]                                                                                                                                                                                     
  }                                                                                                                                                                                       
}) 

I assume that after that respond.js must be available over browser console or in resources tab, but can't find it.

Is there any new way to handle external scripts?

Thank you.

MiroHibler commented 8 years ago

Well, since you're loading remote (CDN,...) resources asynchronously, you have to check whether they'd actually finished loading to be able to use them - some of them also need some time for initialization (loading more external dependences and so on).

That's why you should use [onBeforeAsync/]onAsync[/onAfterAsync] handlers. Take a look in README.md for more info.

shkomg commented 8 years ago

Ok I've tried simple code:

Router.configure({                                                                                                                                                                        
  loadingTemplate: 'loading',                                                                                                                                                             
  layoutTemplate: 'StaticLayout',                                                                                                                                                         
  notFoundTemplate: 'notFound',                                                                                                                                                           
  preload: {                                                                                                                                                                              
    verbose: true,                                                                                                                                                                        
    async: [                                                                                                                                                                              
      'https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js',                                                                                                                          
      'https://oss.maxcdn.com/respond/1.4.2/respond.min.js'                                                                                                                               
    ],
    onAsync: function (e,r) {                                                                                                                                                             
      console.log('onAsync')                                                                                                                                                              
      console.log(e)                                                                                                                                                                      
      console.log(r)                                                                                                                                                                      
      return true                                                                                                                                                                         
    },                                                                                                                                                                                    
    onAfterAsync: function (f) {                                                                                                                                                          
      console.log('onAfterAsync')                                                                                                                                                         
      console.log(f)                                                                                                                                                                      
      return true                                                                                                                                                                         
    }                                                                                                                                                                                     
  }                                                                                                                                                                                       
}) 

and have no output in console at all. Is it ok?

MiroHibler commented 8 years ago

Oh, wait - have you defined PreloadController as your route controller anywhere?

For example:

HomeController = PreloadController.extend();

Router.route( '/', {
    name: 'home'
});

or

Router.route( '/', {
    controller: PreloadController   // or 'PreloadController'
});
shkomg commented 8 years ago

Nope, I've own controller defined for each route. How may I make my controllers play with PreloadController?

Thank you.

MiroHibler commented 8 years ago

'Instantiate' (extend) your route controllers from PreloadController instead of RouteController (as in my last example for 'HomeController').

shkomg commented 8 years ago

uh, yeah - quite a lot of work. Hope it helps - i'll msg back once try. Thank you for prompt answers.

MiroHibler commented 8 years ago

Maybe not so much of work - if you're using Sublime Text or some other advanced editor and do a multi-file find'n'replace ;)

shkomg commented 8 years ago

not my code - so need to be careful.

Anyway - it works now!!!

Thank you very much for prompt responses!