Use Symfony UX Twig

app/composer.json

@@ -28,7 +28,8 @@
     "symfony/stimulus-bundle": "^2.18",
     "symfony/twig-bundle": "7.1.*",
     "symfony/uid": "7.1.*",
-    "symfony/ux-svelte": "^2.18",
+    "symfony/ux-icons": "*",
+    "symfony/ux-twig-component": "*",
     "symfony/validator": "7.1.*",
     "symfony/webpack-encore-bundle": "^2.1",
     "symfony/yaml": "7.1.*",

app/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "a72529aa87f9a0382e7004cb5585fcd0",
+    "content-hash": "3df440bee54b17132fa0fc7be7844321",
     "packages": [
         {
             "name": "dflydev/dot-access-data",
@@ -5787,30 +5787,34 @@
             "time": "2024-05-31T14:57:53+00:00"
         },
         {
-            "name": "symfony/ux-svelte",
+            "name": "symfony/ux-icons",
-            "version": "v2.18.0",
+            "version": "v2.18.1",
             "source": {
                 "type": "git",
-                "url": "https://github.com/symfony/ux-svelte.git",
+                "url": "https://github.com/symfony/ux-icons.git",
-                "reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f"
+                "reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/symfony/ux-svelte/zipball/ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
+                "url": "https://api.github.com/repos/symfony/ux-icons/zipball/a00140b15feb16a0d991ee04e115f2a15b0d9941",
-                "reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
+                "reference": "a00140b15feb16a0d991ee04e115f2a15b0d9941",
                 "shasum": ""
             },
             "require": {
                 "php": ">=8.1",
-                "symfony/stimulus-bundle": "^2.9.1"
+                "symfony/framework-bundle": "^6.4|^7.0",
+                "symfony/twig-bundle": "^6.4|^7.0"
+            },
+            "conflict": {
+                "symfony/flex": "<1.13"
             },
             "require-dev": {
-                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/asset-mapper": "^6.4|^7.0",
-                "symfony/finder": "^5.4|^6.2|^7.0",
+                "symfony/console": "^6.4|^7.0",
-                "symfony/framework-bundle": "^5.4|^6.2|^7.0",
+                "symfony/http-client": "6.4|^7.0",
-                "symfony/phpunit-bridge": "^5.4|^6.2|^7.0",
+                "symfony/phpunit-bridge": "^6.3|^7.0",
-                "symfony/twig-bundle": "^5.4|^6.2|^7.0",
+                "symfony/ux-twig-component": "^2.14",
-                "symfony/var-dumper": "^5.4|^6.2|^7.0"
+                "zenstruck/console-test": "^1.5"
             },
             "type": "symfony-bundle",
             "extra": {
@@ -5821,7 +5825,7 @@
             },
             "autoload": {
                 "psr-4": {
-                    "Symfony\\UX\\Svelte\\": "src/"
+                    "Symfony\\UX\\Icons\\": "src/"
                 }
             },
             "notification-url": "https://packagist.org/downloads/",
@@ -5830,25 +5834,28 @@
             ],
             "authors": [
                 {
-                    "name": "Titouan Galopin",
+                    "name": "Kevin Bond",
-                    "email": "galopintitouan@gmail.com"
+                    "email": "kevinbond@gmail.com"
                 },
                 {
-                    "name": "Thomas Choquet",
+                    "name": "Simon André",
-                    "email": "thomas.choquet.pro@gmail.com"
+                    "email": "smn.andre@gmail.com"
                 },
                 {
                     "name": "Symfony Community",
                     "homepage": "https://symfony.com/contributors"
                 }
             ],
-            "description": "Integration of Svelte in Symfony",
+            "description": "Renders local and remote SVG icons in your Twig templates.",
             "homepage": "https://symfony.com",
             "keywords": [
-                "symfony-ux"
+                "icons",
+                "svg",
+                "symfony-ux",
+                "twig"
             ],
             "support": {
-                "source": "https://github.com/symfony/ux-svelte/tree/v2.18.0"
+                "source": "https://github.com/symfony/ux-icons/tree/v2.18.1"
             },
             "funding": [
                 {
@@ -5864,7 +5871,91 @@
                     "type": "tidelift"
                 }
             ],
-            "time": "2024-06-01T17:50:16+00:00"
+            "time": "2024-06-07T23:22:02+00:00"
+        },
+        {
+            "name": "symfony/ux-twig-component",
+            "version": "v2.18.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-twig-component.git",
+                "reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-twig-component/zipball/c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
+                "reference": "c5ba36dc0f55b75d4c6d7dc546dfdbe4002f82e7",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/dependency-injection": "^5.4|^6.0|^7.0",
+                "symfony/deprecation-contracts": "^2.2|^3.0",
+                "symfony/event-dispatcher": "^5.4|^6.0|^7.0",
+                "symfony/property-access": "^5.4|^6.0|^7.0",
+                "twig/twig": "^3.8"
+            },
+            "conflict": {
+                "symfony/config": "<5.4.0"
+            },
+            "require-dev": {
+                "symfony/console": "^5.4|^6.0|^7.0",
+                "symfony/css-selector": "^5.4|^6.0|^7.0",
+                "symfony/dom-crawler": "^5.4|^6.0|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.0|^7.0",
+                "symfony/phpunit-bridge": "^6.0|^7.0",
+                "symfony/stimulus-bundle": "^2.9.1",
+                "symfony/stopwatch": "^5.4|^6.0|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.0|^7.0",
+                "symfony/webpack-encore-bundle": "^1.15"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\TwigComponent\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Twig components for Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "components",
+                "symfony-ux",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-twig-component/tree/v2.18.1"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-06-11T18:51:33+00:00"
         },
         {
             "name": "symfony/validator",

app/config/bundles.php

@@ -16,5 +16,6 @@ return [
     Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
     Presta\SitemapBundle\PrestaSitemapBundle::class => ['all' => true],
     Nelmio\CorsBundle\NelmioCorsBundle::class => ['all' => true],
-    Symfony\UX\Svelte\SvelteBundle::class => ['all' => true],
+    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
+    Symfony\UX\Icons\UXIconsBundle::class => ['all' => true],
 ];

app/frontend/app.ts

@@ -1,2 +1 @@
 import '@pkg/stimulus';
-import '@pkg/svelte';

app/frontend/components/Bye.svelte

@@ -1,6 +0,0 @@
-<script>
-    console.log('Bye');
-</script>
-
-<h2>Bye</h2>
-

app/frontend/controllers/controllers.json

@@ -1,12 +1,4 @@
 {
-  "controllers": {
+  "controllers": [],
-    "@symfony/ux-svelte": {
-      "svelte": {
-        "main": "dist/render_controller.js",
-        "fetch": "eager",
-        "enabled": true
-      }
-    }
-  },
   "entrypoints": []
 }

app/frontend/mod.just

@@ -9,6 +9,7 @@ check:
     source ../bin/just/check.sh
     printf "${BLUE_BG}${BLACK_FG} Checking Frontend Requirements ${CLEAR}\n"
 
+    check_cmd "screen" "screen"
     check_cmd "volta" "Volta"
     check_cmd "node" "Node"
     check_cmd "npm" "NPM"

app/frontend/packages/svelte.ts

@@ -1,5 +0,0 @@
-import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
-
-registerSvelteControllerComponents(
-    require.context('../components', true, /\.svelte$/)
-);

app/frontend/templates/base.html.twig

@@ -21,7 +21,8 @@
 
     <title>{% block title %}Euph{% endblock %}</title>
 </head>
-<body {{ stimulus_controller('test') }}>
+<body>
+<twig:Header/>
 {% block body %}{% endblock %}
 </body>
 </html>

app/frontend/templates/index.html.twig

@@ -1,5 +1,4 @@
 {% extends 'base.html.twig' %}
 {% block body %}
-    <h1 {{ stimulus_controller('hello') }}>Hello World</h1>
+<p>A Phrase</p>
-    <div {{ svelte_component('Bye') }}></div>
 {% endblock %}

app/frontend/tsconfig.json

@@ -14,7 +14,7 @@
         ".*"
       ],
       "@components/*": [
-        "./controllers/*"
+        "./templates/components/*"
       ],
       "@controllers/*": [
         "./controllers/*"
@@ -28,7 +28,6 @@
     }
   },
   "include": [
-    "./**/*.ts",
+    "./**/*.ts"
-    "./**/*.svelte"
   ]
 }

app/package.json

@@ -18,7 +18,6 @@
     "@hotwired/stimulus": "^3.0.0",
     "@popperjs/core": "^2.11.8",
     "@symfony/stimulus-bridge": "^3.2.0",
-    "@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
     "@symfony/webpack-encore": "^4.0.0",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
@@ -27,7 +26,6 @@
     "browser-sync-webpack-plugin": "^2.3.0",
     "core-js": "^3.23.0",
     "eslint": "^8.53.0",
-    "eslint-plugin-svelte": "^2.42.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.0",
     "ignore-loader": "^0.1.2",
@@ -38,8 +36,6 @@
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-scss": "^6.3.1",
-    "svelte": "^4.0",
-    "svelte-loader": "^3.2.3",
     "ts-loader": "^9.5.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.2.2",

app/symfony.lock

@@ -249,6 +249,18 @@
             "config/packages/uid.yaml"
         ]
     },
+    "symfony/ux-icons": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.17",
+            "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5"
+        },
+        "files": [
+            "assets/icons/symfony.svg"
+        ]
+    },
     "symfony/ux-svelte": {
         "version": "2.18",
         "recipe": {
@@ -261,6 +273,18 @@
             "assets/svelte/controllers/Hello.svelte"
         ]
     },
+    "symfony/ux-twig-component": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.13",
+            "ref": "67814b5f9794798b885cec9d3f48631424449a01"
+        },
+        "files": [
+            "config/packages/twig_component.yaml"
+        ]
+    },
     "symfony/validator": {
         "version": "6.3",
         "recipe": {

app/tailwind.config.js

@@ -1,18 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./frontend/**/*.ts",
-    "./frontend/templates/**/*.html.twig",
-    "./node_modules/flowbite/**/*.js"
-  ],
-  theme: {
-    extend: {
-
-    },
-  },
-  plugins: [
-    require('flowbite/plugin')
-  ],
-  darkMode: 'selector'
-}
-

app/webpack.config.js

@@ -32,8 +32,7 @@ Encore
         config.corejs = '3.23';
     })
     .enableStimulusBridge('./frontend/controllers/controllers.json')
-    .enableSvelte()
+    .enableSassLoader()
-    //.enableSassLoader()
     .enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
         tsConfig.configFile = TS_CONFIG_PATH;
     })
@@ -61,6 +60,5 @@ config.resolve.plugins = [
         configFile: TS_CONFIG_PATH,
     })
 ];
-config.resolve.conditionNames = ['browser', 'import', 'svelte']
 
 module.exports = config;