livereload/livereload-js

LiveReload JavaScript code that communicates with the server and implements reloading

LiveReload 3

LiveReload is an essential tool for web developers, and is currently the top paid developer tool on the Mac App Store in many countries.

License

Copyright 2012–2015, Andrey Tarantsov — [email protected]

Purchasing policy notice: All users of the software are expected to purchase a license from Andrey Tarantsov unless they have a good reason not to pay. Users that don't purchase a license are encouraged to apply for a free one at [email protected]. The users are free to:

• download, build and modify the app;
• share the modified source code;
• share the purchased or custom-built binaries (with unmodified license and contact info), provided that the purchasing policy is explained to all potential users.

This software is available under the Open Community Indie Software License:

Permission to use, copy, modify, and/or distribute this software for any purpose is hereby granted, free of charge, subject to the following conditions:

• all copies retain the above copyright notice, the above purchasing policy notice and this permission notice unmodified;

• all copies retain the name of the software (LiveReload), the name of the author (Andrey Tarantsov) and the contact information (including, but not limited to, pointers to [email protected] and livereload.com URLs) unmodified;

• no fee is charged for distibution of the software;

• when distributing the software, the best effort is made to explain the purchasing policy to all users of the software who don't already have a license.

In the event that no new official binary releases of the software are published for two consecutive years, the above conditions are permanently waived, and the software is additionally made available under the terms of the MIT license.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Building LiveReload for Windows

Follow windows/README.md.

Building LiveReload for Mac

Note: right now this branch is in a transitional state; I'm doing active development of Mac v3.0.x. See the ‘master’ branch for the latest stable Mac version (v2.3.x).

Prerequisites:

• Xcode 6.0 Beta4+
• Node 0.10
• CoffeeScript 1.6.x: npm install -g coffee-script
• underscore.js: npm install -g underscore
• grunt
• optionally, Ruby 1.8.7 with Rake for running Rake tasks

For running tests:

