Problems with HTML preview addon since v6.1.21

[jeanfredrik]

I’m the main author of HTML preview addon @whitespace/storybook-addon-html and we have received several reports that the addon no longer works since storybook@6.1.21. I have tried to solve the issue (see whitespace-se/storybook-addon-html#42), but new issues have opened related to storybook@6.1.21 and storybook@6.2. I can see in the changelog entry for 6.1.21 that the transpilation of Prettier has been changed to work with IE11, but I don’t know if that is related.

Long story short, I need some assistance. I hope someone in the Storybook team or the community can point me in the right direction or help out in some other way 🙏

[shilman]

@jeanfredrik happy to help! i'll take a quick look and see if I can figure out what's going on and we can go from there.

[jeanfredrik]

It seems like this is no longer an active issue. Thank you for taking a look!

[Grienauer]

What was the motivation to close this issue? On newer versions, the plugin does still not work and I think it is good to have an issue for that and not close it if there is no solution jet.
thank you!

[mpalpha]

This was my workaround using yarn with storybook v6.3.6 and webpack v4 or v5.

Fix Prettier dependency conflict

in package.json move prettier to a peer dependency:

  "peerDependencies": {
    "prettier": "2.0.5",
  }

Fix Prettier Critical Dependency Warning

in /.storybook/main.js add an alias

module.exports = {
...
alias: { prettier$: require.resolve('prettier/standalone') },
...

---

This also fixed my stenciljs/html source formatter for @storybook/addon-docs.

@storybook/addon-docsSource Stenciljs/Raw HTML source Formatter

add a new file /.storybook/render.html.js:

import { renderToStaticMarkup } from 'react-dom/server';
import { AllHtmlEntities } from 'html-entities';
import prettier from 'prettier/standalone';
import prettierHTML from 'prettier/parser-html';

export default (src, { storyFn }) =>
  prettier.format(new AllHtmlEntities().decode(renderToStaticMarkup(storyFn().strings || storyFn() || src)), {
    htmlWhitespaceSensitivity: 'ignore',
    parser: 'html',
    plugins: [prettierHTML],
  });

in /.storybook/preview.js add the following @storybook/addon-docs configuration:

import renderHTML from './render.html';

export const parameters = {
  docs: {
    transformSource: renderHTML,
  }
}

[maddesigns]

This was my workaround using yarn with storybook v6.3.6 and webpack v4 or v5.

Fix Prettier dependency conflict

in package.json move prettier to a peer dependency:

  "peerDependencies": {
    "prettier": "2.0.5",
  }

Fix Prettier Critical Dependency Warning

in /.storybook/main.js add an alias

module.exports = {
...
alias: { prettier$: require.resolve('prettier/standalone') },
...

this fixed it for me! Thanks @mpalpha!

[dylanjmcdonald]

@storybook/addon-docsSource Stenciljs/Raw HTML source Formatter

add a new file /.storybook/render.html.js:

import { renderToStaticMarkup } from 'react-dom/server';
import { AllHtmlEntities } from 'html-entities';
import prettier from 'prettier/standalone';
import prettierHTML from 'prettier/parser-html';

export default (src, { storyFn }) =>
  prettier.format(new AllHtmlEntities().decode(renderToStaticMarkup(storyFn().strings || storyFn() || src)), {
    htmlWhitespaceSensitivity: 'ignore',
    parser: 'html',
    plugins: [prettierHTML],
  });

in /.storybook/preview.js add the following @storybook/addon-docs configuration:

import renderHTML from './render.html';

export const parameters = {
  docs: {
    transformSource: renderHTML,
  }
}

@mpalpha It looks like storyFn is no longer passed through to transformSource. Do you know of a way to obtain the current storyFn and args within transformSource now? The new storyContext param does not appear to have these.

Ideally I would like to be able to generate new story source after story controls have been changed, but I'm not sure how to do that now with the latest storyContext param change.

[mpalpha]

For Stencil.js v2.9.0 with Storybook v6.3.12 I use the following in .storybook/transformSource.js

import { render } from 'lit-html';
import { isTemplateResult } from 'lit-html/directive-helpers.js';
import { html_beautify as htmlBeautify } from 'js-beautify/js';

const renderStory = (storyFn) => {
  if (isTemplateResult(storyFn())) {
    const div = document.createElement('div');

    render(storyFn(), div); // render stencil component

    return div.innerHTML // get rendered source
      .replace(/<br>/g, '\n') // convert line breaks to new lines
      .replace(/(<!---->|<style((.|\s)*?)<\/style>|="(true|false)")/gim, ''); // clean comments empty lines and tags
  }

  return storyFn();
};

export default (src, { storyFn }) =>
  htmlBeautify(renderStory(storyFn) || src, {
    brace_style: 'end-expand',
    wrap_attributes: 'force-expand-multiline',
    wrap_attributes_indent_size: 3,
  }); // format and force multiline attributes;

In .storybook/preview.js

at the top

import { addParameters } from '@storybook/web-components';
import transformSource from './transformSource';

and below

addParameters({
  docs: {
    source: { state: 'open' },
    transformSource,
  }
});

[zoephilipps]

Adding this to package.json, and then starting Storybook with --no-manager-cache fixed the issue for me:

{
  "resolutions": {
    "prettier": "2.3.0"
  }
}

I think maybe the plugin fails when there are multiple copies of prettier installed? 2.3.0 worked for us; ymmv. 2.0.5 brought the HTML tab back, but caused prettier not to format the HTML code.

[jeanfredrik]

Please try upgrading to v5.x of the addon and install prettier and react-syntax-highlighter as direct dependencies (check the readme). It should fix the problem with conflicting Prettier versions because it's now only a peer dependency.

[bohdan-vasylenko]

was struggling to run addon with storybook v6.2.* - the HTML tab just didn't appear in addons tab no matter what. The issue was gone after migrating to storybook v7