mirohibler / meteor-preloader Goto Github PK

View Code? Open in Web Editor NEW

75.0 75.0 3.0 310 KB

A Meteor "lazy-loader" for external .js and .css libraries

JavaScript 100.00%

meteor-preloader's People

Contributors

Stargazers

Watchers

Forkers

benstoltz haunguyen90 kokjinsam

meteor-preloader's Issues

Home route loaded multiple times

Hello Miroslav,

got this in console:

[ Preloader - Start ] Loading route "home"...

miro_preloader.js:22[ Preloader - Async ] Loading initiated...
miro_preloader.js:22[ Preloader - Async ] Loading 1/3: https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js
miro_preloader.js:22[ Preloader - Async ] Loading 2/3: https://oss.maxcdn.com/respond/1.4.2/respond.min.js
miro_preloader.js:22[ Preloader - Async ] Initialization finished.
miro_preloader.js:22[ Preloader - Sync ] All libraries are already loaded.
miro_preloader.js:22
[ Preloader - End ] Loading route "home" finished.

miro_preloader.js:22
[ Preloader - Start ] Loading route "home"...

miro_preloader.js:22[ Preloader - Async ] All libraries are already loaded.
miro_preloader.js:22[ Preloader - Sync ] All libraries are already loaded.
miro_preloader.js:22
[ Preloader - End ] Loading route "home" finished.

miro_preloader.js:22[ Preloader - Async ] Loading https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js: SUCCESS
miro_preloader.js:22[ Preloader - Async ] Loading https://oss.maxcdn.com/respond/1.4.2/respond.min.js: SUCCESS

Not sure how it affects performance, but is it possible to avoid home to be reloaded couple of times?

That actually shows up not only on home route...

Is it ok, or do I need to worry?

Thank you.

Exception in callback of async function: TypeError: Cannot read property 'length' of undefined

Exception in callback of async function: TypeError: Cannot read property 'length' of undefined
    at Object.Preloader.loadLibs (http://localhost:3000/packages/miro_preloader.js?07b361b1abe7bd3b9526e0031b650b48d81b0173:525:34)
    at RouteController.extend.waitOn (http://localhost:3000/packages/miro_preloader.js?07b361b1abe7bd3b9526e0031b650b48d81b0173:585:21)
    at http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:438:22
    at Array.forEach (native)
    at Function._.each._.forEach (http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:156:11)
    at RouteController._runRoute (http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:437:5)
    at Function.Route.dispatch (http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:844:18)
    at route (http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:710:11)
    at boundNext (http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:31)
    at Meteor.bindEnvironment (http://localhost:3000/packages/meteor.js?43b7958c1598803e94014f27f5f622b0bddc0aaf:983:22)

Here is my router:

SettingsController = PreloadController.extend({
    'preload': {
        'async': [
            '/plugins/jquery-scrollbar/jquery.scrollbar.min.js',
            '/plugins/pace/pace.min.js',
            '/plugins/jquery-numberAnimate/jquery.animateNumbers.js'
        ],
    }
});

Router.route('settings', function(){
    Router.go('settingsIndex');
});
Router.route('settings/index/:limit?/', {
    name: 'settingsIndex',
    controller: SettingsController,
    action: 'index',
});

PreloadController is not defined

Hello,

First of all, thanks for your awesome work!

I added package to my app, then when in route I added PreloadedController with:
controller: PreloadController,

It returns this error:
ReferenceError: PreloadController is not defined

Any solution or suggestion?

Many thanks!!

Example?

I am trying to use this package but I can't seem to make it work. There is something I am not understanding. Is there a chance you could upload an example project with preloader working?

Not possible to upload the package in windows

EDIT: I had to upload meteor version manually since my build was stuck at windows preview 0.3 :S, seems to work now :)

Conflict with Meteor default browser-policy

The default policy of the browser-policy package disallows eval(), therefore async or sync options generate the following error:

"Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline'"

In order to preload a script with meteor-preloader, if you use browser-policy, then you need to add BrowserPolicy.content.allowEval() to your server code.

Support for 0.9+

I dont know if you're still working on this project, but it would be really nice to use this for our meteor 1.0 project. Any plans for updating?

"...It should be possible to secure some of the additional parts so that only certain users can download them. For example, only admin users could download the JavaScript and templates for the admin console..."

Not working for Meteor 1.2.1

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.

How about template?

I am planning to create a e-commerce site using meteor. I do not want to load admin js and css to the store front page and I tried to used meteor-preloader to do the job it was nice. but when I inspect in the browser the template files (js) of the admin page is still loaded in the store front page. Is it possible to include template to be preloaded?

Error on firefox: Can't flush inside Tracker.autorun

Hi,

you requested for nilsonivano to file a report. As it seems s/he will not do that, I will. :-)

Loading a Meteor site with the preloader installed with Firefox will fail with the error:

Can't flush inside Tracker.autorun

If I remove miro:preloader, the error is gone. I'm a /very/ inexperienced Meteor developer, so I do not know what I can do to help, but this is what I observed.

Meteor-verion: 1.3.2
Miro:preloader: 1.2.4
Firefox: 45.01/Ubuntu and OS/X

If I can be of assistence, please let me know :-)