• Mocha 1.7.0: npm install -g mocha
• Cucumber.js 0.3.0: npm install -g cucumber
• fsmonitor 0.2.2: npm install -g fsmonitor (warning: don't rely on --version, it lies)

Building:

1. Don’t forget to pull all submodules after getting the source code.

2. Install and compile the backend modules:

    cd node_modules/livereload-new     && npm install && grunt &&
    cd ../livereload-service-dummy     && npm install && grunt
    cd ../livereload-service-server    && npm install && grunt
    cd ../livereload-service-reloader  && npm install && grunt
    cd ../livereload-soa               && npm install && grunt
    cd ../livereload-server            && coffee -c lib
    cd ../livereload-protocol          && coffee -c lib
    cd ../pathspec                     && coffee -c lib
   

3. Package the backend modules into mac/backend:

    cd scripts && npm install
    cd ..
    scripts/node_modules/.bin/_coffee scripts/package-backend.coffee_ node_modules/livereload-new mac/backend
   

   During development, use override mode instead — open Xcode scheme settings and set LRBackendOverride env var to the full path of node_modules/livereload-new/bin/livereload.js.

4. Open LiveReload/LiveReload.xcodeproj

5. Build some subprojects in the correct order (because the dependencies between subprojects aren't properly tracked — let me know if you know a way to specify those), you can do this from Xcode or on the command line:

    cd mac
    make
   

6. Build the app, you can do this from Xcode or on the command line:

    xcodebuild -project LiveReload.xcodeproj -scheme LiveReload -configuration Debug build
   

Until the project is configured correctly, you may need to clean & rebuild often before running tests. Use mac/rebuild.sh for that.

LR for Mac hacking tips

• Add backend/ to LiveReload, enable compilation.
• Set LRBackendOverride environment variable to /path/to/LiveReload/node_modules/livereload-new/bin/livereload.js, so your changes are picked up without rerunning rake backend.
• To run multiple copies of LiveReload, set LRPortOverride to some unused TCP port.
• Set LRBundledPluginsOverride to specify a path to the bundled plugins when running on the command line.
  • (Also useful for speeding up Xcode builds; temporarily delete bundled plugins from the project and set this variable so that LiveReload can find them.)

Running tests

The tests are under mac/LiveReloadTestProjects.

First, build & run LiveReload, open the main window, click the gears icon in title bar, then choose ‘Allow Access to Folder...’ and pick the LiveReloadTestProjects folder.

Then, for a testing configuration, set environment variable LRRunTests to point to the absolute path of LiveReloadTestProjects directory, e.g.

LRRunTests=/Users/andreyvit/dev/livereload/devel/mac/LiveReloadTestProjects

Additionally, you may want to add -LogToConsole YES to the list of launch arguments, so that you can see the entire output when testing.

You may also want to set LRBundledPluginsOverride environment variable, as described above.

git-subdir

We're using git-subdir to sync commits between this repository and the repositories of individual projects.

This probably is of no concern to you, but in case you need it, you can run the following commands to set it up:

git subdir node_modules/livereload/ -r cli --url [email protected]:livereload/livereload-cli.git --method squash,linear
git subdir node_modules/livereload-core/ -r core --url [email protected]:livereload/livereload-core.git --method squash,linear
git subdir node_modules/livereload-server/ -r server --url [email protected]:livereload/livereload-server.git --method squash,linear
git subdir node_modules/livereload-client/ -r client --url [email protected]:livereload/livereload-client.git --method squash,linear
git subdir node_modules/livereload-protocol/ -r protocol --url [email protected]:livereload/livereload-protocol.git --method squash,linear

git subdir node_modules/fsmonitor/ -r fsmonitor --url [email protected]:andreyvit/fsmonitor.js.git --method squash,linear
git subdir node_modules/jobqueue/ -r jobqueue --url [email protected]:livereload/jobqueue.git --method squash,linear
git subdir node_modules/pathspec/ -r pathspec --url [email protected]:andreyvit/pathspec.js.git --method squash,linear
git subdir node_modules/reactive/ -r reactive --url [email protected]:andreyvit/reactive.js.git --method squash,linear

git subdir node_modules/vfs-local/ -r vfs-local --url [email protected]:livereload/vfs-local.git --method squash,linear
git subdir node_modules/vfs-test/ -r vfs-test --url [email protected]:livereload/vfs-test.git --method squash,linear

git-subdir mac/ATPathSpec --url [email protected]:andreyvit/ATPathSpec.git --method squash,linear

Signing the bundled Node.js binary

Copy:

cp /usr/local/bin/node LiveReload/Resources/LiveReloadNodejs

Sign:

codesign -f -s "3rd Party Mac Developer Application: Andrey Tarantsov" --entitlements LiveReload/Resources/LiveReloadNodejs.entitlements LiveReload/Resources/LiveReloadNodejs

Verify:

codesign -dvvv ./LiveReload/Resources/LiveReloadNodejs

AppNewsKit

(See Stats.h/m. This is a seriously cool shit to communicate with your live users. Consider those files to be under MIT. I’ll extract and document it properly soon.)

• Collect usage statistics
• Deliver news to your users

Example ping.txt:

    {
        "see_explanation_at": "http://help.livereload.com/kb/about-us/usage-statistics-privacy-policy",
        "messages": [
            {
                "title": "MyApp on the Mac App Store!",
                "message": "MyApp 2.1 has been released on the Mac App Store, and is on sale (50% off)! Do you want to learn more about it?",
                "id": "myapp-2.0.0-release",
                "version": [">=2.0 <3.0"],
                "status": ["unregistered"],
                "stats": {
                    "stat.reloads": { "min": 10 }
                },
                "delay_if_nagged_within": "3d",
                "remind_later_in": "5d",
                "deliver_after": "2011-12-08 16:33:00",
                "wait_until_good_time": true,
                "delivery_on_stats": {
                    "or": {
                        "stat.reloads.last": { "within": 30 },
                        "stat.launch.first": { "within": 120 }
                    }
                },
                "random_percentage": 50,
                "primary_button_url": "http://myapp.com/mas/",
                "primary_button_title": "Visit Mac App Store"
            }
        ]
    }

livereload-js's Issues

New Strict Matching Mode

When livereload.js receives a reload command it tries to pick a "best match" from the resources in the current document (see reloader.coffee). In some cases this causes unnecessary reloads.

Example: I have two CSS files, main.css and main-ie8.css. Only main.css is a resource in the current document. But when livereload.js receives a reload command for main-ie8.css it will pick main.css as "best match" and reload it unnecessarily.

I'd like to see a "strict matching mode" in livereload.js that does a strict byte-by-byte comparison of paths in the function numberOfMatchingSegments. I've locally replaced this function with the following code:

numberOfMatchingSegments = function(path1, path2) {
    return path1 === path2 ? 1 : 0;
}

This change relies on receiving exact paths via the reload command. I've therefore implemented a new basePath option for gulp-livereload: gulp-community/gulp-livereload#31

Would you agree to adding a strict matching mode to livereload.js?

Old versions of stylesheet are not being removed (Firefox)

This is similar to #9: when a stylesheet is live-reloaded, old rules are not removed. I'm using @import statements.

This happens only using Firefox (Chrome is fine). The folks of Firefox say that https://bugzilla.mozilla.org/show_bug.cgi?id=202138 is fixed, so I wonder: is it still a bug in Firefox, or something that needs to be updated in the extension?

add svg to image reloading

Reload JS only if included on the page

When the LiveReload client receives change notifications for CSS and images, it attempts to determine if those changes are relevant to the page and only reloads if they are. However, it doesn't do this for JS or other files, but rather blindly reloads the page.

This is problematic for build processes where an edit to a script that is included on the page may cause changes to other files that aren't included on the page. (Perhaps you're editing a dependency of multiple build targets, or are generating sourcemaps alongside your scripts.)

I've developed a plugin that will intercept all changed JS and sourcemaps and only reload the page if the page includes a script tag with a matching filename: https://github.com/mixmaxhq/livereload-require-js-includes (So it
will never reload for a sourcemap change, the assumption there being that the
sourcemap would only have changed if the JS changed too.) Is this functionality that you'd consider bringing into the core project? It seems (perhaps naively?) like the way that LiveReload should work.

