browsersync / browser-sync-client Goto Github PK
View Code? Open in Web Editor NEWClient Scripts for BrowserSync
License: MIT License
Client Scripts for BrowserSync
License: MIT License
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})
.
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.
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.
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'd like to read it ๐
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 ?
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?
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
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 ?
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?
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.
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?
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.
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.
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?
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:
Happy to contribute code fixes if you're happy with the approach. I don't know how to do the first one, though.
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.
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?
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
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:
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!
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
},
});
});
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.