add resizeable iframe

Author: Thomas Hanke

config/documentation.php

@@ -10,29 +10,30 @@
 use Qossmic\TwigDocBundle\Twig\TwigDocExtension;
 
 return static function (ContainerConfigurator $container) {
-    $container->services()
-        ->set('twig_doc.controller.documentation', TwigDocController::class)
-            ->public()
-            ->args([
-                service('twig'),
-                service('twig_doc.service.component')
-            ])
+    $container->services()  ->set('twig_doc.controller.documentation', TwigDocController::class)
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->arg('$profiler', service('profiler')->nullOnInvalid())
         ->set('twig_doc.service.category', CategoryService::class)
+        ->alias(CategoryService::class, 'twig_doc.service.category')
 
         ->set('twig_doc.service.component_factory', ComponentItemFactory::class)
-            ->public()
-            ->args([service('validator'), service('twig_doc.service.category')])
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->alias(ComponentItemFactory::class, 'twig_doc.service.component_factory')
 
         ->set('twig_doc.service.component', ComponentService::class)
-            ->public()
-            ->args([service('twig_doc.service.component_factory'), service('twig_doc.service.category')])
+        ->public()
+        ->autoconfigure()
+        ->autowire()
+        ->alias(ComponentService::class, 'twig_doc.service.component')
 
         ->set('twig_doc.twig.extension', TwigDocExtension::class)
-            ->args([
-                service('ux.twig_component.component_renderer')->nullOnInvalid(),
-                service('twig_doc.service.component'),
-                service('twig_doc.service.category'),
-                service('twig')]
-            )
-            ->tag('twig.extension');
+        ->autoconfigure()
+        ->autowire()
+        ->tag('twig.extension')
+        ->alias(TwigDocExtension::class, 'twig_doc.twig.extension')
+        ;
 };

config/routing/documentation.xml

@@ -10,5 +10,8 @@
     <route id="_documentation_invalid_components" path="/invalid">
         <default key="_controller">twig_doc.controller.documentation::invalidComponents</default>
     </route>
+    <route id="_documentation_component_view" path="/component-view">
+        <default key="_controller">twig_doc.controller.documentation::componentView</default>
+    </route>
 
 </routes>

src/Controller/TwigDocController.php

@@ -5,6 +5,8 @@
 
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+use Symfony\Component\HttpKernel\Profiler\Profiler;
 use Twig\Environment;
 use Qossmic\TwigDocBundle\Component\ComponentItem;
 use Qossmic\TwigDocBundle\Service\ComponentService;
@@ -13,7 +15,8 @@ class TwigDocController
 {
     public function __construct(
         private readonly Environment $twig,
-        private readonly ComponentService $componentService
+        private readonly ComponentService $componentService,
+        private readonly ?Profiler $profiler = null
     )
     {
     }
@@ -42,4 +45,25 @@ public function invalidComponents(): Response
             $this->twig->render('@TwigDoc/pages/invalid_components.html.twig')
         );
     }
+
+    public function componentView(Request $request): Response
+    {
+        $name = $request->query->get('name');
+        $component = $this->componentService->getComponent($name);
+        if (!$component) {
+            throw new NotFoundHttpException(sprintf('Component %s is unknown', $name));
+        }
+        $breakpoint = $request->query->get('breakpoint');
+        // disable profiler to get rid of toolbar in dev
+        if($this->profiler) {
+        $this->profiler->disable();
+        }
+        return new Response(
+            $this->twig->render('@TwigDoc/component.html.twig', [
+                'component' => $component,
+                'componentData' => $request->query->all('data'),
+                'quantity' => $request->query->get('quantity')
+            ])
+        );
+    }
 }

src/Service/ComponentService.php

@@ -131,4 +131,9 @@ public function getInvalidComponents(): array
     {
         return $this->invalidComponents;
     }
+
+    public function getComponent(string $name): ?ComponentItem
+    {
+        return array_values($this->filterComponents($name, 'name'))[0] ?? null;
+    }
 }

templates/component.html.twig

@@ -0,0 +1,16 @@
+<html lang="en">
+{% block head %}
+    {% block stylesheets %}
+    {% endblock %}
+    <title>{% block title %}Twig Component Documentation{% endblock %}</title>
+    {% block javascripts %}
+    {% endblock %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+{% endblock %}
+</html>
+
+<body>
+    {% for i in 1..quantity %}
+        {{ renderComponent(component, componentData ?? [])|raw }}
+    {% endfor %}
+</body>

templates/component/_item.html.twig

@@ -48,8 +48,8 @@
             <h4>Variations</h4>
             {% for variation in component.variations %}
                 <div class="twig-doc-variation">
-                    <div class="twig-doc-component-variation">
-                        {{ renderComponent(component, variation ?? [])|raw }}
+                        <div class="twig-doc-viewport-container">
+                            {% include '@TwigDoc/component/_viewport.html.twig' with {component: component, componentData: variation ?? [], width: '1280px'} %}
                     </div>
                     <div class="twig-doc-variation-description">
                         <ul>

templates/component/_viewport.html.twig

@@ -0,0 +1,6 @@
+<div class="twig-doc-viewport" style="width: {{ width }}px">
+    <iframe class="twig-doc-iframe"
+            src="{{ path('_documentation_component_view', {name: component.name, data: componentData, quantity: 1}) }}"
+    >
+    </iframe>
+</div>

templates/style/style.css.twig

@@ -114,3 +114,37 @@
 #twig-doc-container .twig-doc-variation .twig-doc-variation-description {
     padding-left: 20px;
 }
+
+.twig-doc-body {
+    padding: 15px;
+}
+
+.twig-doc-viewport-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    border: none;
+    padding: 10px;
+    position: relative;
+    overflow-x: scroll;
+}
+.twig-doc-viewport {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 240px;
+    margin: 0 auto;
+    white-space: nowrap;
+    text-align: center;
+    position: relative;
+    resize: horizontal;
+    overflow-x: auto;
+    outline: 1px solid #000000;
+}
+
+.twig-doc-iframe {
+    width: 100%;
+    flex-grow: 1;
+    border: 0;
+}