The only downside I see is the difficulty of determining whether the JS is included on the page. My plugin currently only checks the last path component, but it appears like LiveReload includes a sophisticated algorithm for comparing paths and that could probably be employed here.

Add CI (Travis)

Support reloading chrome extensions

This could be implemented with an option. If the option would be activated, the script would call
window.chrome.runtime.reload() instead of this.reloadPage();

Is this within the scope of functionality livereload is willing to support?

Options.extract does not handle missing port in URL

When the livereload script tag does not provide a port in the URL, Options.extract falls back to 35729 which is incorrect. Instead, if no port is provided, it should use 80 for HTTP and 443 for HTTPS.

Example:
src="http://localhost/livreload.js" (Port is 80)
src="https://localhost/livreload.js" (Port is 443)

Maybe something like this:

if (mm[2]) {
  options.port = parseInt(mm[2], 10);
} else {
  options.port = options.https ? 443 : 80
}

Browserified bundle generates a client-side error

I am attempting to Browserify livereload-js like so;

var lr = require('livereload-js');

When I include the resulting bundle in a webpage I get the following error in Chrome

Uncaught TypeError: Cannot read property 'addPlugin' of undefined

The error originates from https://github.com/livereload/livereload-js/blob/master/src/livereload.coffee#L133

I'm using Chrome 40.0.2214.93, Browserify 8.1.3, and node v0.10.28

Also on IE 11

If 'localhost' is provided, don't use '0.0.0.0' for livereload

See: gruntjs/grunt-contrib-watch#493

grunt-contrib-connect options:

port: 8080,
livereload: 35729

grunt-contrib-watch livereload options:

host: 'localhost',
port: 35729

I use Vagrant with VirtualBox and a Ubuntu LTS release.

My page loads correctly at localhost:8080/index.html, and contains a script tag (automatically inserted by livereload) that points to 0.0.0.0:35729/livereload.js?snipver=1. The grunt commands are all executed inside the virtual machine.

Now on OS X, this works correctly. My browser is able to resolve both URLs and livereload functions as it should.

However, this is not the case on Windows! Windows is unable to resolve 0.0.0.0:35729, and so livereload is not usable. Changing the URL in the script tag manually to localhost:35729/livereload.js?snipver=1 does allow Windows to work.

Alas, this would be my request:
If localhost is explicitly defined as the host, then force the usage of localhost instead of 0.0.0.0.

Firefox 32, Linux Mint 17, LiveReload 2.0.8 AddOn disables after almost every reload

It has worked normally - I use it both for CSS and JS. After changing JS it's reloading page, and it was ok. But it started to throw "LiveReload disabled because it could not find its own SCRIPT tag" error and disables after reloading (after JS file change). After page reload it enables again and was ok. But now it keeps disabling almost on every reload. Any idea?

