Inject CSS-only changes into page without reload

[cmalven]

For most non-Meteor projects I use LiveReload to monitor my project folder for changes, pre-compile Sass & Coffeescript, and reload the browser windows as necessary.

Obviously, Meteor takes care of all of this for me. But LiveReload (and CodeKit, I believe) does one really nice thing that saves me a ton of time: if it detects that the only changes to the project are CSS/Style, it instantly injects the updated styles into the current page without requiring a full page reload.

This might not seem like a big deal, but at roughly 2-3 seconds per reload multiplied by hundreds (thousands?) of style changes and saves over the life of a project, that's some serious time and frustration savings.

I know this is not a high priority for the project, but this might be an easy win for developer happiness.

[gschmidt]

@cmalven, this is a great idea, thanks (though I'd also like to improve our Hot Code Push to make it a lot faster.) I agree that this would be really nice. I'm a little concerned about not getting a 100% clean reload if new CSS is just loaded over the old CSS, but we can look at LiveReload to see how it handles that.

I don't think the core team will get to this anytime soon (unless someone picks it off as a hackathon project) but we'd be happy to take a high quality pull request.

[Primigenus]

We wrote livejs.com for our product which does the same thing LiveReload does but in Javascript. It's hosted on Github: https://github.com/q42/livejs

One important thing Live.js also does is animate the live CSS changes by adding a class to the body and setting a global CSS transition on it. That ends up looking pretty awesome in practice.

I don't really know enough about Meteor's project structure to work on this myself. Would I need to look at the liverange package?

[littke]

Why this is a must have for a designer/developer like myself:

• A reload in Meteor development mode can be slooooooow
• Meteor takes a long time to even notice a file change has happened
• I constantly pixel-tweak by saving tiny changes, previewing in the browser.

So sometimes increasing a margin with 1px can take up to 6-7 seconds. Feels like I'm debugging IE through VNC :(

Only reloading the CSS would be awesome. OR simply a way to disable Meteor's built-in autoreleoad, then we could take care of this ourselves.

[Munter]

@gschmidt You can take the express middleware we made in livestyle and use in your server. It will inject a javascript on each served html page, which in turn opens a socket connection to the server so it can get notifications instantly when a file changes on disk.

It should plug right in.

[littke]

One of the reasons this is so slow, I've figured, is because a change in a single file causes Meteor to restart and to clear the cache. So all my JS-files (there are many!) are now fetched as 200s instead of 304s.

See #437

[cmalven]

Yes, this has only gotten worse for me as my Meteor apps have gotten more complex. On a few projects I'm waiting almost 10 seconds between saving a change and the browser refresh.

[brandonhall]

I can't believe I'm finding this as an open issue. We have a large Meteor app and the reloads are painful after CSS tweaks.

[timhaines]

Splitting your app into packages will help a lot.

On Monday, September 2, 2013, Brandon Hall wrote:

I can't believe I'm finding this as an open issue. We have a large Meteor
and the reloads are painful after CSS tweaks.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/490#issuecomment-23687156
.

[stephantual]

Dupe of #1361

I made a general less/css autoreload tool a while ago, maybe useful? => https://github.com/jvanveen/lessio also has some code for browserify code and clientside templates

[dalgard]

+10

[Lauricio]

+1