Introduce UX React component

Author: tgalopin

.github/workflows/test.yaml

@@ -101,6 +101,15 @@ jobs:
               run: php vendor/bin/simple-phpunit
               working-directory: src/LazyImage
 
+            - name: React Dependencies
+              uses: ramsey/composer-install@v2
+              with:
+                  working-directory: src/React
+                  dependency-versions: lowest
+            - name: React Tests
+              run: php vendor/bin/simple-phpunit
+              working-directory: src/React
+
     tests-php8-low-deps:
         runs-on: ubuntu-latest
         steps:
@@ -184,6 +193,14 @@ jobs:
               working-directory: src/LiveComponent
               run: php vendor/bin/simple-phpunit
 
+            - name: React Dependencies
+              uses: ramsey/composer-install@v2
+              with:
+                  working-directory: src/React
+            - name: React Tests
+              working-directory: src/React
+              run: php vendor/bin/simple-phpunit
+
     tests-php81-high-deps:
         runs-on: ubuntu-latest
         steps:

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     presets: [
         ['@babel/preset-env', {targets: {node: 'current'}}],
+        '@babel/react',
         '@babel/preset-typescript',
     ],
 };

jest.config.js

@@ -7,6 +7,6 @@ module.exports = {
         path.join(__dirname, 'test/setup.js'),
     ],
     transform: {
-        '\\.(j|t)s$': ['babel-jest', { configFile: path.join(__dirname, './babel.config.js') }]
+        '\\.(j|t)s': ['babel-jest', { configFile: path.join(__dirname, './babel.config.js') }]
     },
 }

package.json

@@ -15,7 +15,8 @@
     "devDependencies": {
         "@babel/core": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
-        "@babel/preset-typescript": "^7.15.0",
+        "@babel/preset-react": "^7.15.8",
+        "@babel/preset-typescript": "^7.15.8",
         "@rollup/plugin-node-resolve": "^13.0.0",
         "@rollup/plugin-typescript": "^8.3.0",
         "@symfony/stimulus-testing": "^2.0.1",

src/LiveComponent/assets/dist/live_controller.js

@@ -971,11 +971,14 @@ function haveRenderedValuesChanged(originalDataJson, currentDataJson, newDataJso
 }
 
 function normalizeAttributesForComparison(element) {
-    if (element.value) {
-        element.setAttribute('value', element.value);
-    }
-    else if (element.hasAttribute('value')) {
-        element.setAttribute('value', '');
+    const isFileInput = element instanceof HTMLInputElement && element.type === 'file';
+    if (!isFileInput) {
+        if (element.value) {
+            element.setAttribute('value', element.value);
+        }
+        else if (element.hasAttribute('value')) {
+            element.setAttribute('value', '');
+        }
     }
     Array.from(element.children).forEach((child) => {
         normalizeAttributesForComparison(child);

src/React/.gitattributes

@@ -0,0 +1,5 @@
+/.gitattributes export-ignore
+/.gitignore export-ignore
+/phpunit.xml.dist export-ignore
+/Resources/assets/test export-ignore
+/Tests export-ignore

src/React/.gitignore

@@ -0,0 +1,4 @@
+vendor
+composer.lock
+.php_cs.cache
+.phpunit.result.cache

src/React/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "Resources/doc"

src/React/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 2.2
+
+-   Component added

src/React/DependencyInjection/ReactExtension.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\React\DependencyInjection;
+
+use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Definition;
+use Symfony\Component\DependencyInjection\Reference;
+use Symfony\Component\HttpKernel\DependencyInjection\Extension;
+use Symfony\UX\React\Twig\ReactComponentExtension;
+
+/**
+ * @author Titouan Galopin <galopintitouan@gm ail.com>
+ *
+ * @internal
+ */
+class ReactExtension extends Extension
+{
+    public function load(array $configs, ContainerBuilder $container)
+    {
+        $container
+            ->setDefinition('twig.extension.react', new Definition(ReactComponentExtension::class))
+            ->setArgument(0, new Reference('webpack_encore.twig_stimulus_extension'))
+            ->addTag('twig.extension')
+            ->setPublic(false)
+        ;
+    }
+}