I must tel that when page reloads, LiveReloads is going down, but when i click "Enable LiveReload" icon twice (first is disabling), second click makes it enabled (without any page refresh. But it sound absurd i have to click enable livereload after each reload ( I might then just use Refresh button ;)

ProtocolError undefined

I'm getting a fair bit of errors in Chrome where ProtocolError is undefined. The injected LiveReload script is v2.2.2.

Problematic line in Connector:

        error: (function(_this) {
          return function(e) {
            if (e instanceof ProtocolError) {
              if (typeof console !== "undefined" && console !== null) {
                return console.log("" + e.message + ".");
              }
            } else {
              if (typeof console !== "undefined" && console !== null) {
                return console.log("LiveReload internal error: " + e.message);
              }
            }
          };
        })(this)

I am curious. What are the problems with live javascript reloading?

I my mind, you could namespace all of the js files and then redefine the namespace on live reload.

WebSocket port cannot be set to 80/443

livereload.js decides which WebSocket port to use by examining the src attribute of its script element (see options.coffee). So if I load livereload.js on port 1234 then the WebSocket connection will use port 1234, too:

<script src="http://localhost:1234/livereload.js"></script>

Unfortunately, this does not work when using the standard HTTP/HTTPS 80/443 ports because browsers strip the default ports 80/443 from the script element's src attribute such that livereload.js does not see them (tested in Chrome 35 and Firefox 30). Therefore all three following embed methods use the fallback port 35729 instead of 80 or 443:

<script src="https://localhost:443/livereload.js?snipver=1"></script>
<script src="http://localhost:80/livereload.js?snipver=1"></script>
<script src="/livereload.js?snipver=1"></script>

I've setup livereload behind an nginx proxy on port 80/443 for two reasons:

1. Only ports 80/443 are needed and not port 35729 (firewall, port forwarding, ...).
2. I do not have to configure SSL/HTTPS in tiny-lr because SSL/HTTPS is already configured in nginx.

At the moment I've patched the livereload.js file to use the fallback port 80/443 instead of 35729 (see mklabs/tiny-lr#45). But this may break existing setups. How can this be solved in a clean way? Maybe a new "keep-port=1" URL parameter?

host is null

Hi,

I have rack-livereload and guard-livereload installed in a Rails app setup as follow.

I have that setup in my environment/development.:

    Rack::Lock, Rack::LiveReload,
    :min_delay => 500,
    :max_delay => 10000,
    :port => 35729,
    :host => 'mywebsite.local'
  )

I have the following in my views/layouts/application.html.erb:
<%= javascript_include_tag "http://mywebsite.local:35729/assets/lib/livereload.js" %>

I've obviously restarted my server. I get the following console error:
LiveReload cannot connect to null:35729, will retry in 60000 sec.

I have my port 35729 listened by Apache and the js file is accessible.

I've tried to track down the problem without success. It is weird that the host is null. I've noticed that the regex for parsing the host is kinda broken. In my case (Rails), the path to the asset is /assets/lib/livereload.js; it generates a host as mywebsite.local/assets/lib when I would expect mywebsite.local.

In the dist/livereload.js on line 326, the regex is:
/^[^:]+:\/\/(.*)\/z?livereload\.js(?:\?(.*))?$/

when it should probably be:
/^[^:]+:\/\/([^\/]+).*\/z?livereload\.js(?:\?(.*))?$/

Do you have any idea of what is going on?

live JS reloading

is it on the things to do or is it working now. because it reloading the entire page...I am sending the js file path of the chagned js file to tiny-lr server..and it should be just sending the signal to load the js to the livereload.js...not the entire page. Not sure what is happening.

Live reloading extension point for those who want JS hot loading today?

I've got a hot reloader for JS that uses this project at the core and I'm curious about how I can help provide an extension point of some kind. I realize not everyone has the ability to do hot reloading of JS and even if they could it's likely they all need something a little different to accommodate based on the frontend tech stack.

For example, in the gif below you will see I'm using ember and at this time (early days yet) I'm firing an event from a ember dev tool that will dispatch it back to my application to re-render the component. I couldn't possibly submit a generic pull request here that unlocks hot reloading for all but I could do everything I needed if a special hook was available.

One "creative" solution I came up with was to monkey patch the reloadPage function as it's called at the very end of the reload chain anyway.

