[Svelte] Introduce Svelte UX component #498

ChqThomas · 2022-10-09T13:14:57Z

Q	A
Bug fix?	no
New feature?	yes
Tickets	N/A
License	MIT

This PR introduces a UX Svelte component which allows to render Svelte components inside Twig templates, with the ability to pass down props to Svelte components from Twig. It is implemented in the same way as the UX React component and the UX Vue component for coherence.

Install and configure the svelte-loader :

$ yarn add svelte-loader@^3.0.0 --dev

Enable it in your webpack.config.js file :
~~This part could be simplified by adding a .enableSvelteLoader() method to the webpack-encore API.~~
Now that symfony/webpack-encore#781 is merged you cas use .enableSvelte()

// webpack.config.js
Encore
    // ...
    .enableSvelte()
;

Call registerSvelteControllerComponents in app.js to register Svelte components

import { registerSvelteControllerComponents } from "@symfony/ux-svelte";

registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));

Create Svelte "controller components" (eg. Hello.svelte) inside the folder specified above (here assets/svelte/controllers)

// assets/svelte/controllers/Hello.svelte
<script>
    export let name = "Symfony";
</script>

<div>Hello {name}</div>

In the same way than the UX React and UX Vue components, there is a Twig helper function provided by the bundle : the first parameter is the name of your component, the second are the props that will be passed down :

<div {{ svelte_component('Hello', { name: 'Symfony UX' }) }}></div>

There is also an optional third parameter called intro that tells the Svelte component to play transitions on initial render

<div {{ svelte_component('HelloWithTransition', { name: 'Symfony UX with intial transition' }, true) }}></div>

The implementation was heavily inspired by the work from @tgalopin in #329 and from @t-richard in #426 !

ahmedyakoubi · 2022-10-09T14:43:04Z

that's really a great PR . as you said this could be simplified by mergin this PR

weaverryan

This is great - thanks for this! Before I do a deeper review, could you reorganize the directories to match, for example, the Autocomplete component? I'm talking specifically about having a src/ directory inside of the component and moving the assets into assets/ instead of Resources/assets. We have some inconsistency right now and I'd like to move things to the way that Autocomplete looks. So we should just get this component organized like that from the start :)

…ents

ChqThomas · 2022-10-10T20:48:44Z

Reorganization done :)

I have issues setting up multiple tests in the same file with jest, Svelte seems not happy when the DOM is cleared before his $destroy method is called, and it crash when it happens two times in a row, haven't figured out why yet ...

YummYume · 2022-11-23T19:50:02Z

Hello. Any news on this? This PR looks amazing 😃

weaverryan · 2023-01-20T16:48:21Z

Sorry for the delay on this! @ChqThomas could you also update .github/workflows/test.yaml. Currently, new packages need to be added there to trigger them to build in the CI. Currently, your nice tests aren't running :).

weaverryan · 2023-01-20T16:49:55Z

src/Svelte/doc/index.rst

+                    fullySpecified: false
+                }
+            }
+        );


Can we use Encore.enableSvelte() now that it exists?

Yes the new Encore.enableSvelte() works perfectly !

ChqThomas · 2023-01-23T20:26:20Z

Sorry for the delay on this! @ChqThomas could you also update .github/workflows/test.yaml. Currently, new packages need to be added there to trigger them to build in the CI. Currently, your nice tests aren't running :).

@weaverryan Thanks for the review, I added them !
The low-deps test is failing because in webpack-encore-bundle v1.11.0 the stimulus controller renderer was converting boolean values to integer :

Expected : data-symfony--ux-svelte--svelte-intro-value="true"
Actual : data-symfony--ux-svelte--svelte-intro-value="1"

Do you have any idea on how to handle both versions?

weaverryan · 2023-01-24T15:29:27Z

You can just bump the minimum-required version of Encore in your composer.json to whatever version fixed this :)

ChqThomas · 2023-01-24T18:24:24Z

