+
.. versionadded:: 2.9
@@ -958,16 +967,16 @@ the exception of *class*. For ``class``, the defaults are prepended:
.. code-block:: html+twig
{# templates/components/MyComponent.html.twig #}
- Save
+
{# render component #}
- {{ component('MyComponent', { style: 'color:red' }) }}
+ {{ component('MyComponent', {style: 'color:red'}) }}
{# renders as: #}
{# render component #}
- {{ component('MyComponent', { class: 'foo', type: 'submit' }) }}
+ {{ component('MyComponent', {class: 'foo', type: 'submit'}) }}
{# renders as: #}
@@ -993,7 +1002,7 @@ You can take full control over the attributes that are rendered by using the
{# render component #}
- {{ component('MyComponent', { style: 'color:red;' }) }}
+ {{ component('MyComponent', {style: 'color:red;'}) }}
{# renders as: #}
@@ -1018,7 +1027,7 @@ You can take full control over the attributes that are rendered by using the
{# render component #}
- {{ component('MyComponent', { style: 'color:red;' }) }}
+ {{ component('MyComponent', {style: 'color:red;'}) }}
{# renders as: #}
{# style is rendered twice! #}
@@ -1038,7 +1047,7 @@ You can take full control over the attributes that are rendered by using the
{# render component #}
- {{ component('MyComponent', { style: 'color:red;' }) }}
+ {{ component('MyComponent', {style: 'color:red;'}) }}
{# renders as: #}
{# style is rendered twice! #}
@@ -1053,10 +1062,10 @@ Extract specific attributes and discard the rest:
.. code-block:: html+twig
{# render component #}
- {{ component('MyComponent', { class: 'foo', style: 'color:red' }) }}
+ {{ component('MyComponent', {class: 'foo', style: 'color:red'}) }}
{# templates/components/MyComponent.html.twig #}
-
+
My Component!
@@ -1073,10 +1082,10 @@ Exclude specific attributes:
.. code-block:: html+twig
{# render component #}
- {{ component('MyComponent', { class: 'foo', style: 'color:red' }) }}
+ {{ component('MyComponent', {class: 'foo', style: 'color:red'}) }}
{# templates/components/MyComponent.html.twig #}
-
+
My Component!
@@ -1100,14 +1109,14 @@ and footer. Here's an example of this:
.. code-block:: html+twig
{# templates/components/Dialog.html.twig #}
-
-
+
+
{% block title %}Default Title{% endblock %}
-
+
{% block content %}{% endblock %}
-
+
{% block footer %}Default Footer{% endblock %}
+
{% block content %}{% endblock %}
@@ -1238,7 +1252,7 @@ when multiple other variant conditions are met.
{% props color = 'blue', size = 'md' %}
{% set alert = cva({
- base: 'alert ',
+ base: 'alert',
variants: {
color: {
blue: 'bg-blue',
@@ -1291,7 +1305,7 @@ If no variants match, you can define a default set of classes to apply:
{% props color = 'blue', size = 'md' %}
{% set alert = cva({
- base: 'alert ',
+ base: 'alert',
variants: {
color: {
blue: 'bg-blue',
@@ -1578,11 +1592,44 @@ listen to ``PreMountEvent`` or ``PostMountEvent``.
Nested Components
-----------------
-It's totally possible to nest one component into another. When you do
-this, there's nothing special to know: both components render
-independently. If you're using `Live Components`_, then there
-*are* some guidelines related to how the re-rendering of parent and
-child components works. Read `Live Nested Components`_.
+It's totally possible to include components as part of the contents of another
+component. When you do this, all components render independently. The only
+caveat is that you cannot mix the Twig syntax and the :ref:`HTML syntax
`
+when using nested components:
+
+.. code-block:: html+twig
+
+ {# ❌ this won't work because it mixes different syntaxes #}
+
+ {# ... #}
+
+ {% block footer %}
+ Edit
+ {% endblock %}
+
+
+ {# ✅ this works because it only uses the HTML syntax #}
+
+ {# ... #}
+
+
+ Edit
+
+
+
+ {# ✅ this also works because it only uses the Twig syntax #}
+
+ {# ... #}
+
+
+ {% component 'Button:Primary' with {isBlock: true} %}
+ {% block content %}Edit{% endblock %}
+ {% endcomponent %}
+
+
+
+If you're using `Live Components`_, then there *are* some guidelines related to
+how the re-rendering of parent and child components works. Read `Live Nested Components`_.
Configuration
-------------
@@ -1634,7 +1681,7 @@ Anonymous Components
.. versionadded:: 2.20
- The bundle convention for Anonymous components was added in TwigComponents 2.18.
+ The bundle convention for Anonymous components was added in TwigComponents 2.20.
Using a component from a third-party bundle is just as straightforward as using
one from your own application. Once the bundle is installed and configured, you
@@ -1721,6 +1768,7 @@ https://symfony.com/doc/current/contributing/code/bc.html
.. _`Passing Blocks to Live Components`: https://symfony.com/bundles/ux-live-component/current/index.html#passing-blocks
.. _`Stimulus controller`: https://symfony.com/bundles/StimulusBundle/current/index.html
.. _`CVA (Class Variant Authority)`: https://cva.style/docs/getting-started/variants
+.. _`html_cva`: https://twig.symfony.com/doc/3.x/functions/html_cva.html
.. _`shadcn/ui`: https://ui.shadcn.com
.. _`tales-from-a-dev/twig-tailwind-extra`: https://github.com/tales-from-a-dev/twig-tailwind-extra
.. _`ignore not defined options`: https://symfony.com/doc/current/components/options_resolver.html#ignore-not-defined-options
diff --git a/src/TwigComponent/src/Attribute/AsTwigComponent.php b/src/TwigComponent/src/Attribute/AsTwigComponent.php
index 3d31240b686..d58e5647ae8 100644
--- a/src/TwigComponent/src/Attribute/AsTwigComponent.php
+++ b/src/TwigComponent/src/Attribute/AsTwigComponent.php
@@ -78,8 +78,6 @@ public function serviceConfig(): array
/**
* @param object|class-string $component
*
- * @return ?\ReflectionMethod
- *
* @internal
*/
public static function mountMethod(object|string $component): ?\ReflectionMethod
diff --git a/src/TwigComponent/src/CVA.php b/src/TwigComponent/src/CVA.php
index 65c8d0bbe0a..f0f086807dc 100644
--- a/src/TwigComponent/src/CVA.php
+++ b/src/TwigComponent/src/CVA.php
@@ -24,6 +24,8 @@
* @author Mathéo Daninos
*
* @experimental
+ *
+ * @deprecated since TwigComponent 2.20, use CVA from the "twig/html-extra:^3.12.0" package instead.
*/
final class CVA
{
diff --git a/src/TwigComponent/src/Command/TwigComponentDebugCommand.php b/src/TwigComponent/src/Command/TwigComponentDebugCommand.php
index 2ceae41719b..4b43216acdf 100644
--- a/src/TwigComponent/src/Command/TwigComponentDebugCommand.php
+++ b/src/TwigComponent/src/Command/TwigComponentDebugCommand.php
@@ -184,9 +184,14 @@ private function findAnonymousComponents(): array
foreach ($finderTemplates as $template) {
$component = str_replace('/', ':', $template->getRelativePathname());
$component = substr($component, 0, -10); // remove file extension ".html.twig"
+ $path = $template->getPath();
- if (isset($dirs[$template->getPath()]) && FilesystemLoader::MAIN_NAMESPACE !== $dirs[$template->getPath()]) {
- $component = $dirs[$template->getPath()].':'.$component;
+ if ($template->getRelativePath()) {
+ $path = \rtrim(\substr($template->getPath(), 0, -1 * \strlen($template->getRelativePath())), '/');
+ }
+
+ if (isset($dirs[$path]) && FilesystemLoader::MAIN_NAMESPACE !== $dirs[$path]) {
+ $component = $dirs[$path].':'.$component;
}
$components[$component] = $component;
diff --git a/src/TwigComponent/src/ComponentFactory.php b/src/TwigComponent/src/ComponentFactory.php
index 2a677d38803..d797c399add 100644
--- a/src/TwigComponent/src/ComponentFactory.php
+++ b/src/TwigComponent/src/ComponentFactory.php
@@ -41,20 +41,28 @@ public function __construct(
public function metadataFor(string $name): ComponentMetadata
{
- $name = $this->classMap[$name] ?? $name;
-
- if (!$config = $this->config[$name] ?? null) {
- if (($template = $this->componentTemplateFinder->findAnonymousComponentTemplate($name)) !== null) {
- return new ComponentMetadata([
- 'key' => $name,
- 'template' => $template,
- ]);
+ if ($config = $this->config[$name] ?? null) {
+ return new ComponentMetadata($config);
+ }
+
+ if ($template = $this->componentTemplateFinder->findAnonymousComponentTemplate($name)) {
+ $this->config[$name] = [
+ 'key' => $name,
+ 'template' => $template,
+ ];
+
+ return new ComponentMetadata($this->config[$name]);
+ }
+
+ if ($mappedName = $this->classMap[$name] ?? null) {
+ if ($config = $this->config[$mappedName] ?? null) {
+ return new ComponentMetadata($config);
}
- $this->throwUnknownComponentException($name);
+ throw new \InvalidArgumentException(\sprintf('Unknown component "%s".', $name));
}
- return new ComponentMetadata($config);
+ $this->throwUnknownComponentException($name);
}
/**
@@ -62,11 +70,13 @@ public function metadataFor(string $name): ComponentMetadata
*/
public function create(string $name, array $data = []): MountedComponent
{
- return $this->mountFromObject(
- $this->getComponent($name),
- $data,
- $this->metadataFor($name)
- );
+ $metadata = $this->metadataFor($name);
+
+ if ($metadata->isAnonymous()) {
+ return $this->mountFromObject(new AnonymousComponent(), $data, $metadata);
+ }
+
+ return $this->mountFromObject($this->components->get($metadata->getName()), $data, $metadata);
}
/**
@@ -101,10 +111,7 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
foreach ($data as $key => $value) {
if ($value instanceof \Stringable) {
$data[$key] = (string) $value;
- continue;
}
-
- $data[$key] = $value;
}
return new MountedComponent(
@@ -118,10 +125,18 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
/**
* Returns the "unmounted" component.
+ *
+ * @internal
*/
public function get(string $name): object
{
- return $this->getComponent($name);
+ $metadata = $this->metadataFor($name);
+
+ if ($metadata->isAnonymous()) {
+ return new AnonymousComponent();
+ }
+
+ return $this->components->get($metadata->getName());
}
private function mount(object $component, array &$data): void
@@ -159,21 +174,6 @@ private function mount(object $component, array &$data): void
$component->mount(...$parameters);
}
- private function getComponent(string $name): object
- {
- $name = $this->classMap[$name] ?? $name;
-
- if (!$this->components->has($name)) {
- if ($this->isAnonymousComponent($name)) {
- return new AnonymousComponent();
- }
-
- $this->throwUnknownComponentException($name);
- }
-
- return $this->components->get($name);
- }
-
private function preMount(object $component, array $data, ComponentMetadata $componentMetadata): array
{
$event = new PreMountEvent($component, $data, $componentMetadata);
@@ -215,11 +215,6 @@ private function postMount(object $component, array $data, ComponentMetadata $co
];
}
- private function isAnonymousComponent(string $name): bool
- {
- return null !== $this->componentTemplateFinder->findAnonymousComponentTemplate($name);
- }
-
/**
* @return never
*/
diff --git a/src/TwigComponent/src/ComponentMetadata.php b/src/TwigComponent/src/ComponentMetadata.php
index a152417a8e7..b71e349161c 100644
--- a/src/TwigComponent/src/ComponentMetadata.php
+++ b/src/TwigComponent/src/ComponentMetadata.php
@@ -57,6 +57,11 @@ public function isPublicPropsExposed(): bool
return $this->get('expose_public_props', false);
}
+ public function isAnonymous(): bool
+ {
+ return !isset($this->config['service_id']);
+ }
+
public function getAttributesVar(): string
{
return $this->get('attributes_var', 'attributes');
diff --git a/src/TwigComponent/src/DataCollector/TwigComponentDataCollector.php b/src/TwigComponent/src/DataCollector/TwigComponentDataCollector.php
index f0c1e05f2db..1ee94c71bdb 100644
--- a/src/TwigComponent/src/DataCollector/TwigComponentDataCollector.php
+++ b/src/TwigComponent/src/DataCollector/TwigComponentDataCollector.php
@@ -25,8 +25,10 @@
/**
* @author Simon André
+ *
+ * @internal
*/
-class TwigComponentDataCollector extends AbstractDataCollector implements LateDataCollectorInterface
+final class TwigComponentDataCollector extends AbstractDataCollector implements LateDataCollectorInterface
{
private bool $hasStub;
@@ -99,6 +101,9 @@ private function collectDataFromLogger(): void
$renders = [];
$ongoingRenders = [];
+ $classStubs = [];
+ $templatePaths = [];
+
foreach ($this->logger->getEvents() as [$event, $profile]) {
if ($event instanceof PreRenderEvent) {
$mountedComponent = $event->getMountedComponent();
@@ -110,9 +115,9 @@ private function collectDataFromLogger(): void
$components[$componentName] ??= [
'name' => $componentName,
'class' => $componentClass,
- 'class_stub' => $this->hasStub ? new ClassStub($componentClass) : $componentClass,
- 'template' => $metadata->getTemplate(),
- 'template_path' => $this->resolveTemplatePath($metadata->getTemplate()), // defer ? lazy ?
+ 'class_stub' => $classStubs[$componentClass] ??= ($this->hasStub ? new ClassStub($componentClass) : $componentClass),
+ 'template' => $template = $metadata->getTemplate(),
+ 'template_path' => $templatePaths[$template] ??= $this->resolveTemplatePath($template),
'render_count' => 0,
'render_time' => 0,
];
diff --git a/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php b/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php
index e69bfb62ce7..c0c18b0ec66 100644
--- a/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php
+++ b/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php
@@ -34,6 +34,7 @@
use Symfony\UX\TwigComponent\DependencyInjection\Compiler\TwigComponentPass;
use Symfony\UX\TwigComponent\Twig\ComponentExtension;
use Symfony\UX\TwigComponent\Twig\ComponentLexer;
+use Symfony\UX\TwigComponent\Twig\ComponentRuntime;
use Symfony\UX\TwigComponent\Twig\TwigEnvironmentConfigurator;
/**
@@ -102,7 +103,13 @@ class_exists(AbstractArgument::class) ? new AbstractArgument(\sprintf('Added in
$container->register('ux.twig_component.twig.component_extension', ComponentExtension::class)
->addTag('twig.extension')
- ->addTag('container.service_subscriber', ['key' => ComponentRenderer::class, 'id' => 'ux.twig_component.component_renderer'])
+ ;
+
+ $container->register('.ux.twig_component.twig.component_runtime', ComponentRuntime::class)
+ ->setArguments([
+ new Reference('ux.twig_component.component_renderer'),
+ ])
+ ->addTag('twig.runtime')
;
$container->register('ux.twig_component.twig.lexer', ComponentLexer::class);
diff --git a/src/TwigComponent/src/EventListener/TwigComponentLoggerListener.php b/src/TwigComponent/src/EventListener/TwigComponentLoggerListener.php
index acabac5c522..62af18d370f 100644
--- a/src/TwigComponent/src/EventListener/TwigComponentLoggerListener.php
+++ b/src/TwigComponent/src/EventListener/TwigComponentLoggerListener.php
@@ -12,75 +12,38 @@
namespace Symfony\UX\TwigComponent\EventListener;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
-use Symfony\Component\Stopwatch\Stopwatch;
use Symfony\Contracts\Service\ResetInterface;
-use Symfony\UX\TwigComponent\Event\PostMountEvent;
use Symfony\UX\TwigComponent\Event\PostRenderEvent;
-use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;
-use Symfony\UX\TwigComponent\Event\PreMountEvent;
use Symfony\UX\TwigComponent\Event\PreRenderEvent;
/**
* @author Simon André
+ *
+ * @internal
*/
-class TwigComponentLoggerListener implements EventSubscriberInterface, ResetInterface
+final class TwigComponentLoggerListener implements EventSubscriberInterface, ResetInterface
{
private array $events = [];
- public function __construct(private ?Stopwatch $stopwatch = null)
- {
- }
-
public static function getSubscribedEvents(): array
{
return [
- PreCreateForRenderEvent::class => [
- // High priority: start the stopwatch as soon as possible
- ['onPreCreateForRender', 255],
- // Low priority: check `event::getRenderedString()` as late as possible
- ['onPostCreateForRender', -255],
- ],
- PreMountEvent::class => ['onPreMount', 255],
- PostMountEvent::class => ['onPostMount', -255],
PreRenderEvent::class => ['onPreRender', 255],
PostRenderEvent::class => ['onPostRender', -255],
];
}
+ /**
+ * @return list
+ */
public function getEvents(): array
{
return $this->events;
}
- public function onPreCreateForRender(PreCreateForRenderEvent $event): void
- {
- $this->stopwatch?->start($event->getName(), 'twig_component');
- $this->logEvent($event);
- }
-
- private function logEvent(object $event): void
- {
- $this->events[] = [$event, [microtime(true), memory_get_usage(true)]];
- }
-
- public function onPostCreateForRender(PreCreateForRenderEvent $event): void
- {
- if (\is_string($event->getRenderedString())) {
- $this->stopwatch?->stop($event->getName());
- $this->logEvent($event);
- }
- }
-
- public function onPreMount(PreMountEvent $event): void
- {
- $this->logEvent($event);
- }
-
- public function onPostMount(PostMountEvent $event): void
- {
- $this->logEvent($event);
- }
-
public function onPreRender(PreRenderEvent $event): void
{
$this->logEvent($event);
@@ -88,9 +51,6 @@ public function onPreRender(PreRenderEvent $event): void
public function onPostRender(PostRenderEvent $event): void
{
- if ($this->stopwatch?->isStarted($name = $event->getMountedComponent()->getName())) {
- $this->stopwatch->stop($name);
- }
$this->logEvent($event);
}
@@ -98,4 +58,9 @@ public function reset(): void
{
$this->events = [];
}
+
+ private function logEvent(object $event): void
+ {
+ $this->events[] = [$event, [microtime(true), memory_get_usage(true)]];
+ }
}
diff --git a/src/TwigComponent/src/Twig/ComponentExtension.php b/src/TwigComponent/src/Twig/ComponentExtension.php
index 82fa37a972a..f577ae08dcc 100644
--- a/src/TwigComponent/src/Twig/ComponentExtension.php
+++ b/src/TwigComponent/src/Twig/ComponentExtension.php
@@ -11,12 +11,8 @@
namespace Symfony\UX\TwigComponent\Twig;
-use Psr\Container\ContainerInterface;
-use Symfony\Contracts\Service\ServiceSubscriberInterface;
-use Symfony\UX\TwigComponent\ComponentRenderer;
use Symfony\UX\TwigComponent\CVA;
-use Symfony\UX\TwigComponent\Event\PreRenderEvent;
-use Twig\Error\RuntimeError;
+use Twig\DeprecatedCallableInfo;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
@@ -25,24 +21,17 @@
*
* @internal
*/
-final class ComponentExtension extends AbstractExtension implements ServiceSubscriberInterface
+final class ComponentExtension extends AbstractExtension
{
- public function __construct(private ContainerInterface $container)
- {
- }
-
- public static function getSubscribedServices(): array
- {
- return [
- ComponentRenderer::class,
- ];
- }
-
public function getFunctions(): array
{
return [
- new TwigFunction('component', [$this, 'render'], ['is_safe' => ['all']]),
- new TwigFunction('cva', [$this, 'cva']),
+ new TwigFunction('component', [ComponentRuntime::class, 'render'], ['is_safe' => ['all']]),
+ new TwigFunction('cva', [$this, 'cva'], [
+ ...(class_exists(DeprecatedCallableInfo::class)
+ ? ['deprecation_info' => new DeprecatedCallableInfo('symfony/ux-twig-component', '2.20', 'html_cva', 'twig/html-extra')]
+ : ['deprecated' => '2.20', 'deprecating_package' => 'symfony/ux-twig-component', 'alternative' => 'html_cva']),
+ ]),
];
}
@@ -54,38 +43,6 @@ public function getTokenParsers(): array
];
}
- public function render(string $name, array $props = []): string
- {
- try {
- return $this->container->get(ComponentRenderer::class)->createAndRender($name, $props);
- } catch (\Throwable $e) {
- $this->throwRuntimeError($name, $e);
- }
- }
-
- public function extensionPreCreateForRender(string $name, array $props): ?string
- {
- try {
- return $this->container->get(ComponentRenderer::class)->preCreateForRender($name, $props);
- } catch (\Throwable $e) {
- $this->throwRuntimeError($name, $e);
- }
- }
-
- public function startEmbeddedComponentRender(string $name, array $props, array $context, string $hostTemplateName, int $index): PreRenderEvent
- {
- try {
- return $this->container->get(ComponentRenderer::class)->startEmbeddedComponentRender($name, $props, $context, $hostTemplateName, $index);
- } catch (\Throwable $e) {
- $this->throwRuntimeError($name, $e);
- }
- }
-
- public function finishEmbeddedComponentRender(): void
- {
- $this->container->get(ComponentRenderer::class)->finishEmbeddedComponentRender();
- }
-
/**
* Create a CVA instance.
*
@@ -105,6 +62,8 @@ public function finishEmbeddedComponentRender(): void
*/
public function cva(array $cva): CVA
{
+ trigger_deprecation('symfony/ux-twig-component', '2.20', 'Twig Function "cva" is deprecated; use "html_cva" from the "twig/html-extra" package (available since version 3.12) instead.');
+
return new CVA(
$cva['base'] ?? '',
$cva['variants'] ?? [],
@@ -112,18 +71,4 @@ public function cva(array $cva): CVA
$cva['defaultVariants'] ?? [],
);
}
-
- private function throwRuntimeError(string $name, \Throwable $e): void
- {
- // if it's already a Twig RuntimeError, just rethrow it
- if ($e instanceof RuntimeError) {
- throw $e;
- }
-
- 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);
- }
}
diff --git a/src/TwigComponent/src/Twig/ComponentNode.php b/src/TwigComponent/src/Twig/ComponentNode.php
index 5fd9b2f5f82..439175c5bfa 100644
--- a/src/TwigComponent/src/Twig/ComponentNode.php
+++ b/src/TwigComponent/src/Twig/ComponentNode.php
@@ -29,14 +29,14 @@
#[YieldReady]
final class ComponentNode extends Node implements NodeOutputInterface
{
- public function __construct(string $component, string $embeddedTemplateName, int $embeddedTemplateIndex, ?AbstractExpression $props, bool $only, int $lineno, string $tag)
+ public function __construct(string $component, string $embeddedTemplateName, int $embeddedTemplateIndex, ?AbstractExpression $props, bool $only, int $lineno)
{
$nodes = [];
if (null !== $props) {
$nodes['props'] = $props;
}
- parent::__construct($nodes, [], $lineno, $tag);
+ parent::__construct($nodes, [], $lineno);
$this->setAttribute('only', $only);
$this->setAttribute('embedded_template', $embeddedTemplateName);
@@ -48,6 +48,8 @@ public function compile(Compiler $compiler): void
{
$compiler->addDebugInfo($this);
+ $useYield = method_exists(Environment::class, 'useYield') && $compiler->getEnvironment()->useYield();
+
// since twig/twig 3.9.0: Using the internal "twig_to_array" function is deprecated.
if (method_exists(CoreExtension::class, 'toArray')) {
$twig_to_array = 'Twig\Extension\CoreExtension::toArray';
@@ -55,6 +57,13 @@ public function compile(Compiler $compiler): void
$twig_to_array = 'twig_to_array';
}
+ $componentRuntime = $compiler->getVarName();
+
+ $compiler
+ ->write(\sprintf('$%s = $this->env->getRuntime(', $componentRuntime))
+ ->string(ComponentRuntime::class)
+ ->raw(");\n");
+
/*
* Block 1) PreCreateForRender handling
*
@@ -62,9 +71,7 @@ public function compile(Compiler $compiler): void
* a string, we return that string and skip the rest of the rendering process.
*/
$compiler
- ->write('$preRendered = $this->extensions[')
- ->string(ComponentExtension::class)
- ->raw(']->extensionPreCreateForRender(')
+ ->write(\sprintf('$preRendered = $%s->preRender(', $componentRuntime))
->string($this->getAttribute('component'))
->raw(', ')
->raw($twig_to_array)
@@ -96,9 +103,7 @@ public function compile(Compiler $compiler): void
* the final template, template index & variables.
*/
$compiler
- ->write('$preRenderEvent = $this->extensions[')
- ->string(ComponentExtension::class)
- ->raw(']->startEmbeddedComponentRender(')
+ ->write(\sprintf('$preRenderEvent = $%s->startEmbedComponent(', $componentRuntime))
->string($this->getAttribute('component'))
->raw(', ')
->raw($twig_to_array)
@@ -111,6 +116,7 @@ public function compile(Compiler $compiler): void
->raw(', ')
->raw($this->getAttribute('embedded_index'))
->raw(");\n");
+
$compiler
->write('$embeddedContext = $preRenderEvent->getVariables();')
->raw("\n")
@@ -132,18 +138,11 @@ public function compile(Compiler $compiler): void
* We add the outerBlock to the context if it doesn't exist yet.
* Then add them to the block stack and get the converted embedded blocks.
*/
- $compiler->write('if (!isset($embeddedContext["outerBlocks"])) {')
- ->raw("\n")
- ->indent()
- ->write(\sprintf('$embeddedContext["outerBlocks"] = new \%s();', BlockStack::class))
- ->raw("\n")
- ->outdent()
- ->write('}')
+ $compiler
+ ->write(\sprintf('$embeddedContext["outerBlocks"] ??= new \%s();', BlockStack::class))
->raw("\n");
- $compiler->write('$embeddedBlocks = $embeddedContext[')
- ->string('outerBlocks')
- ->raw(']->convert($blocks, ')
+ $compiler->write('$embeddedBlocks = $embeddedContext["outerBlocks"]->convert($blocks, ')
->raw($this->getAttribute('embedded_index'))
->raw(");\n");
@@ -152,9 +151,8 @@ public function compile(Compiler $compiler): void
*
* This will actually render the child component template.
*/
- if (method_exists(Environment::class, 'useYield') && $compiler->getEnvironment()->useYield()) {
- $compiler
- ->write('yield from ');
+ if ($useYield) {
+ $compiler->write('yield from ');
}
$compiler
->write('$this->loadTemplate(')
@@ -167,7 +165,7 @@ public function compile(Compiler $compiler): void
->string($this->getAttribute('embedded_index'))
->raw(')');
- if (method_exists(Environment::class, 'useYield') && $compiler->getEnvironment()->useYield()) {
+ if ($useYield) {
$compiler->raw('->unwrap()->yield(');
} else {
$compiler->raw('->display(');
@@ -176,10 +174,8 @@ public function compile(Compiler $compiler): void
->raw('$embeddedContext, $embeddedBlocks')
->raw(");\n");
- $compiler->write('$this->extensions[')
- ->string(ComponentExtension::class)
- ->raw(']->finishEmbeddedComponentRender()')
- ->raw(";\n")
+ $compiler->write(\sprintf('$%s->finishEmbedComponent();', $componentRuntime))
+ ->raw("\n")
;
$compiler
diff --git a/src/TwigComponent/src/Twig/ComponentRuntime.php b/src/TwigComponent/src/Twig/ComponentRuntime.php
new file mode 100644
index 00000000000..b6157599781
--- /dev/null
+++ b/src/TwigComponent/src/Twig/ComponentRuntime.php
@@ -0,0 +1,59 @@
+
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\TwigComponent\Twig;
+
+use Symfony\UX\TwigComponent\ComponentRenderer;
+use Symfony\UX\TwigComponent\Event\PreRenderEvent;
+
+/**
+ * @author Kevin Bond
+ * @author Simon André
+ *
+ * @internal
+ */
+final class ComponentRuntime
+{
+ public function __construct(
+ private readonly ComponentRenderer $renderer,
+ ) {
+ }
+
+ /**
+ * @param array $props
+ */
+ public function render(string $name, array $props = []): string
+ {
+ return $this->renderer->createAndRender($name, $props);
+ }
+
+ /**
+ * @param array $props
+ */
+ public function preRender(string $name, array $props): ?string
+ {
+ return $this->renderer->preCreateForRender($name, $props);
+ }
+
+ /**
+ * @param array $props
+ * @param array $context
+ */
+ public function startEmbedComponent(string $name, array $props, array $context, string $hostTemplateName, int $index): PreRenderEvent
+ {
+ return $this->renderer->startEmbeddedComponentRender($name, $props, $context, $hostTemplateName, $index);
+ }
+
+ public function finishEmbedComponent(): void
+ {
+ $this->renderer->finishEmbeddedComponentRender();
+ }
+}
diff --git a/src/TwigComponent/src/Twig/ComponentTokenParser.php b/src/TwigComponent/src/Twig/ComponentTokenParser.php
index dbb1cf74250..3f94c09d627 100644
--- a/src/TwigComponent/src/Twig/ComponentTokenParser.php
+++ b/src/TwigComponent/src/Twig/ComponentTokenParser.php
@@ -67,7 +67,7 @@ public function parse(Token $token): Node
$stream->expect(Token::BLOCK_END_TYPE);
- return new ComponentNode($componentName, $module->getTemplateName(), $module->getAttribute('index'), $propsExpression, $only, $token->getLine(), $this->getTag());
+ return new ComponentNode($componentName, $module->getTemplateName(), $module->getAttribute('index'), $propsExpression, $only, $token->getLine());
}
public function getTag(): string
diff --git a/src/TwigComponent/src/Twig/PropsNode.php b/src/TwigComponent/src/Twig/PropsNode.php
index 97f98d51df1..36374fa630f 100644
--- a/src/TwigComponent/src/Twig/PropsNode.php
+++ b/src/TwigComponent/src/Twig/PropsNode.php
@@ -23,9 +23,9 @@
#[YieldReady]
class PropsNode extends Node
{
- public function __construct(array $propsNames, array $values, $lineno = 0, ?string $tag = null)
+ public function __construct(array $propsNames, array $values, $lineno = 0)
{
- parent::__construct($values, ['names' => $propsNames], $lineno, $tag);
+ parent::__construct($values, ['names' => $propsNames], $lineno);
}
public function compile(Compiler $compiler): void
diff --git a/src/TwigComponent/src/Twig/PropsTokenParser.php b/src/TwigComponent/src/Twig/PropsTokenParser.php
index 9cc94e07d6e..fc3b66405c3 100644
--- a/src/TwigComponent/src/Twig/PropsTokenParser.php
+++ b/src/TwigComponent/src/Twig/PropsTokenParser.php
@@ -44,7 +44,7 @@ public function parse(Token $token): Node
}
}
- return new PropsNode($names, $values, $token->getLine(), $token->getValue());
+ return new PropsNode($names, $values, $token->getLine());
}
public function getTag(): string
diff --git a/src/TwigComponent/src/Twig/TwigEnvironmentConfigurator.php b/src/TwigComponent/src/Twig/TwigEnvironmentConfigurator.php
index 3fe38967997..4b952a10047 100644
--- a/src/TwigComponent/src/Twig/TwigEnvironmentConfigurator.php
+++ b/src/TwigComponent/src/Twig/TwigEnvironmentConfigurator.php
@@ -30,6 +30,7 @@ public function __construct(
public function configure(Environment $environment): void
{
$this->decorated->configure($environment);
+
$environment->setLexer(new ComponentLexer($environment));
if (class_exists(EscaperRuntime::class)) {
diff --git a/src/TwigComponent/templates/Collector/twig_component.html.twig b/src/TwigComponent/templates/Collector/twig_component.html.twig
index fe6ded6a412..c2098156f22 100644
--- a/src/TwigComponent/templates/Collector/twig_component.html.twig
+++ b/src/TwigComponent/templates/Collector/twig_component.html.twig
@@ -287,15 +287,15 @@
| Input props |
- {{ profiler_dump(render.input_props) }} |
+ {{ profiler_dump(render.input_props) }} |
| Attributes |
- {{ profiler_dump(render.attributes) }} |
+ {{ profiler_dump(render.attributes) }} |
| Component |
- {{ profiler_dump(render.component) }} |
+ {{ profiler_dump(render.component) }} |
diff --git a/src/TwigComponent/tests/Fixtures/Bundle/AcmeBundle/templates/components/Table/Header.html.twig b/src/TwigComponent/tests/Fixtures/Bundle/AcmeBundle/templates/components/Table/Header.html.twig
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig b/src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig
index 46b09843352..fe0360949d7 100644
--- a/src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig
+++ b/src/TwigComponent/tests/Fixtures/templates/components/Alert.html.twig
@@ -33,4 +33,4 @@
{% block content %}
{% endblock %}
-
\ No newline at end of file
+
-
+
{{ message }}
```
-So here you can see we have an alert component that his himself use an Icon component.
-Or you can make composition with the following syntax:
+So here you can see we have an `Alert` component that itself uses an Icon component.
+Or you can compose with the following syntax:
```twig
-
+
-
+
```
-So here we have a Card component, and we give to the content of this component two other components.
+So here we have a `Card` component, and we provide the content of this component with two other components.
### Independence
-This is a really important rule, and not obvious. But your component should live on his own context,
-it should not be aware of the rest of the page. You should be able to take a component into a page, from another and it should work exactly the same.
+This is a really important rule and not an obvious one. Your component should live in its own context; it
+should not be aware of the rest of the page. You should be able to take a component from one page to another, and it should work exactly the same.
This rule makes your component truly reusable.
-***How does it work into Symfony?***
+***How does it work in Symfony?***
-Symfony keeps the context of the page into the context of your component. So this your own responsibility to follow those rules.
-But notice that if there are conflicts between a variable from the context page and your component, your component context overrides the page context.
+Symfony keeps the context of the page within the context of your component. So it is your own responsibility to follow these rules.
+Note that if there are conflicts between a variable from the context page and your component, your component context overrides the page context.
### Props
-Our component must remain independent, but we can customize it props.
-Let's take the example of a button component. You have your component that look on every page the same,
-the only change is the label. What you can do is to declare a prop `label` into your button component.
-And so now when you want to use your button component, you can pass the label you want as props. The component gonna take
-this props at his initialization and keep it all his life long.
+Our component must remain independent, but we can customize its props.
+For example, consider a button component. You want your component to look the same on every page, with the only change being the label.
+To do this, you can declare a `label` prop in your button component.
+When you use your button component, you can pass the label you want as a prop. The component will take this prop at initialization and keep it throughout its lifecycle.
-***How does it work into Symfony?***
+***How does it work in Symfony?***
-Let's take the example of the Alert component an [anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components).
+Let's take the example of the `Alert` component as an [anonymous component](https://symfony.com/bundles/ux-twig-component/current/index.html#anonymous-components).
We have the following template:
```twig
{% props type, icon, message %}
-
+
{{ message }}
```
-Just like that we define three props for our Alert component. And know we can use like this:
+Just like that, we define three props for our `Alert` component. We can now use it like this:
```twig
```
-If your component anonymous but a class component, you can simply define props
-by adding property to your class.
+If your component is not anonymous but a class component, you can define props by adding properties to your class.
```php
+#[AsTwigComponent]
class Alert
{
public string $type;
@@ -103,35 +102,32 @@ class Alert
}
```
-There are something really important to notice with props. It's your props
-should only go into one direction from the parent to child. But your props should never
-go up. **If your child need to change something in the parent, you should use events**.
+There is something important to note with props: They should only flow in one direction, from parent to child. Props should never go up. **If your child needs to change something in the parent, you should use events.**
### State
-A state is pretty much like a prop but the main difference is a state can
+A state is pretty much like a prop, but the main difference is that a state can
change during the life of the component. Let's take the example of a button component.
-You can have a state `loading` that can be `true` or `false`. When the button is clicked
-the state `loading` can be set to `true` and the button can display a loader instead of the label.
-And when the loading is done, the state `loading` can be set to `false` and the button can display the label again.
+You can have a `loading` state that can be `true` or `false`. When the button is clicked
+the `loading` state can be set to `true`, and the button can display a loader instead of the label.
+When the loading is done, the `loading` state can be set to `false`, and the button can display the label again.
-***How does it work into Symfony?***
+***How does it work in Symfony?***
-In Symfony you have two different approaches to handle state. The first one is to use stimulus directly
-in to your component. What we recommend to do is to set a controller stimulus at the root of your component.
+In Symfony, you have two different approaches to handle state. The first is to use Stimulus directly in your component. We recommend setting a Stimulus controller at the root of your component.
```twig
{% props label %}
-