symfony · weaverryan · Apr 24, 2023 · Apr 16, 2023
diff --git a/ux.symfony.com/assets/app.js b/ux.symfony.com/assets/app.js
@@ -1,5 +1,6 @@
 import { registerReactControllerComponents } from '@symfony/ux-react';
 import {registerVueControllerComponents} from "@symfony/ux-vue";
+import { registerSvelteControllerComponents } from "@symfony/ux-svelte";
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.scss';
@@ -15,3 +16,4 @@ import Tab from 'bootstrap/js/dist/tab';
 // initialize symfony/ux-react
 registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
 registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue?$/, 'lazy'));
+registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
diff --git a/ux.symfony.com/assets/controllers.json b/ux.symfony.com/assets/controllers.json
@@ -62,6 +62,12 @@
                 "fetch": "eager"
             }
         },
+        "@symfony/ux-svelte": {
+            "svelte": {
+                "enabled": true,
+                "fetch": "eager"
+            }
+        },
         "@symfony/ux-swup": {
             "swup": {
                 "enabled": true,

diff --git a/ux.symfony.com/assets/images/svelte.png b/ux.symfony.com/assets/images/svelte.png
diff --git a/ux.symfony.com/assets/svelte/components/PackageList.svelte b/ux.symfony.com/assets/svelte/components/PackageList.svelte
@@ -0,0 +1,39 @@
+<script lang='ts'>
+    import { fade } from 'svelte/transition';
+    import { flip } from 'svelte/animate';
+
+    export let packages = [];
+    let transitionDuration = 200;
+</script>
+
+{#if packages.length === 0}
+    <div class='alert alert-info'>Sad trombone... we haven't built any components that
+        match this search yet!
+    </div>
+{:else}
+    <div class='row'>
+        {#each packages as uxPackage(uxPackage.name)}
+            <a
+                href='{uxPackage.url}'
+                class='col-12 col-md-4 col-lg-3 mb-2'
+                animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
+            >
+                <div class='components-container p-2'>
+                    <div class='d-flex'>
+                        <div
+                            class='live-component-img d-flex justify-content-center align-items-center'
+                            style='background: {uxPackage.gradient}'>
+                            <img width='17' height='17'
+                                 src='{uxPackage.imageUrl}'
+                                 alt='`Image for the {uxPackage.humanName} UX package`'
+                            />
+                        </div>
+                        <h4 class='ubuntu-title ps-2 align-self-center'>
+                            { uxPackage.humanName }
+                        </h4>
+                    </div>
+                </div>
+            </a>
+        {/each}
+    </div>
+{/if}
diff --git a/ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte b/ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte
@@ -0,0 +1,22 @@
+<script>
+    import PackageList from '../components/PackageList';
+
+    export let packages = [];
+    let search = '';
+
+    $: filteredPackages = packages.filter(
+        uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
+    );
+</script>
+
+<div>
+    <input
+        bind:value={search}
+        class='form-control'
+        type='search'
+        placeholder='This search is built in Svelte!'
+    />
+    <div class='mt-3'>
+        <PackageList packages={filteredPackages} />
+    </div>
+</div>
diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json
@@ -35,6 +35,7 @@
         "symfony/ux-live-component": "2.x-dev",
         "symfony/ux-notify": "2.x-dev",
         "symfony/ux-react": "2.x-dev",
+        "symfony/ux-svelte": "2.x-dev",
         "symfony/ux-swup": "2.x-dev",
         "symfony/ux-turbo": "2.x-dev",
         "symfony/ux-twig-component": "2.x-dev",

diff --git a/ux.symfony.com/composer.lock b/ux.symfony.com/composer.lock
diff --git a/ux.symfony.com/config/bundles.php b/ux.symfony.com/config/bundles.php
@@ -24,4 +24,5 @@
     Symfony\UX\Notify\NotifyBundle::class => ['all' => true],
     Symfony\UX\React\ReactBundle::class => ['all' => true],
     Symfony\UX\Vue\VueBundle::class => ['all' => true],
+    Symfony\UX\Svelte\SvelteBundle::class => ['all' => true],
 ];
diff --git a/ux.symfony.com/package.json b/ux.symfony.com/package.json
@@ -24,6 +24,7 @@
         "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
         "@symfony/ux-notify": "file:vendor/symfony/ux-notify/assets",
         "@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
+        "@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
         "@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets",
         "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
         "@symfony/ux-typed": "file:vendor/symfony/ux-typed/assets",
@@ -41,6 +42,8 @@
         "sass-loader": "^13.0.0",
         "snarkdown": "^2.0.0",
         "stimulus-clipboard": "^3.1.0",
+        "svelte": "^3.0",
+        "svelte-loader": "^3.0.0",
         "swup": "^2.0",
         "tom-select": "^2.2.2",
         "typed.js": "^2.0",

diff --git a/ux.symfony.com/src/Controller/UxPackagesController.php b/ux.symfony.com/src/Controller/UxPackagesController.php
@@ -56,6 +56,16 @@ public function vue(PackageRepository $packageRepository): Response
         ]);
     }
 
