Revise RFC #389 with details about its argument #620

chancancode · 2020-04-29T21:14:09Z

This PR revises RFC #389 with some additional details about its argument handling based on implementation experience in https://github.com/tildeio/ember-element-helper

chancancode · 2020-04-29T21:14:43Z

cc @cibernox

chancancode · 2020-04-29T21:20:04Z

text/0389-dynamic-tag-names.md


 Example:

 ```hbs
 {{#let (element @htmlTag) as |Tag|}}
-  <Tag>...</Tag>
+  <Tag class="my-element" {{on "click" this.tagClicked}}>Hello</Tag>


I'm aware this is probably not the most sensible (and accessible) example, but it's really just the simplest example to show that "modifiers get passed through" without too much bloat. Happy to change it to something else though.

This commit updates the argument handling: * To match [RFC PR #620](emberjs/rfcs#620) * Returns `null` on `null` or `undefined` * Use development mode assertions for other invalid arguments * To match more closely the likely Ember side implementation * Handle argument errors at runtime * `owner.hasRegistration('helper:element') === true` Since the argument errors are moved to runtime, this also removes the need for separate node tests. Previously, that also caused an error when `ember-auto-import` is included. Since we removed the `qunit` dependency we can now include `ember-auto-import` to align with the default addon blueprint. See also https://discordapp.com/channels/480462759797063690/485447409296736276/704799818316251216

This commit updates the argument handling: * To match [RFC PR #620](emberjs/rfcs#620) * Returns `null` on `null` or `undefined` * Use development mode assertions for other invalid arguments * Add test for modifiers usage * To match more closely the likely Ember side implementation * Handle argument errors at runtime * `owner.hasRegistration('helper:element') === true` Since the argument errors are moved to runtime, this also removes the need for separate node tests. Previously, that also caused an error when `ember-auto-import` is included. Since we removed the `qunit` dependency we can now include `ember-auto-import` to align with the default addon blueprint. See also https://discordapp.com/channels/480462759797063690/485447409296736276/704799818316251216

This commit updates the argument handling: * To match [RFC PR #620](emberjs/rfcs#620) * Returns `null` on `null` or `undefined` * Use development mode assertions for other invalid arguments * Add test for modifiers usage * Add test for `...attributes` usage * To match more closely the likely Ember side implementation * Handle argument errors at runtime * `owner.hasRegistration('helper:element') === true` Since the argument errors are moved to runtime, this also removes the need for separate node tests. Previously, that also caused an error when `ember-auto-import` is included. Since we removed the `qunit` dependency we can now include `ember-auto-import` to align with the default addon blueprint. See also https://discordapp.com/channels/480462759797063690/485447409296736276/704799818316251216 Closes #6

text/0389-dynamic-tag-names.md

chancancode · 2020-05-01T01:38:11Z

text/0389-dynamic-tag-names.md

+We propose to add a new `element` helper that takes a single positional argument.
+
+* When passed a non-empty string it generates a contextual component that, when invoked, renders an element with the same tag name as the passed string, along with the passed attributes (if any), modifiers (if any) and yields to given block (if any).
+* When passed an empty string, it generates a contextual compoment that, when invoked, yields to the given block without wrapping it an element and ignores any passed modifiers and attributes.


Despite unspecified, this is how the proof-of-concept addon already behaves today. It's largely just a happy accident due to implementation uses an Ember.Component under-the-hood, but there are tests for this behavior and seems like a useful feature in general.

chancancode · 2020-05-01T01:39:55Z

text/0389-dynamic-tag-names.md

+
+* When passed a non-empty string it generates a contextual component that, when invoked, renders an element with the same tag name as the passed string, along with the passed attributes (if any), modifiers (if any) and yields to given block (if any).
+* When passed an empty string, it generates a contextual compoment that, when invoked, yields to the given block without wrapping it an element and ignores any passed modifiers and attributes.
+* When passed `null` or `undefined`, it will return `null`.


The proof-of-concept addon currently throws here. The motivation for this is to mostly match the (component) helper's behavior with this, and acknowledge that there are useful patterns arising from this. Note that when null is "invoked" it's a no-op, which is why this works for contextual components in general.

This commit updates the argument handling: * To match [RFC PR #620](emberjs/rfcs#620) * Returns `null` on `null` or `undefined` * Use development mode assertions for other invalid arguments * Add test for modifiers usage * Add test for `...attributes` usage * To match more closely the likely Ember side implementation * Handle argument errors at runtime * `owner.hasRegistration('helper:element') === true` Since the argument errors are moved to runtime, this also removes the need for separate node tests. Previously, that also caused an error when `ember-auto-import` is included. Since we removed the `qunit` dependency we can now include `ember-auto-import` to align with the default addon blueprint. See also https://discordapp.com/channels/480462759797063690/485447409296736276/704799818316251216 Closes #6

chancancode · 2020-05-06T09:19:03Z

These changes are now available in ember-element-helper v0.3.1!

nightire · 2020-05-06T10:24:22Z

What if I want to yield a dynamic element with pre-bound attributes?

{{yield (element (or @htmlTag "div") class="foo bar" (on "click" this.onClick))}}

Is the above snippet works?

Or maybe like this?

{{#let (element (or @htmlTag "div")) as |Tag|}}
  {{yield (component Tag class="foo bar" (on "click" this.onClick))}}
{{/let}}

Revise RFC #389 with details about its argument

41b02db

chancancode requested review from MelSumner and rwjblue April 29, 2020 21:14

Mention modifiers as well

2bce530

chancancode requested a review from wycats April 29, 2020 21:18

chancancode commented Apr 29, 2020

View reviewed changes

cibernox approved these changes Apr 29, 2020

View reviewed changes

chancancode mentioned this pull request Apr 29, 2020

Update argument handling tildeio/ember-element-helper#23

Merged

ro0gr reviewed Apr 30, 2020

View reviewed changes

text/0389-dynamic-tag-names.md Outdated Show resolved Hide resolved

Fix typos, round 1 of 57

e983698

chancancode commented May 1, 2020

View reviewed changes

rwjblue approved these changes May 1, 2020

View reviewed changes

rwjblue merged commit bdac4a5 into master May 1, 2020

rwjblue deleted the dynamic-tag-names-revised branch May 1, 2020 19:32

ijlee2 mentioned this pull request Jul 3, 2020

Allowed passing @tagName for dynamic tag ijlee2/ember-container-query#46

Merged

6 tasks

erikap mentioned this pull request May 21, 2021

Feature/kas 2554 pub from mr agenda item document modal kanselarij-vlaanderen/frontend-kaleidos#889

Closed

chancancode mentioned this pull request Jul 18, 2022

In what ember-source version do I no longer need this addon? tildeio/ember-element-helper#86

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revise RFC #389 with details about its argument #620

Revise RFC #389 with details about its argument #620

chancancode commented Apr 29, 2020

chancancode commented Apr 29, 2020

chancancode Apr 29, 2020

chancancode May 1, 2020

chancancode May 1, 2020 •

edited

Loading

chancancode commented May 6, 2020

nightire commented May 6, 2020

Revise RFC #389 with details about its argument #620

Revise RFC #389 with details about its argument #620

Conversation

chancancode commented Apr 29, 2020

chancancode commented Apr 29, 2020

chancancode Apr 29, 2020

Choose a reason for hiding this comment

chancancode May 1, 2020

Choose a reason for hiding this comment

chancancode May 1, 2020 • edited Loading

Choose a reason for hiding this comment

chancancode commented May 6, 2020

nightire commented May 6, 2020

chancancode May 1, 2020 •

edited

Loading