TwigComponent & LiveComponent Packages #101

weaverryan · 2021-06-18T10:34:25Z

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

Introducing 2 new packages: TwigComponent and LiveComponent

Co-authored-by: Kevin Bond <kevinbond@gmail.com>

Nyholm

Here are some quick things

src/LiveComponent/README.md

Nyholm · 2021-06-18T10:41:45Z

src/LiveComponent/README.md

+
+```twig
+<!-- Add class after 200ms of loading -->
+<div data-loading="delay|addClass(opacity-50)">...</div>


I assume delay|addClass(opacity-50) is parsed by js later.

wouterj · 2021-06-18T10:46:09Z

src/LiveComponent/src/Attribute/BeforeReRender.php

+ *
+ * @experimental
+ */
+final class BeforeReRender


Suggested change

final class BeforeReRender

#[\Attribute(\Attribute::TARGET_METHOD)]

final class BeforeReRender

Good catch! The LAST little bit that we didn't quite finish was for the PHP 8 attributes. That will come shortly (even quite possibly today). In addition to this change, there are some changes to the code that parses through the annotations/attributes :)

Ooh indeed, there is of course more to do than adding some attributes :D

src/LiveComponent/src/Attribute/LiveAction.php

src/LiveComponent/src/Attribute/LiveProp.php

src/LiveComponent/src/Attribute/PostHydrate.php

src/LiveComponent/src/Attribute/PreDehydrate.php

Nyholm

Here are some more comments.

Just nit picking. I have not been able to properly review logic etc.

src/LiveComponent/assets/README.md

src/LiveComponent/assets/src/directives_parser.js

src/LiveComponent/assets/src/live_controller.js

src/LiveComponent/src/DefaultComponentController.php

src/LiveComponent/src/DependencyInjection/LiveComponentExtension.php

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

src/LiveComponent/src/Hydrator/DoctrineEntityPropertyHydrator.php

I'm not a UX expert and don't want to block this

src/LiveComponent/LICENSE

src/LiveComponent/README.md

src/LiveComponent/assets/dist/http_data_helper.js

OskarStark

small comments

src/LiveComponent/README.md

noniagriconomie

some reviews passing by :)

noniagriconomie · 2021-06-18T12:23:06Z

src/LiveComponent/README.md

+```
+
+```twig
+<div {{ init_live_component(this) }}>


maybe add a twig file path?

noniagriconomie · 2021-06-18T12:24:46Z

src/LiveComponent/README.md

+Let's get started! Install the library with:
+
+```
+composer require symfony/ux-live-component


what about symfony/ux-twig/component in reference of the sentence Live components work with the TwigComponent ?

Hmm, I don't quite understand. Can you say a bit more?

Thanks for the review :)

@weaverryan sorry missing the word adding :s

=> what about adding symfony/ux-twig/component

so that the line became composer require symfony/ux-live-component symfony/ux-twig/component

Ah! It's just not needed - since symfony/ux-twig-component is a dependency: so you'll get it automatically.

src/LiveComponent/README.md

noniagriconomie · 2021-06-18T12:26:52Z

src/TwigComponent/src/ComponentRenderer.php

+    {
+        // TODO: Template attribute/annotation/interface to customize
+        // TODO: Self-Rendering components?
+        $templateName = sprintf('components/%s.html.twig', $component::getComponentName());


maybe let this configurable? or call it twig_components? components is a generic name

We may actually move the entire template name into the component itself - e.g. via a getTemplate(): string method. It seems like people are liking that better.

it would also make it compatible with bundles providing some components, btw

noniagriconomie · 2021-06-18T12:27:48Z

src/TwigComponent/composer.json

+        }
+    },
+    "require": {
+        "php": ">=7.2.5",


just a question, why the other is 7.4 and this ine 7.2?

Excellent question! We originally targeted 7.2, but it became a burden on the other one. A final decision needs to be made - and these should probably be consistent.

v7.4 would be top 👍
v7.2 (and v7.3) are eol or soon to be :)

src/TwigComponent/README.md

stof · 2021-06-18T11:24:56Z

src/LiveComponent/assets/dist/http_data_helper.js

+exports.buildFormData = buildFormData;
+exports.buildSearchParams = buildSearchParams;
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }


