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

electron-renderer-terminal

v1.0.7

Published

This is tools for send stream meessage from Electron main to renderer DOM view

Downloads

18

Readme

Electron-renderer-terminal


Why & for what ?

I was created node application server and have plan to let another people to manage this server then electron app was created for an easy on next administrator. One of issue, how to let new guy to check error like access terminal ... it have some node module have ability to stream data base on socket.io but electron already have ipc to communicate between main and renderer process then solution to serve this requirement was create from ipc and inferno ( Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server ) and result of this merge was this module.

Install

npm install --save electron-renderer-terminal

Usage

root/main.js

const {app, BrowserWindow, ipcMain} = require('electron');
*
*
*
ipcMain.on('ChanelName', (e, arg) => {
    .
    .
    .
    ==================================

    you need to set some method to stream data to renderer
    may used pipe / setInterval / watch with tail

    ChanelName => you can assign any but it need to match with renderer process that was defined in this plugin 

    e => event will automate create by this plugin when will was called

    arg => was predife as "ping"

    ==================================
});

root/view/src/render.js

const { console_log }  = require('electron-renderer-terminal');

console_log('ChanelName','app','console','line', 10 );

======================================

That's it, it was 2 lines of coding to let it work in render.js detail as below

ChanelName (string) => need to be same that call from main.js

app (string) => DOM id <div id="app"></div> this element need to be coding in your index.html

console (string ) => vDOM className (this DOM will automate create) 

line ( string ) => vDOM className and this element will stroe message from Main process

10 => this is number of line that we would like to have in our console

    Final result as below

    <div id="app">
        <div class="console">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            .
            .
            // until number of line that we was defined in next arg
        </div>
    </div>

==================================

root/view/index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>IPC & Inferno App</title>
        <link href="view/src/css.index.css" rel="stylesheet">
        .
        .
        .
    </head>
    <body>
        .
        .
        <div id="app"></div>
        .
        .
        <script src="view/src/render.js"></script>
    </body>
</html>

==============================
just two line of coding