dspace-angular/docs/lint/ts/rules/themed-component-selectors.md

DSpace ESLint plugins > TypeScript rules > dspace-angular-ts/themed-component-selectors

---

Themeable component selectors should follow the DSpace convention

Each themeable component is comprised of a base component, a wrapper component and any number of themed components

• Base components should have a selector starting with ds-base-
• Themed components should have a selector starting with ds-themed-
• Wrapper components should have a selector starting with ds-, but not ds-base- or ds-themed-
  • This is the regular DSpace selector prefix
  • When making a regular component themeable, its selector prefix should be changed to ds-base-, and the new wrapper's component should reuse the previous selector

Unit tests are exempt from this rule, because they may redefine components using the same class name as other themeable components elsewhere in the source.

---

Source code

Examples

Valid code

Regular non-themeable component selector

@Component({
  selector: 'ds-something',
})
class Something {
}

Themeable component selector should replace the original version, unthemed version should be changed to ds-base-

@Component({
  selector: 'ds-base-something',
})
class Something {
}

@Component({
  selector: 'ds-something',
})
class ThemedSomething extends ThemedComponent<Something> {
}

@Component({
  selector: 'ds-themed-something',
})
class OverrideSomething extends Something {
}

Other themed component wrappers should not interfere

@Component({
  selector: 'ds-something',
})
class Something {
}

@Component({
  selector: 'ds-something-else',
})
class ThemedSomethingElse extends ThemedComponent<SomethingElse> {
}

Invalid code & automatic fixes

Wrong selector for base component

Filename: lint/test/fixture/src/app/test/test-themeable.component.ts

@Component({
  selector: 'ds-something',
})
class TestThemeableComponent {
}

Will produce the following error(s):

Unthemed version of themeable component should have a selector starting with 'ds-base-'

Result of yarn lint --fix:

@Component({
  selector: 'ds-base-something',
})
class TestThemeableComponent {
}

Wrong selector for wrapper component

Filename: lint/test/fixture/src/app/test/themed-test-themeable.component.ts

@Component({
  selector: 'ds-themed-something',
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Will produce the following error(s):

Themed component wrapper of themeable component shouldn't have a selector starting with 'ds-themed-'

Result of yarn lint --fix:

@Component({
  selector: 'ds-something',
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Wrong selector for theme override

Filename: lint/test/fixture/src/themes/test/app/test/test-themeable.component.ts

@Component({
  selector: 'ds-something',
})
class TestThememeableComponent extends BaseComponent {
}

Will produce the following error(s):

Theme override of themeable component should have a selector starting with 'ds-themed-'

Result of yarn lint --fix:

@Component({
  selector: 'ds-themed-something',
})
class TestThememeableComponent extends BaseComponent {
}