domsole

DOMSOLE.Log

Philosophy

DOM Logging components for React. For developers who heavily use console.logs. The idea is to provide react component as test harnesses, logs and development time utilites in component format. This is the dev flow this component is intended for.

When starting a new component, you can just start by making sure the data is there:

import { Domsole } from 'domsole';

const MyComponent = (props)=>(<>
  <Domsole.Log props={props}>
<>)

Then you can gradually clean it up

const MyComponent = (props)=>(<>
  <Domsole.Log props={getTitle(props)}>
  <Domsole.Log props={getCardData(props)}>
<>)

And replace it with real components as you write 'em.

const MyComponent = (props)=>(<>
  <Title>{getTitle(props)}</Title>>
  <Domsole.Log props={getCardData(props)}>
<>)

I'm still exploring the possible uses for the approach.

Start with your own component:

You probably don't need this, just copy/paste this snippet to log props on DOM:

export const Log = props => (<code>
        <pre>{JSON.stringify(props, null, 2)}</pre>
      </code>
  );
};

Domsole.Log

Domsole.Log stringifies props or objects to dom.

<Domsole.Count data={...props}> 

Domsole.Count

Domsole.Count counts the renders and re-renders of the component instance. To count rerenders, provide your component's internal state and props as a prop. The prop name does not matter.

<Domsole.Count data={{...props, ...state}> 

Installation

npm install domsole --save-developers

Roadmap

• Assert, Table, Dir and logging history, not just counting rerenders.