Use safe component invocations for embroider

cibernox · Dec 6, 2021 · 895e19a · 895e19a
1 parent 83e00e8
commit 895e19a
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 50 deletions.
diff --git a/addon/components/power-select-multiple.hbs b/addon/components/power-select-multiple.hbs
@@ -5,9 +5,9 @@
   @ariaInvalid={{@ariaInvalid}}
   @ariaLabel={{@ariaLabel}}
   @ariaLabelledBy={{@ariaLabelledBy}}
-  @afterOptionsComponent={{@afterOptionsComponent}}
+  @afterOptionsComponent={{ensure-safe-component @afterOptionsComponent}}
   @allowClear={{@allowClear}}
-  @beforeOptionsComponent={{or @beforeOptionsComponent null}}
+  @beforeOptionsComponent={{if @beforeOptionsComponent (ensure-safe-component @beforeOptionsComponent) null}}
   @buildSelection={{or @buildSelection this.defaultBuildSelection}}
   @calculatePosition={{@calculatePosition}}
   @closeOnSelect={{@closeOnSelect}}
@@ -16,14 +16,14 @@
   @disabled={{@disabled}}
   @dropdownClass={{@dropdownClass}}
   @extra={{@extra}}
-  @groupComponent={{@groupComponent}}
+  @groupComponent={{ensure-safe-component @groupComponent}}
   @horizontalPosition={{@horizontalPosition}}
   @initiallyOpened={{@initiallyOpened}}
   @loadingMessage={{@loadingMessage}}
   @matcher={{@matcher}}
   @matchTriggerWidth={{@matchTriggerWidth}}
   @noMatchesMessage={{@noMatchesMessage}}
-  @noMatchesMessageComponent={{@noMatchesMessageComponent}}
+  @noMatchesMessageComponent={{ensure-safe-component @noMatchesMessageComponent}}
   @onBlur={{@onBlur}}
   @onChange={{@onChange}}
   @onClose={{@onClose}}
@@ -32,9 +32,9 @@
   @onKeydown={{this.handleKeydown}}
   @onOpen={{this.handleOpen}}
   @options={{@options}}
-  @optionsComponent={{@optionsComponent}}
+  @optionsComponent={{ensure-safe-component @optionsComponent}}
   @placeholder={{@placeholder}}
-  @placeholderComponent={{@placeholderComponent}}
+  @placeholderComponent={{ensure-safe-component @placeholderComponent}}
   @preventScroll={{@preventScroll}}
   @registerAPI={{@registerAPI}}
   @renderInPlace={{@renderInPlace}}
@@ -46,16 +46,21 @@
   @searchMessage={{@searchMessage}}
   @searchPlaceholder={{@searchPlaceholder}}
   @selected={{@selected}}
-  @selectedItemComponent={{@selectedItemComponent}}
+  @selectedItemComponent={{ensure-safe-component @selectedItemComponent}}
   @eventType={{@eventType}}
   @title={{@title}}
   @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}"
-  @triggerComponent={{component (or @triggerComponent "power-select-multiple/trigger") tabindex=@tabindex}}
+  @triggerComponent={{
+    if
+    @triggerComponent
+    (component (ensure-safe-component @triggerComponent) tabindex=@tabindex)
+    (component "power-select-multiple/trigger" tabindex=@tabindex)
+  }}
   @triggerId={{@triggerId}}
   @verticalPosition={{@verticalPosition}}
   @tabindex={{this.computedTabIndex}}
-  @ebdTriggerComponent={{@ebdTriggerComponent}}
-  @ebdContentComponent={{@ebdContentComponent}}
+  @ebdTriggerComponent={{ensure-safe-component @ebdTriggerComponent}}
+  @ebdContentComponent={{ensure-safe-component @ebdContentComponent}}
   ...attributes as |option select|>
   {{yield option select}}
 </PowerSelect>
