bug #804 [Site] More Functional Code, 2x Complex Live Components Examples, few fixes (weaverryan)

This PR was merged into the 2.x branch.

Discussion
----------

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

| 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

https://user-images.githubusercontent.com/121003/232886502-7f8da8f5-fe8a-4251-8e92-c2b56895b1ee.mp4

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

## 2) Product form + modal to create a Category

https://user-images.githubusercontent.com/121003/232888282-ab12c4a1-8153-4fe5-babf-cbf4a313c47b.mp4

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

### 3) Much nicer code blocks

Before:

<img width="609" alt="Screenshot 2023-04-18 at 3 45 34 PM" src="https://user-images.githubusercontent.com/121003/232888991-67cad476-6836-4b10-9eb5-1ec6b43aafc6.png">

After:

<img width="604" alt="Screenshot 2023-04-18 at 3 45 41 PM" src="https://user-images.githubusercontent.com/121003/232889021-01efedd9-c062-4072-a120-1b437d342634.png">

* "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:

<img width="443" alt="Screenshot 2023-04-18 at 3 48 42 PM" src="https://user-images.githubusercontent.com/121003/232889344-3a776683-40a5-4ef9-8fa7-d909343f563a.png">

### 5) Using a LOT of new features

[Smart rendering](https://symfony.com/bundles/ux-live-component/current/index.html#the-smart-re-render-algorithm), [emitting events](https://symfony.com/bundles/ux-live-component/current/index.html#communication-between-components-emitting-events), [browser events](https://symfony.com/bundles/ux-live-component/current/index.html#dispatching-browser-javascript-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:

```html
<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.

Commits
-------

e6edbde [Site] Adding InvoiceCreator live demo + modal demo

Author: weaverryan

src/LiveComponent/doc/index.rst

@@ -2302,7 +2302,7 @@ Stimulus controller - like this for Bootstrap's modal:
 
     // assets/controllers/bootstrap-modal-controller.js
     import { Controller } from '@hotwired/stimulus';
-    import { Modal } from 'bootstrap';
+    import Modal from 'bootstrap/js/dist/modal';
 
     export default class extends Controller {
         modal = null;
@@ -2317,7 +2317,7 @@ Just make sure this controller is attached to the modal element:
 
 .. code-block:: html+twig
 
-    <div class="modal fade" {{ stimulus_controller('bootstrap-modal') }}">
+    <div class="modal fade" {{ stimulus_controller('bootstrap-modal') }}>
         <div class="modal-dialog">
             ... content ...
         </div>

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -15,6 +15,7 @@
 use Symfony\Contracts\Service\ServiceSubscriberInterface;
 use Symfony\UX\TwigComponent\ComponentFactory;
 use Symfony\UX\TwigComponent\ComponentRenderer;
+use Twig\Error\RuntimeError;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
 
@@ -53,11 +54,27 @@ public function getTokenParsers(): array
 
     public function render(string $name, array $props = []): string
     {
-        return $this->container->get(ComponentRenderer::class)->createAndRender($name, $props);
+        try {
+            return $this->container->get(ComponentRenderer::class)->createAndRender($name, $props);
+        } catch (\Throwable $e) {
+            $this->throwRuntimeError($name, $e);
+        }
     }
 
     public function embeddedContext(string $name, array $props, array $context): array
     {
-        return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context);
+        try {
+            return $this->container->get(ComponentRenderer::class)->embeddedContext($name, $props, $context);
+        } catch (\Throwable $e) {
+            $this->throwRuntimeError($name, $e);
+        }
+    }
+
+    private function throwRuntimeError(string $name, \Throwable $e): void
+    {
+        if (!($e instanceof \Exception)) {
+            $e = new \Exception($e->getMessage(), $e->getCode(), $e->getPrevious());
+        }
+        throw new RuntimeError(sprintf('Error rendering "%s" component: %s', $name, $e->getMessage()), previous: $e);
     }
 }

src/TwigComponent/src/Twig/TwigPreLexer.php

@@ -11,6 +11,8 @@
 
 namespace Symfony\UX\TwigComponent\Twig;
 
+use Twig\Error\SyntaxError;
+
 /**
  * Rewrites <twig:component> syntaxes to {% component %} syntaxes.
  */
@@ -46,12 +48,12 @@ public function preLexComponents(string $input): string
                         $this->currentComponents[\count($this->currentComponents) - 1]['hasDefaultBlock'] = false;
                     }
 
-                    $output .= $this->consumeBlock();
+                    $output .= $this->consumeBlock($componentName);
 
                     continue;
                 }
 
-                $attributes = $this->consumeAttributes();
+                $attributes = $this->consumeAttributes($componentName);
                 $isSelfClosing = $this->consume('/>');
                 if (!$isSelfClosing) {
                     $this->consume('>');
@@ -79,7 +81,7 @@ public function preLexComponents(string $input): string
                 $lastComponentName = $lastComponent['name'];
 
                 if ($closingComponentName !== $lastComponentName) {
-                    throw new \RuntimeException("Expected closing tag '</twig:{$lastComponentName}>' but found '</twig:{$closingComponentName}>' at line {$this->line}");
+                    throw new SyntaxError("Expected closing tag '</twig:{$lastComponentName}>' but found '</twig:{$closingComponentName}>'", $this->line);
                 }
 
                 // we've reached the end of this component. If we're inside the
@@ -112,28 +114,40 @@ public function preLexComponents(string $input): string
 
         if (!empty($this->currentComponents)) {
             $lastComponent = array_pop($this->currentComponents)['name'];
-            throw new \RuntimeException(sprintf('Expected closing tag "</twig:%s>" not found at line %d.', $lastComponent, $this->line));
+            throw new SyntaxError(sprintf('Expected closing tag "</twig:%s>" not found.', $lastComponent), $this->line);
         }
 
         return $output;
     }
 
-    private function consumeComponentName(): string
+    private function consumeComponentName(string $customExceptionMessage = null): string
     {
         $start = $this->position;
         while ($this->position < $this->length && preg_match('/[A-Za-z0-9_:@\-\/.]/', $this->input[$this->position])) {
             ++$this->position;
         }
+
         $componentName = substr($this->input, $start, $this->position - $start);
 
         if (empty($componentName)) {
-            throw new \RuntimeException("Expected component name at line {$this->line}");
+            $exceptionMessage = $customExceptionMessage;
+            if (null == $exceptionMessage) {
+                $exceptionMessage = 'Expected component name when resolving the "<twig:" syntax.';
+            }
+            throw new SyntaxError($exceptionMessage, $this->line);
         }
 
         return $componentName;
     }
 
-    private function consumeAttributes(): string
+    private function consumeAttributeName(string $componentName): string
+    {
+        $message = sprintf('Expected attribute name when parsing the "<twig:%s" syntax.', $componentName);
+
+        return $this->consumeComponentName($message);
+    }
+
+    private function consumeAttributes(string $componentName): string
     {
         $attributes = [];
 
@@ -151,7 +165,7 @@ private function consumeAttributes(): string
                 $isAttributeDynamic = true;
             }
 
-            $key = $this->consumeComponentName();
+            $key = $this->consumeAttributeName($componentName);
 
             // <twig:component someProp> -> someProp: true
             if (!$this->check('=')) {
@@ -202,13 +216,13 @@ private function consume(string $string): bool
     private function consumeChar($validChars = null): string
     {
         if ($this->position >= $this->length) {
-            throw new \RuntimeException('Unexpected end of input');
+            throw new SyntaxError('Unexpected end of input', $this->line);
         }
 
         $char = $this->input[$this->position];
 
         if (null !== $validChars && !\in_array($char, (array) $validChars, true)) {
-            throw new \RuntimeException('Expected one of ['.implode('', (array) $validChars)."] but found '{$char}' at line {$this->line}");
+            throw new SyntaxError('Expected one of ['.implode('', (array) $validChars)."] but found '{$char}'.", $this->line);
         }
 
         ++$this->position;
@@ -255,7 +269,7 @@ private function expectAndConsumeChar(string $char): void
         }
 
         if ($this->position >= $this->length || $this->input[$this->position] !== $char) {
-            throw new \RuntimeException("Expected '{$char}' but found '{$this->input[$this->position]}' at line {$this->line}");
+            throw new SyntaxError("Expected '{$char}' but found '{$this->input[$this->position]}'.", $this->line);
         }
         ++$this->position;
     }
@@ -276,9 +290,9 @@ private function check(string $chars): bool
         return true;
     }
 
-    private function consumeBlock(): string
+    private function consumeBlock(string $componentName): string
     {
-        $attributes = $this->consumeAttributes();
+        $attributes = $this->consumeAttributes($componentName);
         $this->consume('>');
 
         $blockName = '';
@@ -291,14 +305,14 @@ private function consumeBlock(): string
         }
 
         if (empty($blockName)) {
-            throw new \RuntimeException("Expected block name at line {$this->line}");
+            throw new SyntaxError('Expected block name.', $this->line);
         }
 
         $output = "{% block {$blockName} %}";
 
         $closingTag = '</twig:block>';
         if (!$this->doesStringEventuallyExist($closingTag)) {
-            throw new \RuntimeException("Expected closing tag '{$closingTag}' for block '{$blockName}' at line {$this->line}");
+            throw new SyntaxError("Expected closing tag '{$closingTag}' for block '{$blockName}'.", $this->line);
         }
         $blockContents = $this->consumeUntil($closingTag);
 

ux.symfony.com/assets/bootstrap.js

@@ -8,8 +8,6 @@ export const app = startStimulusApp(require.context(
     /\.[jt]sx?$/
 ));
 
-app.debug = process.env.NODE_ENV === 'development';
-
 app.register('clipboard', Clipboard);
 // register any custom, 3rd party controllers here
 

ux.symfony.com/assets/controllers/bootstrap-modal-controller.js

@@ -0,0 +1,20 @@
+import { Controller } from '@hotwired/stimulus';
+import Modal from 'bootstrap/js/dist/modal';
+
+/**
+ * Allows you to dispatch a "modal:close" JavaScript event to close it.
+ *
+ * This is useful inside a LiveComponent, where you can emit a browser event
+ * to open or close the modal.
+ *
+ * See templates/components/BootstrapModal.html.twig to see how this is
+ * attached to Bootstrap modal.
+ */
+export default class extends Controller {
+    modal = null;
+
+    connect() {
+        this.modal = Modal.getOrCreateInstance(this.element);
+        document.addEventListener('modal:close', () => this.modal.hide());
+    }
+}

ux.symfony.com/assets/controllers/code-expander-controller.js

@@ -0,0 +1,28 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['useStatements', 'expandCodeButton', 'codeContent'];
+
+    connect() {
+        if (this.#isOverflowing(this.codeContentTarget)) {
+            this.expandCodeButtonTarget.style.display = 'block';
+            // add extra padding so the button doesn't block the code
+            this.codeContentTarget.classList.add('pb-5');
+        }
+    }
+
+    expandUseStatements(event) {
+        this.useStatementsTarget.style.display = 'block';
+        event.currentTarget.remove();
+    }
+
+    expandCode(event) {
+        this.codeContentTarget.style.height = 'auto';
+        this.codeContentTarget.classList.remove('pb-5');
+        this.expandCodeButtonTarget.remove();
+    }
+
+    #isOverflowing(element) {
+        return element.scrollHeight > element.clientHeight;
+    }
+}

ux.symfony.com/assets/controllers/ux-clipboard-controller.js

@@ -0,0 +1,20 @@
+import Clipboard from 'stimulus-clipboard'
+
+export default class extends Clipboard {
+    static values = {
+        source: String,
+    }
+
+    /**
+     * Overridden so we can simply pass the value in via a value.
+     */
+    copy(event) {
+        if (!this.sourceValue) {
+            super.copy(event);
+        }
+
+        event.preventDefault();
+
+        navigator.clipboard.writeText(this.sourceValue).then(() => this.copied());
+    }
+}

ux.symfony.com/assets/images/live_demo/invoice.png

@@ -8,14 +8,18 @@
 .terminal-code {
     background-color: $n-900;
     border-radius: 12px;
-    padding: 0px;
+    padding: 0;
     color: #fff;
     font-size: 12px;
 }
 
 .terminal-code.terminal-code-no-filename {
     padding-top: 0;
 }
+.terminal-code a.filename-header {
+    color: white;
+    display: inline-block;
+}
 
 .terminal-wrapper .terminal-controls {
     position: absolute;
@@ -51,6 +55,25 @@
     color: #FFF;
     border-radius: 0px 0px 12px 12px;
 }
+.terminal-code .btn-copy, .terminal-code .btn-copy:active {
+    background-color: $n-700;
+    color: $n-200;
+}
+.terminal-code .btn-copy:hover {
+    background-color: $n-600;
+}
+/* copy button inside the code block itself */
+.terminal-code .terminal-body .code-buttons {
+    position: absolute;
+    top: .5em;
+    right: .5em;
+}
+.terminal-code .btn-link {
+    color: $n-200;
+}
+.terminal-code .btn-link:hover {
+    color: $n-100;
+}
 .terminal-code.terminal-code-no-filename .terminal-body {
     border-radius: 12px;
 }

ux.symfony.com/assets/images/live_demo/product_form.png

@@ -224,3 +224,8 @@ h4.ubuntu {
     color: $n-300;
     font-weight: lighter;
 }
+
+blockquote {
+    border-left: 5px solid $n-200;
+    padding-left: 1rem;
+}

ux.symfony.com/assets/styles/_terminal.scss

@@ -78,3 +78,19 @@ footer {
     background-color: $n-700;
     border-color: $n-700;
 }
+
+.btn-expand-code {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    color: rgb(156 163 175);
+    background-color: rgb(55 65 81);
+}
+.btn-expand-code:hover, .btn-expand-code:active {
+    background-color: rgb(55 65 81) !important;
+    color: #fff !important;
+}
+.code-description a {
+    text-decoration: underline;
+}