Merge pull request #2427 from hashicorp/hds-3805/update-eslint-plugin…

…-ember

feat: update eslint-plugin-ember to latest major version

.changeset/loud-grapes-refuse.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+Upgraded `eslint-plugin-ember` to `12.2.0`
+
+`AppFooter`, `AppFrame`, `SideNav` - refactored subcomponents to use `TemplateOnlyComponent` instead of empty classes.

packages/components/package.json

@@ -89,7 +89,7 @@
     "ember-template-lint-plugin-prettier": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^11.12.0",
+    "eslint-plugin-ember": "^12.2.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^17.7.0",
     "eslint-plugin-prettier": "^5.1.3",

packages/components/src/components/hds/app-footer/index.ts

@@ -7,10 +7,10 @@ import Component from '@glimmer/component';
 
 import type { ComponentLike } from '@glint/template';
 import type { HdsYieldSignature } from '../yield';
-import type HdsAppFooterItemSignature from './legal-links';
-import type HdsAppFooterLegalLinksSignature from './legal-links';
-import type HdsAppFooterLinkSignature from './link';
-import type HdsAppFooterStatusLinkSignature from './status-link';
+import type { HdsAppFooterItemSignature } from './item.ts';
+import type { HdsAppFooterLegalLinksSignature } from './legal-links';
+import type { HdsAppFooterLinkSignature } from './link';
+import type { HdsAppFooterStatusLinkSignature } from './status-link';
 import type { HdsAppFooterThemeTypes } from './types.ts';
 
 export interface HdsAppFooterSignature {

packages/components/src/components/hds/app-footer/item.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFooterItemSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFooterItemSignature {
   Element: HTMLLIElement;
 }
 
-export default class HdsAppFooterItem extends Component<HdsAppFooterItemSignature> {}
+const HdsAppFooterItem = TemplateOnlyComponent<HdsAppFooterItemSignature>();
+
+export default HdsAppFooterItem;

packages/components/src/components/hds/app-footer/link.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 import type { HdsInteractiveSignature } from '../interactive/';
 import type { HdsLinkColors, HdsLinkIconPositions } from '../link/types.ts';
@@ -22,4 +22,6 @@ export interface HdsAppFooterLinkSignature {
   Element: HdsLinkInlineSignature['Element'];
 }
 
-export default class HdsAppFooterLink extends Component<HdsAppFooterLinkSignature> {}
+const HdsAppFooterLink = TemplateOnlyComponent<HdsAppFooterLinkSignature>();
+
+export default HdsAppFooterLink;

packages/components/src/components/hds/app-frame/parts/footer.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFrameFooterSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFrameFooterSignature {
   Element: HTMLElement;
 }
 
-export default class HdsAppFrameFooter extends Component<HdsAppFrameFooterSignature> {}
+const HdsAppFrameFooter = TemplateOnlyComponent<HdsAppFrameFooterSignature>();
+
+export default HdsAppFrameFooter;

packages/components/src/components/hds/app-frame/parts/header.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFrameHeaderSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFrameHeaderSignature {
   Element: HTMLElement;
 }
 
-export default class HdsAppFrameHeader extends Component<HdsAppFrameHeaderSignature> {}
+const HdsAppFrameHeader = TemplateOnlyComponent<HdsAppFrameHeaderSignature>();
+
+export default HdsAppFrameHeader;

packages/components/src/components/hds/app-frame/parts/main.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFrameMainSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFrameMainSignature {
   Element: HTMLElement;
 }
 
-export default class HdsAppFrameMain extends Component<HdsAppFrameMainSignature> {}
+const HdsAppFrameMain = TemplateOnlyComponent<HdsAppFrameMainSignature>();
+
+export default HdsAppFrameMain;

packages/components/src/components/hds/app-frame/parts/modals.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFrameModalsSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFrameModalsSignature {
   Element: HTMLElement;
 }
 
-export default class HdsAppFrameModals extends Component<HdsAppFrameModalsSignature> {}
+const HdsAppFrameModals = TemplateOnlyComponent<HdsAppFrameModalsSignature>();
+
+export default HdsAppFrameModals;

packages/components/src/components/hds/app-frame/parts/sidebar.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsAppFrameSidebarSignature {
   Blocks: {
@@ -12,4 +12,6 @@ export interface HdsAppFrameSidebarSignature {
   Element: HTMLElement;
 }
 
-export default class HdsAppFrameSidebar extends Component<HdsAppFrameSidebarSignature> {}
+const HdsAppFrameSidebar = TemplateOnlyComponent<HdsAppFrameSidebarSignature>();
+
+export default HdsAppFrameSidebar;

packages/components/src/components/hds/code-block/index.ts

@@ -140,6 +140,7 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
     const grammar = language ? Prism.languages[language] : undefined;
 
     if (code) {
+      // eslint-disable-next-line ember/no-runloop
       next(() => {
         if (language && grammar) {
           this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
@@ -158,6 +159,7 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
         // Context: https://github.com/hashicorp/design-system/pull/1749#discussion_r1374288785
         if (this.args.highlightLines) {
           // we need to delay re-evaluating the context for prism-line-highlight for as much as possible, and `afterRender` is the 'latest' we can use in the component lifecycle
+          // eslint-disable-next-line ember/no-runloop
           schedule('afterRender', () => {
             // we piggy-back on the plugin's `resize` event listener to trigger a new call of the `highlightLines` function: https://github.com/PrismJS/prism/blob/master/plugins/line-highlight/prism-line-highlight.js#L337
             if (window) window.dispatchEvent(new Event('resize'));

packages/components/src/components/hds/disclosure-primitive/index.ts

@@ -76,6 +76,7 @@ export default class HdsDisclosurePrimitive extends Component<HdsDisclosurePrimi
   @action
   close(): void {
     // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
       this.isOpen = false;
       // we call the "onClose" callback if it exists (and is a function)

packages/components/src/components/hds/menu-primitive/index.ts

@@ -95,6 +95,7 @@ export default class MenuPrimitive extends Component<MenuPrimitiveSignature> {
   @action
   close(): void {
     // we schedule this afterRender to avoid an error in tests caused by updating `isOpen` multiple times in the same computation
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
       this.isOpen = false;
       // we call the "onClose" callback if it exists (and is a function)

packages/components/src/components/hds/popover-primitive/index.ts

@@ -155,6 +155,7 @@ export default class HdsPopoverPrimitive extends Component<HdsPopoverPrimitiveSi
       // This modifiers uses the Floating UI library to provide:
       // - positioning of the "popover" in relation to the "toggle"
       // - collision detection (optional)
+      // eslint-disable-next-line ember/no-runloop
       next((): void => {
         // @ts-expect-error: known issue with type of invocation
         anchoredPositionModifier(

packages/components/src/components/hds/side-nav/portal/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import Component from '@glimmer/component';
+import TemplateOnlyComponent from '@ember/component/template-only';
 
 import type { HdsSideNavListSignature } from '../list/index';
 
@@ -29,4 +29,6 @@ export interface HdsSideNavPortalSignature {
   Element: HTMLDivElement;
 }
 
-export default class HdsSideNavPortal extends Component<HdsSideNavPortalSignature> {}
+const HdsSideNavPortal = TemplateOnlyComponent<HdsSideNavPortalSignature>();
+
+export default HdsSideNavPortal;

packages/components/src/components/hds/table/index.ts

@@ -87,7 +87,7 @@ export interface HdsTableSignature {
 }
 
 export default class HdsTable extends Component<HdsTableSignature> {
-  @tracked sortBy = this.args.sortBy;
+  @tracked sortBy = this.args.sortBy ?? undefined;
   @tracked sortOrder = this.args.sortOrder || HdsTableThSortOrderValues.Asc;
   @tracked selectAllCheckbox?: HdsFormCheckboxBaseSignature['Element'] =
     undefined;

packages/components/src/components/hds/table/th-selectable.ts

@@ -41,7 +41,7 @@ export interface HdsTableThSelectableSignature {
 }
 
 export default class HdsTableThSelectable extends Component<HdsTableThSelectableSignature> {
-  @tracked isSelected = this.args.isSelected;
+  @tracked isSelected = this.args.isSelected ?? false;
 
   guid = guidFor(this);
 

packages/components/src/components/hds/tabs/index.ts

@@ -112,13 +112,15 @@ export default class HdsTabs extends Component<HdsTabsSignature> {
       this.selectedTabIndex = this.tabIds.indexOf(this.selectedTabId);
     }
 
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
       this.setTabIndicator();
     });
   }
 
   @action
   didUpdateSelectedTabIndex(): void {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
       this.setTabIndicator();
     });
@@ -138,6 +140,7 @@ export default class HdsTabs extends Component<HdsTabsSignature> {
 
   @action
   didUpdateParentVisibility(): void {
+    // eslint-disable-next-line ember/no-runloop
     schedule('afterRender', (): void => {
       this.setTabIndicator();
     });
@@ -230,6 +233,7 @@ export default class HdsTabs extends Component<HdsTabsSignature> {
   }
 
   setTabIndicator(): void {
+    // eslint-disable-next-line ember/no-runloop
     next((): void => {
       const tabElem = this.tabNodes[this.selectedTabIndex];
 

packages/components/src/utils/hds-aria-described-by.ts

@@ -86,6 +86,7 @@ export function registerAriaDescriptionElement(
   element: HTMLElement
 ): void {
   ariaDescriptorMap.register(component, element);
+  // eslint-disable-next-line ember/no-runloop
   scheduleOnce('afterRender', component, synchronizeDescriptors, component);
 }
 
@@ -94,5 +95,6 @@ export function unregisterAriaDescriptionElement(
   element: HTMLElement
 ): void {
   ariaDescriptorMap.unregister(component, element);
+  // eslint-disable-next-line ember/no-runloop
   scheduleOnce('afterRender', component, synchronizeDescriptors, component);
 }

packages/components/unpublished-development-types/global.d.ts

@@ -9,6 +9,7 @@ import type EmberStargateRegistry from 'ember-stargate/template-registry';
 import type EmberStyleModifierRegistry from 'ember-style-modifier/template-registry';
 import type EmberTruthRegistry from 'ember-truth-helpers/template-registry';
 import type PowerSelectRegistry from 'ember-power-select/template-registry';
+// eslint-disable-next-line ember/no-at-ember-render-modifiers
 import type RenderModifiersRegistry from '@ember/render-modifiers/template-registry';
 
 declare module '@glint/environment-ember-loose/registry' {

showcase/.eslintrc.js

@@ -30,6 +30,24 @@ module.exports = {
     'ember/no-empty-glimmer-component-classes': 'off',
   },
   overrides: [
+    //  gts files
+    {
+      files: ['**/*.gts'],
+      parser: 'ember-eslint-parser',
+      plugins: ['ember', 'import'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:ember/recommended',
+        'plugin:ember/recommended-gts',
+        'plugin:prettier/recommended',
+      ],
+      rules: {
+        // ember doesn't support template only components that have type signatures so we need to use empty component classes
+        'ember/no-empty-glimmer-component-classes': 'off',
+      },
+    },
     // ts files
     {
       files: ['**/*.ts'],

showcase/app/components/shw/autoscrollable/index.gts

@@ -51,6 +51,7 @@ interface ShwAutoscrollableSignature {
 
 export default class ShwAutoscrollable extends Component<ShwAutoscrollableSignature> {
   autoscroll = modifier((element: HTMLElement) => {
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, centerScrollableArea, {
       element: element,
       direction: this.args.direction ?? 'both',

showcase/app/components/shw/text/index.gts

@@ -6,6 +6,7 @@
 import Component from '@glimmer/component';
 import { assert } from '@ember/debug';
 import { eq } from 'ember-truth-helpers';
+// eslint-disable-next-line ember/no-at-ember-render-modifiers
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 
 import { TextTagValues, TextAlignValues, TextWeightValues } from './types';

showcase/app/controllers/components.js

@@ -33,6 +33,7 @@ export default class ComponentsController extends Controller {
   }
 
   routeDidChange() {
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, replaceMockStates);
   }
 

showcase/app/controllers/components/code-block.js

@@ -39,6 +39,7 @@ export default class CodeBlockController extends Controller {
 
   routeDidChange() {
     if (this.router.currentRoute.name === 'components.code-block') {
+      // eslint-disable-next-line ember/no-runloop
       scheduleOnce('afterRender', this, replaceMockCopyStatus);
     }
   }

showcase/app/controllers/components/copy/button.js

@@ -37,6 +37,7 @@ export default class CopyButtonController extends Controller {
 
   routeDidChange() {
     if (this.router.currentRoute.name === 'components.copy.button') {
+      // eslint-disable-next-line ember/no-runloop
       scheduleOnce('afterRender', this, replaceMockCopyStatus);
     }
   }

showcase/app/controllers/components/copy/snippet.js

@@ -34,6 +34,7 @@ export default class CopySnippetController extends Controller {
 
   routeDidChange() {
     if (this.router.currentRoute.name === 'components.copy.snippet') {
+      // eslint-disable-next-line ember/no-runloop
       scheduleOnce('afterRender', this, replaceMockCopyStatus);
     }
   }

showcase/app/controllers/components/table.js

@@ -502,6 +502,7 @@ export default class ComponentsTableController extends Controller {
     this.multiSelectUserData__demo4.forEach((user) => {
       user.isAnimated = user.isSelected;
     });
+    // eslint-disable-next-line ember/no-runloop
     later(() => {
       this.multiSelectResetUserAnimation_demo4();
     }, 5000);

showcase/app/controllers/utilities.js

@@ -33,6 +33,7 @@ export default class UtilitiesController extends Controller {
   }
 
   routeDidChange() {
+    // eslint-disable-next-line ember/no-runloop
     scheduleOnce('afterRender', this, replaceMockStates);
   }
 

showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header.hbs

@@ -256,7 +256,6 @@
 
   <Frame.Footer>
     <Hds::AppFooter as |AF|>
-      {{! @glint-expect-error - TODO: investigate why this line fails }}
       <AF.LegalLinks />
     </Hds::AppFooter>
   </Frame.Footer>

showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs

@@ -252,7 +252,6 @@
 
   <Frame.Footer>
     <Hds::AppFooter as |AF|>
-      {{! @glint-expect-error - TODO: investigate why this line fails }}
       <AF.LegalLinks />
     </Hds::AppFooter>
   </Frame.Footer>

showcase/package.json

@@ -91,7 +91,7 @@
     "ember-unique-id-helper-polyfill": "^1.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-ember": "^11.12.0",
+    "eslint-plugin-ember": "^12.2.0",
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-qunit": "^8.1.1",