Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inject CSS-only changes into page without reload #490

Closed
cmalven opened this issue Nov 19, 2012 · 33 comments
Closed

Inject CSS-only changes into page without reload #490

cmalven opened this issue Nov 19, 2012 · 33 comments

Comments

@cmalven
Copy link

cmalven commented Nov 19, 2012

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link

littke commented Jun 18, 2013

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
Copy link

Munter commented Jun 18, 2013

@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
Copy link

littke commented Jun 18, 2013

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
Copy link
Author

cmalven commented Jun 18, 2013

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
Copy link

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
Copy link
Contributor

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
Copy link

Dupe of #1361

@ghost
Copy link

ghost commented Sep 7, 2013

Code Bounty

@ghost
Copy link

ghost commented Oct 2, 2013

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
Copy link

dalgard commented Oct 9, 2013

+10

@Lauricio
Copy link

Lauricio commented Dec 6, 2013

+1

1 similar comment
@ghost
Copy link

ghost commented Dec 7, 2013

+1

@faceyspacey
Copy link

+100

@ghost
Copy link

ghost commented Dec 25, 2013

Maybe chrome devtools' workspaces are a good place to start. Just needs to make sure that all files map correctly to filesystem. Also supports css sourcemaps nowadays...

@littke
Copy link

littke commented Dec 25, 2013

Doesn't work because as long as the CSS file is served by Meteor,
Meteor will restart whenever the file changes. Not to mention it will
refresh the entire page.

@fabien-h
Copy link

PLUS ONE MILLION (seriously)

Maybe look at the way it's done with yeoman ? (http://yeoman.io/)

@kmmathis
Copy link

I'd say this is a pretty important feature for all designers working with Meteor. Potentially, some designers could be turned away from the project simply because of this issue. It makes good sense to me to remove CSS files from Meteor's watch, and instead inject them on the fly to avoid the page reload.

@AdamBrodzinski
Copy link

+1 , this would be great.

@oobgam
Copy link

oobgam commented Mar 19, 2014

+1

@littke
Copy link

littke commented Mar 19, 2014

Guys, I was just able to get this working with CodeKit 2 (https://incident57.com/codekit/). It has the ability to do browser refreshes with a delay. I've set it to 0.5s delay. This lets the Meteor server detect the change and restart before CodeKit injects the change.

You'll also need to make sure Meteor doesn't refresh the entire page. I've done so with the following code I've put in client/lib/disable-hcr.js:

/*
 * A settings option to disable auto reload during development.
 */
Meteor.startup(function() {
  if (Meteor.settings && Meteor.settings.public && Meteor.settings.public.DISABLE_AUTO_RELOAD) {
    Meteor._reload.onMigrate(function(reloadFunction) {
      return [false];
    });
  }
});

And then in my settings file:

{
 ...
  "public": {
    "DISABLE_AUTO_RELOAD": true
  }
}

When starting Meteor, remember to add meteor --settings debug-settings.json.

TADA! Injecting only CSS changes. Plus, it refreshes the entire page when HTML changes (as it should) AND generates LESS source maps which Meteor supports since 0.7.2.

@littke
Copy link

littke commented Mar 19, 2014

OMG even better, with source maps, I can now finally code live in the browser and save it to disk. niiiiiiice

@fpaboim
Copy link

fpaboim commented Mar 25, 2014

+1

@Slava
Copy link
Contributor

Slava commented Mar 31, 2014

I am just linking it here for anyone curious how to implement this feature outside of Meteor (if you really want): http://stackoverflow.com/questions/22755209/realtime-css-scss-edition-with-meteor-avoiding-server-restart

@allaire
Copy link

allaire commented Mar 31, 2014

👍 like everyone else, our app reload time is getting ridiculous :(

@glasser
Copy link
Contributor

glasser commented Apr 18, 2014

We do not use GitHub to track feature requests (other than for Blaze). The core team's current roadmap is at https://roadmap.meteor.com/. Discussions about features that users desire are great topics for the meteor-talk mailing list, where the community can help come up with solutions that don't require core changes.

@glasser glasser closed this as completed Apr 18, 2014
@glasser
Copy link
Contributor

glasser commented Aug 7, 2014

This is now fixed on devel, thanks to @arbesfeld ! Targeting 0.9.0 release.

@Primigenus
Copy link
Contributor

This is a must have feature for designers and will dramatically increase iteration speed. Thank you for getting it into 0.9.

If you're curious how this works under the hood, @arbesfeld gave a talk at a recent devshop about it: https://www.youtube.com/watch?v=NBp72NFzHL0

@bitspook
Copy link

bitspook commented Aug 8, 2014

Can someone point to where in devel branch is the code to do live CSS injection? I'd love to see how core devs are doing it, I couldn't find it in places I though it would be.

Here's a rather silly way I do it. https://github.com/channikhabra/meteor-live-update
I'd be doing something horribly wrong since nobody else has tried doing it this way. But never mind, it works. My silly package has js/html live update too, which I am sure is broken in meteor 0.8.3, so in case you wanna try it, please do LiveUpdate.configure({cssOnly: true}) in your app.

@glasser
Copy link
Contributor

glasser commented Sep 5, 2014

The autoupdate package, as well as some support in the build tool.

@wcj3
Copy link

wcj3 commented May 19, 2017

any update on this for 2017?

@wcj3
Copy link

wcj3 commented May 29, 2017

Although this issue has been dead for a few years, i'm dropping this to help future travelers: https://atmospherejs.com/wcj3/sass-hot-loader

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests