{"_id":"@dgateles/storybook-addon-html","_rev":"1-56ebaa650544b9241bd6c9b23efd574c","name":"@dgateles/storybook-addon-html","dist-tags":{"latest":"5.2.1"},"versions":{"5.2.0":{"name":"@dgateles/storybook-addon-html","version":"5.2.0","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/dgateles/storybook-addon-html.git"},"author":{"name":"Douglas"},"license":"AGPL-3.0-or-later","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs","format":"run-s format:*","format:eslint":"eslint --fix '**/*.{js,jsx}' || true","format:prettier":"prettier --write '**/*.{js,jsx,json,md,mdx,yml,html,css}'","lint":"eslint '**/*.{js,jsx}'"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.21.8","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@storybook/addon-essentials":"^7.0.12","@storybook/react":"^7.0.12","@types/node":"^16.0.0","auto":"^10.37.6","babel-loader":"^9.1.2","boxen":"^5.1.2","concurrently":"^6.5.1","dedent":"^0.7.0","eslint":"^8.29.0","eslint-plugin-import":"^2.26.0","eslint-plugin-react":"^7.31.11","npm-run-all":"^4.1.5","prettier":"^3.0.3","prop-types":"^15.8.1","react":"^17.0.2","react-dom":"^17.0.2","react-syntax-highlighter":"^15.5.0","rimraf":"^3.0.2","typescript":"^4.9.4","webpack":"^5.83.1","zx":"^1.15.2"},"peerDependencies":{"@storybook/addons":"^6.5.8 || ^7.0.12","@storybook/api":"^6.5.8 || ^7.0.12","@storybook/components":"^6.5.8 || ^7.0.12","@storybook/core-events":"^6.5.8 || ^7.0.12","@storybook/theming":"^6.5.8 || ^7.0.12","prettier":"^2.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","react-syntax-highlighter":"^15.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"],"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4"},"dependencies":{},"_id":"@dgateles/storybook-addon-html@5.2.0","gitHead":"f5d06815d6b50d74c4cc2f954c10b37b2c771192","bugs":{"url":"https://github.com/dgateles/storybook-addon-html/issues"},"homepage":"https://github.com/dgateles/storybook-addon-html#readme","_nodeVersion":"18.17.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-wNTDA8c8ULwyWnfc3dfh1D38AuzopTLLANkqrb5bhNhgUAl0emNxxd0/77qWMViPBqSsw/0P1OFs6GzuwW1myg==","shasum":"c7187c270c49272eed7d4a41476de4767426d23c","tarball":"https://registry.npmjs.org/@dgateles/storybook-addon-html/-/storybook-addon-html-5.2.0.tgz","fileCount":26,"unpackedSize":97202,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID000fKFY+dknEDQLo29/bg3lMKhPtZPBT8DHnjkd3DZAiBi3K6CWQniW2BdlQAvV+ycE7tqakSjwTLtldq9Zg7j9Q=="}]},"_npmUser":{"name":"dgateles","email":"dga.teles@gmail.com"},"directories":{},"maintainers":[{"name":"dgateles","email":"dga.teles@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-html_5.2.0_1695654822263_0.3284111146762039"},"_hasShrinkwrap":false},"5.2.1":{"name":"@dgateles/storybook-addon-html","version":"5.2.1","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/dgateles/storybook-addon-html.git"},"author":{"name":"Douglas"},"license":"AGPL-3.0-or-later","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs","format":"run-s format:*","format:eslint":"eslint --fix '**/*.{js,jsx}' || true","format:prettier":"prettier --write '**/*.{js,jsx,json,md,mdx,yml,html,css}'","lint":"eslint '**/*.{js,jsx}'"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.21.8","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@storybook/addon-essentials":"^7.0.12","@storybook/react":"^7.0.12","@types/node":"^16.0.0","auto":"^10.37.6","babel-loader":"^9.1.2","boxen":"^5.1.2","concurrently":"^6.5.1","dedent":"^0.7.0","eslint":"^8.29.0","eslint-plugin-import":"^2.26.0","eslint-plugin-react":"^7.31.11","npm-run-all":"^4.1.5","prettier":"^3.0.3","prop-types":"^15.8.1","react":"^17.0.2","react-dom":"^17.0.2","react-syntax-highlighter":"^15.5.0","rimraf":"^3.0.2","typescript":"^4.9.4","webpack":"^5.83.1","zx":"^1.15.2"},"peerDependencies":{"@storybook/addons":"^6.5.8 || ^7.0.12","@storybook/api":"^6.5.8 || ^7.0.12","@storybook/components":"^6.5.8 || ^7.0.12","@storybook/core-events":"^6.5.8 || ^7.0.12","@storybook/theming":"^6.5.8 || ^7.0.12","prettier":"^2.0.0","react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","react-syntax-highlighter":"^15.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"],"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4"},"dependencies":{},"_id":"@dgateles/storybook-addon-html@5.2.1","gitHead":"3ab34ed9a3f937a42e46bf3e296e578d0b438e91","bugs":{"url":"https://github.com/dgateles/storybook-addon-html/issues"},"homepage":"https://github.com/dgateles/storybook-addon-html#readme","_nodeVersion":"18.17.1","_npmVersion":"9.8.1","dist":{"integrity":"sha512-KAOSGUMPgrLJqpFLwZn5S+5HfvicrIGQy3oCYviCxniS9p4nGk12rW7XdJP5PaRCpg4WEQfK+OJgUJdj+5orMw==","shasum":"babc0fbf3cff068024040d6d47ac659a7dd54931","tarball":"https://registry.npmjs.org/@dgateles/storybook-addon-html/-/storybook-addon-html-5.2.1.tgz","fileCount":26,"unpackedSize":97322,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkrgsmSb77cZHWATNB5CBiEzLUjyHP8+HyJQ7KG67QCAiBTgjUYNqegKTF2Vg5+MNRPB6j/z7bd17KbFKSEWd0cxg=="}]},"_npmUser":{"name":"dgateles","email":"dga.teles@gmail.com"},"directories":{},"maintainers":[{"name":"dgateles","email":"dga.teles@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-html_5.2.1_1695656500646_0.4792626655504597"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-25T15:13:42.119Z","5.2.0":"2023-09-25T15:13:42.476Z","modified":"2023-09-25T15:41:41.007Z","5.2.1":"2023-09-25T15:41:40.830Z"},"maintainers":[{"name":"dgateles","email":"dga.teles@gmail.com"}],"description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","homepage":"https://github.com/dgateles/storybook-addon-html#readme","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/dgateles/storybook-addon-html.git"},"author":{"name":"Douglas"},"bugs":{"url":"https://github.com/dgateles/storybook-addon-html/issues"},"license":"AGPL-3.0-or-later","readme":"# Storybook Addon HTML\r\n\r\n*THIS ADDON IS A COPY FROM https://github.com/whitespace-se/storybook-addon-html WITH FIXES THAT NOT PROVIDED BY AUTHOR.*\r\n\r\nThis addon for Storybook adds a tab that displays the compiled HTML for each\r\nstory. It uses [highlight.js](https://highlightjs.org/) for syntax highlighting.\r\n\r\n\r\n\r\n## Getting Started\r\n\r\nInstall the addon and its dependencies.\r\n\r\nWith NPM:\r\n\r\n```sh\r\nnpm i --save-dev @dgateles/storybook-addon-html prettier react-syntax-highlighter\r\n```\r\n\r\nWith Yarn:\r\n\r\n```sh\r\nyarn add -D @dgateles/storybook-addon-html prettier react-syntax-highlighter\r\n```\r\n\r\n### Register addon\r\n\r\n```js\r\n// .storybook/main.js\r\n\r\nmodule.exports = {\r\n // ...\r\n addons: [\r\n \"@dgateles/storybook-addon-html\",\r\n // ...\r\n ],\r\n};\r\n```\r\n\r\n## Usage\r\n\r\nThe HTML is formatted with Prettier. You can override the Prettier config\r\n(except `parser` and `plugins`) by providing an object following the\r\n[Prettier API override format](https://prettier.io/docs/en/options.html) in the\r\n`html` parameter:\r\n\r\n```js\r\n// .storybook/preview.js\r\n\r\nexport const parameters = {\r\n // ...\r\n html: {\r\n prettier: {\r\n tabWidth: 4,\r\n useTabs: false,\r\n htmldgatelesSensitivity: \"strict\",\r\n },\r\n },\r\n};\r\n```\r\n\r\nYou can override the wrapper element selector used to grab the component HTML.\r\n\r\n```js\r\nexport const parameters = {\r\n html: {\r\n root: \"#my-custom-wrapper\", // default: #root\r\n },\r\n};\r\n```\r\n\r\nSome frameworks put comments inside the HTML. If you want to remove these you\r\ncan use the `removeComments` parameter. Set it to `true` to remove all comments\r\nor set it to a regular expression that matches the content of the comments you\r\nwant to remove.\r\n\r\n```js\r\nexport const parameters = {\r\n html: {\r\n removeComments: /^\\s*remove me\\s*$/, // default: false\r\n },\r\n};\r\n```\r\n\r\nYou can also use the `removeEmptyComments` parameter to remove only empty\r\ncomments like `` and ``.\r\n\r\n```js\r\nexport const parameters = {\r\n html: {\r\n removeEmptyComments: true, // default: false\r\n },\r\n};\r\n```\r\n\r\nYou can override the `showLineNumbers` and `wrapLines` settings for the syntax\r\nhighlighter by using the `highlighter` parameter:\r\n\r\n```js\r\nexport const parameters = {\r\n html: {\r\n highlighter: {\r\n showLineNumbers: true, // default: false\r\n wrapLines: false, // default: true\r\n },\r\n },\r\n};\r\n```\r\n\r\nAnother way of hiding unwanted code is to define the `transform` option. It\r\nallows you to perform any change to the output code, e.g. removing attributes\r\ninjected by frameworks.\r\n\r\n```js\r\nhtml: {\r\n transform: (code) => {\r\n // Remove attributes `_nghost` and `ng-reflect` injected by Angular:\r\n return code.replace(/(?:_nghost|ng-reflect).*?=\"[\\S\\s]*?\"/g, \"\");\r\n };\r\n}\r\n```\r\n","readmeFilename":"README.md"}