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

Lines changed: 2 additions & 0 deletions
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

Lines changed: 6 additions & 0 deletions
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

Lines changed: 39 additions & 0 deletions
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

Lines changed: 22 additions & 0 deletions
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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 80 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 0 deletions
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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 10 additions & 0 deletions
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
{

0 commit comments

Comments
 (0)