adding dynamic component configuration rfc #48

alejandro-sf · 2021-04-12T19:56:04Z

alejandro-sf · 2021-04-13T22:51:01Z

@jodarove @pmdartus @diervo please consider this RFC for dynamic component configuration (lwc:bind)

nolanlawson · 2021-04-13T23:04:10Z

@alejandro-sf It looks like something is wrong with the formatting? GitHub is not able to render the markdown correctly: rendered view

alejandro-sf · 2021-04-13T23:07:44Z

Oh I didn't know the markdown was visible even from the review...I'll update to fix I used the quip export to markdown feature so there's probably something wrong there

alejandro-sf · 2021-04-17T00:46:58Z

Please see the new formatting here

text/0114-dynamic-component-configuration.md

pmdartus · 2021-04-19T08:49:23Z

text/0114-dynamic-component-configuration.md

+this.loadCtor();
+
+async loadCtor() {
+	const ctor = await import(this.moduleName);


Let's leave dynamic import aside from this proposal. How the component constructor is loaded is independent of how the attributes, properties, event listeners are passed.

pmdartus · 2021-04-19T08:53:42Z

text/0114-dynamic-component-configuration.md

+
+get configurations() {
+	return {
+		ctor: this.customCtor,


LWC already implements the lwc:is directive to dynamically pass a component constructor at runtime. Accepting a ctor property creates a duplicate. IMO this proposal should work both for static and dynamic component constructors.

Does that mean you want 'ctor' to be renamed as 'is' or is there another mechanism for this?

It's not the lwc:is but rather the lwc:dynamic that I was referring to above: https://github.com/salesforce/lwc-rfcs/blob/master/text/0110-dynamic-components.md#api

pmdartus · 2021-04-19T08:55:35Z

text/0114-dynamic-component-configuration.md

+</template>
+```
+```js
+import { LightningElement, api } from "lwc";


This is not a valid JavaScript code block. I would also recommend making this example as minimal as possible to make it straightforward to understand.

Should we pare this down? I wanted to make sure we had a compelling usecase for each of the 4 things you can configure in 1 place.

I would keep the example in the RFC itself as simple a possible. You can add more complex examples at the end in an appendix for example this way is doesn't distract from the actual content of the RFC.

pmdartus · 2021-04-19T08:57:57Z

text/0114-dynamic-component-configuration.md

+Before this proposal, dynamic component creation was done using the `lwc:dynamic` directive. This directive required a component author to know component configuration details like the property and event names at design time which breaks down for use cases that need true dynamic component creation. For instance, in the case of property values or event handlers one would have to keep a reference to the element and set the information retrieved at runtime manually.
+
+```js
+element;


This code block is not valid JavaScript.

pmdartus · 2021-04-19T09:00:37Z

text/0114-dynamic-component-configuration.md

+
+## Proposal
+
+The proposal involves adding a new directive that captures the relevant information to configure a web component at runtime. The assumption is that this directive will be used in cases where the component module is unknown at runtime (therefore used alongside dynamic imports) and zero or more of the following are unknown at runtime: properties, attributes, or event handlers.


Suggested change

The proposal involves adding a new directive that captures the relevant information to configure a web component at runtime. The assumption is that this directive will be used in cases where the component module is unknown at runtime (therefore used alongside dynamic imports) and zero or more of the following are unknown at runtime: properties, attributes, or event handlers.

The proposal involves adding a new directive that captures the relevant information to configure a web component at runtime. The assumption is that this directive will be used in cases where the component constructor is unknown until runtime and zero or more of the following are unknown until runtime: properties, attributes, or event handlers.

pmdartus · 2021-04-19T09:02:20Z

text/0114-dynamic-component-configuration.md

+
+The directive `lwc:bind` can retrieve component configuration data via a JavaScript object with a pre-defined shape. Constructor is the only required property in the configuration data.
+
+## General Invariants


There is a mix of actual invariants and design details in this section.

For example, Changes to the configuration object must be reflected in the component is not an invariant of this proposal but rather a design decision based on the proposed solution. I would recommend breaking this section apart and specifying each individual behavior.

pmdartus · 2021-04-19T09:05:51Z

text/0114-dynamic-component-configuration.md

+
+* Changes to the configuration object must be reflected in the component (ie changing the properties will cause component properties to be set again)
+
+* Changing the constructor on a parent component will also trigger a cascade re-render of any child components 


Changing a constructor requires unmounting the existing custom element and creating a new custom element. It actually doesn't re-render the children elements but creates brand new children elements.

pmdartus · 2021-04-19T09:16:25Z

text/0114-dynamic-component-configuration.md

+
+This feature will be available in Salesforce Lightning Platform and LWR to certain teams depending on their use cases
+
+## Unresolved Questions


Questions that are not covered by this proposal:

Can the lwc:bind directive be used with other directives, attributes and event handlers?

If the response to the previous answer is yes, what happens when the lwc:bind contains an attribute that is already defined via the template. For example: <x-foo lwc:bind={config} class="error"></x-foo> with config = { attributes: { class: 'success' } } ?

In which order properties and attributes are set? If the config is defined as config = { attributes: { class: 'error' }, properties: { className: 'success' } } what is the expected output?

How are attributes values treated? How to add and remove an attribute? What is the semantic of the following attribute values: null, undefined, true and false?

what about special properties, like innerHtml, outerHtml, innerText, etc? Will they be allowed?

There's already a [inner html binding RFC] (#15), which states some security concerns. Open question: Does this lwc:bind proposal overlaps with lwc:inner-html?

pmdartus · 2021-04-19T09:18:58Z

text/0114-dynamic-component-configuration.md

+```
+A new tool must be introduced that will allow component authors to configure their components with information retrieved at runtime without relying on maintaining element references or manually manipulating the DOM.
+
+## Proposal


It would be great to add a section about how other frameworks are approaching this issue.

update RFC doc

salesforce-cla · 2021-05-14T21:36:32Z

Thanks for the contribution! It looks like @wanyanxu is an internal user so signing the CLA is not required. However, we need to confirm this.

salesforce-cla · 2021-05-26T00:51:34Z

Thanks for the contribution! Unfortunately we can't verify the commit author(s): Alejandro Lopez <a***@A***.i***.s***.com>. One possible solution is to add that email to your GitHub account. Alternatively you can change your commits to another email and force push the change. After getting your commits associated with your GitHub account, sign the Salesforce.com Contributor License Agreement and this Pull Request will be revalidated.

jodarove · 2021-05-26T17:50:50Z

text/0114-dynamic-component-configuration.md

+	@wire(myAdapter, { id: 'someDashboardId' }) {
+		chartDefinitions({ data, error }) {


Suggested change

@wire(myAdapter, { id: 'someDashboardId' }) {

chartDefinitions({ data, error }) {

@wire(myAdapter, { id: 'someDashboardId' })

chartDefinitions({ data, error }) {

jodarove · 2021-05-26T17:51:48Z

text/0114-dynamic-component-configuration.md

+	@api moduleName;
+
+	connectedCallback() {
+		const ctor = await import(this.moduleName);


Is this because await must be in an async function?

adding dynamic component configuration rfc

1a1f052

salesforce-cla bot added the cla:signed label Apr 12, 2021

alejandro-sf closed this Apr 12, 2021

alejandro-sf reopened this Apr 13, 2021

alejandro-sf added 3 commits April 16, 2021 17:29

fixed most formatting issues

ddd4a77

fixed html sample formatting

1a47d5c

spacing issue

e92dc2b

pmdartus reviewed Apr 19, 2021

View reviewed changes

Update 0114-dynamic-component-configuration.md

13f2ff4

update RFC doc

salesforce-cla bot removed the cla:signed label May 14, 2021

salesforce-cla bot added the cla:missing label May 14, 2021

checking in on behalf of Wanyan, updates based on initial comments

fc9ca29

commiting with proper email to pass CLI checks

eedbd1f

jodarove reviewed May 26, 2021

View reviewed changes

pmdartus added the draft label Oct 26, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adding dynamic component configuration rfc #48

adding dynamic component configuration rfc #48

alejandro-sf commented Apr 12, 2021 •

edited by abdulsattar

Loading

alejandro-sf commented Apr 13, 2021

nolanlawson commented Apr 13, 2021

alejandro-sf commented Apr 13, 2021

alejandro-sf commented Apr 17, 2021

pmdartus Apr 19, 2021

pmdartus Apr 19, 2021

Josh-Goodman Apr 19, 2021

pmdartus Apr 20, 2021

pmdartus Apr 19, 2021

Josh-Goodman Apr 19, 2021

pmdartus Apr 20, 2021

pmdartus Apr 19, 2021

pmdartus Apr 19, 2021

pmdartus Apr 19, 2021

pmdartus Apr 19, 2021

pmdartus Apr 19, 2021

jodarove May 26, 2021

pmdartus Apr 19, 2021

salesforce-cla bot commented May 14, 2021

salesforce-cla bot commented May 26, 2021

jodarove May 26, 2021

jodarove May 26, 2021

alejandro-sf May 26, 2021


		## Proposal

		The proposal involves adding a new directive that captures the relevant information to configure a web component at runtime. The assumption is that this directive will be used in cases where the component module is unknown at runtime (therefore used alongside dynamic imports) and zero or more of the following are unknown at runtime: properties, attributes, or event handlers.


		The directive `lwc:bind` can retrieve component configuration data via a JavaScript object with a pre-defined shape. Constructor is the only required property in the configuration data.

		## General Invariants


		* Changes to the configuration object must be reflected in the component (ie changing the properties will cause component properties to be set again)

		* Changing the constructor on a parent component will also trigger a cascade re-render of any child components


		This feature will be available in Salesforce Lightning Platform and LWR to certain teams depending on their use cases

		## Unresolved Questions

		@wire(myAdapter, { id: 'someDashboardId' }) {
		chartDefinitions({ data, error }) {

adding dynamic component configuration rfc #48

Are you sure you want to change the base?

adding dynamic component configuration rfc #48

Conversation

alejandro-sf commented Apr 12, 2021 • edited by abdulsattar Loading

alejandro-sf commented Apr 13, 2021

nolanlawson commented Apr 13, 2021

alejandro-sf commented Apr 13, 2021

alejandro-sf commented Apr 17, 2021

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

salesforce-cla bot commented May 14, 2021

salesforce-cla bot commented May 26, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alejandro-sf commented Apr 12, 2021 •

edited by abdulsattar

Loading