{"_id":"@acciosolutions/react-logviewer","_rev":"1-18fe30cc662b80f13480770f56490dc5","name":"@acciosolutions/react-logviewer","dist-tags":{"latest":"5.0.2"},"versions":{"5.0.0":{"name":"@acciosolutions/react-logviewer","version":"5.0.0","description":"React Lazy LogViewer","keywords":["react","log","viewer","logviewer","lazy","lazylog"],"author":{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"},"contributors":[{"name":"Eli Perelman","url":"https://github.com/eliperelman"},{"name":"Hassan Ali","url":"http://hassanali.me"},{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"}],"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/melloware/react-logviewer.git"},"bugs":{"url":"https://github.com/melloware/react-logviewer/issues"},"homepage":"https://melloware.github.io/react-logviewer/","license":"MPL-2.0","scripts":{"test":"jest","dev":"storybook dev -p 6006","storybook":"npm run dev","build-storybook":"storybook build -o docs/","prepack":"npm run build","build":"rimraf dist && rollup -c"},"dependencies":{"hotkeys-js":"^3.11.2","mitt":"^3.0.1","react-string-replace":"^1.1.1","react-virtualized-auto-sizer":"^1.0.20","react-window":"^1.8.9"},"devDependencies":{"@babel/core":"^7.22.9","@babel/preset-env":"^7.22.9","@babel/preset-react":"^7.22.5","@babel/preset-typescript":"^7.22.5","@rollup/plugin-commonjs":"^25.0.3","@rollup/plugin-node-resolve":"^15.1.0","@rollup/plugin-typescript":"^11.1.2","@storybook/addon-actions":"^7.1.1","@storybook/addon-essentials":"^7.1.1","@storybook/addon-links":"^7.1.1","@storybook/preset-scss":"^1.0.3","@storybook/react":"^7.1.1","@storybook/react-webpack5":"^7.1.1","@types/react":"^18.2.17","@types/react-window":"^1.8.5","babel-jest":"^29.6.2","babel-loader":"^9.1.3","css-loader":"^6.8.1","html-webpack-plugin":"^5.5.3","identity-obj-proxy":"^3.0.0","jest":"^29.6.2","react":"^18.2.0","react-dom":"^18.2.0","rollup":"2.79.1","rollup-plugin-dts":"4.2.3","rollup-plugin-postcss":"^4.0.2","sass":"^1.64.1","sass-loader":"^13.3.2","storybook":"^7.1.1","style-loader":"^3.3.3","typescript":"^4.9.5","webpack":"^5.88.2"},"peerDependencies":{"react":"^17.1.1 || ^18.0.0","react-dom":"^17.1.1 || ^18.0.0"},"gitHead":"97340726e062653b0e5948f2ac753f244644ec1f","_id":"@acciosolutions/react-logviewer@5.0.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-6uBYhCBoWsw4EXFtQMhKzDjAZVU2U3LPmDILKn46sk+8SdUhMGZg/FzCSAaj8vwsHHVK9SJs4QcslHGL/awQBg==","shasum":"dcc1a92ade34d6fb1cd2122f426316a6f1b3b059","tarball":"https://registry.npmjs.org/@acciosolutions/react-logviewer/-/react-logviewer-5.0.0.tgz","fileCount":54,"unpackedSize":2169854,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyX0hjRHxHoMrdoT6abpT0FT0kVF4x0BtmQz+9AkpX3gIhAMn6kpB/L5GvIflYK5sDkxO54RT7LRTORW0FvHZuA7nq"}]},"_npmUser":{"name":"christiancuri","email":"c.christiancuri@gmail.com"},"directories":{},"maintainers":[{"name":"christiancuri","email":"c.christiancuri@gmail.com"},{"name":"fabio.asatru","email":"fabio.asatru@gmail.com"},{"name":"matheus-ale","email":"m.matheus.ale@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-logviewer_5.0.0_1693889208512_0.8560054543807933"},"_hasShrinkwrap":false},"5.0.2":{"name":"@acciosolutions/react-logviewer","version":"5.0.2","description":"React Lazy LogViewer","keywords":["react","log","viewer","logviewer","lazy","lazylog"],"author":{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"},"contributors":[{"name":"Eli Perelman","url":"https://github.com/eliperelman"},{"name":"Hassan Ali","url":"http://hassanali.me"},{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"}],"main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","repository":{"type":"git","url":"git+https://github.com/melloware/react-logviewer.git"},"bugs":{"url":"https://github.com/melloware/react-logviewer/issues"},"homepage":"https://melloware.github.io/react-logviewer/","license":"MPL-2.0","scripts":{"test":"jest","dev":"storybook dev -p 6006","storybook":"npm run dev","build-storybook":"storybook build -o docs/","prepack":"npm run build","build":"rimraf dist && rollup -c"},"dependencies":{"hotkeys-js":"^3.11.2","mitt":"^3.0.1","react-string-replace":"^1.1.1","react-virtualized-auto-sizer":"^1.0.20","react-window":"^1.8.9"},"devDependencies":{"@babel/core":"^7.22.9","@babel/preset-env":"^7.22.9","@babel/preset-react":"^7.22.5","@babel/preset-typescript":"^7.22.5","@rollup/plugin-commonjs":"^25.0.3","@rollup/plugin-node-resolve":"^15.1.0","@rollup/plugin-typescript":"^11.1.2","@storybook/addon-actions":"^7.1.1","@storybook/addon-essentials":"^7.1.1","@storybook/addon-links":"^7.1.1","@storybook/preset-scss":"^1.0.3","@storybook/react":"^7.1.1","@storybook/react-webpack5":"^7.1.1","@types/react":"^18.2.17","@types/react-window":"^1.8.5","babel-jest":"^29.6.2","babel-loader":"^9.1.3","css-loader":"^6.8.1","html-webpack-plugin":"^5.5.3","identity-obj-proxy":"^3.0.0","jest":"^29.6.2","react":"^18.2.0","react-dom":"^18.2.0","rollup":"2.79.1","rollup-plugin-dts":"4.2.3","rollup-plugin-postcss":"^4.0.2","sass":"^1.64.1","sass-loader":"^13.3.2","storybook":"^7.1.1","style-loader":"^3.3.3","typescript":"^4.9.5","webpack":"^5.88.2"},"peerDependencies":{"react":"^17.1.1 || ^18.0.0","react-dom":"^17.1.1 || ^18.0.0"},"gitHead":"97340726e062653b0e5948f2ac753f244644ec1f","_id":"@acciosolutions/react-logviewer@5.0.2","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-5+UPRvUQeHdE5SMOesXImMsFkr6O6+9QX7INVcAn0rLzEwziMG/F+ESzO7092p6OeNjC22Gb9JdBAuzQ1Q1tNg==","shasum":"24ab7f3fe0ea0748a038393ac976137ea42d087f","tarball":"https://registry.npmjs.org/@acciosolutions/react-logviewer/-/react-logviewer-5.0.2.tgz","fileCount":54,"unpackedSize":2170216,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjRhDEAhbv92rK8W+ddPoq29aWNvanijBGL8YiW1WHhQIhAJe5jfFfVgbpZVAS2FQdT3ksGfu26hUoOrGdUmmBsfdF"}]},"_npmUser":{"name":"christiancuri","email":"c.christiancuri@gmail.com"},"directories":{},"maintainers":[{"name":"christiancuri","email":"c.christiancuri@gmail.com"},{"name":"fabio.asatru","email":"fabio.asatru@gmail.com"},{"name":"matheus-ale","email":"m.matheus.ale@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-logviewer_5.0.2_1693894472847_0.12186703311554825"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-05T04:46:48.425Z","5.0.0":"2023-09-05T04:46:48.808Z","modified":"2023-09-05T06:14:33.345Z","5.0.2":"2023-09-05T06:14:33.094Z"},"maintainers":[{"name":"christiancuri","email":"c.christiancuri@gmail.com"},{"name":"fabio.asatru","email":"fabio.asatru@gmail.com"},{"name":"matheus-ale","email":"m.matheus.ale@gmail.com"}],"description":"React Lazy LogViewer","homepage":"https://melloware.github.io/react-logviewer/","keywords":["react","log","viewer","logviewer","lazy","lazylog"],"repository":{"type":"git","url":"git+https://github.com/melloware/react-logviewer.git"},"contributors":[{"name":"Eli Perelman","url":"https://github.com/eliperelman"},{"name":"Hassan Ali","url":"http://hassanali.me"},{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"}],"author":{"name":"Melloware","email":"mellowaredev@gmail.com","url":"https://github.com/melloware"},"bugs":{"url":"https://github.com/melloware/react-logviewer/issues"},"license":"MPL-2.0","readme":"[](https://www.npmjs.com/package/%40melloware/react-logviewer)\n[](https://opensource.org/licenses/MPL-2.0)\n\n \n\n# React LogViewer\n\nReact component that loads and views remote text in the browser lazily and efficiently. Logs can be loaded from static text, a URL, or a WebSocket and including ANSI highlighting.\nForked from [mozilla-frontend-infra/react-lazylog](https://github.com/mozilla-frontend-infra/react-lazylog).\n\n## Features\n\n- Efficient scrolling performance thanks to [react-window](https://github.com/bvaughn/react-window)\n- Able to load large files upwards of 100MB without crashing the browser\n- Parses, colorizes, and styles ANSI escapes within content\n- Supports remote text files as well as chunked/streamed responses\n- Line highlighting\n- Customizable styling\n- Searching through log\n- Works in latest browser versions, including iOS Safari and Android Chrome\n- TypeScript support\n\n## Demo\n\nYou can see a running demonstration at https://melloware.github.io/react-logviewer/ which is built from StoryBook.\n\n## Installation\n\nInstall the plugin with npm or yarn:\n\n```shell\n$ npm i --save @melloware/react-logviewer\n```\n\n## Getting started\n\nThe core component from react-logviewer is `LazyLog`. There is also a higher-order component (HOC) for\nfollowing logs until scroll. This module can be required via ES imports, CommonJS require, or UMD.\n\n```js\nimport { LazyLog } from \"@melloware/react-logviewer\";\n\n// using require\nconst { LazyLog } = require(\"@melloware/react-logviewer\");\n```\n\n## ``\n\n### Usage\n\nAfter importing a component, it can be rendered with the required `url` prop:\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { LazyLog } from \"@melloware/react-logviewer\";\n\nrender(, document.getElementById(\"root\"));\n```\n\nBy default the `LazyLog` will expand to fill its container, so ensure this container has valid dimensions and layout.\nIf you wish to have fixed dimensions, change the `height` and `width` props.\n\nIf you are going to be rendering a complete file, or an endpoint which can be downloaded all at once, use the\n`` component as-is for better overall performance at the expense of slightly longer upfront load time.\n\nIf you are going to be requesting a streaming or chunked response, use the `` component with the\n`stream` prop of `true` for quicker upfront rendering as content can be decoded as it arrives. |\n\n## ``\n\n`ScrollFollow` is a higher-order component (HOC) that aims to simplify toggling a `LazyLog`'s\n\"follow\" functionality based on user scrolling.\n\n### Usage\n\nThe `ScrollFollow` component accepts a render prop function which should return a component to render based on the\nfunction's arguments.\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport { LazyLog, ScrollFollow } from \"@melloware/react-logviewer\";\n\nrender(\n (\n \n )}\n />,\n document.getElementById(\"root\"),\n);\n```\n\n## Styling\n\nAll of the components exposed from react-lazylog use CSS modules to contain its styles to each individual component. If\nyou wish to override these styles, there are a few techniques you can use.\n\n### `style` and `containerStyle`\n\nFor the core container of ``, you can pass a `style` object prop to affect many styles.\nFor affecting the look or behavior of the scrollable region of these components, use the `containerStyle` prop with a\nstyling object.\n\n### `defaultProps.style`\n\nFor many react-logviewer components, continually passing varied styling objects is tedious. To make this simpler, you can\noverride the `defaultProps.style` of any desired component to override styles of that component. For example:\n\n```jsx\nimport Line from \"@melloware/react-logviewer/build/Line\";\n\n// Use defaultProps.style to set the style for an internal component\nLine.defaultProps.style = {\n color: \"green\",\n};\n```\n\n**Note: overriding the ANSI colors and styles is currently undocumented, and will probably need some source-diving to\nfigure out. I would gladly accept a pull request that could improve the styling API.**\n\n### CSS stylesheets\n\nIf you are using CSS stylesheets, you can target the main virtual `LazyList` component with the `react-lazylog`\nclass name. From there you can target the individual `div` lines, `a` line numbers, or `span` line content.\n\n## Sub-components\n\nreact-lazylog uses a number of sub-components internally to render individual parts of the log-viewing component:\n\n### ``\n\nA single row of content, containing both the line number and any text content within the line.\n\n### ``\n\nThe line number of a single line. The anchor contained within is interactive, and will highlight the entire line upon\nselection.\n\n### ``\n\nThe container of all the individual pieces of content that is on a single line. May contain one or more `LinePart`s\ndepending on ANSI parsing.\n\n### ``\n\nAn individual segment of text within a line. When the text content is ANSI-parsed, each boundary is placed within its\nown `LinePart` and styled separately (colors, text formatting, etc.) from the rest of the line's content.\n\n## Technology\n\n- [React Window](https://github.com/bvaughn/react-window) for efficiently rendering large lines of data\n- `fetch` API for efficiently requesting data with array buffers and binary streams\n- [ansiparse](https://www.npmjs.com/package/ansiparse) for nice log styling, like Travis\n- [mitt](https://www.npmjs.com/package/mitt) for dead-simple events to manage streaming lifecycle\n- [Immutable](https://www.npmjs.com/package/immutable) for efficiently storing and managing very large collections of lines and highlight ranges\n- `Uint8Array` for dealing with text content as binary, allows for conditionally rendering partial data and decoding everything without crashing your browser\n\n## Development and Contributing\n\n- Fork and clone this repo.\n- Install the dependencies with `npm`.\n- Start the development server with `npm run dev`. This will launch a StoryBook instance.\n Open a browser to http://localhost:6006 to preview the React components.\n- Use CTRL-C to exit the StoryBook.\n- Use `npm run build` to generate the compiled component for publishing to npm.\n \n## Publishing\n\nAdjust the version in the `package.json` if necessary, then\n\n```bash\nnpm login\n# This will run npm run build automatically\nnpm publish --access public\n```\n\nThen upload code to github, create tag & release.\n\n## License\n\nLicensed under the [Mozilla Public License 2.0](https://opensource.org/license/mpl-2-0/) license.\n\n`SPDX-License-Identifier: Mozilla Public License 2.0`\n","readmeFilename":"README.md"}