diff --git a/src/LiveComponent/doc/index.rst b/src/LiveComponent/doc/index.rst index 14944b29b7c..4c57691fa22 100644 --- a/src/LiveComponent/doc/index.rst +++ b/src/LiveComponent/doc/index.rst @@ -11,15 +11,15 @@ the frontend as the user interacts with them. Inspired by A real-time product search component might look like this:: - // src/Components/ProductSearchComponent.php + // src/Components/ProductSearch.php namespace App\Components; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\DefaultActionTrait; - #[AsLiveComponent('product_search')] - class ProductSearchComponent + #[AsLiveComponent] + class ProductSearch { use DefaultActionTrait; @@ -39,7 +39,7 @@ A real-time product search component might look like this:: .. code-block:: html+twig - {# templates/components/product_search.html.twig #} + {# templates/components/ProductSearch.html.twig #} {# for the Live Component to work, there must be a single root element (e.g. a
) where the attributes are applied to #}
@@ -69,9 +69,7 @@ Done! Now render it wherever you want: .. code-block:: twig - {# the argument is the name of the live component, - which is defined in the #[AsLiveComponent] attribute #} - {{ component('product_search') }} + {{ component('ProductSearch') }} As a user types into the box, the component will automatically re-render and show the new results! @@ -123,13 +121,13 @@ documentation to get the basics of Twig components. Suppose you've already built a basic Twig component:: - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php namespace App\Components; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; - #[AsTwigComponent('random_number')] - class RandomNumberComponent + #[AsTwigComponent()] + class RandomNumber { public function getRandomNumber(): int { @@ -139,7 +137,7 @@ Suppose you've already built a basic Twig component:: .. code-block:: html+twig - {# templates/components/random_number.html.twig #} + {# templates/components/RandomNumber.html.twig #}
{{ this.randomNumber }}
@@ -151,14 +149,14 @@ re-rendered live on the frontend), replace the component's .. code-block:: diff - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php - use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; + use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; + use Symfony\UX\LiveComponent\DefaultActionTrait; - - #[AsTwigComponent('random_number')] - + #[AsLiveComponent('random_number')] - class RandomNumberComponent + - #[AsTwigComponent()] + + #[AsLiveComponent] + class RandomNumber { + use DefaultActionTrait; } @@ -204,14 +202,14 @@ LiveProps: Stateful Component Properties Let's make our component more flexible by adding a ``$max`` property:: - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php namespace App\Components; // ... use Symfony\UX\LiveComponent\Attribute\LiveProp; - #[AsLiveComponent('random_number')] - class RandomNumberComponent + #[AsLiveComponent] + class RandomNumber { #[LiveProp] public int $max = 1000; @@ -229,7 +227,7 @@ the component: .. code-block:: twig - {{ component('random_number', { max: 500 }) }} + {{ component('RandomNumber', { max: 500 }) }} But what's up with the ``LiveProp`` attribute? A property with the ``LiveProp`` attribute becomes a "stateful" property for this component. @@ -270,7 +268,7 @@ Add an input to the template: .. code-block:: html+twig - {# templates/components/random_number.html.twig #} + {# templates/components/RandomNumber.html.twig #}
@@ -304,10 +302,10 @@ Well, actually, we're missing one step. By default, a ``LiveProp`` is .. code-block:: diff - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php // ... - class RandomNumberComponent + class RandomNumber { // ... @@ -426,8 +424,8 @@ Doctrine entity objects are a special case for ``LiveProp``:: use App\Entity\Post; - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { #[LiveProp] public Post $post; @@ -454,8 +452,8 @@ This also works as a way to make only *some* keys of an array writable:: use App\Entity\Post; - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { #[LiveProp(writable: ['title', 'content'])] public Post $post; @@ -488,8 +486,8 @@ Any other properties on the object (or keys on the array) will be read-only. For arrays, you can set ``writable: true`` to allow *any* key in the array to be changed, added or removed:: - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { // ... @@ -514,8 +512,8 @@ Checkboxes, Select Elements Radios & Arrays Checkboxes can be used to set a boolean or an array of strings:: - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { #[LiveProp(writable: true)] public bool $agreeToTerms = false; @@ -538,8 +536,8 @@ value on checked. If no ``value`` is set, the checkbox will set a boolean value: ``select`` and ``radio`` elements are a bit easier: use these to either set a single value or an array of values:: - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { // ... @@ -600,8 +598,8 @@ To make the ``post`` property itself writable, use ``writable: true``:: use App\Entity\Post; - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { #[LiveProp(writable: true)] public Post $post; @@ -618,8 +616,8 @@ properties, use the special ``LiveProp::IDENTITY`` constant:: use App\Entity\Post; - #[AsLiveComponent('edit_post')] - class EditPostComponent + #[AsLiveComponent] + class EditPost { #[LiveProp(writable: [LiveProp::IDENTITY, 'title', 'content'])] public Post $post; @@ -839,7 +837,7 @@ The following hooks are available (along with the arguments that are passed): Adding a Stimulus Controller to your Component Root Element ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -.. versionadded: 2.7 +.. versionadded:: 2.7 The ``add()`` method was introduced in TwigComponents 2.7. @@ -973,13 +971,13 @@ that, when clicked, sets the min/max numbers back to a default value. First, add a method with a ``LiveAction`` attribute above it that does the work:: - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php namespace App\Components; // ... use Symfony\UX\LiveComponent\Attribute\LiveAction; - class RandomNumberComponent + class RandomNumber { // ... @@ -1032,13 +1030,13 @@ normal controller method that you would create with a route. This means that, for example, you can use action autowiring:: - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php namespace App\Components; // ... use Psr\Log\LoggerInterface; - class RandomNumberComponent + class RandomNumber { // ... @@ -1073,14 +1071,14 @@ You can also provide custom arguments to your action: In your component, to allow each argument to be passed, we need to add the ``#[LiveArg()]`` attribute:: - // src/Components/ItemComponent.php + // src/Components/ItemList.php namespace App\Components; // ... use Psr\Log\LoggerInterface; use Symfony\UX\LiveComponent\Attribute\LiveArg; - class ItemComponent + class ItemList { // ... #[LiveAction] @@ -1116,7 +1114,7 @@ If you want to disable CSRF for a single component you can set use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; use Symfony\UX\LiveComponent\Attribute\LiveProp; - #[AsLiveComponent('my_live_component', csrf: false)] + #[AsLiveComponent(csrf: false)] class MyLiveComponent { // ... @@ -1130,13 +1128,13 @@ Sometimes, you may want to redirect after an action is executed page). You can do that by returning a ``RedirectResponse`` from your action:: - // src/Components/RandomNumberComponent.php + // src/Components/RandomNumber.php namespace App\Components; // ... use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; - class RandomNumberComponent extends AbstractController + class RandomNumber extends AbstractController { // ... @@ -1236,7 +1234,7 @@ write your form controller logic:: } Great! In the template, instead of rendering the form, let's render a -``post_form`` component that we will create next: +``PostForm`` component that we will create next: .. code-block:: html+twig @@ -1246,13 +1244,13 @@ Great! In the template, instead of rendering the form, let's render a {% block body %}