to avoid duplicating babel helpers in the app bundles, it might be better to configure the build process to import the babel helpers instead of copying them (and to add a dependency on @babel/helpers of course)

stof · 2021-06-18T11:25:52Z

src/LiveComponent/assets/src/directives_parser.js

+ * @property {string[]} args An array of unnamed arguments passed to the action
+ * @property {Object} named An object of named arguments
+ * @property {DirectiveModifier[]} modifiers Any modifiers applied to the action
+ * @property {function} getString()


would be better to describe the signature of the function

stof · 2021-06-18T11:28:37Z

src/LiveComponent/assets/dist/set_deep_data.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {


As our target are webpack users, it would be better to ship ES modules rather than CJS ones. Webpack has several optimizations that apply only on ES modules (module concatenation for instance, which helps a lot with minification)

This is definitely one of the things that needs to be done before release - I was thinking we should use bundler to properly put this together. Thanks for mentioning this :)

side note: should we even transpile those files for IE11 compat ? It increases the size for all projects even if they don't need IE11 support. It might be better to let projects needing IE11 to include those packages in the transpiled ones in the webpack config.

I was actually thinking about exactly this too. Either not transpiling for IE11 and either document that users should include a polyfill package we provide (that's why I have the starting polyfill as a separate file right now) or just polyfill themselves. There is some work to be done here to optimize but make IE11 support clear

stof · 2021-06-18T11:34:36Z

src/LiveComponent/src/Attribute/LiveProp.php

+     */
+    private $fieldName = null;
+
+    public function __construct(array $values)


To support attributes, I suggest you use separate arguments there, and you use doctrine annotation's @NamedArgumentConstructor annotation to tell Doctrine about it

note that to use @NamedArgumentConstructor reliably, you should probably declare a conflict with doctrine/annotations <1.12

stof · 2021-06-18T11:36:09Z

src/LiveComponent/README.md

+**EXPERIMENTAL** This component is currently experimental and is
+likely to change, or even change drastically.
+
+Live components work with the [TwigComponent](../TwigComponent)


this relative linki won't work when rendering the readme in subtree splits (and so not on packagist either)

Of course - good catch! I'll fix after we have the splits - I'm keeping a list :)

nicolas-grekas

LGTM, especially since it's experimental :)

jdreesen · 2021-06-18T13:27:09Z

src/LiveComponent/README.md

+
+When you trigger an action, a POST request is sent that contains
+a `X-CSRF-TOKEN` header. This header is automatically populated
+and violated. In other words... you get CSRF protection without


I assume this is a typo 😀

Suggested change

and violated. In other words... you get CSRF protection without

and validated. In other words... you get CSRF protection without

jdreesen · 2021-06-18T13:32:47Z

src/LiveComponent/README.md

