Skip to content

[Svelte] Example page for ux.symfony.com #795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ux.symfony.com/assets/app.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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$/));
6 changes: 6 additions & 0 deletions ux.symfony.com/assets/controllers.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,12 @@
"fetch": "eager"
}
},
"@symfony/ux-svelte": {
"svelte": {
"enabled": true,
"fetch": "eager"
}
},
"@symfony/ux-swup": {
"swup": {
"enabled": true,
Expand Down
Binary file added ux.symfony.com/assets/images/svelte.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
39 changes: 39 additions & 0 deletions ux.symfony.com/assets/svelte/components/PackageList.svelte
Original file line number Diff line number Diff line change
@@ -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}
22 changes: 22 additions & 0 deletions ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions ux.symfony.com/composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
81 changes: 80 additions & 1 deletion ux.symfony.com/composer.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ux.symfony.com/config/bundles.php
Original file line number Diff line number Diff line change
Expand Up @@ -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],
];
3 changes: 3 additions & 0 deletions ux.symfony.com/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
10 changes: 10 additions & 0 deletions ux.symfony.com/src/Controller/UxPackagesController.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
Expand Down
10 changes: 10 additions & 0 deletions ux.symfony.com/src/Service/PackageRepository.php
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
3 changes: 3 additions & 0 deletions ux.symfony.com/symfony.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
39 changes: 39 additions & 0 deletions ux.symfony.com/templates/ux_packages/svelte.html.twig
Original file line number Diff line number Diff line change
@@ -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 %}
2 changes: 2 additions & 0 deletions ux.symfony.com/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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())
Expand Down
29 changes: 28 additions & 1 deletion ux.symfony.com/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down