diff --git a/ux.symfony.com/assets/app.js b/ux.symfony.com/assets/app.js index daa003f2594..8678fade0dc 100644 --- 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 index 14252166d16..19f6dc6780d 100644 --- 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 new file mode 100644 index 00000000000..66f9fda4535 Binary files /dev/null and b/ux.symfony.com/assets/images/svelte.png differ diff --git a/ux.symfony.com/assets/svelte/components/PackageList.svelte b/ux.symfony.com/assets/svelte/components/PackageList.svelte new file mode 100644 index 00000000000..15a5baef3da --- /dev/null +++ b/ux.symfony.com/assets/svelte/components/PackageList.svelte @@ -0,0 +1,39 @@ + + +{#if packages.length === 0} +
Sad trombone... we haven't built any components that + match this search yet! +
+{:else} +
+ {#each packages as uxPackage(uxPackage.name)} + +
+
+
+ `Image for the {uxPackage.humanName} UX package` +
+

+ { uxPackage.humanName } +

+
+
+ + {/each} +
+{/if} diff --git a/ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte b/ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte new file mode 100644 index 00000000000..4ab7dbe2464 --- /dev/null +++ b/ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte @@ -0,0 +1,22 @@ + + +
+ +
+ +
+
diff --git a/ux.symfony.com/composer.json b/ux.symfony.com/composer.json index 0b0f2a32d4f..42a2bf7c9a2 100644 --- 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 index 5deb295cfcd..7c132b12452 100644 --- a/ux.symfony.com/composer.lock +++ b/ux.symfony.com/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": "1147ea6841cb30b649de7d9d8b1c5734", + "content-hash": "3e742c195db23e735ec6e345329ebb24", "packages": [ { "name": "babdev/pagerfanta-bundle", @@ -7450,6 +7450,84 @@ ], "time": "2023-04-16T16:35:15+00:00" }, + { + "name": "symfony/ux-svelte", + "version": "2.x-dev", + "source": { + "type": "git", + "url": "https://github.com/symfony/ux-svelte.git", + "reference": "111274910c49c4001143c968ce6b64a1e655703d" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/ux-svelte/zipball/111274910c49c4001143c968ce6b64a1e655703d", + "reference": "111274910c49c4001143c968ce6b64a1e655703d", + "shasum": "" + }, + "require": { + "symfony/webpack-encore-bundle": "^1.15" + }, + "require-dev": { + "symfony/framework-bundle": "^5.4|^6.2", + "symfony/phpunit-bridge": "^5.4|^6.2", + "symfony/twig-bundle": "^5.4|^6.2", + "symfony/var-dumper": "^5.4|^6.2" + }, + "default-branch": true, + "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/2.x" + }, + "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": "2023-04-14T13:38:54+00:00" + }, { "name": "symfony/ux-swup", "version": "2.x-dev", @@ -11244,6 +11322,7 @@ "symfony/ux-live-component": 20, "symfony/ux-notify": 20, "symfony/ux-react": 20, + "symfony/ux-svelte": 20, "symfony/ux-swup": 20, "symfony/ux-turbo": 20, "symfony/ux-twig-component": 20, diff --git a/ux.symfony.com/config/bundles.php b/ux.symfony.com/config/bundles.php index 668f6d726b4..5b1be05485c 100644 --- 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 index 55235b22bd4..173afc12049 100644 --- 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 index f950e572d55..46f57dc0e8a 100644 --- 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 index bce34f5776b..f5af08c1910 100644 --- 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 `` components & 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 index b6678e67125..5653c01b89b 100644 --- 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 new file mode 100644 index 00000000000..f6886ac6287 --- /dev/null +++ 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 + inside Twig + {% endblock %} + + {% block sub_content %} + Built a Svelte component? Render it quickly & easily in Twig and pass in dynamic props. + {% endblock %} + {% endcomponent %} +{% endblock %} + +{% block code_block_left %} + +{% endblock %} + +{% block code_block_right %} + +{% endblock %} + +{% block demo_title %}UX Svelte{% endblock %} + +{% block demo_content %} +
+ Loading... +
+{% endblock %} diff --git a/ux.symfony.com/webpack.config.js b/ux.symfony.com/webpack.config.js index a79a36beb7a..7e3e591b03d 100644 --- 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 index 69e2731b81c..ce645c9a1d9 100644 --- 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"