Home / PHP / Miscellaneous

Symfony UX initiative: a new JavaScript ecosystem for Symfony

Since its creation, JavaScript has always been focused on creating innovative User Experiences. It lets developers create the most intuitive and usable User Experience possible for a specific problem.
Information
Category: PHP / Miscellaneous
Watchers: 28
Star: 125
Fork: 5
Last update: Dec 5, 2020
Resource links
https://symfony.com/ux
https://github.com/symfony/ux

Symfony UX: a new JavaScript ecosystem for Symfony

Since its creation, JavaScript has always been focused on creating innovative User Experiences. It lets developers create the most intuitive and usable User Experience possible for a specific problem.

In practice however, building great User Experiences with JavaScript is difficult. It takes time to choose reliable packages, to configure them, to integrate them in your pages, and to make your front-end code interact with the rest of your infrastructure.

This problem is not new: it looks a whole lot like the state of Symfony in PHP before Symfony Flex. We need a Symfony Flex equivalent for JavaScript: a tool to build amazing User Experiences as quickly as we can now setup an HTTP client, a Mailer or an administration panel.

That's Symfony UX.

Read all the details about the Symfony UX initiative

Packages

Let's build an amazing ecosystem together

Symfony UX is an initiative: its aim is to build an ecosystem. To achieve this, we need your help: what other packages could we create in Symfony UX? What about a library that automatically adds an input mask to the text fields of your Symfony forms? Or the ability to make the EntityType render with AJAX auto-completion? Anything you do in JavaScript could be done streamlined as a UX package.

We have some ideas and we will release more packages in the coming days. The rest is on you: let's create an amazing ecosystem together!

11 Open More issues
Closed

Proposal: Put back the Annotations and PHP7 compatibility

I noticed that PHP7 support was dropped a few days ago (and annotations support) in favor of PHP8 attributes. In the long run it is a good idea but it will take us a while for transitioning to PHP8 and therefore testing the new UX components will not benefit of community feedback as much as it would if PHP7 would still be an option.

There is a huge trend of pushing the business logic toward Javascript and client-side programming which is somehow abnormal in my opinion. One of the reasons is the lack of alternatives and the UX component is so promising to fill in the gap. But if it takes 1-2 years to become a standard I'm afraid we'll all loose a big opportunity to keep the web programming sane.

opened Jul 5, 2021 by gesof 28
Closed

ux-dropzone - Error connecting controller

I'm doing something wrong. Once implemented ux-dropzone, I'm getting an error in the browser console:

Error connecting controller

DOMException: Failed to execute 'matches' on 'Element': '[[email protected]/ux-dropzone/dropzone-target~="input"]' is not a valid > selector.

opened Dec 9, 2020 by dprzygodzki 17
Closed

[Twig][Live] add component attribute system/helper

| Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | n/a | License | MIT

