Skip to content

Commit ce06df3

Browse files
weaverryanweaverryan
committed
minor #795 [Svelte] Example page for ux.symfony.com (ChqThomas)
This PR was merged into the 2.x branch. Discussion ---------- [Svelte] Example page for ux.symfony.com | Q | A | ------------- | --- | Bug fix? | No | New feature? | No | Tickets | None | License | MIT This PR adds the new Svelte component to ux.symfony.com: - Same samples as React and Vue.js - Only works locally with a local link to symfony/ux-svelte until the package is available on packagist ### Screenshots: #### Svelte page (code expanded) ![svelte-page](https://user-images.githubusercontent.com/7740151/233780222-78728d8b-d824-4eb9-baf7-5bc6294efb53.png) #### Homepage block ![homepage-block](https://user-images.githubusercontent.com/7740151/232328758-d41f78b6-fca1-440b-a60f-1982c1903cd4.PNG) #### Search box https://user-images.githubusercontent.com/7740151/232328933-2db5ac16-49f5-4012-82ee-f2843f540e22.mp4 Commits ------- 3343ba5 [Svelte] Example page for ux.symfony.com
2 parents 5cf391d + 3343ba5 commit ce06df3

File tree

15 files changed

+246
-2
lines changed

15 files changed

+246
-2
lines changed

‎ux.symfony.com/assets/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { registerReactControllerComponents } from '@symfony/ux-react';
22
import {registerVueControllerComponents} from "@symfony/ux-vue";
3+
import { registerSvelteControllerComponents } from "@symfony/ux-svelte";
34

45
// any CSS you import will output into a single css file (app.css in this case)
56
import './styles/app.scss';
@@ -15,3 +16,4 @@ import Tab from 'bootstrap/js/dist/tab';
1516
// initialize symfony/ux-react
1617
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
1718
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue?$/, 'lazy'));
19+
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));

‎ux.symfony.com/assets/controllers.json

+6
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
"fetch": "eager"
6363
}
6464
},
65+
"@symfony/ux-svelte": {
66+
"svelte": {
67+
"enabled": true,
68+
"fetch": "eager"
69+
}
70+
},
6571
"@symfony/ux-swup": {
6672
"swup": {
6773
"enabled": true,

‎ux.symfony.com/assets/images/svelte.png

2.77 KB
Loading

‎ux.symfony.com/assets/svelte/components/PackageList.svelte

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang='ts'>
2+
import { fade } from 'svelte/transition';
3+
import { flip } from 'svelte/animate';
4+
5+
export let packages = [];
6+
let transitionDuration = 200;
7+
</script>
8+
9+
{#if packages.length === 0}
10+
<div class='alert alert-info'>Sad trombone... we haven't built any components that
11+
match this search yet!
12+
</div>
13+
{:else}
14+
<div class='row'>
15+
{#each packages as uxPackage(uxPackage.name)}
16+
<a
17+
href='{uxPackage.url}'
18+
class='col-12 col-md-4 col-lg-3 mb-2'
19+
animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
20+
>
21+
<div class='components-container p-2'>
22+
<div class='d-flex'>
23+
<div
24+
class='live-component-img d-flex justify-content-center align-items-center'
25+
style='background: {uxPackage.gradient}'>
26+
<img width='17' height='17'
27+
src='{uxPackage.imageUrl}'
28+
alt='`Image for the {uxPackage.humanName} UX package`'
29+
/>
30+
</div>
31+
<h4 class='ubuntu-title ps-2 align-self-center'>
32+
{ uxPackage.humanName }
33+
</h4>
34+
</div>
35+
</div>
36+
</a>
37+
{/each}
38+
</div>
39+
{/if}

‎ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
import PackageList from '../components/PackageList';
3+
4+
export let packages = [];
5+
let search = '';
6+
7+
$: filteredPackages = packages.filter(
8+
uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
9+
);
10+
</script>
11+
12+
<div>
13+
<input
14+
bind:value={search}
15+
class='form-control'
16+
type='search'
17+
placeholder='This search is built in Svelte!'
18+
/>
19+
<div class='mt-3'>
20+
<PackageList packages={filteredPackages} />
21+
</div>
22+
</div>

‎ux.symfony.com/composer.json

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"symfony/ux-live-component": "2.x-dev",
3636
"symfony/ux-notify": "2.x-dev",
3737
"symfony/ux-react": "2.x-dev",
38+
"symfony/ux-svelte": "2.x-dev",
3839
"symfony/ux-swup": "2.x-dev",
3940
"symfony/ux-turbo": "2.x-dev",
4041
"symfony/ux-twig-component": "2.x-dev",

‎ux.symfony.com/composer.lock

+80-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎ux.symfony.com/config/bundles.php

+1
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@
2424
Symfony\UX\Notify\NotifyBundle::class => ['all' => true],
2525
Symfony\UX\React\ReactBundle::class => ['all' => true],
2626
Symfony\UX\Vue\VueBundle::class => ['all' => true],
27+
Symfony\UX\Svelte\SvelteBundle::class => ['all' => true],
2728
];

‎ux.symfony.com/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
2525
"@symfony/ux-notify": "file:vendor/symfony/ux-notify/assets",
2626
"@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
27+
"@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
2728
"@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets",
2829
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
2930
"@symfony/ux-typed": "file:vendor/symfony/ux-typed/assets",
@@ -41,6 +42,8 @@
4142
"sass-loader": "^13.0.0",
4243
"snarkdown": "^2.0.0",
4344
"stimulus-clipboard": "^3.1.0",
45+
"svelte": "^3.0",
46+
"svelte-loader": "^3.0.0",
4447
"swup": "^2.0",
4548
"tom-select": "^2.2.2",
4649
"typed.js": "^2.0",

‎ux.symfony.com/src/Controller/UxPackagesController.php

+10
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,16 @@ public function vue(PackageRepository $packageRepository): Response
5656
]);
5757
}
5858

