HTML: Dynamic source snippets

[pzuraq]

Issue: #12755

Adds dynamic source to the HTML 'framework' package.

What I did

Emits the rendered HTML if the HTML output was a string, otherwise does nothing. Output is also dedented by default. Mostly based on this PR: #15337

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps? -
• Does this need an update to the documentation?

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit be1eea5. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[pzuraq]

One quick note, I couldn't seem to get this working locally in the kitchen sink examples. They just weren't showing code previews at all. Unsure if I did something wrong, could definitely use some pointers!

[shilman]

@pzuraq this is awesome!! 💯 working great for me:

what I did:

yarn bootstrap --core
cd examples/html-kitchen-sink
yarn storybook

[yannbf]

Hey @pzuraq this is an incredible contribution, thanks a lot for that! 🤩

I've got a couple of remarks:

1 - Could you check and update the snapshots in examples/html-kitchen-sink/tests/htmlshots.test.js -> Storyshots › Addons/Docs › standard source ? They were affected and the test is failing.

2 - Your commit doesn't link to your github user. Seems like your git config user.email is not correct, and as a result this contribution won't be linked to you. Is this something you expected? Otherwise you can change the author with something like:

git commit --amend --author="Your Name <your@email.com>"

The issues in the E2E tests don't seem to be related to your changes.

[shilman]

Looking great @pzuraq -- love the tests 🚀

[pzuraq]

@shilman ah, I didn't realize I had to run bootstrap again before using the kitchen sink apps! Cool, works perfectly now 😄

@yannbf thanks for pointing those out, I updated the snapshots, and the issue with the commit was my Git settings were off (changed companies recently, and started signing commits but forgot to upload my public PGP key 😱). Everything should be good to go now!

[shilman]

Great stuff @pzuraq 👏

[kerryj89]

Freakin' amazing! Thank you so much pzuraq!

[andrewgtibbetts]

Thank you @pzuraq!!! I upgraded to pre-release but I am still getting "No code available" (in fact, the default install shows the same). Is there a setting to get this to work?

Storybook 6.4.0-alpha.24
Flavor: HTML

[andrewgtibbetts]

If I change line 19 in the default install Button.stories.js from

  return createButton({ label, ...args });

to

 return createButton({ label, ...args }).outerHTML;

it works, since it returns a string instead of a DOM node / HTMLElement.
It doesn't seem to affect the rendering of the story, but might there be any consequences to doing this?

[maddesigns]

Awesome! 😍 Thanks @pzuraq! Is there a config to make it “prettier”?