From 8483b3f5eb3c9d1798369b61d6b60ef0c17364b8 Mon Sep 17 00:00:00 2001 From: Geordan Neukum Date: Fri, 22 Jul 2022 07:18:45 -0400 Subject: [PATCH 1/3] class-field-desc: update to glimmer Let's update the ClassFieldDescription component to extend glimmer/component instead of ember/component. Glimmer components offer a bunch of various advantages over classic components and are the direction that ember is heading in general. --- app/components/class-field-description.hbs | 80 +++++++++++++++++++ app/components/class-field-description.js | 12 ++- .../components/class-field-description.hbs | 80 ------------------- 3 files changed, 88 insertions(+), 84 deletions(-) create mode 100644 app/components/class-field-description.hbs delete mode 100644 app/templates/components/class-field-description.hbs diff --git a/app/components/class-field-description.hbs b/app/components/class-field-description.hbs new file mode 100644 index 00000000..e1cc19a0 --- /dev/null +++ b/app/components/class-field-description.hbs @@ -0,0 +1,80 @@ +
+ {{!-- TODO: Fix this link for a11y --}} +

+ + {{svg-jar 'fa-link' class="class-field-description--link-hover" width="20px" height="20px"}} + + {{@field.name}} + {{#if @field.params}} + + ({{join ", " (map-by "name" @field.params)}}) + + {{/if}} + {{#if @field.return}} + {{@field.return.type}} + {{/if}} + {{#if @field.access}} + {{@field.access}} + {{/if}} + {{#if @field.deprecated}} + deprecated + {{/if}} +

+ {{#if @model.module}} +
+
+ Module: + {{@model.module}} +
+
+ {{/if}} +

+ {{#if @field.inherited}} + Inherited from + + {{@field.inheritedFrom}} {{@field.file}}:{{@field.line}} + + {{else}} + Defined in + + {{@field.file}}:{{@field.line}} + + {{/if}} +

+ {{#if @field.since}} +

+ Available since v{{@field.since}} +

+ {{/if}} + {{#if (and (eq @field.static 1) (eq @field.itemtype "method") this.hasImportExample)}} + + {{/if}} +
+ {{#each @field.params as |param|}} +
+
{{param.name}}
+
{{param.type}}
+
{{param.description}}
+ {{#if param.props}} +
+ {{#each param.props as |prop|}} +
+
{{prop.name}}
+
{{prop.type}}
+
{{prop.description}}
+
+ {{/each}} +
+ {{/if}} +
+ {{/each}} + {{#if @field.return}} +
+
returns
+
{{@field.return.type}}
+
{{@field.return.description}}
+
+ {{/if}} +
+ {{html-safe @field.description}} +
diff --git a/app/components/class-field-description.js b/app/components/class-field-description.js index f6e077bd..3e9afe64 100644 --- a/app/components/class-field-description.js +++ b/app/components/class-field-description.js @@ -1,5 +1,6 @@ import { inject as service } from '@ember/service'; -import Component from '@ember/component'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; export default class ClassFieldDescription extends Component { @service @@ -7,8 +8,8 @@ export default class ClassFieldDescription extends Component { get hasImportExample() { return this.legacyModuleMappings.hasFunctionMapping( - this.field.name, - this.field.class + this.args.field.name, + this.args.field.class ); } @@ -18,5 +19,8 @@ export default class ClassFieldDescription extends Component { * @method updateAnchor * @method fieldName String The name representing the field that was clicked. */ - updateAnchor() {} + @action + updateAnchor(fieldName) { + this.args.updateAnchor?.(fieldName); + } } diff --git a/app/templates/components/class-field-description.hbs b/app/templates/components/class-field-description.hbs deleted file mode 100644 index 8204c607..00000000 --- a/app/templates/components/class-field-description.hbs +++ /dev/null @@ -1,80 +0,0 @@ -
- {{!-- TODO: Fix this link for a11y --}} -

- - {{svg-jar 'fa-link' class="class-field-description--link-hover" width="20px" height="20px"}} - - {{this.field.name}} - {{#if this.field.params}} - - ({{join ", " (map-by "name" this.field.params)}}) - - {{/if}} - {{#if this.field.return}} - {{this.field.return.type}} - {{/if}} - {{#if this.field.access}} - {{this.field.access}} - {{/if}} - {{#if this.field.deprecated}} - deprecated - {{/if}} -

- {{#if this.model.module}} -
-
- Module: - {{this.model.module}} -
-
- {{/if}} -

- {{#if this.field.inherited}} - Inherited from - - {{this.field.inheritedFrom}} {{this.field.file}}:{{this.field.line}} - - {{else}} - Defined in - - {{this.field.file}}:{{this.field.line}} - - {{/if}} -

- {{#if this.field.since}} -

- Available since v{{this.field.since}} -

- {{/if}} - {{#if (and (eq this.field.static 1) (eq this.field.itemtype "method") this.hasImportExample)}} - - {{/if}} -
- {{#each this.field.params as |param|}} -
-
{{param.name}}
-
{{param.type}}
-
{{param.description}}
- {{#if param.props}} -
- {{#each param.props as |prop|}} -
-
{{prop.name}}
-
{{prop.type}}
-
{{prop.description}}
-
- {{/each}} -
- {{/if}} -
- {{/each}} - {{#if this.field.return}} -
-
returns
-
{{this.field.return.type}}
-
{{this.field.return.description}}
-
- {{/if}} -
- {{html-safe this.field.description}} -
From fea45c7a1e29a0f2df934c1ac12f6ec9889cdf79 Mon Sep 17 00:00:00 2001 From: Geordan Neukum Date: Fri, 22 Jul 2022 07:28:17 -0400 Subject: [PATCH 2/3] class-field-desc: prefer single quotes Let's prefer single quotes to double quotes throughout our template file. --- app/components/class-field-description.hbs | 58 +++++++++++----------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/app/components/class-field-description.hbs b/app/components/class-field-description.hbs index e1cc19a0..f888b92d 100644 --- a/app/components/class-field-description.hbs +++ b/app/components/class-field-description.hbs @@ -1,66 +1,66 @@ -
+
{{!-- TODO: Fix this link for a11y --}} -

- - {{svg-jar 'fa-link' class="class-field-description--link-hover" width="20px" height="20px"}} +

+ + {{svg-jar 'fa-link' class='class-field-description--link-hover' width='20px' height='20px'}} - {{@field.name}} + {{@field.name}} {{#if @field.params}} - - ({{join ", " (map-by "name" @field.params)}}) + + ({{join ', ' (map-by 'name' @field.params)}}) {{/if}} {{#if @field.return}} - {{@field.return.type}} + {{@field.return.type}} {{/if}} {{#if @field.access}} - {{@field.access}} + {{@field.access}} {{/if}} {{#if @field.deprecated}} - deprecated + deprecated {{/if}}

{{#if @model.module}} -
-
- Module: - {{@model.module}} +
+
+ Module: + {{@model.module}}
{{/if}} -

+

{{#if @field.inherited}} Inherited from - + {{@field.inheritedFrom}} {{@field.file}}:{{@field.line}} {{else}} Defined in - + {{@field.file}}:{{@field.line}} {{/if}}

{{#if @field.since}} -

+

Available since v{{@field.since}}

{{/if}} - {{#if (and (eq @field.static 1) (eq @field.itemtype "method") this.hasImportExample)}} - + {{#if (and (eq @field.static 1) (eq @field.itemtype 'method') this.hasImportExample)}} + {{/if}} -
+
{{#each @field.params as |param|}} -
+
{{param.name}}
-
{{param.type}}
+
{{param.type}}
{{param.description}}
{{#if param.props}} -
+
{{#each param.props as |prop|}} -
+
{{prop.name}}
-
{{prop.type}}
+
{{prop.type}}
{{prop.description}}
{{/each}} @@ -69,12 +69,12 @@
{{/each}} {{#if @field.return}} -
+
returns
-
{{@field.return.type}}
+
{{@field.return.type}}
{{@field.return.description}}
{{/if}}
{{html-safe @field.description}} -

+
\ No newline at end of file From 66e3476988aa06bfbf31009f0a7b1aa9f21521ad Mon Sep 17 00:00:00 2001 From: Geordan Neukum Date: Fri, 22 Jul 2022 08:31:32 -0400 Subject: [PATCH 3/3] tests: class-field-desc: prefer angle syntax Let's prefer angle bracket syntax to curly syntax when invoking the ClassFieldDescription component in our integration tests. This will fix deprecation warnings about using the latter, which make the test results a bit harder to decipher. --- .../components/class-field-description-test.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/tests/integration/components/class-field-description-test.js b/tests/integration/components/class-field-description-test.js index dd8a0249..56545315 100644 --- a/tests/integration/components/class-field-description-test.js +++ b/tests/integration/components/class-field-description-test.js @@ -26,7 +26,9 @@ module('Integration | Component | class field description', function (hooks) { }) ); - await render(hbs`{{class-field-description type=type field=field}}`); + await render( + hbs`` + ); assert.dom('.method-name').hasText('concat'); assert.dom(findAll('.access')[0]).hasText('public'); @@ -47,7 +49,9 @@ module('Integration | Component | class field description', function (hooks) { }) ); - await render(hbs`{{class-field-description type=type field=field}}`); + await render( + hbs`` + ); await triggerEvent('.class-field-description--link', 'mouseenter'); assert @@ -73,7 +77,7 @@ module('Integration | Component | class field description', function (hooks) { ); await render( - hbs`{{class-field-description field=field updateAnchor=updateAnchor}}` + hbs`` ); await click('.class-field-description--link'); @@ -98,7 +102,9 @@ module('Integration | Component | class field description', function (hooks) { }) ); - await render(hbs`{{class-field-description type=type field=field}}`); + await render( + hbs`` + ); assert.dom(find('.prop:nth-child(1) dt')).hasText('prop1'); assert.dom(find('.prop:nth-child(2) dt')).hasText('prop2');