Format Codepen Code

[jmuzina]

The code that is sent to CodePen is not formatted by js-beautify like the code shown in our code snippets is.

We should more consistently apply this formatting so that the code is formatted in one place, and the formatting result is used by both the example code snippets and CodePen.

Context

Here's the code path that the (correctly formatted) code snippet code follows:

1. createPreCode is called on htmlSource https://github.com/canonical/vanilla-framework/blob/510f79dcac1b426f145f1324c214dc2f9f03993e/templates/static/js/example.js#L148

2. createPreCode calls formatSource, which calls the relevant js-beautify formatter. https://github.com/canonical/vanilla-framework/blob/510f79dcac1b426f145f1324c214dc2f9f03993e/templates/static/js/example.js#L82-L85

Here's the code that is defining what is sent to CodePen: https://github.com/canonical/vanilla-framework/blob/510f79dcac1b426f145f1324c214dc2f9f03993e/templates/static/js/example.js#L114-L123

We are using htmlSource, which is not formatted (it is later passed into createPreCode as discussed above). Maybe we should format htmlSource, jsSource, and cssSource at their initialization, rather than doing it in createPreCode.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-14598.

This message was autogenerated

[bartaz]

I believe this is in progress with jinja macro snippets. So triaging it as part of current codebase.