A common pattern with other component library's (ie blade components/vue) is to pass html attributes to your component that are set on the component's root node. This proposal adds a way to do this with twig components. Enable on your component by adding the HasAttributesTrait. Attributes are any data passed to component() that cannot be mounted on the component itself. This extra data is added to a ComponentAttributes object that lives as a public property on your component (available as attributes in your component's template).

This should all work out-of-the box with live components.

Todo:

  • [x] Tests
  • [x] Documentation
  • [x] #240
  • [x] #241
  • [x] Merge init_live_component() into attributes when available
  • [x] Document PreRender event.
  • [x] Adjust ComponentAttributes api (defaults instead of merge)
  • [ ] attributes always available in normal twig component templates (not sure about this - it would effectively make attributes native but it a lame way)
  • [x] replace init_live_component() with attributes in docs
  • [x] Finalize docs (versionadded tags)

Usage

To use, add the HasAttributesTrait to your component:

#[AsTwigComponent('my_component')]
class MyComponent
{
    use HasAttributesTrait;
}

Then, in your component's template:

{# templates/components/my_component.html.twig #}

<div{{ attributes }}>
  My Component!
</div>

When rendering the component, you can pass an array of html attributes to add:

{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div class="foo" style="color:red">
  My Component!
</div>

Defaults & Merging

In your component template, you can set defaults that are merged with passed attributes. The passed attributes override the default with the exception of class. For class, the defaults are prepended:

{# templates/components/my_component.html.twig #}

<button{{ attributes.defaults({ class: 'bar', type: 'button' }) }}>
  My Component!
</button>

{# render component #}
{{ component('my_component', { style: 'color:red' }) }}
{{ component('my_component', { class: 'foo', type: 'submit' }) }}

{# renders as: #}
<div class="bar" style="color:red">
  My Component!
</div>
<div class="bar foo" type="submit">
  My Component!
</div>

Only

{# templates/components/my_component.html.twig #}

<div{{ attributes.only('class')) }}>
  My Component!
</div>

{# render component #}
{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div class="foo">
  My Component!
</div>

Without

{# templates/components/my_component.html.twig #}

<div{{ attributes.without('class')) }}>
  My Component!
</div>

{# render component #}
{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div style="color:red">
  My Component!
</div>

Live Components

We removed the init_live_component() twig function (BC BREAK) and replaced with the attributes variable which is always available (even if your component doesn't use HasAttributesTrait).

To upgrade, replace all calls to init_live_component() with attributes:

- <div {{ init_live_component() }}>
+ <div {{ attributes }}>
opened Jan 13, 2022 by kbond 16
Closed

[Live Component] The identifier id is missing for a query of ...

Hi, I try to test the LiveComponent from SymfonyUX and I have some trouble with my formComponent. I want to add a new object with this form so I think I made the same things like documentation but I have this exception when I try to update my field :

The identifier id is missing for a query of App\Entity\PreparePayslip

Here is my component code :

namespace App\Components;

use App\Entity\PreparePayslip;
use App\Form\PreparePayslipType;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\ComponentWithFormTrait;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent('prepare_payslip_form')]
class PreparePayslipFormComponent extends AbstractController
{
    use ComponentWithFormTrait;
    use DefaultActionTrait;

    #[LiveProp(fieldName: 'data')]
    public ?PreparePayslip $preparePayslip = null;

    protected function instantiateForm(): FormInterface
    {
        return $this->createForm(PreparePayslipType::class, $this->preparePayslip);
    }
}

My template test for the component :

<div
        {{ attributes }}
        data-action="change->live#update"
>
    {{ form_start(form) }}
        {{ form_rest(form) }}
    {{ form_end(form) }}
</div>

I call this template with :

    {{ component('prepare_payslip_form', {
        preparePayslip: preparePayslip.id ? preparePayslip : null,
        form: form,
    }) }}

And finally my controller :

    #[Route('/preparation-fiche-paie/creer', name: 'prepare_payslip_create')]
    public function create(
        Request $request,
        EntityManagerInterface $entityManager,
        TranslatorInterface $translator,
        UserRepository $userRepository
    ): Response {
        $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');

        /** @var User $user */
        $user = $this->getUser();
        $preparePayslip = new PreparePayslip();
        $preparePayslip->setStatus(PreparePaySlipStatus::DRAFT);
        $preparePayslip->setUser($user);
        if ($request->query->get('impersonateUser')) {
            $impersonateUser = $userRepository->find(['id' => $request->query->get('impersonateUser')]);
            $preparePayslip->setUser($impersonateUser);
        }
        
        $form = $this->createForm(PreparePayslipType::class, $preparePayslip);
        $form->handleRequest($request);
        if ($form->isSubmitted() && $form->isValid()) {
            if ($form->get('validate')->isClicked()) {
                $preparePayslip->setStatus(PreparePaySlipStatus::PENDING_SENDING);
            }
            $preparePayslip->setCreatedAt(new DateTime());

            $entityManager->persist($preparePayslip);
            $entityManager->flush();

            $this->addFlash('success', $translator->trans('flash.prepare_payslip.create.success'));

            return $this->redirectToRoute('dashboard');
        }

        return $this->renderForm('preparePayslip/create.html.twig', [
            'form' => $form,
            'preparePayslip' => $preparePayslip,
        ]);
    }

This form worked before I try to use LiveComponent. I think, I missed something but I can't see where.

Thanks for your help :slightly_smiling_face:

opened Apr 14, 2022 by Faulk13 15
Closed

Symfony UX Turbo: content negotiation and Doctrine integration

| Q | A | ------------- | --- | Bug fix? | no | New feature? | no | Tickets | n/a | License | MIT

This PR introduces an integration of Hotwire Turbo with Symfony. It has been developed and tested over the past few months by @tgalopin, @nicolas-grekas, @chalasr, @weaverryan and me. It is complementary with #61 (#61 focuses on the integration with Twig while this one focuses on higher level features, #61 will have to be rebased on top of this one).

The best way to discover the features provided by this new component is to read the provided README file. To summarize, it provides:

  • an integration with Mercure to stream page changes to all connected browsers from the controller. It's also possible to plug other transports.
  • an integration with the Form component allowing to send changes to apply to the existing DOM in response to a POST
  • a new PHP 8 attribute (#[Broadcast]): when a Doctrine entity is marked with this attribute, all changes made to it will be broadcasted in real time to all connected clients, and the DOM will instantly update consequently (a Twig template defined the operations to apply to the existing DOM tree). An extension point is available to plug other persistence systems
  • a sample app, including Panther tests (used as functional tests for the bundle itself)
  • a template for GitHub Actions workflow

TODO:

  • [x] Merge #61 into this one (can be done in another PR)
opened Mar 2, 2021 by dunglas 14
Closed

[LiveComponent] Send live action arguments to backend

| Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | #102 Feature B | License | MIT

Include to the request to backend the named arguments from live action.

opened Jan 12, 2022 by norkunas 13
Open

[Live] Do not re-render <input file> if input holds unuploaded files

| Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | Related to #299 | License | MIT

On #299, we're working on proper file upload support for live components. BUT, I think one thing is for sure: if you simply select a file and then (later) the component re-renders for some reason, we do NOT want to "replace" the <input file that has the attached file with an empty <input file.

I've tested locally - testing proved troublesome, due to some differences in how the .value attribute seems to work on browser vs the testing environment.

Cheers!

opened May 18, 2022 by weaverryan 0
Open

[Text Editor] Adding Lexical as ux packages

Lexical is a new text editor created by facebook team . this is a demo to show case and this is the library .

I read a tweet about it and i feel like this is the text editor that symfony ux needs . here is the tweet .

opened Apr 13, 2022 by ahmedyakoubi 3
Open

LiveComponent and non managed inputs

I am trying to use https://github.com/Choices-js/Choices in a LiveComponent. I have a controller to initialize an instance of Choices.js. Without LiveComponent it works nicely, but the problem is that Choices.js modifies structure of the input and also adds an additional choice search input, so it is not managed by LiveComponent and I don't see any point to map it in the component.

Question: is it possible somehow to ignore the input changes and let the LiveComponent to rerender after bluring this non mapped input?

opened Mar 23, 2022 by norkunas 1
Open

Use ComponentAttributes everywhere in project

Hi,

It would be great to be able to use ComponentAttributes everywhere in project but ComponentAttributes is marked as @internal

For instance:

<?php

namespace App\Twig;

use Symfony\UX\TwigComponent\ComponentAttributes;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;

class AriaExtension extends AbstractExtension
{
    public function getFunctions(): array
    {
        return [
            new TwigFunction('aria_dialog', [$this, 'ariaDialog']),
        ];
    }

    public function ariaDialog()
    {
        $attributes = [
            'data-controller' => 'dialog',
            'role' => 'dialog',
            'aria-modal' => 'true',
        ];

        return new ComponentAttributes($attributes);
    }
}
opened Mar 22, 2022 by seb-jean 8
Open

[LiveComponent][RFC] Simple file upload handling

| Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | Tickets | Fix #289 | License | MIT

This is a proof of concept for very simplistic file upload support within live components. It is by no mean finished (docs and tests are missing for sure), but due to a few design choices I've made I want to get some feedback before finishing it :)

Summary of changes:

  • data will be sent to server as a "data" key withing FormData object instead of directly in body. This is required to make multipart form sending easily doable.
  • file inputs require to be marked as file target within Stimulus live controller to be handled in a special way. I did it because I believe it's a good stimulus way and also to allow user to be able to handle some file inputs their own way.
  • there is a new modifier to action string - files. When set without any parameter it will send all files from all targets to the server. When passed parameter it will only send target with name matching parameter. So it is possible to specify for example: <input type="file" name="file" data-live-target="file" data-action="change->live#action" data-action-name="stop|files(file)|action" /> that will send just this file(s) as soon as they're chosen and let backend handle it and skip it for any other actions.

This allows for simple cases of file uploads, no forms integration at this point and I believe it'd be a good idea to get this in a good shape first and then think about possible form extension. There is a good chance this change with good documentation will even be enough :)

opened Mar 18, 2022 by Lustmored 3
Open

ux-cropperjs: throws exception when the image gets resized really small

When I resize the image in the cropper of the ux-cropperjs-package to a really small image and I hit the submit button, I get the following error msg:

imagealphablending(): Argument #1 ($image) must be of type GdImage, bool given" at 
[app-path]/vendor/intervention/image/src/Intervention/Image/Gd/Commands/ResizeCommand.php line 61

I guess this happens because the output of the imagecreatetruecolor function can also be false, which doesnt get checked before using the imagealphablending function. Could you please have a look to that?

Is it possible to somehow set a minimum size for the picture in the symfony form as cropper_options?

opened Mar 14, 2022 by floriankittelmann 0

Contents

    symfony Hotwire Turbo integration for Symfony
    symfony-cli The Symfony CLI tool
    sherifabdlnaby 🐳 A preconfigured, extendable, multistage, PHP Symfony 4.3+ Docker Image for Production and Development
    symfony The Symfony PHP framework
    FriendsOfShopware A Symfony flex based template for Shopware 6
    danostech A Symfony5 development environment with PHP8, NGINX and MariaDB.
    draios The Container Ecosystem Project
    lindawangg COVID-Net Open Source Initiative
    lexik JWT authentication for your Symfony REST API
    dunglas DigitalOcean API v2 client for Symfony and API Platform
    symfony-cmf Meta package tying together all the key packages of the Symfony CMF project.
    cssnano A modular minifier, built on top of the PostCSS ecosystem.
    wouterj Integrates the Eloquent ORM in the Symfony framework
    ansien Create Symfony forms at record speed using PHP 8 attributes!
    migrify [READ-ONLY] Convert Symfony XML format to YAML or clarify Symfony/Nette syntax to readable one - all the useful utils around configs.
    yoanbernabeu Une Roadmap collaborative pour devenir un⸱e dev Symfony !
    yoanbernabeu A very simple Docker-compose to discover Symfony 6 with PHP 8.0.13 in 5 minutes
    TIBCOSoftware Project Flogo is an open source ecosystem of opinionated event-driven capabilities to simplify building efficient & modern serverless functions, microservices & edge apps.
    yoanbernabeu Reproduction of the "Matrix characterfall" effect with the Symfony Console component.
    containers Buildah - a tool that facilitates building Open Container Initiative (OCI) container images
    vinitshahdeo A community-led mentorship initiative to help beginners kickstarting their open-source journey by completing Hacktoberfest'21 challenge | Curated list of beginner-friendly issues for Hacktoberfest 2021 | Raise PR to add your issues
    Share this repo

    Related Repos


    Miscellaneous
    14
    A place to keep track of the deferredPagination changes
    hammerstonedev Deferred Pagination Macro This repo holds the Laravel macro that is referenced from https://aaronfrancis.com/2022/efficient-pagination-using-deferred-
     
    Miscellaneous
    4
    KirbyCMS plugin to geneate dynamic tracking-scripts for Ackee
    Sociant Ackee Analytics for KirbyCMS Plugin for KirbyCMS to generate dynamic tracking-scripts for Ackee. Plugin requirements PHP 7+ KirbyCMS 3 Setup Clone the
     
    Miscellaneous
    4
    ReactPHP and Viewi demo application
    ivanvoitovych ReactPHP ft. Viewi This application demonstrates Viewi integration with ReactPHP. Requirements php >= 7.4 react/http viewi/viewi Steps to integrate yo
     
    Miscellaneous
    3
    A php package to get the server information.
    ameetroy A php package to get you the server information Install Via Composer $ composer require ameetroy/server Usage use BubbleGum\Sweety; $getTotalSpace =
     
    Miscellaneous
    3
    The main website source code based on php , html/css/js and an independent db system using...
    JSM33T jsm33t.com Well umm, a neat website LIVE SITE » View Demo · Report Bug · Request a feature About The Project Desc.. Built Using Php UI Frameworks Boot
     
    Miscellaneous
    69
    A concise collection of classes for PHP, Python, JavaScript and Ruby to calculate great ci...
    mwgg GreatCircle A set of three functions, useful in geographical calculations of different sorts. Available for PHP, Python, Javascript and Ruby. Live dem
     
    Miscellaneous
    32
    A package to create Twitter Snowflake identifiers
    mattkingshott Snowflake This package enables a Laravel application to create Twitter Snowflake identifiers. It is a very thin wrapper around the excellent Snowflake
     
    Miscellaneous
    107
    A library for machine learning that builds predictions using a linear regression.
    denissimon PredictionBuilder PredictionBuilder is a library for machine learning that builds predictions using a linear regression. Requirements This project req
     
    Miscellaneous
    15
    A machine learning / bayesian inference engine assigning attributes to objects
    fulldecent 19 Questions Welcome to the 19 Questions game! 19 Questions is a machine learning game which asks you questions and guesses an object you are thinking
     
    Miscellaneous
    15
    A simple way to know if you are on the list of major security breaches like "HIBP", but it...
    Leakfarsi Leakfa.com A simple way to know if you are on the list of major security breaches like "HIBP", but it is specific for Iran. Service content This produ
     
    Miscellaneous
    8
    Um simples pacote para facilitar a integração com a proxypay
    edgarsingui PROXYPAY SDK UM SIMPLES PACOTE EM PHP PARA GERAR PAGAMENTOS UTILIZANDO A PROXYPAY INSTALAÇÃO Se deseja instalar este pacote execute o comando abaixo:
     
    Miscellaneous
    4
    Iran decoration platform is an open source Php web application where you can find your job...
    BlackIQ Iran-Decoration Platform Iran decoration platform is an open source Php web application where you can find your job as a freelancer working in people
     
    Miscellaneous
    8
    A simple writeup /installer script to use android Devices and a UI for KlipperScreen for R...
    naruhaxor AndroidKlipperScreen a simple writeup /installer script to use android Devices and a UI for KlipperScreen for RaspberryPI Thanks to JHS on the Klipper
     
    Miscellaneous
    3
    A doodle.com-like php script to create and view meeting polls to mutually arrange a conven...
    souramoo PhpMeeting A simple doodle.com clone polling script! Demo available at https://sm2030.user.srcf.net/poll/ Features Simple Flat-file data storage Polls
     
    Miscellaneous
    913
    Powerful Multi-User File Manager
    filegator FileGator - Powerful Multi-User File Manager FileGator is a free, open-source, self-hosted web application for managing files and folders. You can man