window.LiveReload.reloader.reloadPage = function() { //my hot reload JS code }

The one missing piece that would require a pull request/ discussion/ etc is that I need the path when this is called and today reloadPage doesn't take any arguments. This was me thinking more quickly on the subject so it's worth mentioning that we could offer an official override-able hook that is called just before reloadPage and it would be provided path so users "could opt in" for a custom hot reloading method if they wanted.

I personally like the ability to have an escape valve like this so I can still leverage 99% of the great work in livereload-js while still supporting hot reload for my ember apps w/ ember-cli.

Thoughts? Questions? Next Steps?

https://github.com/toranb/ember-hot-reload-spike

*keep in mind the above project is a spike to prove out hot reloading with ember-cli

Cache Busting in Less Plugin

The cache busting code is causing less to insert duplicate <style> elements when it freshes.

Here is my original markup:

<link rel="stylesheet/less" type="text/css" href="content/css/app.less">
<style type="text/css" id="less:mobile-products-argos-saleslogix-content-css-app">

After the refresh:

<link rel="stylesheet/less" type="text/css" href="http://localhost/mobile/products/argos-saleslogix/content/css/app.less?livereload=1379018103060">
<style type="text/css" id="less:mobile-products-argos-saleslogix-content-css-app:less-livereload-1379018103060">
<style type="text/css" id="less:mobile-products-argos-saleslogix-content-css-app">

Additional reloads keep inserting more styles. Stops refreshing completely after the first reload.

Offending line: https://github.com/livereload/livereload-js/blob/master/src/less.coffee#L22

livereload chrome plugin crashes on ejs files

Hi,
The chrome extension seems to reload soon after a file change. I'm running grunt with jslint and other tasks. The live-reload extension tries to reload before grunt/nodemon has started for ejs files. It works fine with js files. Is there a way to delay the reload until grunt finishes or with maybe 2s delay?

The connection to .. was interrupted while the page was loading

The connection to ws://localhost:35729/livereload was interrupted while the page was loading.

This warning appears in the console (Firefox 38, Linux) after a page reload is done.

It appears that livereload doesn't terminate the connection before the page unload.

I managed to get rid of the warning with the following snippet,

window.addEventListener('beforeunload', function(window){
    return function(){
        if (window.LiveReload){
            window.LiveReload.connector.socket.close();
        }
    }
}(window));

Any information on this?

Add checking for Function.prototype.bind() exists

Hi.

I work with browsers that are so old that they don't have 'bind' function (Function.prototype.bind() ) and this line (src/livereload.coffee:20) causes an error, which crash all livereload.
Can you add check to the 'bind' function existence?

Somethin like that:

error: this.window.console.error.bind ? this.window.console.error.bind(this.window.console) : function() {}

I hope that you can add this small checking ;)

Release 2.3.0

@andreyvit If everything looks good to you, feel free to release 2.3.0.

Please also bump bower.json and the internal version number.
And when you push the tag, I'll add release notes.

Custom "pathFromUrl" to remove digest/hash from asset filename

First of all, thank you for implementing issue #17!

My asset hrefs contain a digest/hash, i.e. the main.css on disk is referenced as main.eec09356.css in the HTML (which is then rewritten to main.css by the webserver). The "changed" URL sent to livereload-js is just main.css. Therefore nothing matches with reloadMissingCSS = false.

I think I'd have to modify the pathFromUrl function to support this setup:

path = path.replace(/\.[0-9a-f]{8}\./, '.');

What would be the best way to make this feature optional / configurable such that it can be merged? Maybe a new pathFromUrl option that (if present) would be used instead of the default pathFromUrl function?

window.LiveReloadOptions = {
	pathFromUrl: function(url) {
		return url.replace(/\.[0-9a-f]{8}\./, '.');
	}
};

Test issue

123

livereload crashing with errors in console

