{"_id":"@alican.kuklaci/console-feed","name":"@alican.kuklaci/console-feed","dist-tags":{"latest":"3.5.0"},"versions":{"3.5.0":{"name":"@alican.kuklaci/console-feed","version":"3.5.0","main":"lib/index.js","types":"lib/index.d.ts","description":"A React component that displays console logs from the current page, an iframe or transported across a server","scripts":{"prepack":"yarn build","build":"tsc -p ./tsconfig.build.json --declaration && for file in src/**/*.d.ts; do cp $file ${file/src/lib}; done","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","release":"yarn test && yarn clean && yarn build && yarn publish && yarn clean","precommit":"pretty-quick --staged","test":"jest --verbose","test:coverage":"jest --coverage","test:watch":"jest --watch"},"dependencies":{"@emotion/core":"^10.0.10","@emotion/styled":"^10.0.12","emotion-theming":"^10.0.10","linkifyjs":"^2.1.6","react-inspector":"^5.1.0","ts-jest":"^29.1.1"},"devDependencies":{"@types/enzyme":"^3.1.9","@types/jest":"^22.2.3","@types/linkifyjs":"2.1.3","@types/react":"^16.9.50","@types/react-dom":"^16.9.8","enzyme":"^3.3.0","enzyme-adapter-react-16":"^1.1.1","husky":"^0.14.3","immutability-helper":"^2.6.6","lodash":"^4.17.5","nwb":"0.21.x","prettier":"^2.1.2","pretty-quick":"^1.6.0","react":"^16.13.1","react-dom":"^16.13.1","ts-loader":"^3.5.0","typescript":"^5.1.6"},"jest":{"setupTestFrameworkScriptFile":"./scripts/test.js","moduleFileExtensions":["ts","tsx","js"],"transform":{"^.+\\.tsx?$":"ts-jest"},"testMatch":["**/__tests__/*.spec.(ts|tsx|js)"]},"peerDependencies":{"react":"^15.x || ^16.x || ^17.x || ^18.x"},"keywords":["devtools","inspector","object","object-inspector","react","react-component","reactjs","table","table-inspector","table-view","tableview","tree","tree-view","treeview","ui","view"],"homepage":"https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html","repository":{"type":"git","url":"git+https://github.com/samdenty/console-feed.git"},"bugs":{"url":"https://github.com/samdenty/console-feed/issues"},"author":{"name":"Sam Denty","email":"samddenty@gmail.com","url":"http://github.com/samdenty"},"license":"MIT","gitHead":"a0664524a664fe6cb2aaaa103f80c5fda7b3e764","_id":"@alican.kuklaci/console-feed@3.5.0","_nodeVersion":"20.0.0","_npmVersion":"9.6.4","dist":{"integrity":"sha512-JCx1bJZXvvf2vJ1v20z/xHJ4pWGoBNG4SB54tqSGjcA/r47XZoPOK0BCSymw7FapEpbj9Emo6Y8aewGCPtsuaw==","shasum":"c1692fef3ff968e09696d2166a4d578beef9fdba","tarball":"https://registry.npmjs.org/@alican.kuklaci/console-feed/-/console-feed-3.5.0.tgz","fileCount":78,"unpackedSize":191946,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+RH/tg1mraBDI2ym/pgklXOfASnrcpgXmR4twY3mEhAIhAJn+S6yR5O1wcx67pR4U6sRQkbgQw4CtRzeYRzQDwL3w"}]},"_npmUser":{"name":"alican.kuklaci","email":"alican.kuklaci@nearlineconsulting.com"},"directories":{},"maintainers":[{"name":"alican.kuklaci","email":"alican.kuklaci@nearlineconsulting.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/console-feed_3.5.0_1688318970020_0.6100199696215365"},"_hasShrinkwrap":false}},"time":{"created":"2023-07-02T17:29:29.923Z","3.5.0":"2023-07-02T17:29:30.225Z","modified":"2023-07-02T17:29:30.520Z"},"maintainers":[{"name":"alican.kuklaci","email":"alican.kuklaci@nearlineconsulting.com"}],"description":"A React component that displays console logs from the current page, an iframe or transported across a server","homepage":"https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html","keywords":["devtools","inspector","object","object-inspector","react","react-component","reactjs","table","table-inspector","table-view","tableview","tree","tree-view","treeview","ui","view"],"repository":{"type":"git","url":"git+https://github.com/samdenty/console-feed.git"},"author":{"name":"Sam Denty","email":"samddenty@gmail.com","url":"http://github.com/samdenty"},"bugs":{"url":"https://github.com/samdenty/console-feed/issues"},"license":"MIT","readme":"Fork from https://github.com/samdenty/console-feed}\n\n\n\n# console-feed [![Sponsors](https://img.shields.io/github/sponsors/samdenty?label=Sponsors)](https://github.com/sponsors/samdenty)\n\n[Sponsor this project](https://github.com/sponsors/samdenty)\n\n[![npm version](https://img.shields.io/npm/v/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed)\n[![npm downloads](https://img.shields.io/npm/dm/console-feed.svg?style=flat-square)](https://www.npmjs.com/package/console-feed)\n[![Demo](https://img.shields.io/badge/StackBlitz-Demo-yellow.svg?style=flat-square)](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)\n\nA React component that displays console logs from the current page, an iframe or transported across a server.\n\n![Demo](https://user-images.githubusercontent.com/13242392/38513414-1bc32870-3c26-11e8-9a8f-0989d2142b1c.png)\n\n## Alternative to `console-feed`\n\nhttps://github.com/liriliri/chii supports the embedding the entire Chrome devtools.\n\nhttps://github.com/tachibana-shin/vue-console-feed is a fork for Vue.JS\n\n## Who's using it\n\n- [CodeSandbox.io](https://codesandbox.io)\n- [Framer](https://www.framer.com)\n- [Plunker](https://plnkr.co)\n- [P5.js Editor](https://editor.p5js.org)\n- [Builder.io](https://builder.io)\n- [Utopia](https://utopia.app/project)\n- [facebook/flipper](https://github.com/facebook/flipper)\n- [Effector playground](https://share.effector.dev/)\n\n## Features\n\n- **Console formatting** - [style and give your logs color](https://stackoverflow.com/questions/22155879/how-do-i-create-formatted-javascript-console-log-messages), and makes links clickable\n- **DOM nodes** - easily inspect & expand HTML elements, with syntax highlighting\n- **`console.table`** - view your logs in a table format\n- **Other console methods**:\n  - `console.time` - view the time in milliseconds it takes to complete events\n  - `console.assert` - assert that a statement is truthy\n  - `console.count` - count how many times something occurs\n- **Inbuilt JSON serialization** - Objects, Functions & DOM elements can be encoded / decoded to and from JSON\n\n## Install\n\n```sh\nyarn add console-feed\n# or\nnpm install console-feed\n```\n\n## Basic usage\n\n[StackBlitz](https://stackblitz.com/github/samdenty/console-feed?file=demo%2Fpublic%2Fiframe.html)\n\n```js\nimport React from 'react'\nimport { Hook, Console, Decode } from 'console-feed'\n\nclass App extends React.Component {\n  state = {\n    logs: [],\n  }\n\n  componentDidMount() {\n    Hook(window.console, (log) => {\n      this.setState(({ logs }) => ({ logs: [...logs, Decode(log)] }))\n    })\n\n    console.log(`Hello world!`)\n  }\n\n  render() {\n    return (\n      <div style={{ backgroundColor: '#242424' }}>\n        <Console logs={this.state.logs} variant=\"dark\" />\n      </div>\n    )\n  }\n}\n```\n\nOR with hooks:\n\n```js\nimport React, { useState, useEffect } from 'react'\nimport { Console, Hook, Unhook } from 'console-feed'\n\nconst LogsContainer = () => {\n  const [logs, setLogs] = useState([])\n\n  // run once!\n  useEffect(() => {\n    const hookedConsole = Hook(\n      window.console,\n      (log) => setLogs((currLogs) => [...currLogs, log]),\n      false\n    )\n    return () => Unhook(hookedConsole)\n  }, [])\n\n  return <Console logs={logs} variant=\"dark\" />\n}\n\nexport { LogsContainer }\n```\n\n## Props for `<Console />` component\n\n### `logs: Log[]`\n\nAn array consisting of Log objects. Required\n\n### `filter?: Methods[]`\n\nFilter the logs, only displaying messages of certain methods.\n\n### `variant?: 'light' | 'dark'`\n\nSets the font color for the component. Default - `light`\n\n### `styles?: Styles`\n\nDefines the custom styles to use on the component - see [`Styles.d.ts`](https://github.com/samdenty/console-feed/blob/master/src/definitions/Styles.d.ts)\n\n### `searchKeywords?: string`\n\nA string value to filter logs\n\n### `logFilter?: Function`\n\nIf you want to use a custom log filter function, you can provide your own implementation\n\n## Log methods\n\nEach log has a method assigned to it. The method is used to determine the style of the message and for the `filter` prop.\n\n```ts\ntype Methods =\n  | 'log'\n  | 'debug'\n  | 'info'\n  | 'warn'\n  | 'error'\n  | 'table'\n  | 'clear'\n  | 'time'\n  | 'timeEnd'\n  | 'count'\n  | 'assert'\n```\n\n## `Log` object\n\nA log object consists of the following:\n\n```ts\ntype Logs = Log[]\n\ninterface Log {\n  // The log method\n  method: Methods\n  // The arguments passed to console API\n  data: any[]\n}\n```\n\n## Serialization\n\nBy 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.\n\n### Disabling serialization\n\nIf the `Hook` function and the `<Console />` component are on the same origin, you can disable serialization to increase performance.\n\n```js\nHook(\n  window.console,\n  (log) => {\n    this.setState(({ logs }) => ({ logs: [...logs, log] }))\n  },\n  false\n)\n```\n\n### Limiting serialization\n\nYou can limit the number of keys/elements included when serializing objects/arrays.\n\n```js\nHook(\n  window.console,\n  (log) => {\n    this.setState(({ logs }) => ({ logs: [...logs, log] }))\n  },\n  true,\n  100 // limit to 100 keys/elements\n)\n```\n\n---\n\n## Developing\n\nTo run `console-feed` locally, simply run:\n\n```bash\nyarn\nyarn start\nyarn test:watch\n```\n\nHead 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.\n","readmeFilename":"README.md"}