+    #[Route('/svelte', name: 'app_svelte')]
+    public function svelte(PackageRepository $packageRepository): Response
+    {
+        $packagesData = $this->getNormalizedPackages($packageRepository);
+
+        return $this->render('ux_packages/svelte.html.twig', [
+            'packagesData' => $packagesData,
+        ]);
+    }
+
     #[Route('/typed', name: 'app_typed')]
     public function typed(): Response
     {

diff --git a/ux.symfony.com/src/Service/PackageRepository.php b/ux.symfony.com/src/Service/PackageRepository.php
@@ -70,6 +70,16 @@ public function findAll(string $query = null): array
             ))
                 ->setDocsLink('https://vuejs.org/', 'Go deeper with the Vue.js docs.'),
 
+            (new Package(
+                'svelte',
+                'Svelte',
+                'app_svelte',
+                'linear-gradient(95.22deg, #f73c00 -4.7%, #f08e6e 105.43%)',
+                'Quickly render `<Svelte />` components &amp; pass them props.',
+                'I need to render Svelte components from Twig'
+            ))
+                ->setDocsLink('https://svelte.dev/', 'Go deeper with the Svelte docs.'),
+
             (new Package(
                 'cropperjs',
                 'Image Cropper',

diff --git a/ux.symfony.com/symfony.lock b/ux.symfony.com/symfony.lock
@@ -544,6 +544,9 @@
     "symfony/ux-react": {
         "version": "2.x-dev"
     },
+    "symfony/ux-svelte": {
+        "version": "2.x-dev"
+    },
     "symfony/ux-swup": {
         "version": "v2.1.1"
     },

diff --git a/ux.symfony.com/templates/ux_packages/svelte.html.twig b/ux.symfony.com/templates/ux_packages/svelte.html.twig
@@ -0,0 +1,39 @@
+{% extends 'packageBase.html.twig' %}
+
+{% block component_header %}
+    {% component PackageHeader with {
+        package: 'svelte',
+        eyebrowText: 'Svelte Component Rendering'
+    } %}
+        {% block title_header %}
+            Render Svelte from
+            <span class="playfair ps-2">inside Twig</span>
+        {% endblock %}
+
+        {% block sub_content %}
+            Built a Svelte component? Render it quickly &amp; easily in Twig <em>and</em> pass in dynamic props.
+        {% endblock %}
+    {% endcomponent %}
+{% endblock %}
+
+{% block code_block_left %}
+    <twig:CodeBlock filename="assets/svelte/controllers/PackageSearch.svelte" height="300px" language="html" />
+{% endblock %}
+
+{% block code_block_right %}
+    <twig:CodeBlock
+        filename="templates/ux_packages/svelte.html.twig"
+        height="300px"
+        targetTwigBlock="demo_content"
+    />
+{% endblock %}
+
+{% block demo_title %}UX Svelte{% endblock %}
+
+{% block demo_content %}
+    <div {{ svelte_component('PackageSearch', {
+        packages: packagesData
+    }) }}>
+        Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
+    </div>
+{% endblock %}
diff --git a/ux.symfony.com/webpack.config.js b/ux.symfony.com/webpack.config.js
@@ -67,6 +67,8 @@ Encore
 
     .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
 
+    .enableSvelte()
+
     // uncomment to get integrity="..." attributes on your script & link tags
     // requires WebpackEncoreBundle 1.4 or higher
     //.enableIntegrityHashes(Encore.isProduction())

diff --git a/ux.symfony.com/yarn.lock b/ux.symfony.com/yarn.lock
@@ -1185,6 +1185,9 @@
 "@symfony/ux-react@file:vendor/symfony/ux-react/assets":
   version "1.0.0"
 
+"@symfony/ux-svelte@file:vendor/symfony/ux-svelte/assets":
+  version "1.0.0"
+
 "@symfony/ux-swup@file:vendor/symfony/ux-swup/assets":
   version "1.1.0"
 
@@ -3111,7 +3114,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^2.0.0:
+loader-utils@^2.0.0, loader-utils@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
   integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -4365,6 +4368,30 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelte-dev-helper@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
+  integrity sha512-oU+Xv7Dl4kRU2kdFjsoPLfJfnt5hUhsFUZtuzI3Ku/f2iAFZqBoEuXOqK3N9ngD4dxQOmN4OKWPHVi3NeAeAfQ==
+
+svelte-hmr@^0.14.2:
+  version "0.14.12"
+  resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
+  integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
+
+svelte-loader@^3.0.0:
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/svelte-loader/-/svelte-loader-3.1.7.tgz#b6acc02380b3cfe08340a08fe6831474fe4d56cb"
+  integrity sha512-YVg5gQaUdV26uaA5SEGj1VOUX0YQicD9PezKvVlkQ2JI644silWtJZ3hkxHtXSfjnlFr0OTNoyOgeINIODdT+A==
+  dependencies:
+    loader-utils "^2.0.4"
+    svelte-dev-helper "^1.1.9"
+    svelte-hmr "^0.14.2"
+
+svelte@^3.0:
+  version "3.58.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
+  integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
+
 svgo@^2.7.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"