BrowserSync/browser-sync#685 shows how to override the styles on the in-browser notify div in lib/notify.js, but changing any single rule requires replicating the entire styles array.

It would be nice if we could override a single style rule. For example, only changing the background color, font-size or positioning.

Also, would it be ok to add a Lodash dependency to help streamline this?

I don't find any example of how to use browser-sync-client as middleware with grunt and browsersync.

Can you give me and example please ?

re: BrowserSync/browser-sync#477

As already discussed in BrowserSync/browser-sync#110, we should refactor the client code to flatten the ground for new features.

@shakyShane stated a todo list of things to consider for us:

Testability - The most important aspect. We should use coding styles that allow for easy unit-testing.
Architecture - the code should be modular/pluggable which will help future extensibility & make testing easier too.
Features - let's focus on the popular features & regular feature requests - better to make the popular features work REALLY WELL instead of spending time on ones that hardly get used.
Community - I want to increase the amount of contributors to BrowserSync - maybe we should consider documenting a 'preferred' way to hack on the core.

Hi,

I encounter a strange issue with browsersync.

As soon as I click on a link, my local development stack crashes.

I observed that the browser-sync-client.js was at the origin of the multiple requests. Their were all on the same URL of the link I clicked in the browser.

After digging more, I noticed that there is a setTimeOut loop that fires the click multiple times without dealy.

This "feature" was introduced in the following commit (4 years ago...) da3e9b6 to resolve the issue #144 (angular click support).

That's strange that I encounter this issue now.

Any hints / idea to prevent this ?

Thanks