Edit Post

- {{ component('post_form', { + {{ component('PostForm', { post: post, form: form }) }} {% endblock %} -Ok: time to build that ``post_form`` component! The Live Components +Ok: time to build that ``PostForm`` component! The Live Components package comes with a special trait - ``ComponentWithFormTrait`` - to make it easy to deal with forms:: @@ -1267,8 +1265,8 @@ make it easy to deal with forms:: use Symfony\UX\LiveComponent\ComponentWithFormTrait; use Symfony\UX\LiveComponent\DefaultActionTrait; - #[AsLiveComponent('post_form')] - class PostFormComponent extends AbstractController + #[AsLiveComponent] + class PostForm extends AbstractController { use DefaultActionTrait; use ComponentWithFormTrait; @@ -1312,7 +1310,7 @@ as ``form`` thanks to the trait: .. code-block:: html+twig - {# templates/components/post_form.html.twig #} + {# templates/components/PostForm.html.twig #}
{{ form_start(form) }} {{ form_row(form.title) }} @@ -1360,8 +1358,8 @@ a ``post`` property. Tou can make that optional by adding a ``mount()`` method:: - #[AsLiveComponent('post_form')] - class PostFormComponent extends AbstractController + #[AsLiveComponent] + class PostForm extends AbstractController { // ... #[LiveProp(fieldName: 'data')] @@ -1453,7 +1451,7 @@ And you wouldn't pass any ``form`` into the component: {# templates/post/edit.html.twig #}

Edit Post

- {{ component('post_form', { + {{ component('PostForm', { post: post }) }} @@ -1465,7 +1463,7 @@ automatically. Let's add the ``save()`` action to the component:: use Doctrine\ORM\EntityManagerInterface; use Symfony\UX\LiveComponent\Attribute\LiveAction; - class PostFormComponent extends AbstractController + class PostForm extends AbstractController { // ... @@ -1494,7 +1492,7 @@ Finally, tell the ``form`` element to use this action: .. code-block:: twig - {# templates/components/post_form.html.twig #} + {# templates/components/PostForm.html.twig #} {# ... #} {{ form_start(form, { @@ -1563,8 +1561,8 @@ Now, create a Twig component to render the form:: use Symfony\UX\LiveComponent\ComponentWithFormTrait; use Symfony\UX\LiveComponent\DefaultActionTrait; - #[AsLiveComponent('blog_post_collection_type')] - class BlogPostCollectionTypeComponent extends AbstractController + #[AsLiveComponent] + class BlogPostCollectionType extends AbstractController { use ComponentWithFormTrait; use DefaultActionTrait; @@ -1709,8 +1707,8 @@ Now, create a Twig component to render the form:: use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\LiveComponent\LiveCollectionTrait; - #[AsLiveComponent('blog_post_collection_type')] - class BlogPostCollectionTypeComponent extends AbstractController + #[AsLiveComponent] + class BlogPostCollectionType extends AbstractController { use LiveCollectionTrait; use DefaultActionTrait; @@ -1819,7 +1817,7 @@ Override the specific block for comment items: .. code-block:: html+twig - {# components/_form_theme_comment_list.html.twig #} + {# templates/components/_form_theme_comment_list.html.twig #} {%- block _blog_post_form_comments_entry_row -%}
  • {{ form_row(form.content, { label: false }) }} @@ -1957,8 +1955,8 @@ need:: use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\ValidatableComponentTrait; - #[AsLiveComponent('edit_user')] - class EditUserComponent + #[AsLiveComponent] + class EditUser { use ValidatableComponentTrait; @@ -1985,8 +1983,8 @@ action:: use Symfony\UX\LiveComponent\Attribute\LiveAction; - #[AsLiveComponent('edit_user')] - class EditUserComponent + #[AsLiveComponent] + class EditUser { // ... @@ -2227,12 +2225,12 @@ use the ``name()`` modifier: {# render component #} - {{ component('my_component', { style: 'color:red' }) }} + {{ component('MyComponent', { style: 'color:red' }) }} {# renders as: #} {# render component #} - {{ component('my_component', { class: 'foo', type: 'submit' }) }} + {{ component('MyComponent', { class: 'foo', type: 'submit' }) }} {# renders as: #} @@ -650,13 +663,13 @@ Extract specific attributes and discard the rest: .. code-block:: html+twig - {# templates/components/my_component.html.twig #} + {# templates/components/MyComponent.html.twig #} My Component!
    • {# render component #} - {{ component('my_component', { class: 'foo', style: 'color:red' }) }} + {{ component('MyComponent', { class: 'foo', style: 'color:red' }) }} {# renders as: #}
    @@ -670,13 +683,13 @@ Exclude specific attributes: .. code-block:: html+twig - {# templates/components/my_component.html.twig #} + {# templates/components/MyComponent.html.twig #} My Component!
    {# render component #} - {{ component('my_component', { class: 'foo', style: 'color:red' }) }} + {{ component('MyComponent', { class: 'foo', style: 'color:red' }) }} {# renders as: #}
    @@ -779,7 +792,7 @@ blocks for the cells and an optional footer: .. code-block:: html+twig - {# templates/components/data_table.html.twig #} + {# templates/components/DataTable.html.twig #} @@ -812,7 +825,7 @@ The ``with`` data is what's mounted on the component object. .. code-block:: html+twig {# templates/some_page.html.twig #} - {% component table with {headers: ['key', 'value'], data: [[1, 2], [3, 4]]} %} + {% component DataTable with {headers: ['key', 'value'], data: [[1, 2], [3, 4]]} %} {% block th_class %}{{ parent() }} text-bold{% endblock %} {% block td_class %}{{ parent() }} text-italic{% endblock %} diff --git a/src/TwigComponent/src/Attribute/AsTwigComponent.php b/src/TwigComponent/src/Attribute/AsTwigComponent.php index e385bc3f96b..79268956d65 100644 --- a/src/TwigComponent/src/Attribute/AsTwigComponent.php +++ b/src/TwigComponent/src/Attribute/AsTwigComponent.php @@ -18,7 +18,7 @@ class AsTwigComponent { public function __construct( - private string $name, + private ?string $name = null, private ?string $template = null, private bool $exposePublicProps = true, private string $attributesVar = 'attributes' diff --git a/src/TwigComponent/src/DependencyInjection/Compiler/TwigComponentPass.php b/src/TwigComponent/src/DependencyInjection/Compiler/TwigComponentPass.php index aebbc94e120..b2bb184f90f 100644 --- a/src/TwigComponent/src/DependencyInjection/Compiler/TwigComponentPass.php +++ b/src/TwigComponent/src/DependencyInjection/Compiler/TwigComponentPass.php @@ -12,8 +12,10 @@ namespace Symfony\UX\TwigComponent\DependencyInjection\Compiler; use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface; +use Symfony\Component\DependencyInjection\Compiler\ServiceLocatorTagPass; use Symfony\Component\DependencyInjection\ContainerBuilder; use Symfony\Component\DependencyInjection\Exception\LogicException; +use Symfony\Component\DependencyInjection\Reference; /** * @author Kevin Bond @@ -26,6 +28,8 @@ public function process(ContainerBuilder $container): void { $componentConfig = []; + $componentReferences = []; + $componentNames = []; foreach ($container->findTaggedServiceIds('twig.component') as $id => $tags) { $definition = $container->findDefinition($id); @@ -34,18 +38,25 @@ public function process(ContainerBuilder $container): void foreach ($tags as $tag) { if (!\array_key_exists('key', $tag)) { - throw new LogicException(sprintf('"twig.component" tag for service "%s" requires a "key" attribute.', $id)); + $fqcn = $definition->getClass(); + $name = substr($fqcn, strrpos($fqcn, '\\') + 1); + if (\in_array($name, $componentNames, true)) { + throw new LogicException(sprintf('Failed creating the "%s" component with the automatic name "%s": another component already has this name. To fix this, give the component an explicit name (hint: using "%s" will override the existing component).', $fqcn, $name, $name)); + } + $tag['key'] = $name; } $tag['service_id'] = $id; $tag['class'] = $definition->getClass(); $tag['template'] = $tag['template'] ?? sprintf('components/%s.html.twig', str_replace(':', '/', $tag['key'])); $componentConfig[$tag['key']] = $tag; + $componentReferences[$tag['key']] = new Reference($id); + $componentNames[] = $tag['key']; } } - $container->findDefinition('ux.twig_component.component_factory') - ->setArgument(3, $componentConfig) - ; + $factoryDefinition = $container->findDefinition('ux.twig_component.component_factory'); + $factoryDefinition->setArgument(0, ServiceLocatorTagPass::register($container, $componentReferences)); + $factoryDefinition->setArgument(3, $componentConfig); } } diff --git a/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php b/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php index 4adc37aef71..3ac42aabd3e 100644 --- a/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php +++ b/src/TwigComponent/src/DependencyInjection/TwigComponentExtension.php @@ -12,8 +12,6 @@ namespace Symfony\UX\TwigComponent\DependencyInjection; use Symfony\Component\DependencyInjection\Argument\AbstractArgument; -use Symfony\Component\DependencyInjection\Argument\ServiceLocatorArgument; -use Symfony\Component\DependencyInjection\Argument\TaggedIteratorArgument; use Symfony\Component\DependencyInjection\ChildDefinition; use Symfony\Component\DependencyInjection\ContainerBuilder; use Symfony\Component\DependencyInjection\Exception\LogicException; @@ -49,7 +47,7 @@ static function (ChildDefinition $definition, AsTwigComponent $attribute) { $container->register('ux.twig_component.component_factory', ComponentFactory::class) ->setArguments([ - new ServiceLocatorArgument(new TaggedIteratorArgument('twig.component', 'key', null, true)), + class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %s.', TwigComponentPass::class)) : null, new Reference('property_accessor'), new Reference('event_dispatcher'), class_exists(AbstractArgument::class) ? new AbstractArgument(sprintf('Added in %s.', TwigComponentPass::class)) : [], diff --git a/src/TwigComponent/tests/Fixtures/Kernel.php b/src/TwigComponent/tests/Fixtures/Kernel.php index f72f7a3ccad..76c04299868 100644 --- a/src/TwigComponent/tests/Fixtures/Kernel.php +++ b/src/TwigComponent/tests/Fixtures/Kernel.php @@ -63,5 +63,17 @@ protected function configureContainer(ContainerConfigurator $c): void ->tag('twig.component') ; } + + if ('missing_key_with_collision' === $this->environment) { + $services->set('component_b_1', ComponentB::class) + ->tag('twig.component', [ + 'key' => 'ComponentB', + ]) + ; + // this will try to reuse the same ComponentB name + $services->set('component_b_2', ComponentB::class) + ->tag('twig.component') + ; + } } } diff --git a/src/TwigComponent/tests/Integration/ComponentFactoryTest.php b/src/TwigComponent/tests/Integration/ComponentFactoryTest.php index 30fbc9de96e..9c6af84a320 100644 --- a/src/TwigComponent/tests/Integration/ComponentFactoryTest.php +++ b/src/TwigComponent/tests/Integration/ComponentFactoryTest.php @@ -110,12 +110,22 @@ public function __toString(): string self::assertSame(['data-item-id-param' => 'test'], $attributes); } - public function testTwigComponentServiceTagMustHaveKey(): void + public function testTwigComponentServiceTagWithoutKeyUsesShortClassName(): void + { + // boots ComponentB, but with no key on the tag + self::bootKernel(['environment' => 'missing_key']); + $component = $this->createComponent('ComponentB'); + self::assertInstanceOf(ComponentB::class, $component); + } + + public function testTwigComponentServiceTagWithoutKeyButCollissionCausesAnException(): void { $this->expectException(LogicException::class); - $this->expectExceptionMessage('"twig.component" tag for service "missing_key" requires a "key" attribute.'); + $this->expectExceptionMessage('Failed creating the "Symfony\UX\TwigComponent\Tests\Fixtures\Component\ComponentB" component with the automatic name "ComponentB": another component already has this name. To fix this, give the component an explicit name (hint: using "ComponentB" will override the existing component).'); - self::bootKernel(['environment' => 'missing_key']); + self::bootKernel(['environment' => 'missing_key_with_collision']); + $component = $this->createComponent('ComponentB'); + self::assertInstanceOf(ComponentB::class, $component); } public function testCanGetMetadataForComponentByName(): void diff --git a/ux.symfony.com/code_snippets/_search_packages.html.twig b/ux.symfony.com/code_snippets/_SearchPackages.html.twig similarity index 100% rename from ux.symfony.com/code_snippets/_search_packages.html.twig rename to ux.symfony.com/code_snippets/_SearchPackages.html.twig diff --git a/ux.symfony.com/code_snippets/_alert_danger.html.twig b/ux.symfony.com/code_snippets/_alert_danger.html.twig index 2c2224ba2e0..c8c3e465d05 100644 --- a/ux.symfony.com/code_snippets/_alert_danger.html.twig +++ b/ux.symfony.com/code_snippets/_alert_danger.html.twig @@ -1,4 +1,4 @@ -{{ component('alert', { +{{ component('Alert', { type: 'danger', message: 'Oh no! The dinos escaped!', }) }} diff --git a/ux.symfony.com/code_snippets/_alert_success.html.twig b/ux.symfony.com/code_snippets/_alert_success.html.twig index 98e8d963c2b..5e4d4f8c46d 100644 --- a/ux.symfony.com/code_snippets/_alert_success.html.twig +++ b/ux.symfony.com/code_snippets/_alert_success.html.twig @@ -1,3 +1,3 @@ -{{ component('alert', { +{{ component('Alert', { message: 'I am a success alert!', }) }} diff --git a/ux.symfony.com/src/Controller/LiveComponentDemoController.php b/ux.symfony.com/src/Controller/LiveComponentDemoController.php index 03070cb99ff..98c3e36dcdb 100644 --- a/ux.symfony.com/src/Controller/LiveComponentDemoController.php +++ b/ux.symfony.com/src/Controller/LiveComponentDemoController.php @@ -4,7 +4,7 @@ use App\Entity\TodoItem; use App\Entity\TodoList; -use App\Form\TodoListForm; +use App\Form\TodoListFormType; use App\Repository\FoodRepository; use App\Repository\TodoListRepository; use App\Service\LiveDemoRepository; @@ -31,7 +31,7 @@ public function demoFormCollectionType(LiveDemoRepository $liveDemoRepository, R $todoList = new TodoList(); $todoList->addTodoItem(new TodoItem()); } - $form = $this->createForm(TodoListForm::class, $todoList); + $form = $this->createForm(TodoListFormType::class, $todoList); $form->handleRequest($request); if ($form->isSubmitted() && $form->isValid()) { diff --git a/ux.symfony.com/src/Form/RegistrationForm.php b/ux.symfony.com/src/Form/RegistrationFormType.php similarity index 96% rename from ux.symfony.com/src/Form/RegistrationForm.php rename to ux.symfony.com/src/Form/RegistrationFormType.php index e440eaa5a7a..bf0d7b73811 100644 --- a/ux.symfony.com/src/Form/RegistrationForm.php +++ b/ux.symfony.com/src/Form/RegistrationFormType.php @@ -11,7 +11,7 @@ use Symfony\Component\Validator\Constraints\Length; use Symfony\Component\Validator\Constraints\NotBlank; -class RegistrationForm extends AbstractType +class RegistrationFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { diff --git a/ux.symfony.com/src/Form/TodoListForm.php b/ux.symfony.com/src/Form/TodoListFormType.php similarity index 96% rename from ux.symfony.com/src/Form/TodoListForm.php rename to ux.symfony.com/src/Form/TodoListFormType.php index 49776007afb..5b70f7d280d 100644 --- a/ux.symfony.com/src/Form/TodoListForm.php +++ b/ux.symfony.com/src/Form/TodoListFormType.php @@ -8,7 +8,7 @@ use Symfony\Component\OptionsResolver\OptionsResolver; use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType; -class TodoListForm extends AbstractType +class TodoListFormType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { diff --git a/ux.symfony.com/src/Twig/AlertComponent.php b/ux.symfony.com/src/Twig/Alert.php similarity index 92% rename from ux.symfony.com/src/Twig/AlertComponent.php rename to ux.symfony.com/src/Twig/Alert.php index 1898ce83a8a..9513280f4df 100644 --- a/ux.symfony.com/src/Twig/AlertComponent.php +++ b/ux.symfony.com/src/Twig/Alert.php @@ -5,8 +5,8 @@ use App\Service\PackageRepository; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent('alert')] -class AlertComponent +#[AsTwigComponent()] +class Alert { public string $type = 'success'; public string $message; diff --git a/ux.symfony.com/src/Twig/CodeBlockComponent.php b/ux.symfony.com/src/Twig/CodeBlock.php similarity index 93% rename from ux.symfony.com/src/Twig/CodeBlockComponent.php rename to ux.symfony.com/src/Twig/CodeBlock.php index 25f086a96da..12c8a40c82f 100644 --- a/ux.symfony.com/src/Twig/CodeBlockComponent.php +++ b/ux.symfony.com/src/Twig/CodeBlock.php @@ -5,8 +5,8 @@ use Highlight\Highlighter; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent('code_block')] -class CodeBlockComponent +#[AsTwigComponent()] +class CodeBlock { public string $filename; public string $height = 'auto'; diff --git a/ux.symfony.com/src/Twig/DinoChartComponent.php b/ux.symfony.com/src/Twig/DinoChart.php similarity index 96% rename from ux.symfony.com/src/Twig/DinoChartComponent.php rename to ux.symfony.com/src/Twig/DinoChart.php index b7d926d54fa..d4ec3856489 100644 --- a/ux.symfony.com/src/Twig/DinoChartComponent.php +++ b/ux.symfony.com/src/Twig/DinoChart.php @@ -10,8 +10,8 @@ use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; -#[AsLiveComponent('dino_chart')] -class DinoChartComponent +#[AsLiveComponent()] +class DinoChart { use DefaultActionTrait; diff --git a/ux.symfony.com/src/Twig/DocsLinkComponent.php b/ux.symfony.com/src/Twig/DocsLink.php similarity index 86% rename from ux.symfony.com/src/Twig/DocsLinkComponent.php rename to ux.symfony.com/src/Twig/DocsLink.php index f75f123a281..74434a19828 100644 --- a/ux.symfony.com/src/Twig/DocsLinkComponent.php +++ b/ux.symfony.com/src/Twig/DocsLink.php @@ -5,8 +5,8 @@ use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; -#[AsTwigComponent('docs_link')] -class DocsLinkComponent +#[AsTwigComponent()] +class DocsLink { public string $url; public string $title; diff --git a/ux.symfony.com/src/Twig/FoodVoteComponent.php b/ux.symfony.com/src/Twig/FoodVote.php similarity index 91% rename from ux.symfony.com/src/Twig/FoodVoteComponent.php rename to ux.symfony.com/src/Twig/FoodVote.php index e9a4de74890..60247723010 100644 --- a/ux.symfony.com/src/Twig/FoodVoteComponent.php +++ b/ux.symfony.com/src/Twig/FoodVote.php @@ -11,8 +11,8 @@ use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\DefaultActionTrait; -#[AsLiveComponent('food_vote')] -class FoodVoteComponent extends AbstractController +#[AsLiveComponent()] +class FoodVote extends AbstractController { use DefaultActionTrait; diff --git a/ux.symfony.com/src/Twig/HomepageTerminalSwapperComponent.php b/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php similarity index 90% rename from ux.symfony.com/src/Twig/HomepageTerminalSwapperComponent.php rename to ux.symfony.com/src/Twig/HomepageTerminalSwapper.php index 1a0897178b8..ec1d084b6c9 100644 --- a/ux.symfony.com/src/Twig/HomepageTerminalSwapperComponent.php +++ b/ux.symfony.com/src/Twig/HomepageTerminalSwapper.php @@ -7,8 +7,8 @@ use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate; -#[AsTwigComponent('homepage_terminal_swapper')] -class HomepageTerminalSwapperComponent +#[AsTwigComponent()] +class HomepageTerminalSwapper { public function __construct(private PackageRepository $packageRepository) { diff --git a/ux.symfony.com/src/Twig/InlineEditFoodComponent.php b/ux.symfony.com/src/Twig/InlineEditFood.php similarity index 94% rename from ux.symfony.com/src/Twig/InlineEditFoodComponent.php rename to ux.symfony.com/src/Twig/InlineEditFood.php index bc5985bd7d2..0af9b70550f 100644 --- a/ux.symfony.com/src/Twig/InlineEditFoodComponent.php +++ b/ux.symfony.com/src/Twig/InlineEditFood.php @@ -12,8 +12,8 @@ use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\LiveComponent\ValidatableComponentTrait; -#[AsLiveComponent('inline_edit_food')] -class InlineEditFoodComponent extends AbstractController +#[AsLiveComponent()] +class InlineEditFood extends AbstractController { use DefaultActionTrait; use ValidatableComponentTrait; diff --git a/ux.symfony.com/src/Twig/MealPlannerComponent.php b/ux.symfony.com/src/Twig/MealPlanner.php similarity index 85% rename from ux.symfony.com/src/Twig/MealPlannerComponent.php rename to ux.symfony.com/src/Twig/MealPlanner.php index 94329d24b2c..b49037065a1 100644 --- a/ux.symfony.com/src/Twig/MealPlannerComponent.php +++ b/ux.symfony.com/src/Twig/MealPlanner.php @@ -9,8 +9,8 @@ use Symfony\UX\LiveComponent\ComponentWithFormTrait; use Symfony\UX\LiveComponent\DefaultActionTrait; -#[AsLiveComponent('meal_planner')] -class MealPlannerComponent extends AbstractController +#[AsLiveComponent()] +class MealPlanner extends AbstractController { use ComponentWithFormTrait; use DefaultActionTrait; diff --git a/ux.symfony.com/src/Twig/PackageHeaderComponent.php b/ux.symfony.com/src/Twig/PackageHeader.php similarity index 89% rename from ux.symfony.com/src/Twig/PackageHeaderComponent.php rename to ux.symfony.com/src/Twig/PackageHeader.php index ce06fc4b47c..a0deb72104c 100644 --- a/ux.symfony.com/src/Twig/PackageHeaderComponent.php +++ b/ux.symfony.com/src/Twig/PackageHeader.php @@ -6,8 +6,8 @@ use App\Repository\ChatRepository; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent('package_header')] -class PackageHeaderComponent +#[AsTwigComponent()] +class PackageHeader { public Package $package; diff --git a/ux.symfony.com/src/Twig/RegistrationFormComponent.php b/ux.symfony.com/src/Twig/RegistrationForm.php similarity index 86% rename from ux.symfony.com/src/Twig/RegistrationFormComponent.php rename to ux.symfony.com/src/Twig/RegistrationForm.php index d217fc1e0ab..424c743a0ba 100644 --- a/ux.symfony.com/src/Twig/RegistrationFormComponent.php +++ b/ux.symfony.com/src/Twig/RegistrationForm.php @@ -2,7 +2,7 @@ namespace App\Twig; -use App\Form\RegistrationForm; +use App\Form\RegistrationFormType; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Form\FormInterface; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; @@ -11,8 +11,8 @@ use Symfony\UX\LiveComponent\ComponentWithFormTrait; use Symfony\UX\LiveComponent\DefaultActionTrait; -#[AsLiveComponent('registration_form')] -class RegistrationFormComponent extends AbstractController +#[AsLiveComponent()] +class RegistrationForm extends AbstractController { use ComponentWithFormTrait; use DefaultActionTrait; @@ -24,7 +24,7 @@ class RegistrationFormComponent extends AbstractController protected function instantiateForm(): FormInterface { - return $this->createForm(RegistrationForm::class); + return $this->createForm(RegistrationFormType::class); } public function hasValidationErrors(): bool diff --git a/ux.symfony.com/src/Twig/SearchPackagesComponent.php b/ux.symfony.com/src/Twig/SearchPackages.php similarity index 88% rename from ux.symfony.com/src/Twig/SearchPackagesComponent.php rename to ux.symfony.com/src/Twig/SearchPackages.php index 59d62c1ed4a..5f74fef104f 100644 --- a/ux.symfony.com/src/Twig/SearchPackagesComponent.php +++ b/ux.symfony.com/src/Twig/SearchPackages.php @@ -7,8 +7,8 @@ use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\DefaultActionTrait; -#[AsLiveComponent('search_packages')] -class SearchPackagesComponent +#[AsLiveComponent()] +class SearchPackages { use DefaultActionTrait; diff --git a/ux.symfony.com/src/Twig/TerminalComponent.php b/ux.symfony.com/src/Twig/Terminal.php similarity index 88% rename from ux.symfony.com/src/Twig/TerminalComponent.php rename to ux.symfony.com/src/Twig/Terminal.php index 8866304d136..e07825a343f 100644 --- a/ux.symfony.com/src/Twig/TerminalComponent.php +++ b/ux.symfony.com/src/Twig/Terminal.php @@ -5,8 +5,8 @@ use App\Util\SourceCleaner; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent('terminal')] -class TerminalComponent +#[AsTwigComponent()] +class Terminal { public int $bottomPadding = 100; public string $height = 'auto'; diff --git a/ux.symfony.com/src/Twig/TodoListFormComponent.php b/ux.symfony.com/src/Twig/TodoListForm.php similarity index 80% rename from ux.symfony.com/src/Twig/TodoListFormComponent.php rename to ux.symfony.com/src/Twig/TodoListForm.php index d23e508338b..3b85126714e 100644 --- a/ux.symfony.com/src/Twig/TodoListFormComponent.php +++ b/ux.symfony.com/src/Twig/TodoListForm.php @@ -3,7 +3,7 @@ namespace App\Twig; use App\Entity\TodoList; -use App\Form\TodoListForm; +use App\Form\TodoListFormType; use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; use Symfony\Component\Form\FormInterface; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; @@ -11,8 +11,8 @@ use Symfony\UX\LiveComponent\DefaultActionTrait; use Symfony\UX\LiveComponent\LiveCollectionTrait; -#[AsLiveComponent('todo_list_form')] -class TodoListFormComponent extends AbstractController +#[AsLiveComponent()] +class TodoListForm extends AbstractController { use DefaultActionTrait; use LiveCollectionTrait; @@ -23,7 +23,7 @@ class TodoListFormComponent extends AbstractController protected function instantiateForm(): FormInterface { return $this->createForm( - TodoListForm::class, + TodoListFormType::class, $this->todoList ); } diff --git a/ux.symfony.com/templates/components/alert.html.twig b/ux.symfony.com/templates/components/Alert.html.twig similarity index 100% rename from ux.symfony.com/templates/components/alert.html.twig rename to ux.symfony.com/templates/components/Alert.html.twig diff --git a/ux.symfony.com/templates/components/code_block.html.twig b/ux.symfony.com/templates/components/CodeBlock.html.twig similarity index 100% rename from ux.symfony.com/templates/components/code_block.html.twig rename to ux.symfony.com/templates/components/CodeBlock.html.twig diff --git a/ux.symfony.com/templates/components/dino_chart.html.twig b/ux.symfony.com/templates/components/DinoChart.html.twig similarity index 100% rename from ux.symfony.com/templates/components/dino_chart.html.twig rename to ux.symfony.com/templates/components/DinoChart.html.twig diff --git a/ux.symfony.com/templates/components/docs_link.html.twig b/ux.symfony.com/templates/components/DocsLink.html.twig similarity index 100% rename from ux.symfony.com/templates/components/docs_link.html.twig rename to ux.symfony.com/templates/components/DocsLink.html.twig diff --git a/ux.symfony.com/templates/components/food_vote.html.twig b/ux.symfony.com/templates/components/FoodVote.html.twig similarity index 100% rename from ux.symfony.com/templates/components/food_vote.html.twig rename to ux.symfony.com/templates/components/FoodVote.html.twig diff --git a/ux.symfony.com/templates/components/homepage_terminal_swapper.html.twig b/ux.symfony.com/templates/components/HomepageTerminalSwapper.html.twig similarity index 90% rename from ux.symfony.com/templates/components/homepage_terminal_swapper.html.twig rename to ux.symfony.com/templates/components/HomepageTerminalSwapper.html.twig index c52c4ca8be1..f4ab915223b 100644 --- a/ux.symfony.com/templates/components/homepage_terminal_swapper.html.twig +++ b/ux.symfony.com/templates/components/HomepageTerminalSwapper.html.twig @@ -1,7 +1,7 @@
    - {% component terminal with { height: '180px', bottomPadding: 0, processContents: false } %} + {% component Terminal with { height: '180px', bottomPadding: 0, processContents: false } %} {% block content -%} - - {% if computed.packages|length > 0 %}
    {% for package in computed.packages %} diff --git a/ux.symfony.com/templates/components/terminal.html.twig b/ux.symfony.com/templates/components/Terminal.html.twig similarity index 100% rename from ux.symfony.com/templates/components/terminal.html.twig rename to ux.symfony.com/templates/components/Terminal.html.twig diff --git a/ux.symfony.com/templates/components/todo_list_form.html.twig b/ux.symfony.com/templates/components/TodoListForm.html.twig similarity index 100% rename from ux.symfony.com/templates/components/todo_list_form.html.twig rename to ux.symfony.com/templates/components/TodoListForm.html.twig diff --git a/ux.symfony.com/templates/liveDemoTabsBase.html.twig b/ux.symfony.com/templates/liveDemoTabsBase.html.twig index 214ff8596e3..1b8a11c3c2d 100644 --- a/ux.symfony.com/templates/liveDemoTabsBase.html.twig +++ b/ux.symfony.com/templates/liveDemoTabsBase.html.twig @@ -5,10 +5,10 @@
    {% for food in foods %} - {{ component('food_vote', { + {{ component('FoodVote', { food: food }) }} {% endfor %} diff --git a/ux.symfony.com/templates/main/_documentationLinks.html.twig b/ux.symfony.com/templates/main/_documentationLinks.html.twig index d314a15f106..b53bb5a0267 100644 --- a/ux.symfony.com/templates/main/_documentationLinks.html.twig +++ b/ux.symfony.com/templates/main/_documentationLinks.html.twig @@ -1,7 +1,7 @@
    - {{ component('docs_link', { + {{ component('DocsLink', { url: package.officialDocsUrl, title: 'Symfony UX '~package.humanName~' Docs', text: 'Get going with the official documentation.' @@ -10,7 +10,7 @@ {% if package.screencastLink %}
    - {{ component('docs_link', { + {{ component('DocsLink', { url: package.screencastLink, title: 'Screencasts', text: package.screencastLinkText @@ -20,7 +20,7 @@ {% if package.docsLink %}
    - {{ component('docs_link', { + {{ component('DocsLink', { url: package.docsLink, title: 'Related Docs', text: package.docsLinkText diff --git a/ux.symfony.com/templates/main/_installTerminal.html.twig b/ux.symfony.com/templates/main/_installTerminal.html.twig index 177ae8c48dd..c9a5d5f01c9 100644 --- a/ux.symfony.com/templates/main/_installTerminal.html.twig +++ b/ux.symfony.com/templates/main/_installTerminal.html.twig @@ -1,7 +1,7 @@

    Install It

    - {% component terminal with { bottomPadding: 20 } %} + {% component Terminal with { bottomPadding: 20 } %} {% block content %} composer require ux {{ package.composerName }} npm install --force diff --git a/ux.symfony.com/templates/main/components.html.twig b/ux.symfony.com/templates/main/components.html.twig index 44136a36383..b298f152bb6 100644 --- a/ux.symfony.com/templates/main/components.html.twig +++ b/ux.symfony.com/templates/main/components.html.twig @@ -15,14 +15,14 @@
    - {{ component('docs_link', { + {{ component('DocsLink', { url: 'https://symfonycasts.com/screencast/stimulus', title: 'Screencasts', text: 'Jump right into with the Symfony UX & Stimulus screencast.' }) }}
    - {{ component('docs_link', { + {{ component('DocsLink', { url: 'https://symfony.com/doc/current/frontend/ux.html', title: 'Documentation', text: 'Ready to get started? The official symfony.com UX Docs.' diff --git a/ux.symfony.com/templates/main/homepage.html.twig b/ux.symfony.com/templates/main/homepage.html.twig index a20016c17a5..55c7d7b3d17 100644 --- a/ux.symfony.com/templates/main/homepage.html.twig +++ b/ux.symfony.com/templates/main/homepage.html.twig @@ -10,7 +10,7 @@

    A set of PHP & JavaScript packages to solve every day frontend problems featuring Stimulus and Turbo.

    - {{ component('homepage_terminal_swapper') }} + {{ component('HomepageTerminalSwapper') }}
    @@ -22,7 +22,7 @@
    - {% component terminal %} + {% component Terminal %} {% block content %} composer require symfony/webpack-encore-bundle npm install @@ -54,14 +54,14 @@
    - {% component code_block with { filename: 'templates/anything.html.twig' } %} + {% component CodeBlock with { filename: 'templates/anything.html.twig' } %} {% block content %} {{- source('@code_snippets/_markdown.html.twig') -}} {% endblock %} {% endcomponent %}
    - {% component code_block with { filename: 'assets/controllers/markdown_controller.js' } %} + {% component CodeBlock with { filename: 'assets/controllers/markdown_controller.js' } %} {% block content %} {{- source('@assets/controllers/markdown-controller.js') -}} {% endblock %} diff --git a/ux.symfony.com/templates/turbo/turbo.html.twig b/ux.symfony.com/templates/turbo/turbo.html.twig index 35cb69cbbf5..14fbdd5d4f0 100644 --- a/ux.symfony.com/templates/turbo/turbo.html.twig +++ b/ux.symfony.com/templates/turbo/turbo.html.twig @@ -2,7 +2,7 @@ {% block body %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Speed of an SPA', withChatIcon: true diff --git a/ux.symfony.com/templates/ux_packages/autocomplete.html.twig b/ux.symfony.com/templates/ux_packages/autocomplete.html.twig index 62c4e853dbe..476effca117 100644 --- a/ux.symfony.com/templates/ux_packages/autocomplete.html.twig +++ b/ux.symfony.com/templates/ux_packages/autocomplete.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Smart Form Controls' } %} @@ -12,7 +12,7 @@ {% block sub_content %} Breathe life into EntityType and - ChoiceType fields + ChoiceType fields with Tom Select and a sprinkle of Ajax. {% endblock %} @@ -20,7 +20,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Form/TimeForAMealForm.php', height: '400px' } %} + {% component CodeBlock with { filename: 'src/Form/TimeForAMealForm.php', height: '400px' } %} {% block content %} {{- source('@src/Form/TimeForAMealForm.php')|cleanup_php_file -}} {% endblock %} @@ -28,7 +28,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'src/Form/FoodAutocompleteField.php', height: '400px' } %} + {% component CodeBlock with { filename: 'src/Form/FoodAutocompleteField.php', height: '400px' } %} {% block content %} {{- source('@src/Form/FoodAutocompleteField.php')|cleanup_php_file -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/chartjs.html.twig b/ux.symfony.com/templates/ux_packages/chartjs.html.twig index 01cfbddf2d5..c453f110670 100644 --- a/ux.symfony.com/templates/ux_packages/chartjs.html.twig +++ b/ux.symfony.com/templates/ux_packages/chartjs.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Charts from PHP' } %} @@ -18,7 +18,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Controller/ChartController.php', height: '250px' } %} + {% component CodeBlock with { filename: 'src/Controller/ChartController.php', height: '250px' } %} {% block content %} {{- source('@code_snippets/_ChartController.php')|cleanup_php_file(removeClass=true) -}} {% endblock %} @@ -26,7 +26,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/chart/chartjs.html.twig', height: '250px' } %} + {% component CodeBlock with { filename: 'templates/chart/chartjs.html.twig', height: '250px' } %} {% block content %} {{- source('@code_snippets/_chartjs.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/cropperjs.html.twig b/ux.symfony.com/templates/ux_packages/cropperjs.html.twig index 0f42285df9f..12aa6c8abb3 100644 --- a/ux.symfony.com/templates/ux_packages/cropperjs.html.twig +++ b/ux.symfony.com/templates/ux_packages/cropperjs.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Craft the perfect image' } %} @@ -18,7 +18,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Controller/CroppingController.php', height: '270px' } %} + {% component CodeBlock with { filename: 'src/Controller/CroppingController.php', height: '270px' } %} {% block content %} {{- source('@code_snippets/_CroppingController.php')|cleanup_php_file(removeClass=true) -}} {% endblock %} @@ -26,7 +26,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/cropping/cropper.html.twig', height: '270px' } %} + {% component CodeBlock with { filename: 'templates/cropping/cropper.html.twig', height: '270px' } %} {% block content %} {{- source('@code_snippets/_cropper.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/dropzone.html.twig b/ux.symfony.com/templates/ux_packages/dropzone.html.twig index adad88a44af..423fee0c4ec 100644 --- a/ux.symfony.com/templates/ux_packages/dropzone.html.twig +++ b/ux.symfony.com/templates/ux_packages/dropzone.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Styled Upload Zone' } %} @@ -18,7 +18,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Form/DropzoneForm.php' } %} + {% component CodeBlock with { filename: 'src/Form/DropzoneForm.php' } %} {% block content %} {{- source('@src/Form/DropzoneForm.php')|cleanup_php_file(removeClass=true) -}} {% endblock %} @@ -26,7 +26,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/anything.html.twig' } %} + {% component CodeBlock with { filename: 'templates/anything.html.twig' } %} {% block content %} {{- source('@code_snippets/_dropzone.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/lazy-image.html.twig b/ux.symfony.com/templates/ux_packages/lazy-image.html.twig index d4d2065a5aa..cfe41895a65 100644 --- a/ux.symfony.com/templates/ux_packages/lazy-image.html.twig +++ b/ux.symfony.com/templates/ux_packages/lazy-image.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Images that Zoom', withChatIcon: true @@ -19,7 +19,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'templates/images.html.twig', height: '310px' } %} + {% component CodeBlock with { filename: 'templates/images.html.twig', height: '310px' } %} {% block content %} {{- source('@code_snippets/_lazy_image.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/notify.html.twig b/ux.symfony.com/templates/ux_packages/notify.html.twig index fed288e3ff5..3a5ba7bd50f 100644 --- a/ux.symfony.com/templates/ux_packages/notify.html.twig +++ b/ux.symfony.com/templates/ux_packages/notify.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Native Browser Notifications' } %} @@ -17,7 +17,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Controller/NotifierController.php', height: '300px' } %} + {% component CodeBlock with { filename: 'src/Controller/NotifierController.php', height: '300px' } %} {% block content %} {{- source('@code_snippets/_NotifierController.php')|cleanup_php_file(removeClass=true) -}} {% endblock %} @@ -25,7 +25,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/notifier/notify.html.twig', height: '300px' } %} + {% component CodeBlock with { filename: 'templates/notifier/notify.html.twig', height: '300px' } %} {% block content %} {{- source('@code_snippets/_notify.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/react.html.twig b/ux.symfony.com/templates/ux_packages/react.html.twig index 85af24ad141..364a61161ba 100644 --- a/ux.symfony.com/templates/ux_packages/react.html.twig +++ b/ux.symfony.com/templates/ux_packages/react.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'React Component Rendering' } %} @@ -17,7 +17,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'templates/react.html.twig', height: '350px' } %} + {% component CodeBlock with { filename: 'templates/react.html.twig', height: '350px' } %} {% block content %} {{- source('@code_snippets/_react.html.twig') -}} {% endblock %} @@ -25,7 +25,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'assets/react/controllers/PackageSearch.jsx', height: '350px' } %} + {% component CodeBlock with { filename: 'assets/react/controllers/PackageSearch.jsx', height: '350px' } %} {% block content %} {{- source('@code_snippets/_PackageSearch.jsx') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/swup.html.twig b/ux.symfony.com/templates/ux_packages/swup.html.twig index f849a4d8d76..f09b36e3cb5 100644 --- a/ux.symfony.com/templates/ux_packages/swup.html.twig +++ b/ux.symfony.com/templates/ux_packages/swup.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Slick Page Transitions' } %} @@ -17,7 +17,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Controller/SwupController.php' } %} + {% component CodeBlock with { filename: 'src/Controller/SwupController.php' } %} {% block content %} {{- source('@code_snippets/_SwupController.php')|cleanup_php_file(removeClass=true) -}} {% endblock %} @@ -25,7 +25,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/swup.html.twig' } %} + {% component CodeBlock with { filename: 'templates/swup.html.twig' } %} {% block content %} {{- source('@code_snippets/_swup.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/twig-component.html.twig b/ux.symfony.com/templates/ux_packages/twig-component.html.twig index ed4ddc10c65..725d5accf1a 100644 --- a/ux.symfony.com/templates/ux_packages/twig-component.html.twig +++ b/ux.symfony.com/templates/ux_packages/twig-component.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Object-Oriented Templates' } %} @@ -17,17 +17,17 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'src/Twig/AlertComponent.php', height: '330px' } %} + {% component CodeBlock with { filename: 'src/Twig/Alert.php', height: '330px' } %} {% block content %} - {{- source('@src/Twig/AlertComponent.php')|cleanup_php_file -}} + {{- source('@src/Twig/Alert.php')|cleanup_php_file -}} {% endblock %} {% endcomponent %} {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'templates/components/alert.html.twig', height: '330px' } %} + {% component CodeBlock with { filename: 'templates/components/Alert.html.twig', height: '330px' } %} {% block content %} - {{- source('components/alert.html.twig') -}} + {{- source('components/Alert.html.twig') -}} {% endblock %} {% endcomponent %} {% endblock %} @@ -37,12 +37,12 @@ {% block demo_content %}
    - {{ component('alert', { + {{ component('Alert', { message: 'I am a success alert!', }) }}
    - {% component code_block with { filename: 'template.html.twig', showFilename: false } %} + {% component CodeBlock with { filename: 'template.html.twig', showFilename: false } %} {% block content %} {{- source('@code_snippets/_alert_success.html.twig') -}} {% endblock %} @@ -52,13 +52,13 @@
    - {{ component('alert', { + {{ component('Alert', { type: 'danger', message: 'Oh no! The dinos escaped!', }) }}
    - {% component code_block with { filename: 'template.html.twig', showFilename: false } %} + {% component CodeBlock with { filename: 'template.html.twig', showFilename: false } %} {% block content %} {{- source('@code_snippets/_alert_danger.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/typed.html.twig b/ux.symfony.com/templates/ux_packages/typed.html.twig index f54a1c2b86e..eded3658edc 100644 --- a/ux.symfony.com/templates/ux_packages/typed.html.twig +++ b/ux.symfony.com/templates/ux_packages/typed.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'A Library that Types' } %} @@ -17,7 +17,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'templates/typed.html.twig', height: '210px' } %} + {% component CodeBlock with { filename: 'templates/typed.html.twig', height: '210px' } %} {% block content %} {{- source('@code_snippets/_typed.html.twig') -}} {% endblock %} diff --git a/ux.symfony.com/templates/ux_packages/vue.html.twig b/ux.symfony.com/templates/ux_packages/vue.html.twig index cdd4d613fdf..184efccd191 100644 --- a/ux.symfony.com/templates/ux_packages/vue.html.twig +++ b/ux.symfony.com/templates/ux_packages/vue.html.twig @@ -1,7 +1,7 @@ {% extends 'packageBase.html.twig' %} {% block component_header %} - {% component package_header with { + {% component PackageHeader with { package: package, eyebrowText: 'Vue.js Component Rendering' } %} @@ -17,7 +17,7 @@ {% endblock %} {% block code_block_left %} - {% component code_block with { filename: 'templates/vue.html.twig', height: '350px' } %} + {% component CodeBlock with { filename: 'templates/vue.html.twig', height: '350px' } %} {% block content %} {{- source('@code_snippets/_vue.html.twig') -}} {% endblock %} @@ -25,7 +25,7 @@ {% endblock %} {% block code_block_right %} - {% component code_block with { filename: 'assets/vue/controllers/PackageSearch.vue', height: '350px', language: 'html' } %} + {% component CodeBlock with { filename: 'assets/vue/controllers/PackageSearch.vue', height: '350px', language: 'html' } %} {% block content %} {{- source('@code_snippets/_PackageSearch.vue') -}} {% endblock %}