/usr/local/lib/node_modules/livereloadx/node_modules/ws/lib/WebSocket.js:214
else throw new Error('not opened');
^
Error: not opened
at WebSocket.send (/usr/local/lib/node_modules/livereloadx/node_modules/ws/lib/WebSocket.js:214:16)
at /usr/local/lib/node_modules/livereloadx/lib/websocket.js:21:14
at Array.forEach (native)
at Object.WebSocketHandler.send (/usr/local/lib/node_modules/livereloadx/lib/websocket.js:20:18)
at Object.Server.notifyFileChange (/usr/local/lib/node_modules/livereloadx/lib/server.js:108:22)
at Watcher. (/usr/local/lib/node_modules/livereloadx/lib/server.js:119:16)
at Watcher.EventEmitter.emit (events.js:95:17)
at /usr/local/lib/node_modules/livereloadx/lib/watcher.js:33:12
at Array.forEach (native)
at FSMonitor. (/usr/local/lib/node_modules/livereloadx/lib/watcher.js:32:52)

Any help? Need additional information?

Uncaught SyntaxError: Unexpected token : livereload.js:2

I'm getting this error on a few differnet projects although other developers don't get the error. whats the issue here apart from the idiot in front of the computer!?

Loading the script async

You are suggesting to load the script using document.write, however this is a blocking operation, as described here:

http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
http://css-tricks.com/thinking-async/

When the server (the Livereload app) is not running, the browser simply waits for the connection to time out before continuing to render the page. This is especially frustrating on mobile, where it seems to take like forever to load a page.

The solution would be to use the async attribute, or to insert the script element dynamically in the DOM, as mentioned in the posts above.

I'm using this snippet:

<script>
(function() {
    var l = document.createElement("script");
    l.async = true;
    l.src = 'http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(l, s);
})();
</script>

Cheers!

RemoteLiveReload doesn't work when CDN is on

Loooove LiveReload!!

Not sure if this is an issue, or is just supposed to work like that...

I have RemoteLiveReload 0.0.46 running just fine, then I activated CDN (cloudflare) so Chrome RemoteLiveReload Extension stopped connecting...

Add strict support for CSP

Add option to allow script to short-circuit if it cannot find livereload.js inside a script tag with the integrity attribute.

version is wrong in dist/livereload.js

livereload-js/dist/livereload.js

Line 7 in 7b1b5a3

Version = '2.2.2';

It looks like the version hasn't been updated since v2.2.2.

tag a release to include the wss fix?

I'm referring to this one: #29

Release 2.2.3

@andreyvit the PR's for the 2 most 'annoying' and easy to fix issues are merged.
Could you release a new patch version?
Please also run the tests (see below).

So it would be awesome if you could:

• Run npm test
• And if ok run:
  • npm version patch
  • git push && git push --tags
  • npm publish

Thank you!

About the tests:
npm install doesn't complete on my machine (Linux) because of an issue with building a dependency (node-jscoverage) of expresso. I'll look into that as a next step.

relative css @imports result in 404 requests

I have a CSS file at /css/main.css which imports other CSS files in subdirectories of /css, using relative @import statements.

When I make edits, livereload makes a request for /lib/text.css, which should be /css/lib/text.css, resulting in a 404.

I thought maybe this was an issue with my app stack, which is complicated, so I made a new barebones repo which demonstrates the issue, using grunt-contrib-connect and grunt-contrib-watch.

The demo repo is https://github.com/pascalpp/grunt-watch-reload-issue. To replicate the issue, clone that repo locally, run npm install and grunt, and then open http://localhost:9090 and follow the instructions shown there.

The issue also occurs when I connect to the standalone LiveReload app (from the Mac App Store).

Obviously I could change the CSS imports to be root-relative, but that breaks other things, like my CSS minimizer.

If anyone has any insight on this issue, I'd really appreciate it.

Remove build result from git

Add /dist to .gitignore.

Remove Bower support

Since Bower basically has no future, it might be good for it to go away for 3.0.0.

not working on https

When I use my livereload express app over http, everything works just fine.
When I use it over https, I get:

Secure Connection Failed
The connection to localhost:35729 was interrupted while the page was loading.

What do I miss?

Subscribe on 'less is changed'

Is there way to change logic in method LessPlugin.prototype.reloadLess?

I use grunt-contrib-watch server with livereload-js.

livereload.js triggers this.socket.onmessage well. It was less file changed, so calles LessPlugin.prototype.reloadLess method. I want to do my own logic when less file changed.

Is it possible? Can i subscribe on 'less is changed' event? Any help.

Maybe it is possible to register new plugin 'myLessPlugin' and use it for "less is changed" event?

Make livereload as node-module

It is impossible to use livereload-js as a dependency of some other module because it is not node-module. E.g. tiny-lr uses livereload and it is copied to the module so it is difficult to keep it latest.
So if it was possible to include this module as a dependency such issues would not appear.