When I start BrowserSync, the client gets loaded correctly in Google Chrome (v46), but after a first browserSync.reload (initiated from a gulp.watch, I get the following error, after which the reloading doesn't work anymore:

browser-sync-client.2.9.11.js:129 Uncaught TypeError: o.getWindow(...).scrollTo is not a function

Any idea?

It seems to work normally under other browsers. I use version 2.9.x

Looking at the options here https://browsersync.io/docs/options#option-scrollThrottle but adding scrollThrottle didn't seem to do anything. I have a search through the server code and could only see its default value being set, but there's no mention if it in the client js at all.

Is this something that's been deprecated from an older version, or has it not yet been implemented?

Scrolling doesn't seem to be working. IMO the issue hides it these two lines:

https://github.com/shakyShane/browser-sync-client/blob/master/lib/ghostmode.scroll.js#L72 - here we are sending {x:num, y:num} in raw property (my guess is that only y was ment to be sent).

https://github.com/shakyShane/browser-sync-client/blob/master/lib/ghostmode.scroll.js#L41- and here we are trying to call window.scrollTo(0, {x:num, y:num}).

node example.js
localhost:3000/inputs.html opened in firefox & chrome. Inspected, there is no injected javascript nor any websocket connection opened.
Consequently, any interactions made using mouse/keyboard doesn't sync.

Even if we disable ghostmode the client continues to listen to events, including scroll. This becomes problematic when profiling application performance because browser-sync-client pollutes the frames and forces browsers to reflow content by reading window.pageXOffset and window.pageYOffset. See attached screenshot:

Do you think it would be a good idea to subscribe/unsubscribe event listeners when changing options?

In safari, I get the following error:

Exception with thrown value: Error: No input to stringify

I'm using 2.10.0 (tried 1.9.2), and the line (3455:220) it breaks on (function has) is:

stringifySupported = stringify(0) === "0" && stringify(new Number) === "0" && stringify(new String) == '""' && stringify(getClass) === undef && stringify(undef) === undef && stringify() === undef && stringify(value) === "1" && stringify([value]) == "[1]" && stringify([undef]) == "[null]" && stringify(null) == "null" && stringify([undef, getClass, null]) == "[null,null,null]" && stringify({

I'm not sure why this happens.

It would be nice to be able to use a soft reload. I am using hashes in the query string in my filenames – as soon as the page reloads the hash from a file would have already been changed so it only reloads the edited file and loads all other files from the cache. Currently, browser-sync forces to reload everything which makes everything slightly slower.

The line which should be extended or changed is the following: https://github.com/BrowserSync/browser-sync-client/blob/master/lib/browser.utils.js#L141

I'd be happy to send a PR if this would be a configuration feature you'd like to add.

Hello guys! I'm using this project since recently and I'm really impressed how much it improves my productivity!

For the last few days we're planning to integrate browser-sync with the angular2-seed project. The integration was quite straight-forward thanks to your great examples directory and TypeScript typings.

The problem we experience is in the context of execution of the synchronization commands you invoke between the different browsers. Angular 2 intercepts all asynchronous calls using zone.js (such as WebSockets, XHR, browser events, etc.) and runs its dirty checking algorithm. This means that the dirty checking of Angular 2 is automatically run when you triggerClick, however, when you sync the values of input fields or submit a form the synchronization is broken.

Although it is not completely clear whether this issue should belong to the zone.js project or browser-sync, I opened it here since I found an inconsistent way of handing the different user events.

As possible solutions for integration of both projects (zone.js and browser-sync) I see:

1. Trigger all events manually with the same attributes as the source (I bet you have your reasons to not approach this way if you haven't done it yet).
2. Create a separate, Angular 2 specific, browser-sync-client which runs all the sync changes inside of a zone.
3. Wrap all sync commands inside asynchronous calls (setTimeout(fn, 0)). Although it seems quite dirty it should work in most cases.

I like solution two best since it will keep the current version of the client unchanged and only alter support for Angular 2.

Let me know what you think and keep the good work up!

Its really annoying to have to scroll to see my own logs.

I really enjoy seeing the notifications telling me browserify has connected or reloaded some asset, however, the location in the top right of the screen often interferes with my dev work on top menus so I need to keep it disabled.

What do you think about optionally logging those notifications to the console instead/in addition?

I was thinking that a flag could be sent over the WS connection with each notification so that the behavior can be easily configured on the server side.

Thoughts?

I'm using Packery for the layout of a website I'm building. When BS injects CSS, how can I trigger layout? Is there an event?

I'd like to read it 🙏

How can I use this in a gulp setup?

var browserSync = require('browser-sync').create();
var browserSyncClient = require('browser-sync-client');

browserSync.use(browserSyncClient);

gulp.task('browser-sync', function () {
browserSync.init({
server: {
baseDir: "./wwwroot"
},
clientEvents: [
"scroll",
"input:text",
"input:toggles",
"input:keydown",
"input:keypress",
"form:submit",
"form:reset",
"click",
"contenteditable:input",
"mouseup",
"mousedown",
"select:change"
],
ghostMode: {
clicks: true,
scroll: true,
forms: {
submit: true,
inputs: true,
toggles: true,
keypress: true,
keydown: true,
contenteditable: true,
change: true
},
mouseup: true,
mousedown: true
},
});
});

I use browser-sync in my gulp files, which in turn uses browser-sync-client, which in turn is using the blacklisted and no longer maintained gulp-browserify package. Might think about removing that dependency. Here is a Gulp recipe showing how to use just plain browserify.

Hope that helps.

Hey, is there any way to access browserSync instance created on connection?

var browserSync = new BrowserSync(options);

I would like to create a plugin which modifies ghost mode. So far I managed to do what I wanted, but only as a fork. I'm wondering if I can apply the same by a bs plugin, but I need to access that browserSync variable. Any ideas? I can help with implementation if needed.

Related: BrowserSync/browser-sync#1203

browser-sync seems to phone home on every single scroll event, even when ghost mode is disabled. While this may seem like a useful feature for debugging scroll stuff on multiple devices at the same time, it actually does exactly the opposite: it blocks the thread for 5-10ms, lowering the FPS further on poorly performing apps (and making it super difficult to debug them!)

There seems to be no way to disable this, and so I can't use browser-sync when debugging scroll events.

Here's the code in question: https://github.com/BrowserSync/browser-sync-client/blob/master/lib/ghostmode.scroll.js#L25

Suggestions:

• When ghost mode is disabled, the event listener shouldn't be added
• Use requestIdleCallback where available.
• When requestIdleCallback isn't available, either debounce / throttle the scroll events, or use an interval so that it doesn't fire as often as the scroll event does (a lot).

Happy to contribute code fixes if you're happy with the approach. I don't know how to do the first one, though.

The "Disconnected from BrowserSync" notifiction is still displayed when notify option is set to false. Is this expected behavior ?

The connected notification checks the property:

if (options.notify) {
    notify.flash("Connected to BrowserSync");
}

While the disconnected notification does not:

socket.on("disconnect", function () {
    notify.flash("Disconnected from BrowserSync");
    shouldReload = true;
});

According to the docs, notify: false should not show any notifictions:

// Don't show any notifications in the browser.
notify: false

When using browser-sync-client.js?v=2.23.3:89 & Chrome latest.

I get the following error in the browser console.
Uncaught SyntaxError: Unexpected token }
I have used previous versions without issue.

Could this be an issue in the source code?

Hello!
I just encountered a very strange problem related to browser script. In short I have Webpack-React-Redux-PHP stack. I have configuration for Browsersync server and I use both PHP(port 8001 and Browsersync on 3000).

I fetch the index page from PHP via proxy. When I use BrowserSync server with script I get some issues with Material-UI switch, the callback returns wrong switch state, when I configure BrowserSync like this
scriptPath: function(){}

(so basically I remove the script) it starts working well on both dev environment(with Browsersync) and in prod env(localhost:8001). It looks like Browsersync is pushing some additional events on click so when I actually hit the callback the value is not updated at time. So when I have switch in off state I should receive true in click callback, but I receive false instead. Do you have any idea what could potentially cause this issue ?