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

@builder.io/console-feed

v3.0.0-1

Published

A React component that displays console logs from the current page, an iframe or transported across a server

Downloads

1,350

Readme

console-feed

npm version CircleCI npm downloads Demo

A React component that displays console logs from the current page, an iframe or transported across a server.

Demo

Who's using it

Features

  • Console formatting - style and give your logs color, and makes links clickable
  • DOM nodes - easily inspect & expand HTML elements, with syntax highlighting
  • console.table - view your logs in a table format
  • Other console methods:
    • console.time - view the time in milliseconds it takes to complete events
    • console.assert - assert that a statement is truthy
    • console.count - count how many times something occurs
  • Inbuilt JSON serialization - Objects, Functions & DOM elements can be encoded / decoded to and from JSON

Install

yarn add console-feed
# or
npm install console-feed

Basic usage

CodeSandbox

import React from 'react'
import { Hook, Console, Decode } from 'console-feed'

class App extends React.Component {
  state = {
    logs: []
  }

  componentDidMount() {
    Hook(window.console, log => {
      this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))
    })

    console.log(`Hello world!`)
  }

  render() {
    return (
      <div style={{ backgroundColor: '#242424' }}>
        <Console logs={this.state.logs} variant="dark" />
      </div>
    )
  }
}

Props for <Console /> component

logs: Log[]

An array consisting of Log objects. Required

filter?: Methods[]

Filter the logs, only displaying messages of certain methods.

variant?: 'light' | 'dark'

Sets the font color for the component. Default - light

style?: Styles

Defines the custom styles to use on the component - see Styles.d.ts

searchKeywords?: string

A string value to filter logs

logFilter?: Function

If you want to use a custom log filter function, you can provide your own implementation

Log methods

Each log has a method assigned to it. The method is used to determine the style of the message and for the filter prop.

type Methods =
  | 'log'
  | 'warn'
  | 'error'
  | 'info'
  | 'debug'
  | 'command'
  | 'result'

Log object

A log object consists of the following:

type Logs = Log[]

interface Log {
  // The log method
  method: Methods
  // The arguments passed to console API
  data: any[]
}

Serialization

By default when you use the Hook() API, logs are serialized so that they will safely work with JSON.stringify. In order to restore a log back to format compatible with the <Console /> component, you need to call the Decode() method.

Disabling serialization

If the Hook function and the <Console /> component are on the same origin, you can disable serialization to increase performance.

Hook(
  window.console,
  log => {
    this.setState(({ logs }) => ({ logs: [...logs, log] }))
  },
  false
)

Developing

To run console-feed locally, simply run:

yarn
yarn start
yarn test:watch

Head over to http://localhost:3000 in your browser, and you'll see the demo page come up. After you make changes you'll need to reload, but the jest tests will automatically restart.