[Site] More Functional Code, 2x Complex Live Components Examples, few fixes

[weaverryan]

Q	A
Bug fix?	yes (with respect to Twig errors)
New feature?	no
Tickets	None
License	MIT

Hi!

Prepping ux.symfony.com for 2.8 - very excited about this! Join me on a tour:

1) Invoice Creator Live Component Demo

invoice-creator.mp4

Parent component + collection of child components communicating by emitting events!

2) Product form + modal to create a Category

product-form.mp4

Opens a Bootstrap modal with a child component inside - and closes that modal from a LiveAction.

3) Much nicer code blocks

Before:

After:

• "Copy" button
• Link to view the file on GitHub
• use statements are collapsed (click to show them)
• "Expand code" to show longer code blocks

4) Explanations on longer examples

Some examples deserve pointing out a few of the more complex parts. Some of the live component demos now do this:

5) Using a LOT of new features

Smart rendering, emitting events, browser events, etc, etc - MANY new features are being used on the site now.

We're also using (in som
e places) the new <twig:Component> syntax from #771. Even though editor support (e.g. for auto-completion) doesn't exist yet, I LOVE this. For example, to render a code block:

<twig:CodeBlock filename="src/Twig/SearchPackages.php" />

{# or more complex - logic for extracting" a specific Twig block lives in the CodeBlock.php component #}
<twig:CodeBlock
    filename="templates/main/homepage.html.twig"
    targetTwigBlock="markdown_example"
    :showTwigExtends="false"
    :stripExcessHtml="true"
/>

Thanks everyone for the work, review & testing on a lot of this new stuff. Using the new features on the site has been BLAST.

[weaverryan]

I snuck this feature in. We may need some trial and error. But throwing a RuntimeError allows Twig to show the actual template + line number where the error occurred. The nested exception will be the one from your component (e.g. maybe you are passing null to a property in your component that only accepts string).

[weaverryan]

This is just a correction: allows the lexing error to show the template + line number in the exception.

[jmsche]

use statements are collapsed (click to show them)

Maybe indicate somehow that it is clickable? (more descriptive text, icon...)

[weaverryan]

use statements are collapsed (click to show them)

Maybe indicate somehow that it is clickable? (more descriptive text, icon...)

Done! We can iterate on it if it's still not obvious