Besides that there are a lot of forks that add package.json to livereload. That proves that it is necessary improvement.

Npm module to use with Browserify

Are there an NPM module i could use with browserify? If no, could you submit it?

Internet Explorer 8

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Timestamp: Wed, 18 Jul 2012 21:33:18 UTC

Message: 'this.reloader' is null or not an object
Line: 956
Char: 5
Code: 0
URI: http://localhost:35729/livereload.js?snipver=1

I'm using the latest Beta: v2.3.14

multiple servers one script

It would be awesome if this could listen to several servers running on different ports. That way events from different servers could trigger changes. Any ideas on how to do this?

Add new options to README

Stylesheets from <link rel="import"> are not reloaded

Let's assume that I have index.html:

<link rel="import" href="component.html">

which contains:

<link rel="stylesheet" href="component.css">

When component.css has changed, livereload servers (like tiny-lr) signals livereload-js to reload component.css by updating the tag, which is not present on index.html.

Live reload without body and html tags

In this example live reload won't work because document is not closed with body and html tags: https://github.com/KeenRivals/bestmotherfucking.website/blob/master/index.html

Can you add support for modern pages like that one in example?

Consider replacing coffeescript with ES6

Remaining TODO's:

• add a compressed build with terser
• update README
• create a script to bump the bower.json version
• remove Rakefile
• add a script to create test/html/browserified/bundle.js from test/html/browserified/main.js for manual testing
• use main with dist dir and module with src dir in package.json
• remove lib and lib-cov directories if possible

How to use plugins to define new filetypes to reload

Im interested in reloading without refresh for other file types like:

• i18n
• amd-modules
• templates
• etc.

Is there any documentation on how to extend livereload-js ???

Old versions of stylesheet are not being removed during livereload

It appears that livereload.js removes old versions of the stylesheet but it is not working for me. I didn't notice this being a problem until I tried deleting a line of CSS and it appeared that liveupdate was not working. In fact it was working but the new stylesheet didn't have the declaration and the previous one did so it was still applying.

Other than that the reload all works great.

My css files are added with <style>@import url("http://example.com/sites/all/themes/omega/css/modules/system/system.base.css?mqgw4v");</style> etc. (it's a drupal site and this is how it's handled by default). Looking at livereload.js maybe it's only looking for <link> tags? But maybe I'm misreading the code, that is just a guess.

Thanks!
Colin

css @import in Shadow DOM does not work

Shadow DOM is the new w3c standard about web technology.
To show how does @import not work, see the example:

index.html

<body>
    <style type="text/css">
        @import "test1.css"; /* this will reload when change test1.css and is expected */
    </style>
    <div id="d1">I will reload</div>  

    <div id="wrap">
        <template id="tmp">
            <style type="text/css">
                @import "test2.css"; /* this will not reload when change test2.css and is not expected */
            </style>
            <div id="d2">I will not reload</div>
        </template>
    </div>

    <script type="text/javascript">
        var wrap = document.getElementById('wrap')
        var shadow = wrap.createShadowRoot()
        var template = document.getElementById('tmp')
        var clone = document.importNode(template.content, true)
        shadow.appendChild(clone)
    </script>
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

test1.css

#d1 { background: red; }

test2.css

#d2 { background: yellow; }

Please only test in chrome, I don't know if any other browser support the ShadowRoot interface

I think the reason is really simple, it did not take wrap.shadowRoot into consideration

Should we use livereload in production?

Hello;

Thank you for great library.

I am using LiveReload in localhost. But in production, I don't know if I should use it.

My code in index.html is:

<script>
document.write('<script src=' + location.protocol + '//' + location.host.split(':')[0] + ':35729/livereload.js></' + 'script>')
</script>

And error is:

...com:35729/livereload.js net::ERR_CONNECTION_REFUSED

What should I do?

license?

What is the license for livereload-js? The webpage states "The browser extensions and livereload.js are under MIT." however there's no license in the code repository.

feedback.livereload.com is down

Seems like all links to the knowledge base are currently broken (404). This includes the http://go.livereload.com/kb link from http://livereload.com/ , and the "LiveReload protocol" link from https://github.com/livereload/livereload-js/blob/master/README.md leading to http://help.livereload.com/kb/ecosystem/livereload-protocol.