regards,
Paul

onAfterAsync never called

onAfterAsync never called is never called.

Looking at the code, it seems that you've forgotten to add it to the collection of Router Libraries

Can you make something like this that doesn't depend on Iron Router?

I'm using flow-router. It'd be nice to have manual control over the loading so I can write some code in the action of a flow-router route to load stuff.

Thrid party files are not getting loaded dynamically

Here is my router.js, I am using meteor 0.8.2. I have a folder called vendors inside public.
`Router.configure({
layoutTemplate: 'layout',
preloadFiles: {
// Use these on ALL pages
'common' : {
js: ['/vendors/bootstrap-datepicker/js/bootstrap-datepicker.js', 'http://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js',],
css: '/vendors/bootstrap-datepicker/css/datepicker3.css'
}
}
});

Router.map(function() {

this.route( 'home', {
path: "/",
controller: PreloadController,
yieldTemplates: {
'header': {to: 'header'},
'leftSidebar': {to: 'leftSidebar'},
'footer': {to: 'footer'}
}
});

});

Router.onBeforeAction('loading');`

my meteor app is not preloading the necessary files

How do I load one JS file and one CSS file to a specific route/template without configuring all the other options?

Implementation, external.js not firing

I very much like the concept, but I can not get it to work. (Compatibility?)

Since you don't have any tests, I simply added it to a baseline set-up https://github.com/D1no/preloadertest to check out for recreation. Preloader was added to the global configuration object Router.configure; router.js

A blind copy of the examples including a variation in objects async, sync, common, default and key expressions ' ', or file root / seems to have no effect. Why does external.js not fire?

// Global Router Set-Up
Router.configure({
    layoutTemplate: 'Layout', 
    loadingTemplate: "Loading",
/*
    miro:preloader preload router extension
*/
    preload: {
        sync: {
            'default': {
                'js'     : '/external.js'
            }
        }
    }
});

Preloader fails after the 0.8.3 meteor update

Here is the error I am getting -

Flowrouter support

Any way to get this working with Flowrouter - the defacto standard router for M nowadays?

btw, I love your readme headers 😄

Exception in callback of async function: TypeError: Cannot read property 'groupIds' of undefined

I20170719-06:06:51.958(-7)? Exception in callback of async function: TypeError: Cannot read property 'groupIds' of undefined
I20170719-06:06:51.960(-7)? at [object Object].children.find (imports/api/publisher/publish.js:100:47)
I20170719-06:06:51.964(-7)? at Publication.getCursor (packages/reywood:publish-composite/lib/publication.js:86:34)
I20170719-06:06:51.968(-7)? at Publication.publish (packages/reywood:publish-composite/lib/publication.js:26:28)
I20170719-06:06:51.971(-7)? at Publication.createChildPublication (packages/reywood:publish-composite/lib/publication.js:97:17)
I20170719-06:06:51.974(-7)? at Array.forEach (native)
I20170719-06:06:51.977(-7)? at Function..each._.forEach (packages\underscore.js:139:11)
I20170719-06:06:51.981(-7)? at Publication._publishChildrenOf (packages/reywood:publish-composite/lib/publication.js:94:11)
I20170719-06:06:51.984(-7)? at packages/reywood:publish-composite/lib/publication.js:45:26
I20170719-06:06:51.987(-7)? at runWithEnvironment (packages\meteor.js:1176:24)
I20170719-06:06:51.991(-7)? at Object.added (packages\meteor.js:1189:14)