+```
+
+Ok: time to build that `post_form` component! The Live Components package
+come with a special trait - `ComponentWithFormTrait` - to make it easy to


Suggested change

come with a special trait - `ComponentWithFormTrait` - to make it easy to

comes with a special trait - `ComponentWithFormTrait` - to make it easy to

jdreesen · 2021-06-18T13:49:09Z

src/LiveComponent/README.md

+Be sure to add the `@Assert\IsValid` to any property where you want
+the object on that property to also be validated.
+
+Tahnks to this setup, the component will now be automatically validated


Suggested change

Tahnks to this setup, the component will now be automatically validated

Thanks to this setup, the component will now be automatically validated

This PR was merged into the main branch. Discussion ---------- Fix typos in the LiveComponent readme I was a bit late with my review of #101, so here are the changes again. Commits ------- b2a5f1a Fix typos in the LiveComponent readme

weaverryan and others added 2 commits June 16, 2021 10:44

Initial commit of symfony/ux-twig-component

5677db1

Co-authored-by: Kevin Bond <kevinbond@gmail.com>

Initial commit of symfony/ux-live-component

c76583e

Co-authored-by: Kevin Bond <kevinbond@gmail.com>

javiereguiluz approved these changes Jun 18, 2021

View reviewed changes

Nyholm reviewed Jun 18, 2021

View reviewed changes

weaverryan force-pushed the live branch from 6ba82a3 to 947a537 Compare June 18, 2021 10:45

wouterj previously requested changes Jun 18, 2021

View reviewed changes

Nyholm reviewed Jun 18, 2021

View reviewed changes

weaverryan force-pushed the live branch from 947a537 to 2787d71 Compare June 18, 2021 11:01

OskarStark reviewed Jun 18, 2021

View reviewed changes

src/LiveComponent/LICENSE Outdated Show resolved Hide resolved

OskarStark reviewed Jun 18, 2021

View reviewed changes

src/LiveComponent/README.md Outdated Show resolved Hide resolved

OskarStark reviewed Jun 18, 2021

View reviewed changes

src/LiveComponent/assets/dist/http_data_helper.js Show resolved Hide resolved

OskarStark reviewed Jun 18, 2021

View reviewed changes

weaverryan force-pushed the live branch 2 times, most recently from 4db7e33 to cf9cae5 Compare June 18, 2021 11:17

t-richard reviewed Jun 18, 2021

View reviewed changes

src/LiveComponent/README.md Outdated Show resolved Hide resolved

noniagriconomie reviewed Jun 18, 2021

View reviewed changes

weaverryan force-pushed the live branch from 1ce5e20 to 007405a Compare June 18, 2021 12:43

configuring CI for new libraries, various tweaks, README

afdf222

weaverryan force-pushed the live branch from 007405a to afdf222 Compare June 18, 2021 12:45

stof reviewed Jun 18, 2021

View reviewed changes

removing clean check for now

006ee2d

Nyholm approved these changes Jun 18, 2021

View reviewed changes

nicolas-grekas approved these changes Jun 18, 2021

View reviewed changes

weaverryan merged commit 372fca9 into symfony:main Jun 18, 2021

jdreesen reviewed Jun 18, 2021

View reviewed changes

weaverryan deleted the live branch June 18, 2021 14:42

weaverryan mentioned this pull request Jun 18, 2021

[LiveComponent] Meta issue for todos, changes & bugs #102

Open

jdreesen mentioned this pull request Jun 18, 2021

Fix typos in the LiveComponent readme #103

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TwigComponent & LiveComponent Packages #101

TwigComponent & LiveComponent Packages #101

weaverryan commented Jun 18, 2021

Nyholm left a comment

Nyholm Jun 18, 2021

wouterj Jun 18, 2021

weaverryan Jun 18, 2021

wouterj Jun 18, 2021

Nyholm left a comment

OskarStark left a comment

noniagriconomie left a comment

noniagriconomie Jun 18, 2021

noniagriconomie Jun 18, 2021

weaverryan Jun 18, 2021

noniagriconomie Jun 18, 2021

weaverryan Jun 18, 2021

noniagriconomie Jun 18, 2021

weaverryan Jun 18, 2021

stof Jun 18, 2021

noniagriconomie Jun 18, 2021

weaverryan Jun 18, 2021

noniagriconomie Jun 18, 2021

stof Jun 18, 2021

stof Jun 18, 2021

stof Jun 18, 2021

weaverryan Jun 18, 2021

stof Jun 18, 2021

weaverryan Jun 18, 2021

stof Jun 18, 2021

stof Jun 18, 2021

stof Jun 18, 2021

weaverryan Jun 18, 2021

nicolas-grekas left a comment

jdreesen Jun 18, 2021

jdreesen Jun 18, 2021

jdreesen Jun 18, 2021

	final class BeforeReRender
	#[\Attribute(\Attribute::TARGET_METHOD)]
	final class BeforeReRender

		@@ -0,0 +1,80 @@
		"use strict";

		Object.defineProperty(exports, "__esModule", {

	and violated. In other words... you get CSRF protection without
	and validated. In other words... you get CSRF protection without

	come with a special trait - `ComponentWithFormTrait` - to make it easy to
	comes with a special trait - `ComponentWithFormTrait` - to make it easy to

	Tahnks to this setup, the component will now be automatically validated
	Thanks to this setup, the component will now be automatically validated

TwigComponent & LiveComponent Packages #101

TwigComponent & LiveComponent Packages #101

Conversation

weaverryan commented Jun 18, 2021

Nyholm 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

Nyholm left a comment

Choose a reason for hiding this comment

OskarStark left a comment

Choose a reason for hiding this comment

noniagriconomie 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

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolas-grekas 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