1.2.4 • Published 6 years ago

freshstyles v1.2.4

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

Freshstyles

Freshstyles sets up a realtime connection from a localhost node server watching your directories (using socket.io and chokidar), and communicates with the client to tell it when these files have updated.

Freshstyles was designed for a particular use case where the CSS is compiled when the browser requests the stylesheet. Maybe some others have worked with similar set ups where such a workaround to get a hot-reload-esque realtime updating is needed.

To get started run:

npm install --save-dev freshstyles

And then in your JS:

const freshstyles = require('freshstyles');
freshstyles.watch(['/a-directory/**/*.scss', 'another-directory/**/*.scss'], {
    port: 8080,
    eventname: 'updatecss'
});

To listen on the client side you need the client socket.io JS to be able to listen to the update event.

Here's an example of how you might update your CSS file:

(function() { //The address for the socket. var socketAddress = 'http://localhost:8080';

	//The stylesheet that needs updating
	var styleSheet = document.querySelector('link[href^="css.css"]');
	
	var socket = io(socketAddress);

	socket.on('connect', function() {
		console.log('Connected to ' + socketAddress + ' for css reload')
		socket.on('updatecss', function() {
		
			//this forces a refresh of the stylesheet
			var newStyles = styleSheet.getAttribute('href').split('&updated=')[0] + '&updated=' + Math.random().toString(36).substring(7);

			//because your CSS is compiled on GET this forces a reload, ta da:
			styleSheet.setAttribute('href', newStyles);
		});
	});

	socket.on('reconnect_attempt', (attemptNumber) => {
		//try 3 times, otherwise keeps erroring
		if (attemptNumber > 2) {
			socket.close();
			console.log('Failed to connected to ' + socketAddress + ' for css reload')
		}
	});

})();
1.2.4

6 years ago

1.2.3

6 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago