NOTICKET: Switch to Symfony UX Svelte

.gitea/workflows/qs.yml

@@ -20,8 +20,8 @@ jobs:
         working-directory: app/frontend
         run: "node ../node_modules/typescript/bin/tsc --noEmit"
       - name: "Stylelint"
-        working-directory: app/frontend/styles
+        working-directory: app/frontend
-        run: "node ../../node_modules/stylelint/bin/stylelint.mjs ."
+        run: "node ../node_modules/stylelint/bin/stylelint.mjs ."
       - name: "ESLint"
         working-directory: app
         run: "node node_modules/eslint/bin/eslint.js frontend"

app/backend/TestController.php

@@ -27,7 +27,7 @@ final readonly class TestController
     {
         return new Response(
             $this->twig->render(
-                'base.html.twig'
+                'index.html.twig'
             )
         );
     }

app/composer.json

@@ -25,9 +25,10 @@
     "symfony/framework-bundle": "7.1.*",
     "symfony/monolog-bundle": "^3.0",
     "symfony/runtime": "7.1.*",
-    "symfony/stimulus-bundle": "^2.12",
+    "symfony/stimulus-bundle": "^2.18",
     "symfony/twig-bundle": "7.1.*",
     "symfony/uid": "7.1.*",
+    "symfony/ux-svelte": "^2.18",
     "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": "ee85551bd6012966efcff3c2d44a4b98",
+    "content-hash": "a72529aa87f9a0382e7004cb5585fcd0",
     "packages": [
         {
             "name": "dflydev/dot-access-data",
@@ -5786,6 +5786,86 @@
             ],
             "time": "2024-05-31T14:57:53+00:00"
         },
+        {
+            "name": "symfony/ux-svelte",
+            "version": "v2.18.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/ux-svelte.git",
+                "reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/ux-svelte/zipball/ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
+                "reference": "ad7b8388be55fbbe79f8d32bdc17971fbed2196f",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.1",
+                "symfony/stimulus-bundle": "^2.9.1"
+            },
+            "require-dev": {
+                "symfony/asset-mapper": "^6.3|^7.0",
+                "symfony/finder": "^5.4|^6.2|^7.0",
+                "symfony/framework-bundle": "^5.4|^6.2|^7.0",
+                "symfony/phpunit-bridge": "^5.4|^6.2|^7.0",
+                "symfony/twig-bundle": "^5.4|^6.2|^7.0",
+                "symfony/var-dumper": "^5.4|^6.2|^7.0"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "thanks": {
+                    "name": "symfony/ux",
+                    "url": "https://github.com/symfony/ux"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\UX\\Svelte\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Titouan Galopin",
+                    "email": "galopintitouan@gmail.com"
+                },
+                {
+                    "name": "Thomas Choquet",
+                    "email": "thomas.choquet.pro@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Integration of Svelte in Symfony",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "symfony-ux"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/ux-svelte/tree/v2.18.0"
+            },
+            "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-01T17:50:16+00:00"
+        },
         {
             "name": "symfony/validator",
             "version": "v7.1.2",

app/config/bundles.php

@@ -16,4 +16,5 @@ 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],
 ];

app/config/routes.yaml

@@ -7,9 +7,9 @@ controllers:
 presta_sitemap:
   resource: "@PrestaSitemapBundle/config/routing.yml"
 
-when@dev:
+#when@dev:
-  test_style:
+#  test_style:
-    path: /test/styles
+#    path: /test/styles
-    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
+#    controller: Symfony\Bundle\FrameworkBundle\Controller\TemplateController
-    defaults:
+#    defaults:
-      template: 'test/styles.html.twig'
+#      template: 'test/styles.html.twig'

app/frontend/.eslintrc.json

@@ -5,13 +5,20 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/strict"
+    "plugin:@typescript-eslint/strict",
+    "plugin:svelte/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module"
   },
+  "overrides": [
+    {
+      "files": ["*.svelte"],
+      "parser": "svelte-eslint-parser"
+    }
+  ],
   "plugins": [
     "@typescript-eslint"
   ],

app/frontend/.stylelintrc.json

@@ -1,7 +1,6 @@
 {
   "extends": [
     "stylelint-config-standard-scss",
-    "stylelint-config-tailwindcss/scss"
   ],
   "plugins": [
     "stylelint-scss"

app/frontend/app.ts

@@ -1,3 +1,2 @@
-import '@styles/app.scss';
 import '@pkg/stimulus';
-import '@pkg/flowbite';
+import '@pkg/svelte';

app/frontend/components/Bye.svelte

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

app/frontend/constants/http.ts

@@ -1,5 +0,0 @@
-declare enum HttpCodes {
-    OK = 200
-}
-
-export {HttpCodes};

app/frontend/constants/theme.ts

@@ -1,8 +0,0 @@
-const THEME_LOCAL_STORAGE_ID = 'theme';
-
-enum Theme {
-    LIGHT = 'light',
-    DARK = 'dark'
-}
-
-export {THEME_LOCAL_STORAGE_ID, Theme};

app/frontend/controllers.json

@@ -1,4 +0,0 @@
-{
-  "controllers": [],
-  "entrypoints": []
-}

app/frontend/controllers/controllers.json

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

app/frontend/controllers/hello_controller.ts

@@ -1,12 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-export default class extends Controller {
-
-    static targets: Array<string> = ['container'];
-    declare readonly containerTarget: HTMLElement;
-
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    afterLoad(identifier: string, application: HTMLElement): void {
-        console.log(this.containerTarget);
-    }
-}

app/frontend/domain/theme.ts

@@ -1,40 +0,0 @@
-import {Theme, THEME_LOCAL_STORAGE_ID} from '@const/theme';
-
-const DARK_MODE_QUERY: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
-
-function initTheme(): void {
-    handleTheme(DARK_MODE_QUERY.matches);
-    DARK_MODE_QUERY.addEventListener('change', handleThemeChange);
-}
-
-function handleThemeChange(e: MediaQueryListEvent): void {
-    handleTheme(e.matches);
-}
-
-function handleTheme(prefersDark: boolean): void {
-    const theme = localStorage[THEME_LOCAL_STORAGE_ID];
-    if (theme === Theme.DARK) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('explicit dark');
-    } else if (!(THEME_LOCAL_STORAGE_ID in localStorage) && prefersDark) {
-        document.documentElement.classList.add(Theme.DARK);
-        console.log('implicit dark');
-    } else {
-        document.documentElement.classList.remove(Theme.DARK);
-        console.log('light');
-    }
-}
-
-export {initTheme};
-
-// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-
-
-// Whenever the user explicitly chooses light mode
-//localStorage.theme = 'light';
-
-// Whenever the user explicitly chooses dark mode
-//localStorage.theme = 'dark';
-
-// Whenever the user explicitly chooses to respect the OS preference
-//localStorage.removeItem('theme');

app/frontend/packages/flowbite.ts

@@ -1,4 +0,0 @@
-import 'flowbite';
-import {initFlowbite} from 'flowbite';
-
-initFlowbite();

app/frontend/packages/svelte.ts

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

app/frontend/styles/app.scss

@@ -1,24 +0,0 @@
-@import "components/header";
-@import "components/burger-menu";
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-hr {
-  @apply h-px my-2 border-0;
-  @apply bg-gray-300 dark:bg-gray-500;
-}
-
-.app {
-  &__text {
-    @apply text-gray-900 dark:text-gray-100
-  }
-
-  &__text-bold {
-    @apply app__text font-bold
-  }
-
-  &__text-light {
-    @apply text-gray-500 dark:text-gray-300 font-light
-  }
-}

app/frontend/styles/components/burger-menu.scss

@@ -1,79 +0,0 @@
-#burger-menu {
-  @apply fixed top-0 right-0 h-screen overflow-y-auto z-40;
-  @apply flex flex-col p-2 gap-2 w-64;
-  @apply bg-gray-100 dark:bg-gray-700;
-
-
-  &__button-open {
-    @apply ml-auto h-full aspect-square;
-  }
-
-  &__button-close {
-    @apply h-8 w-8 absolute right-2 aspect-square;
-  }
-
-  &__user-section {
-    @apply flex flex-col items-center;
-    @apply text-black dark:text-white;
-  }
-
-  &__user-picture-wrapper {
-    @apply w-1/3 aspect-square mx-auto;
-  }
-
-  &__user-name {
-    @apply app__text-bold text-xl;
-    @apply h-6;
-  }
-
-  &__user-email {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__user-info {
-    @apply app__text-light text-base;
-    @apply h-6;
-  }
-
-  &__user-actions {
-    @apply inline-flex  mt-2;
-
-    button {
-      @apply inline-flex p-1;
-      @apply bg-transparent;
-      @apply app__text text-sm;
-      @apply border border-r-0 border-gray-900 dark:border-white;
-
-      &:first-of-type {
-        @apply rounded-s-lg;
-      }
-
-      &:last-of-type {
-        @apply rounded-e-lg border-r;
-      }
-    }
-  }
-
-  &__login {
-    @apply flex p-2 gap-2 items-center justify-center;
-    @apply rounded-lg bg-blue-500 app__text;
-  }
-
-  &__nav {
-    @apply text-lg app__text;
-
-    &-list {
-      @apply flex flex-col gap-2;
-    }
-
-    &-item {
-      @apply h-8;
-    }
-
-    &-link {
-      @apply flex p-1 gap-2 items-center;
-      @apply rounded-md hover:bg-gray-200 dark:hover:bg-gray-600;
-    }
-  }
-}

app/frontend/styles/components/header.scss

@@ -1,17 +0,0 @@
-#header {
-  @apply flex h-12 p-2 gap-2 items-center;
-  @apply bg-gray-300 dark:bg-gray-700;
-
-  &__logo {
-    @apply h-full dark:hidden;
-  }
-
-  &__logo-dark {
-    @apply h-full hidden dark:block;
-  }
-
-  &__logo-text {
-    @apply text-lg text-center text-black dark:text-white;
-  }
-
-}

app/frontend/templates/base.html.twig

@@ -15,14 +15,13 @@
     <link rel="mask-icon" href="{{ asset('/safari-pinned-tab.svg') }}" color="#000000">
     <meta name="msapplication-TileColor" content="#000000">
     <meta name="theme-color" content="#ffffff">
+
     {{ encore_entry_link_tags('app') }}
-    {{ encore_entry_script_tags('theme') }}
     {{ encore_entry_script_tags('app') }}
 
     <title>{% block title %}Euph{% endblock %}</title>
 </head>
-<body class="bg-gray-100 dark:bg-gray-600">
+<body {{ stimulus_controller('test') }}>
-{% include 'components/header.html.twig' %}
 {% block body %}{% endblock %}
 </body>
 </html>

app/frontend/templates/components/burger-menu.html.twig

@@ -1,71 +0,0 @@
-<button
-    id="burger-menu__button-open"
-    type="button"
-    data-drawer-target="burger-menu"
-    data-drawer-show="burger-menu"
-    data-drawer-placement="right"
-    aria-controls="burger-menu"
->
-    {% include 'icons/bars.svg.twig' with {'class': 'h-full w-full'} %}
-</button>
-<div
-    id="burger-menu"
-    class="transition-transform translate-x-full"
-    tabindex="-1"
->
-    <button
-        type="button"
-        id="burger-menu__button-close"
-        data-drawer-hide="burger-menu"
-        aria-controls="burger-menu"
-    >
-        {% include 'icons/close.svg.twig'  with {'class': 'h-full w-full'} %}
-    </button>
-    <div id="burger-menu__user-section">
-        <div id="burger-menu__user-picture-wrapper">
-            {% include 'icons/user-placeholder.svg.twig' with {'class': 'h-full w-full'} %}
-        </div>
-        {% if logged_in %}
-            <span id="burger-menu__user-name">Username</span>
-            <span id="burger-menu__user-email">username@email.com</span>
-            <div id="burger-menu__user-actions">
-                {{ _self.user_action('Profile', 'user') }}
-                {{ _self.user_action('Settings', 'settings') }}
-                {{ _self.user_action('Logout', 'logout') }}
-            </div>
-        {% else %}
-            <span id="burger-menu__user-info">not logged in</span>
-        {% endif %}
-    </div>
-    {% if not logged_in %}
-        <hr/>
-        <a id="burger-menu__login">
-            {% include 'icons/euphcloud.svg.twig' with {'class': 'w-6 h-6'} %}
-            <span>Login with Euphcloud</span>
-        </a>
-    {% endif %}
-    <hr/>
-    <nav id="burger-menu__nav">
-        <ul id="burger-menu__nav-list">
-            {{ _self.nav_item('Test1', '#test1', 'bars') }}
-            {{ _self.nav_item('Test2', '#test2', 'bars') }}
-            {{ _self.nav_item('Test3', '#test3', 'bars') }}
-        </ul>
-    </nav>
-</div>
-
-{% macro user_action(name, icon) %}
-    <button>
-        {% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
-        <span>{{ name }}</span>
-    </button>
-{% endmacro %}
-
-{% macro nav_item(name, href, icon) %}
-    <li id="burger-menu__nav-item">
-        <a id="burger-menu__nav-link" href="{{ href }}">
-            {% include 'icons/' ~ icon ~ '.svg.twig' with {'class': 'h-6 w-6'} %}
-            <span class="flex-1">{{ name }}</span>
-        </a>
-    </li>
-{% endmacro %}

app/frontend/templates/components/header.html.twig

@@ -1,14 +0,0 @@
-<header id="header">
-    <img
-        id="header__logo"
-        src="{{ asset("icons/logo/logo.svg") }}"
-        alt="Euph Logo"
-    >
-    <img
-        id="header__logo-dark"
-        src="{{ asset("icons/logo/dark-logo.svg") }}"
-        alt="Euph Logo"
-    >
-    <h1 id="header__logo-text">Euph</h1>
-    {% include 'components/burger-menu.html.twig' %}
-</header>

app/frontend/templates/icons/bars.svg.twig

@@ -1,16 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-width="2"
-        d="M5 7h14M5 12h14M5 17h14"
-    />
-</svg>

app/frontend/templates/icons/close.svg.twig

@@ -1,17 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M6 18 17.94 6M18 18 6.06 6"
-    />
-</svg>

app/frontend/templates/icons/euphcloud.svg.twig

@@ -1,14 +0,0 @@
-<svg
-        class="text-gray-800 dark:text-white {{ class|default('') }}"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        xml:space="preserve"
-        width="32mm"
-        height="32mm"
-        viewBox="0 0 32 32"
->
-    <path
-            d="M16 0A16 16 0 0 0 0 16a16 16 0 0 0 16 16 16 16 0 0 0 16-16A16 16 0 0 0 16 0zm-.555 1.034 3.304 3.302a7.95 7.95 0 0 1 0 11.243l-2.97 2.971a4.364 4.364 0 0 0 0 6.174l7.852-7.852a8.532 8.532 0 0 0 1.868-4.747l.079-1.093c2.55 2.82 1.891 7.774.267 9.398l-10.47 10.537L6.5 22.09a8.566 8.566 0 0 1 0-12.114l8.945-8.943zm.03 5.936-6.23 6.226a3.512 3.512 0 0 0 0 4.966l.508.507 6.07-6.07a3.732 3.732 0 0 0 0-5.28l-.348-.35z"
-            fill="currentColor"
-    />
-</svg>

app/frontend/templates/icons/logout.svg.twig

@@ -1,17 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="none"
-    viewBox="0 0 24 24"
->
-    <path
-        stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        stroke-width="2"
-        d="M20 12H8m12 0-4 4m4-4-4-4M9 4H7a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h2"
-    />
-</svg>

app/frontend/templates/icons/settings.svg.twig

@@ -1,14 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        fill-rule="evenodd"
-        d="M17 10v1.126c.367.095.714.24 1.032.428l.796-.797 1.415 1.415-.797.796c.188.318.333.665.428 1.032H21v2h-1.126c-.095.367-.24.714-.428 1.032l.797.796-1.415 1.415-.796-.797a3.979 3.979 0 0 1-1.032.428V20h-2v-1.126a3.977 3.977 0 0 1-1.032-.428l-.796.797-1.415-1.415.797-.796A3.975 3.975 0 0 1 12.126 16H11v-2h1.126c.095-.367.24-.714.428-1.032l-.797-.796 1.415-1.415.796.797A3.977 3.977 0 0 1 15 11.126V10h2Zm.406 3.578.016.016c.354.358.574.85.578 1.392v.028a2 2 0 0 1-3.409 1.406l-.01-.012a2 2 0 0 1 2.826-2.83ZM5 8a4 4 0 1 1 7.938.703 7.029 7.029 0 0 0-3.235 3.235A4 4 0 0 1 5 8Zm4.29 5H7a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h6.101A6.979 6.979 0 0 1 9 15c0-.695.101-1.366.29-2Z"
-        clip-rule="evenodd"
-    />
-</svg>

app/frontend/templates/icons/user-placeholder.svg.twig

@@ -1,14 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24" height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        fill-rule="evenodd"
-        d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z"
-        clip-rule="evenodd"
-    />
-</svg>

app/frontend/templates/icons/user.svg.twig

@@ -1,15 +0,0 @@
-<svg
-    class="text-gray-800 dark:text-white {{ class|default('') }}"
-    aria-hidden="true"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    fill="currentColor"
-    viewBox="0 0 24 24"
->
-    <path
-        d="M12 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4h-4Z"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-    />
-</svg>

app/frontend/templates/index.html.twig

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

app/frontend/templates/test/styles.twig

@@ -1,53 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block body %}
-    <h1>H1 Hello World</h1>
-    <h2>H2 Hello World</h2>
-    <h3>H3 Hello World</h3>
-    <h4>H4 Hello World</h4>
-    <h5>H5 Hello World</h5>
-    <h6>H6 Hello World</h6>
-    <p>P Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-        Ad consectetur consequuntur culpa debitis dignissimos
-        dolore est ex illo iure maxime, molestiae pariatur recusandae,
-        reiciendis saepe similique temporibus voluptatum? Eos,
-        repudiandae!
-    </p>
-    <a href="">A Link</a>
-    <button>Button</button>
-    <input type="text">
-    <input type="checkbox" name="" id="">
-    <button id="dropdownButton" data-dropdown-toggle="dropdownMenu" class="shadow" type="button">
-        Select an option
-    </button>
-    <ul id="dropdownMenu" class="hidden border-red-300 shadow">
-        <li>
-            <a href="#" class="block hover:bg-red-500" data-value="1">Option 1</a>
-        </li>
-        <li>
-            <a href="#" class="block hover:bg-green-500" data-value="2">Option 2</a>
-        </li>
-        <li>
-            <a href="#" class="block hover:bg-blue-500" data-value="3">Option 3</a>
-        </li>
-    </ul>
-    <script>
-        document.querySelectorAll('#dropdownMenu a').forEach(function (option) {
-            option.addEventListener('click', function (event) {
-                event.preventDefault();
-                console.log(this.dataset.value);
-                document.getElementById('dropdownButton').textContent = this.textContent;
-                console.log('close');
-                document.getElementById('dropdownMenu').classList.add('hidden');
-            });
-        });
-
-        document.getElementById('dropdownButton').addEventListener('click', function () {
-            let menu = document.getElementById('dropdownMenu');
-            console.log('open', menu);
-            menu.classList.remove('hidden');
-            console.log('open2', menu);
-        });
-    </script>
-
-{% endblock %}

app/frontend/theme.ts

@@ -1,3 +0,0 @@
-import {initTheme} from '@domain/theme';
-
-initTheme();

app/frontend/tsconfig.json

@@ -13,8 +13,8 @@
       "~*": [
         ".*"
       ],
-      "@styles/*": [
+      "@components/*": [
-        "./styles/*"
+        "./controllers/*"
       ],
       "@controllers/*": [
         "./controllers/*"
@@ -22,18 +22,13 @@
       "@pkg/*": [
         "./packages/*"
       ],
-      "@domain/*": [
-        "./domain/*"
-      ],
-      "@const/*": [
-        "./constants/*"
-      ],
       "#types/*": [
         "./types/*"
       ]
     }
   },
   "include": [
-    "./**/*.ts"
+    "./**/*.ts",
+    "./**/*.svelte"
   ]
 }

app/package.json

@@ -8,12 +8,8 @@
     "build": "encore production --progress",
     "lint:ts": "cd frontend && eslint .",
     "lint:ts:fix": "cd frontend && eslint . --fix",
-    "lint:scss": "cd frontend/styles && stylelint .",
+    "lint:scss": "cd frontend && stylelint .",
-    "lint:scss:fix": "cd frontend/styles && stylelint . --fix"
+    "lint:scss:fix": "cd frontend && stylelint . --fix"
-  },
-  "dependencies": {
-    "easymde": "^2.18.0",
-    "flowbite": "^2.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.3",
@@ -22,6 +18,7 @@
     "@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",
@@ -30,22 +27,19 @@
     "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",
-    "jquery": "^3.7.1",
-    "junit-report-merger": "^6.0.3",
-    "postcss": "^8.4.39",
-    "postcss-loader": "^7.3.4",
     "prettier": "^2.8.8",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
     "stylelint": "^16.2.1",
     "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-config-tailwindcss": "^0.0.7",
     "stylelint-scss": "^6.3.1",
-    "tailwindcss": "^3.4.4",
+    "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/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

app/symfony.lock

@@ -249,6 +249,18 @@
             "config/packages/uid.yaml"
         ]
     },
+    "symfony/ux-svelte": {
+        "version": "2.18",
+        "recipe": {
+            "repo": "github.com/symfony/recipes",
+            "branch": "main",
+            "version": "2.9",
+            "ref": "4a6ee82d817d4e9be8d4a861476a112011d701e1"
+        },
+        "files": [
+            "assets/svelte/controllers/Hello.svelte"
+        ]
+    },
     "symfony/validator": {
         "version": "6.3",
         "recipe": {

app/webpack.config.js

@@ -14,16 +14,9 @@ Encore
     .setPublicPath('/build')
     .copyFiles({
         from: './assets/',
-        to: '../[path][name].[ext]',
+        to: '../[path][name].[ext]'
-        pattern: /\.(?!scss|stylelint.*|json|woff).*$/
     })
-
-    // Code Entries
     .addEntry('app', './frontend/app.ts')
-    .addEntry('theme', './frontend/theme.ts')
-
-    // Style Entries
-    //.addStyleEntry('name', './frontend/styles/name.scss')
 
     // Webpack
     .splitEntryChunks()
@@ -38,9 +31,9 @@ Encore
         config.useBuiltIns = 'usage';
         config.corejs = '3.23';
     })
-    .enableStimulusBridge('./frontend/controllers.json')
+    .enableStimulusBridge('./frontend/controllers/controllers.json')
-    .enableSassLoader()
+    .enableSvelte()
-    .enablePostCssLoader()
+    //.enableSassLoader()
     .enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
         tsConfig.configFile = TS_CONFIG_PATH;
     })
@@ -53,7 +46,7 @@ Encore
         proxy: 'http://localhost:8000',
         files: [
             'frontend/**/*.twig',
-            'frontend/**/*.scss',
+            'frontend/**/*.svelte',
             'frontend/**/*.ts',
         ],
         reload: true,
@@ -68,5 +61,6 @@ config.resolve.plugins = [
         configFile: TS_CONFIG_PATH,
     })
 ];
+config.resolve.conditionNames = ['browser', 'import', 'svelte']
 
 module.exports = config;