59+
#[Route('/svelte', name: 'app_svelte')]
60+
public function svelte(PackageRepository $packageRepository): Response
61+
{
62+
$packagesData = $this->getNormalizedPackages($packageRepository);
63+
64+
return $this->render('ux_packages/svelte.html.twig', [
65+
'packagesData' => $packagesData,
66+
]);
67+
}
68+
5969
#[Route('/typed', name: 'app_typed')]
6070
public function typed(): Response
6171
{

‎ux.symfony.com/src/Service/PackageRepository.php

+10
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,16 @@ public function findAll(string $query = null): array
7070
))
7171
->setDocsLink('https://vuejs.org/', 'Go deeper with the Vue.js docs.'),
7272

73+
(new Package(
74+
'svelte',
75+
'Svelte',
76+
'app_svelte',
77+
'linear-gradient(95.22deg, #f73c00 -4.7%, #f08e6e 105.43%)',
78+
'Quickly render `<Svelte />` components &amp; pass them props.',
79+
'I need to render Svelte components from Twig'
80+
))
81+
->setDocsLink('https://svelte.dev/', 'Go deeper with the Svelte docs.'),
82+
7383
(new Package(
7484
'cropperjs',
7585
'Image Cropper',

‎ux.symfony.com/symfony.lock

+3
Original file line numberDiff line numberDiff line change
@@ -544,6 +544,9 @@
544544
"symfony/ux-react": {
545545
"version": "2.x-dev"
546546
},
547+
"symfony/ux-svelte": {
548+
"version": "2.x-dev"
549+
},
547550
"symfony/ux-swup": {
548551
"version": "v2.1.1"
549552
},

‎ux.symfony.com/templates/ux_packages/svelte.html.twig

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{% extends 'packageBase.html.twig' %}
2+
3+
{% block component_header %}
4+
{% component PackageHeader with {
5+
package: 'svelte',
6+
eyebrowText: 'Svelte Component Rendering'
7+
} %}
8+
{% block title_header %}
9+
Render Svelte from
10+
<span class="playfair ps-2">inside Twig</span>
11+
{% endblock %}
12+
13+
{% block sub_content %}
14+
Built a Svelte component? Render it quickly &amp; easily in Twig <em>and</em> pass in dynamic props.
15+
{% endblock %}
16+
{% endcomponent %}
17+
{% endblock %}
18+
19+
{% block code_block_left %}
20+
<twig:CodeBlock filename="assets/svelte/controllers/PackageSearch.svelte" height="300px" language="html" />
21+
{% endblock %}
22+
23+
{% block code_block_right %}
24+
<twig:CodeBlock
25+
filename="templates/ux_packages/svelte.html.twig"
26+
height="300px"
27+
targetTwigBlock="demo_content"
28+
/>
29+
{% endblock %}
30+
31+
{% block demo_title %}UX Svelte{% endblock %}
32+
33+
{% block demo_content %}
34+
<div {{ svelte_component('PackageSearch', {
35+
packages: packagesData
36+
}) }}>
37+
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
38+
</div>
39+
{% endblock %}

‎ux.symfony.com/webpack.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,8 @@ Encore
6767

6868
.enableVueLoader(() => {}, { runtimeCompilerBuild: false })
6969

70+
.enableSvelte()
71+
7072
// uncomment to get integrity="..." attributes on your script & link tags
7173
// requires WebpackEncoreBundle 1.4 or higher
7274
//.enableIntegrityHashes(Encore.isProduction())

‎ux.symfony.com/yarn.lock

+28-1
Original file line numberDiff line numberDiff line change
@@ -1185,6 +1185,9 @@
11851185
"@symfony/ux-react@file:vendor/symfony/ux-react/assets":
11861186
version "1.0.0"
11871187

1188+
"@symfony/ux-svelte@file:vendor/symfony/ux-svelte/assets":
1189+
version "1.0.0"
1190+
11881191
"@symfony/ux-swup@file:vendor/symfony/ux-swup/assets":
11891192
version "1.1.0"
11901193

@@ -3111,7 +3114,7 @@ loader-runner@^4.2.0:
31113114
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
31123115
integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
31133116

3114-
loader-utils@^2.0.0:
3117+
loader-utils@^2.0.0, loader-utils@^2.0.4:
31153118
version "2.0.4"
31163119
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
31173120
integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
@@ -4365,6 +4368,30 @@ supports-preserve-symlinks-flag@^1.0.0:
43654368
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
43664369
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
43674370

4371+
svelte-dev-helper@^1.1.9:
4372+
version "1.1.9"
4373+
resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
4374+
integrity sha512-oU+Xv7Dl4kRU2kdFjsoPLfJfnt5hUhsFUZtuzI3Ku/f2iAFZqBoEuXOqK3N9ngD4dxQOmN4OKWPHVi3NeAeAfQ==
4375+
4376+
svelte-hmr@^0.14.2:
4377+
version "0.14.12"
4378+
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
4379+
integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
4380+
4381+
svelte-loader@^3.0.0:
4382+
version "3.1.7"
4383+
resolved "https://registry.yarnpkg.com/svelte-loader/-/svelte-loader-3.1.7.tgz#b6acc02380b3cfe08340a08fe6831474fe4d56cb"
4384+
integrity sha512-YVg5gQaUdV26uaA5SEGj1VOUX0YQicD9PezKvVlkQ2JI644silWtJZ3hkxHtXSfjnlFr0OTNoyOgeINIODdT+A==
4385+
dependencies:
4386+
loader-utils "^2.0.4"
4387+
svelte-dev-helper "^1.1.9"
4388+
svelte-hmr "^0.14.2"
4389+
4390+
svelte@^3.0:
4391+
version "3.58.0"
4392+
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
4393+
integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
4394+
43684395
svgo@^2.7.0:
43694396
version "2.8.0"
43704397
resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.8.0.tgz#4ff80cce6710dc2795f0c7c74101e6764cfccd24"

0 commit comments

Comments
 (0)