diff --git a/addon/components/power-select-multiple/trigger.hbs b/addon/components/power-select-multiple/trigger.hbs
@@ -19,7 +19,7 @@
         </span>
       {{/if}}
       {{#if @selectedItemComponent}}
-        {{component @selectedItemComponent extra=@extra option=opt select=@select}}
+        {{component (ensure-safe-component @selectedItemComponent) extra=@extra option=opt select=@select}}
       {{else}}
         {{yield opt @select}}
       {{/if}}

diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
@@ -10,8 +10,8 @@
   @verticalPosition={{@verticalPosition}}
   @disabled={{@disabled}}
   @calculatePosition={{@calculatePosition}}
-  @triggerComponent={{@ebdTriggerComponent}}
-  @contentComponent={{@ebdContentComponent}}
+  @triggerComponent={{ensure-safe-component @ebdTriggerComponent}}
+  @contentComponent={{ensure-safe-component @ebdContentComponent}}
   as |dropdown|>
   {{#let (assign dropdown (hash
     selected=this.selected
@@ -52,13 +52,19 @@
       id={{@triggerId}}
       tabindex={{and (not @disabled) (or @tabindex "0")}}
       ...attributes
-      >
-      {{#let (component (or @triggerComponent "power-select/trigger")) as |Trigger|}}
+    >
+      {{#let 
+        (if 
+          @triggerComponent 
+          (component (ensure-safe-component @triggerComponent)) 
+          (component 'power-select/trigger')
+        ) 
+      as |Trigger|}}
         <Trigger
           @allowClear={{@allowClear}}
           @buildSelection={{@buildSelection}}
           @loadingMessage={{or @loadingMessage "Loading options..."}}
-          @selectedItemComponent={{@selectedItemComponent}}
+          @selectedItemComponent={{ensure-safe-component @selectedItemComponent}}
           @select={{publicAPI}}
           @searchEnabled={{@searchEnabled}}
           @searchField={{@searchField}}
@@ -69,41 +75,76 @@
           @onInput={{this.handleInput}}
           @onKeydown={{this.handleKeydown}}
           @placeholder={{@placeholder}}
-          @placeholderComponent={{this.placeholderComponent}}
+          @placeholderComponent={{if 
+            @placeholderComponent 
+            (ensure-safe-component @placeholderComponent) 
+            (component 'power-select/placeholder')
+          }}
           @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
           as |opt term|>
           {{yield opt term}}
         </Trigger>
       {{/let}}
     </dropdown.Trigger>
     <dropdown.Content class="ember-power-select-dropdown{{if publicAPI.isActive " ember-power-select-dropdown--active"}} {{@dropdownClass}}">
-      {{#let (component (if (eq @beforeOptionsComponent undefined) "power-select/before-options" @beforeOptionsComponent)) as |BeforeOptions|}}
-        <BeforeOptions
-          @select={{publicAPI}}
-          @searchEnabled={{@searchEnabled}}
-          @onInput={{this.handleInput}}
-          @onKeydown={{this.handleKeydown}}
-          @onFocus={{this.handleFocus}}
-          @onBlur={{this.handleBlur}}
-          @placeholder={{@placeholder}}
-          @placeholderComponent={{this.placeholderComponent}}
-          @extra={{@extra}}
-          @listboxId={{listboxId}}
-          @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
-          @selectedItemComponent={{@selectedItemComponent}}
-          @searchPlaceholder={{@searchPlaceholder}}
+      {{#if (not-eq @beforeOptionsComponent null)}}
+        {{#let 
+          (if 
+            @beforeOptionsComponent 
+            (component (ensure-safe-component @beforeOptionsComponent))
+            (component 'power-select/before-options')
+          ) 
+        as |BeforeOptions|}}
+          <BeforeOptions
+            @select={{publicAPI}}
+            @searchEnabled={{@searchEnabled}}
+            @onInput={{this.handleInput}}
+            @onKeydown={{this.handleKeydown}}
+            @onFocus={{this.handleFocus}}
+            @onBlur={{this.handleBlur}}
+            @placeholder={{@placeholder}}
+            @placeholderComponent={{or @placeholderComponent (component 'power-select/placeholder')}}
+            @extra={{@extra}}
+            @listboxId={{listboxId}}
+            @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
+            @selectedItemComponent={{ensure-safe-component @selectedItemComponent}}
+            @searchPlaceholder={{@searchPlaceholder}}
           />
-      {{/let}}
+        {{/let}}
+      {{/if}}
       {{#if this.mustShowSearchMessage}}
-        {{#let (component (or @searchMessageComponent "power-select/search-message")) as |SearchMessage|}}
+        {{#let 
+          (if 
+            @searchMessageComponent 
+            (component (ensure-safe-component @searchMessageComponent))
+            (component 'power-select/search-message')
+          ) 
+        as |SearchMessage|}}
           <SearchMessage @searchMessage={{this.searchMessage}} @select={{publicAPI}}/>
         {{/let}}
       {{else if this.mustShowNoMessages}}
-        {{#let (component (or @noMatchesMessageComponent "power-select/no-matches-message")) as |NoMatchesMessage|}}
+        {{#let 
+          (if 
+            @noMatchesMessageComponent
+            (component (ensure-safe-component @noMatchesMessageComponent))
+            (component 'power-select/no-matches-message')
+          ) 
+         as |NoMatchesMessage|}}
           <NoMatchesMessage @noMatchesMessage={{this.noMatchesMessage}} @select={{publicAPI}} />
         {{/let}}
       {{else}}
-        {{#let (component (or @optionsComponent "power-select/options")) as |Options|}}
+        {{#let 
+          (if 
+            @optionsComponent
+            (component (ensure-safe-component @optionsComponent))
+            (component 'power-select/options')
+          ) 
+          (if 
+            @groupComponent
+            (component (ensure-safe-component @groupComponent))
+            (component 'power-select/power-select-group')
+          ) 
+        as |Options Group|}}
           <Options
             @loadingMessage={{or @loadingMessage "Loading options..."}}
             @select={{publicAPI}}
@@ -112,19 +153,22 @@
             @optionsComponent={{Options}}
             @extra={{@extra}}
             @highlightOnHover={{this.highlightOnHover}}
-            @groupComponent={{or @groupComponent "power-select/power-select-group"}}
+            @groupComponent={{Group}}
             id={{listboxId}}
             class="ember-power-select-options" as |option select|>
             {{yield option select}}
           </Options>
         {{/let}}
       {{/if}}
-      {{#let (component @afterOptionsComponent) as |AfterOptions|}}
-        <AfterOptions
-          @extra={{@extra}}
-          @select={{publicAPI}}
-        />
-      {{/let}}
+
+      {{#if @afterOptionsComponent}}
+        {{#let (component (ensure-safe-component @afterOptionsComponent)) as |AfterOptions|}}
+          <AfterOptions
+            @extra={{@extra}}
+            @select={{publicAPI}}
+          />
+        {{/let}}
+      {{/if}}
     </dropdown.Content>
   {{/let}}
 </BasicDropdown>

diff --git a/addon/components/power-select.ts b/addon/components/power-select.ts
@@ -59,7 +59,9 @@ export interface PowerSelectArgs {
   highlightOnHover?: boolean
   placeholderComponent?: string
   searchMessage?: string
+  searchMessageComponent?: string;
   noMatchesMessage?: string
+  noMatchesMessageComponent?: string;
   matchTriggerWidth?: boolean
   options: any[] | PromiseProxy<any[]>
   selected: any | PromiseProxy<any>
@@ -69,6 +71,9 @@ export interface PowerSelectArgs {
   searchEnabled?: boolean
   tabindex?: number | string
   triggerComponent?: string
+  beforeOptionsComponent?: string
+  optionsComponent?: string;
+  groupComponent?: string;
   matcher?: MatcherFn
   initiallyOpened?: boolean
   typeAheadOptionMatcher?: MatcherFn
@@ -155,10 +160,6 @@ export default class PowerSelect extends Component<PowerSelectArgs> {
     return pathForOption(results, highlighted);
   }
 
-  get placeholderComponent(): string {
-    return this.args.placeholderComponent || 'power-select/placeholder';
-  }
-
   get searchMessage(): string {
     return this.args.searchMessage === undefined ? 'Type to search' : this.args.searchMessage;
   }

diff --git a/addon/components/power-select/options.hbs b/addon/components/power-select/options.hbs
@@ -5,7 +5,10 @@
       <li class="ember-power-select-option ember-power-select-option--loading-message" role="option">{{@loadingMessage}}</li>
     {{/if}}
   {{/if}}
-  {{#let (component @groupComponent) (component @optionsComponent) as |Group Options|}}
+  {{#let 
+    (component (ensure-safe-component @groupComponent)) 
+    (component (ensure-safe-component @optionsComponent)) 
+  as |Group Options|}}
     {{#each @options as |opt index|}}
       {{#if (ember-power-select-is-group opt)}}
         <Group @group={{opt}} @select={{@select}} @extra={{@extra}}>

diff --git a/addon/components/power-select/trigger.hbs b/addon/components/power-select/trigger.hbs
@@ -1,13 +1,13 @@
 {{#if @select.selected}}
   {{#if @selectedItemComponent}}
-    {{component @selectedItemComponent extra=(readonly @extra) option=(readonly @select.selected) select=(readonly @select)}}
+    {{component (ensure-safe-component @selectedItemComponent) extra=(readonly @extra) option=(readonly @select.selected) select=(readonly @select)}}
   {{else}}
     <span class="ember-power-select-selected-item">{{yield @select.selected @select}}</span>
   {{/if}}
   {{#if (and @allowClear (not @select.disabled))}}
     <span class="ember-power-select-clear-btn" role="button" {{on "mousedown" this.clear}} {{on "touchstart" this.clear}}>&times;</span>
   {{/if}}
 {{else}}
-  {{component @placeholderComponent placeholder=@placeholder}}
+  {{component (ensure-safe-component @placeholderComponent) placeholder=@placeholder}}
 {{/if}}
 <span class="ember-power-select-status-icon"></span>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "vendor"
   ],
   "dependencies": {
+    "@embroider/util": "^0.47.2",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "ember-assign-helper": "^0.4.0",