Done 👍
If approved, I could take care of the example page for ux.symfony.com in another PR :)

weaverryan

Looking great!

weaverryan · 2023-01-25T14:29:11Z

src/Svelte/.gitattributes

+/.symfony.bundle.yaml export-ignore
+/assets/.gitignore export-ignore
+/assets/jest.config.js export-ignore
+/assets/test export-ignore


Please also add:

/assets/src/*.ts export-ignore

That's a relatively new addition to the packages :)

weaverryan · 2023-01-25T14:29:44Z

src/Svelte/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ["2.x"]
+maintained_branches: ["2.x"]
+doc_dir: "src/Resources/doc"


Suggested change

doc_dir: "src/Resources/doc"

doc_dir: "doc"

weaverryan · 2023-01-25T14:31:47Z

src/Svelte/assets/package.json

+        "controllers": {
+            "svelte": {
+                "main": "dist/render_controller.js",
+                "webpackMode": "eager",


You can remove this line - it's legacy, so not needed for new stuff.

weaverryan · 2023-01-25T14:33:04Z

src/Svelte/assets/src/render_controller.ts

+            intro: this.intro,
+            ...payload,
+        };
+        this.dispatch(name, { detail, prefix: 'svelte' });


You even noticed this recent change in the other UX packages and updated this PR - I'm very impressed!

weaverryan · 2023-01-25T14:35:04Z

src/Svelte/assets/test/fixtures/MyComponent.svelte

+<script>
+	import { fade } from "svelte/transition"
+
+	export let name = "without props";


minor, but can we use spaces here instead of tabs?

weaverryan · 2023-01-25T14:39:39Z

src/Svelte/doc/index.rst

+Svelte components located in the directory ``assets/svelte/controllers`` are registered as
+Svelte controller components.
+
+


remove the extra line break

weaverryan · 2023-01-25T14:39:58Z

src/Svelte/doc/index.rst

+Svelte controller components.
+
+
+You can then render any Svelte controller component in Twig using the ``svelte_component``.


Suggested change

You can then render any Svelte controller component in Twig using the ``svelte_component``.

You can then render any Svelte controller component in Twig using the ``svelte_component()`` function:

The remove For Example: below

weaverryan · 2023-01-25T14:40:42Z

src/Svelte/src/SvelteBundle.php

+ *
+ * @final
+ *
+ * @experimental


You can remove the @experimental. I think we'll release this NOT as experimental.

src/Svelte/doc/index.rst

weaverryan · 2023-01-25T14:41:58Z

src/Svelte/.gitignore

+/composer.lock
+/phpunit.xml
+/vendor/
+/var/


Is /var/ needed?

weaverryan

One small comment for the docs. But I've tested this locally - it's ready to go :)

weaverryan · 2023-02-07T19:20:10Z

src/Svelte/doc/index.rst

+    $ npm install svelte-loader@^3.0.0 --save-dev
+
+    # or use yarn
+    $ yarn add svelte-loader@^3.0.0 --dev


Let's remove the version from both of these commands.

Also, add svelte itself, as that will also be needed.

ChqThomas · 2023-02-07T21:35:39Z

Great ! 😁

ciprian-marius · 2023-02-24T22:29:14Z

is this ready to be used?

ChqThomas · 2023-03-21T18:59:50Z

is this ready to be used?

Hopefully soon!

@weaverryan Should I start writing the example page for ux.symfony.com ?

weaverryan · 2023-04-14T13:37:01Z

@ChqThomas Sorry for the delay! Yes please! I rebased your work over to #789 but will merge very shortly.

Thank you!

This PR was merged into the 2.x branch. Discussion ---------- [Svelte] Rebased Svelte PR Just a rebase of the work on #498 by `@ChqThomas` - for some reason, rebasing while merging gave me some trouble, but this was clean :) Commits ------- 94bc665 [Svelte] Introduce Svelte UX component

[Svelte] Introduce Svelte UX component

b09457b

weaverryan reviewed Oct 10, 2022

View reviewed changes

ChqThomas added 2 commits October 10, 2022 22:04

[Svelte] Reorganize directories to improve consistency between compon…

b9421ce

…ents

[Svelte] Fix entrypoint in package.json

3b9b4bb

weaverryan mentioned this pull request Oct 12, 2022

Mentioning svelte as a valid loader override type symfony/symfony-docs#17337

Merged

ChqThomas added 3 commits November 26, 2022 13:00

[Svelte] Moved Resources/doc/ to component root folder

ec54f93

[Svelte] Fix javascript code style

f09bc5b

Merge branch 'symfony:2.x' into 2.x

1f23087

ElMoustacho approved these changes Jan 20, 2023

View reviewed changes

weaverryan reviewed Jan 20, 2023

View reviewed changes

ChqThomas added 5 commits January 23, 2023 19:31

Merge branch 'symfony:2.x' into 2.x

fcc2e38

[Svelte] Update doc : use .enableSvelte() to configure webpack-encore

b804a0e

[Svelte] Add Svelte tests to Github Actions workflow

0051e11

[Svelte] Add declare keyword to Stimulus controller

745dded

[Svelte] Dispatch Stimulus events in the same way as other components

d45f44a

[Svelte] Bump symfony/webpack-encore-bundle required version to ^1.15

103c1f8

weaverryan reviewed Jan 25, 2023

View reviewed changes

ChqThomas added 4 commits January 26, 2023 20:54

[Svelte] Various config / typos / doc fixes

f1d71f5

[Svelte] Combine rendering test files into one

1ee60b9

[Svelte] Add an example with the intro argument in the doc

16fe658

[Svelte] Update build files

29b4414

weaverryan approved these changes Feb 7, 2023

View reviewed changes

[Svelte] Update install command for svelte and svelte-loader in doc

b077bb9

weaverryan mentioned this pull request Apr 14, 2023

[Svelte] Rebased Svelte PR #789

Merged

weaverryan closed this Apr 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Svelte] Introduce Svelte UX component #498

[Svelte] Introduce Svelte UX component #498

ChqThomas commented Oct 9, 2022 •

edited

Loading

ahmedyakoubi commented Oct 9, 2022

weaverryan left a comment

ChqThomas commented Oct 10, 2022

YummYume commented Nov 23, 2022

weaverryan commented Jan 20, 2023

weaverryan Jan 20, 2023

ChqThomas Jan 23, 2023

ChqThomas commented Jan 23, 2023

weaverryan commented Jan 24, 2023

ChqThomas commented Jan 24, 2023

weaverryan left a comment

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan Jan 25, 2023

weaverryan left a comment

weaverryan Feb 7, 2023

ChqThomas commented Feb 7, 2023

ciprian-marius commented Feb 24, 2023

ChqThomas commented Mar 21, 2023

weaverryan commented Apr 14, 2023

		Svelte components located in the directory ``assets/svelte/controllers`` are registered as
		Svelte controller components.

		Svelte controller components.


		You can then render any Svelte controller component in Twig using the ``svelte_component``.

[Svelte] Introduce Svelte UX component #498

[Svelte] Introduce Svelte UX component #498

Conversation

ChqThomas commented Oct 9, 2022 • edited Loading

ahmedyakoubi commented Oct 9, 2022

weaverryan left a comment

Choose a reason for hiding this comment

ChqThomas commented Oct 10, 2022

YummYume commented Nov 23, 2022

weaverryan commented Jan 20, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChqThomas commented Jan 23, 2023

weaverryan commented Jan 24, 2023

ChqThomas commented Jan 24, 2023

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weaverryan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChqThomas commented Feb 7, 2023

ciprian-marius commented Feb 24, 2023

ChqThomas commented Mar 21, 2023

weaverryan commented Apr 14, 2023

ChqThomas commented Oct 9, 2022 •

edited

Loading