CDN, fallback to local.

Hello again! Due to certain circumstances I've seen how the CDN servers were out, and all my routes depending on that were not loading correctly. Would it be possible to add a fallback place to load them from public folder in that case? (or if anyone has an idea of how to get this working with current functions i'm listening :)

Libraries not cached

If there are no 'checking handlers' defined, libraries are not cached and get reloaded for each route.

Loading via require AMD modules

Hello, I have tried to use meteor-preloader for a js library based on dojo (which internally makes the use of require to load different modules). The code in a normal html file should be something like this:

<script src="http://js.arcgis.com/3.12/"></script>
    <script>
      var map, locator;
      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "esri/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, registry
      ) {    
        map = new Map("map", { ...}) .... etc etc          
         }
   );
</script>

When i try to load the javascript file with meteor-preload, on sync, the javascript file gets loaded, but when i do the require on the template.rendered or template.created the modules are not loaded since it cant find require dependencies. My way of solving this is using Modernizr meteor package to load all those parts that need that javascript library, but it would be really useful to do it with meteor-preload and avoid having to download the javascript and the modules everytime (i have the load on a dynamic form)
This is how I'm trying to do it with preloader:

Router.map(function() {
    this.route('xxxxxx', {
        path: '/xxxxx',
        template: 'xxxxxx',
        layoutTemplate: 'layout',
        waitOn: function() { return [subs.subscribe('xxxx'),
            subs.subscribe(xxxxx')];
             },
        controller: 'PreloadController',
        'preload': {  

            'sync'   : ["http://js.arcgis.com/3.12/"];              
            ,

            'onSync' : function ( filePath ) {
                var file = filePath.replace( /\?.*$/,"" ).replace( /.*\//,"" );
                switch ( file ) {                  
                    default:{
                        try {
                            return !!esri;
                        } catch ( error ) {
                            return false;
                        }                        
                    }
                }
            },..... etc

and then in my template.created code:

Template.xxxxx.created = function(){
  require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "esri/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, registry
      ) {     

        map = new Map("map", { ...}) .... etc etc          
         }
   );

Many thanks in advance for anny suggestion on how to do that, the complete code example can be found here https://developers.arcgis.com/javascript/jssamples/locator_address.html

Not all the js files are loaded

[Preloader - StyleSheet] Loading initiated... route_controller.js:64
[Preloader - StyleSheet] Loading 1/5: /css/style.css route_controller.js:69
[Preloader - StyleSheet] Loading 2/5: http://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600 route_controller.js:69
[Preloader - StyleSheet] Loading 3/5: http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css route_controller.js:69
[Preloader - StyleSheet] Loading 4/5: /vendors/jquery.loadingbar/loadingbar.css route_controller.js:69
[Preloader - StyleSheet] Loading 5/5: /vendors/jquery.growl/stylesheets/jquery.growl.css route_controller.js:69
[Preloader - StyleSheet] Loading finished. route_controller.js:74
[Preloader - JavaScript] Loading initiated... route_controller.js:81
[Preloader - JavaScript] Loading 1/12: http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js route_controller.js:108

Not working when we are calling preload in a Smart Package

Hi @MiroHibler,

I notice something with smart packages and meteor-preloader. For example, I have my own smart package where I defined routes and I put the files that I need in the public folder, but the css files seems to not be loaded.

Question about preloader example

Do we have to build PreloadController with your example code or is that what your library is doing?

Also, how do we load more than 1 style sheet/javascript file?

Add way to prevent default messages logged on the console

I found all the logged messages when loading the assets a bit annoying (specially during development).

Is there a way to "mute" them? If not, I would like that option :).

Add option to remove loaded asset when route changes

Currently I'm trying to use this library to manage a case where I need Bootstrap css on a set of routes (admin routes, as of meteor-admin) and Materialize css on another set of routes. To acomplish this, I load the materialize css when on certain routes.

The issue comes when I go back to the Bootstrap routes, as then I have both css loaded.

Currently I'm dealing with the issue by manually removing a certain link tag on the default router onBeforeAction callback, but it would be nice to have a declarative option to remove the set of assets that are loaded, when the route changes.

Adding to Router.configure not sufficient

I would expect that adding preload section to Router.configure would be sufficient to have libraries loaded globally, however this isn't the case. If the route isn't derived from PreloadController then nothing happens.

Would it not be nicer to hook directly into IronRouter?

Sync deprecated

Hey - I'm trying to load semantic-ui on demand, (in conjunction with the Lazy Bundles package), like below:

Router.route('admin', {
  path: '/admin',
  controller: PreloadController,
  preload: {
    styles: ['semantic.css'],
    sync: 'semantic.js'
  },
  action: function() {
    this.render('admin');
  }
});

I get the following errors on Chrome Version 44.0.2403.89 beta (64-bit):

<link rel=preload> must have a valid `as` value
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
<link rel=preload> must have a valid `as` value

Note that the first issue is repeated twice, and as a matter of fact, it looks like <link rel="preload stylesheet" type="text/css" href="semantic.css"> is inserted twice in the DOM. The second issue is easily solved by using async instead of sync in the preload options.

I don't get these warnings in Safari but semantic.css is indeed inserted twice in the DOM.

Way to check if all css are loaded

Hope there's a function or make a loader page if css are not loaded yet

Exception after updating to last version 1.2.1

Hi there, I've just updated the package, and I got this exception on all browsers

Exception in callback of async function: Preloader.loadLibs@http://localhost:3000/packages/miro_preloader.js?07b361b1abe7bd3b9526e0031b650b48d81b0173:525:1
PreloadController<.waitOn@http://localhost:3000/packages/miro_preloader.js?07b361b1abe7bd3b9526e0031b650b48d81b0173:585:11
RouteController.prototype._runRoute/<@http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:438:15
_.forEach@http://localhost:3000/packages/underscore.js?0a80a8623e1b40b5df5a05582f288ddd586eaa18:156:7
RouteController.prototype._runRoute@http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:437:3
Route.prototype.dispatch@http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:844:10
Route/route@http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:710:5
boundNext@http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:16
Meteor.bindEnvironment/<@http://localhost:3000/packages

My route is defined like this (it was working correctly before the update)

Router.map(function() {
    this.route('home', {
        path: '/',
        template: 'home',
        layoutTemplate: 'HomeLayout',
        controller: 'PreloadController',
        waitOn: function () {
            return [mfPkg,subs.subscribe("fullProfile")];
        },   
        'preload': {
            'async':[Meteor.settings.public.lib.turf],
            'sync': [Meteor.settings.public.lib.modernizr,
                Meteor.settings.public.lib.leaflet,
                Meteor.settings.public.lib.esrileaflet],
            'onSync': function (filePath) {
                var file = filePath.replace(/\?.*$/, "").replace(/.*\//, "");
                switch (file) {
                    case 'modernizr.min.js':
                        try {
                            return !!Modernizr;
                        } catch (error) {
                            return false;
                        }
                        break;
                    case 'leaflet.js':
                        try {
                            return !!L;
                        } catch (error) {
                            return false;
                        }
                        break;
                    case 'esri-leaflet-basemaps.js':
                        try {
                            return !!L.esri;
                        } catch (error) {
                            return false;
                        }
                        break;
                    default:
                    {
                        return true;
                    }
                }
            }
        }
    });
});

mirohibler / meteor-preloader Goto Github PK

meteor-preloader's People

Contributors

Stargazers

Watchers

Forkers

meteor-preloader's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs