Skip to content

CodeBlock - Make didInsertNode arguments optional #2924

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

CodeBlock - Make didInsertNode arguments optional #2924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/components/src/components/hds/code-block/description.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@size="100"
class="hds-code-block__description"
...attributes
{{this._setUpDescription @didInsertNode}}
{{this._setUpDescription this.didInsertNode}}
>
{{yield}}
</Hds::Text::Body>
19 changes: 13 additions & 6 deletions packages/components/src/components/hds/code-block/description.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@

import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { action } from '@ember/object';
import { modifier } from 'ember-modifier';
import type { HdsTextBodySignature } from '../text/body';

type HdsCodeBlockDescriptionElement = HdsTextBodySignature['Element'];
export interface HdsCodeBlockDescriptionSignature {
Args: {
didInsertNode: (element: HdsCodeBlockDescriptionElement) => void;
didInsertNode?: () => void;
};
Blocks: {
default: [];
Expand All @@ -23,13 +24,19 @@ export default class HdsCodeBlockDescription extends Component<HdsCodeBlockDescr
private _id = 'description-' + guidFor(this);

private _setUpDescription = modifier(
(
element: HTMLElement,
[insertCallbackFunction]: [(element: HTMLElement) => void]
) => {
(element: HTMLElement, [insertCallbackFunction]: [() => void]) => {
if (typeof insertCallbackFunction === 'function') {
insertCallbackFunction(element);
insertCallbackFunction();
}
}
);

@action
didInsertNode(): void {
const { didInsertNode } = this.args;

if (typeof didInsertNode === 'function') {
didInsertNode();
}
}
}
30 changes: 23 additions & 7 deletions packages/components/src/components/hds/code-block/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ import 'prismjs/components/prism-yaml';
import 'prismjs/components/prism-markup-templating';
import 'prismjs/components/prism-handlebars';

const TITLE_ELEMENT_SELECTOR = '.hds-code-block__title';
const DESCRIPTION_ELEMENT_SELECTOR = '.hds-code-block__description';
const PRECODE_ELEMENT_SELECTOR = '.hds-code-block__code';

export const LANGUAGES: string[] = Object.values(HdsCodeBlockLanguageValues);

export interface HdsCodeBlockSignature {
Expand Down Expand Up @@ -83,11 +87,13 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
private _preCodeId = 'pre-code-' + guidFor(this);
private _preCodeElement!: HTMLPreElement;
private _observer!: ResizeObserver;
private _element!: HTMLDivElement;

// If a code block is hidden from view, and made visible after load, the Prism code needs to be re-run
private _setUpCodeObserver = modifier((element: HTMLElement) => {
this._element = element as HTMLDivElement;
this._preCodeElement = element.querySelector(
'.hds-code-block__code'
PRECODE_ELEMENT_SELECTOR
) as HTMLPreElement;
this._observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
Expand Down Expand Up @@ -176,15 +182,25 @@ export default class HdsCodeBlock extends Component<HdsCodeBlockSignature> {
}

@action
registerTitleElement(element: HdsCodeBlockTitleSignature['Element']): void {
this._titleId = element.id;
registerTitleElement(): void {
// eslint-disable-next-line ember/no-runloop
schedule('afterRender', (): void => {
const titleElement = this._element.querySelector(
TITLE_ELEMENT_SELECTOR
) as HTMLElement;
Comment on lines +187 to +190
Copy link
Contributor

@didoo didoo Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[question] was this the only way? I am a bit nervous about using DOM querySelector methods inside controllers, looks a bit contrary to what we should do.

@zamoore thoughts?

Copy link
Contributor Author

@dchyun dchyun Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's similar to an approach used in the Stepper::Nav. I had to use a querySelector approach since when the element was being passed in it was causing the other type issues.

From the nav:

@action
didInsertStep(): void {
  // eslint-disable-next-line ember/no-runloop
  schedule('afterRender', (): void => {
    this.updateSteps();
  });
}

private updateSteps(): void {
  const steps = this._element.querySelectorAll(STEP_ELEMENT_SELECTOR);
  ...

this._titleId = titleElement.id;
});
}

@action
registerDescriptionElement(
element: HdsCodeBlockDescriptionSignature['Element']
): void {
this._descriptionId = element.id;
registerDescriptionElement(): void {
// eslint-disable-next-line ember/no-runloop
schedule('afterRender', (): void => {
const descriptionElement = this._element.querySelector(
DESCRIPTION_ELEMENT_SELECTOR
) as HTMLElement;
this._descriptionId = descriptionElement.id;
});
}

@action
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/hds/code-block/title.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@weight="semibold"
class="hds-code-block__title"
...attributes
{{this._setUpTitle @didInsertNode}}
{{this._setUpTitle this.didInsertNode}}
>
{{yield}}
</Hds::Text::Body>
21 changes: 14 additions & 7 deletions packages/components/src/components/hds/code-block/title.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
*/
import Component from '@glimmer/component';
import { guidFor } from '@ember/object/internals';
import { action } from '@ember/object';
import { modifier } from 'ember-modifier';
import { HdsCodeBlockTitleTagValues } from './types.ts';
import type { HdsCodeBlockTitleTags } from './types';
Expand All @@ -13,29 +14,35 @@ type HdsCodeBlockTitleElement = HdsTextBodySignature['Element'];
export interface HdsCodeBlockTitleSignature {
Args: {
tag?: HdsCodeBlockTitleTags;
didInsertNode: (element: HdsCodeBlockTitleElement) => void;
didInsertNode?: () => void;
};
Blocks: {
default: [];
};
Element: HdsTextBodySignature['Element'];
Element: HdsCodeBlockTitleElement;
}

export default class HdsCodeBlockTitle extends Component<HdsCodeBlockTitleSignature> {
private _id = 'title-' + guidFor(this);

private _setUpTitle = modifier(
(
element: HTMLElement,
[insertCallbackFunction]: [(element: HTMLElement) => void]
) => {
(element: HTMLElement, [insertCallbackFunction]: [() => void]) => {
if (typeof insertCallbackFunction === 'function') {
insertCallbackFunction(element);
insertCallbackFunction();
}
}
);

get componentTag(): HdsCodeBlockTitleTags {
return this.args.tag ?? HdsCodeBlockTitleTagValues.P;
}

@action
didInsertNode(): void {
const { didInsertNode } = this.args;

if (typeof didInsertNode === 'function') {
didInsertNode();
}
}
}
2 changes: 1 addition & 1 deletion showcase/app/templates/components/code-block.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ function assertObjectsEqual (actual, expected, testName) {
<Hds::CodeBlock
@language="javascript"
@maxHeight="130px"
@hashasLineNumbers={{true}}
@hasLineNumbers={{true}}
@hasLineWrapping={{true}}
@highlightLines="2"
@ariaLabel="maxHeight='130px', hasLineWrapping=true, highlight line 2"
Expand Down
Loading