npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

equivalen-electron-connect

v0.0.1

Published

Livereload tools for Electron development

Downloads

4

Readme

electron-connect Build Status npm version dependency

Utility tool to develop applications with Electron.

Using this in your Node.js scripts (e.g. gulpfile.js), you can livereload your Electron app.

It provides the following features:

  • start (and restart) Electron application.
  • reload renderer processes.
  • stop Electron application.

Install

Use npm:

npm install electron
npm install electron-connect --save-dev

Usage

electron-connect has server and client components. They communicate with each other using WebSocket. The server component manages Electron process and broadcasts reload event to client, and client components reload renderer's resources.

Server

Here is an example creating a server in gulpfile.

'use strict';

var gulp = require('gulp');
var electron = require('electron-connect').server.create();

gulp.task('serve', function () {

  // Start browser process
  electron.start();

  // Restart browser process
  gulp.watch('app.js', electron.restart);

  // Reload renderer process
  gulp.watch(['index.js', 'index.html'], electron.reload);
});

Client

A client can be created in either browser process or renderer process. Note: Please make sure it is not done in both.

  • RendererProcess
<html>
<body>
<!-- build:remove -->
<!-- Connect to server process -->
<script>require('electron-connect').client.create()</script>
<!-- end:build -->
</body>
</html>

Do you want to use this tool for only develop environment ? You can remove the <script> block in your gulpfile using gulp-useref.

  • BrowserProcess
'use strict';

var app = require('app');
var BrowserWindow = require('browser-window');
var client = require('electron-connect').client;

app.on('ready', function () {
  var mainWindow = new BrowserWindow({
    width: 400,
    height: 300
  });
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Connect to server process
  client.create(mainWindow);
});

If you want details, see example/simple.

API References

server.create([options])

  • options Object
  • electron Object. An electron module. Set it If you want to use your forked Electron.
  • useGlobalElectron Boolean. If set, electron-connect uses electron module installed globally (default: false).
  • path String. A path to your package.json file (default: process.cwd()).
  • port Number. WebSocket server port (default: 30080).
  • spawnOpt Object. Options for spawn.
  • logLevel Number. The granularity of the electron-connect logging in your prompt. 0 - warning only, 1 - warning and info only, 2 - all logs (default: 1).
  • stopOnClose Boolean. If set, closing last remaining window stops the electron application.

Returns a new ProcessManager object.

If neither electron nor useGlobalElectron option is set, electron-connect searches for electron module automatically.

  1. First, electron-connect searches electron installed locally.
  2. If not hit, electron-connect uses electron installed globally.

New in version 0.5.x and onwards : Now, ProcessManager's start(), restart() and stop() methods invoke callback with an argument that indicates the state of the electron process, which could be one of the following string values -

  • started
  • restarting
  • restarted
  • stopped

See example/stop-on-close, where you can find sample code that uses stopOnClose option and stopped state to shutdown gulp process gracefully.

Class: ProcessManager

start([args], [callback])

  • args String or Array. Additional arguments used when create a process.
  • callback Function

Starts a server and Electron application process.

restart([args], [callback])

  • args String or Array. Additional arguments used when create a process.
  • callback Function

Kills Electron process if it exsists, and starts new one.

This method is useful for callback of your browserProcess sourcecodes' change event.

reload([ids])

  • ids String or Array. A list of id of target client.

Emit reload event to target clients. Broadcasts reload event to all connected Client object if ids not set. This method does not kill any Electron processes.

This method is useful for callback of your rendererProcess sourcecodes' change event.

stop([callback])

  • callback Function

Kills Electron process and stops server.

on(eventName, callback)

  • eventName String
  • callback Function

Registers an eventhandler that gets invoked when an event is emitted by Client.sendMessage.

broadcast(eventName, [data])

  • eventName String. A message type.
  • data Object. A message data.

Broadcasts an event to all clients.

client.create([browserWindow], [options], [callback])

  • browserWindow Object. Optional, in rendererProcess only. Required, when client is created in browserProcess.
  • options Object
  • port Number. WebSocket server port (default: 30080) that client should connect to.
  • sendBounds Boolean
  • logLevel Number. See server.create([options]).logLevel.
  • callback Function

Creates a new Client object associated with browserWindow and connects to ProcessManager.

The browserWindow should be an Electron browser-window instance. Once a client is created and connected to the server, client can receive events (e.g. reload).

If sendBounds is set (default true), client sends a bounds object when browserWindow moves or resizes. And when ProcessManager.restart() is called, client recovers the bounds stored at server.

Class: Client

id

An identifier of this client. It is a same value browserWindow.id.

on(eventName, callback)

  • eventName String
  • callback Function

Registers an eventhandler that gets invoked, when an event is emitted by ProcessManager.broadcast.

sendMessage(eventName, [data])

  • eventName String. A message type.
  • data Object. A message data.

Emits an event to ProcessManager.

License

MIT