allow getOwnConfig (from embroider) access added definitions

[basz]

I went an gone with it. I need this to be able to add new custom components types

let me know if you require changes on this... (perhaps there is a better way)

see #912

[derrabauke]

Hey @basz :wave: Thanks for your contribution. :tada:

Could you please run yarn lint:fix and push again so we can check the pipeline status. :-)

[basz]

sure, done

[basz]

hi there... kind reminder to this open PR.

[anehx]

Hi @basz, thanks for submitting a PR! I don't quite understand the impact this change since the types/* is currently a fixed list of possible input types. There is currently no way to pass a custom input type such as your example in #912 into the input component.

In order to implement that behaviour, we'd need to adjust the ValidatedInput::Render component to be able to use custom input types. Since that is currently not the case, I'd say that this change alone will not do anything if the host application doesn't customize the render component as well, no?

Do I understand your use case correctly?

[basz]

Yea, you are correct.

I -do- override ValidatedInput::Render.

Without this PR even that is not possible at all.

It's up to you to determine if you would even want to support completely custom components. I understand if you didn't.

Please let me know. I would need to go back to ember-bootstrap as my go to form thing. Disadvantage it is more then just forms.

Thx!

[anehx]

Could you paste a snippet of how your render component (hbs and js) looks like?

[basz]

currently

{{! template-lint-disable no-autofocus-attribute }}
<div class={{class-list "form-group"}}>
  {{#if (not-eq @type "checkbox")}}
    <@labelComponent />
  {{/if}}

  <ValidatedForm::ValidatedInput::Render::Wrapper>
    {{#if (eq @type "select")}}
      <this.selectComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @multiple={{@multiple}}
        @name={{or @inputName @name}}
        @optionLabelPath={{@optionLabelPath}}
        @params={{@params}}
        @options={{@options}}
        @optionTargetPath={{@optionTargetPath}}
        @optionValuePath={{@optionValuePath}}
        @prompt={{@prompt}}
        @promptIsSelectable={{@promptIsSelectable}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
      <this.radioGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
      <this.checkboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "inlineCheckboxGroup") (eq @type "inline-checkbox-group"))}}
      <this.inlineCheckboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (or (eq @type "horizontalCheckboxGroup") (eq @type "horizontal-checkbox-group"))}}
      <this.horizontalCheckboxGroupComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (eq @type "checkbox")}}
      <this.checkboxComponent
        @disabled={{@disabled}}
        @inputId={{@inputId}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @labelComponent={{@labelComponent}}
        @name={{or @inputName @name}}
        @params={{@params}}
        @options={{@options}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        @value={{@value}}
        ...attributes
      />
    {{else if (eq @type "textarea")}}
      <this.textareaComponent
        autocomplete={{@autocomplete}}
        autofocus={{@autofocus}}
        cols={{@cols}}
        disabled={{@disabled}}
        id={{@inputId}}
        name={{or @inputName @name}}
        placeholder={{@placeholder}}
        rows={{@rows}}
        value={{@value}}
        @params={{@params}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{else if (and (eq @type "date") (not-eq this.dateComponent this.inputComponent))}}
      <this.dateComponent
        @autocomplete={{@autocomplete}}
        @autofocus={{@autofocus}}
        @disabled={{@disabled}}
        @id={{@inputId}}
        @params={{@params}}
        @name={{or @inputName @name}}
        @placeholder={{@placeholder}}
        @value={{@value}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{else}}
      <this.inputComponent
        autocomplete={{@autocomplete}}
        autofocus={{@autofocus}}
        disabled={{@disabled}}
        id={{@inputId}}
        name={{or @inputName @name}}
        placeholder={{@placeholder}}
        type={{@type}}
        value={{@value}}
        @params={{@params}}
        @isInvalid={{@isInvalid}}
        @isValid={{@isValid}}
        @setDirty={{@setDirty}}
        @update={{@update}}
        ...attributes
      />
    {{/if}}
  </ValidatedForm::ValidatedInput::Render::Wrapper>

  <@hintComponent />
  <@errorComponent />
</div>

import Component from '@glimmer/component';

import passedOrDefault from 'ember-validated-form/passed-or-default';

export default class RenderComponent extends Component {
  @passedOrDefault('types/checkbox-group') checkboxGroupComponent;
  @passedOrDefault('types/inline-checkbox-group') inlineCheckboxGroupComponent;
  @passedOrDefault('types/horizontal-checkbox-group') horizontalCheckboxGroupComponent;
  @passedOrDefault('types/checkbox') checkboxComponent;
  @passedOrDefault('types/input') inputComponent;
  @passedOrDefault('types/radio-group') radioGroupComponent;
  @passedOrDefault('types/select') selectComponent;
  @passedOrDefault('types/textarea') textareaComponent;
  @passedOrDefault('types/date') dateComponent;
}

[basz]

As you can see custom component are hardcoded into the RenderComponent. Do you think there is way around that? I guess one issue would exist with embroider apps and dynamic components... Maybe that is the reason you did it like you did.