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

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

---

Formatting rules for themeable component classes

• All themeable components must be standalone.
• The base component must always be imported in the ThemedComponent wrapper. This ensures that it is always sufficient to import just the wrapper whenever we use the component.

---

Source code

Examples

Valid code

Regular non-themeable component

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

Base component

@Component({
  selector: 'ds-base-test-themable',
  standalone: true,
})
class TestThemeableTomponent {
}

Wrapper component

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

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [
    TestThemeableComponent,
  ],
})
class ThemedTestThemeableTomponent extends ThemedComponent<TestThemeableComponent> {
}

Override component

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

@Component({
  selector: 'ds-themed-test-themable',
  standalone: true,
})
class Override extends BaseComponent {
}

Invalid code & automatic fixes

Base component must be standalone

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

Will produce the following error(s):

Themeable components must be standalone

Result of yarn lint --fix:

@Component({
  selector: 'ds-base-test-themable',
  standalone: true,
})
class TestThemeableComponent {
}

Wrapper component must be standalone and import base component

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

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

Will produce the following error(s):

Themeable component wrapper classes must be standalone and import the base class

Result of yarn lint --fix:

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [TestThemeableComponent],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Wrapper component must import base component (array present but empty)

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

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Will produce the following error(s):

Themed component wrapper classes must only import the base class

Result of yarn lint --fix:

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [TestThemeableComponent],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Wrapper component must import base component (array is wrong)

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

import { SomethingElse } from './somewhere-else';

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [
    SomethingElse,
  ],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Will produce the following error(s):

Themed component wrapper classes must only import the base class

Result of yarn lint --fix:

import { SomethingElse } from './somewhere-else';

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [TestThemeableComponent],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Wrapper component must import base component (array is wrong)

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

import { Something, SomethingElse } from './somewhere-else';

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [
    SomethingElse,
  ],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Will produce the following error(s):

Themed component wrapper classes must only import the base class

Result of yarn lint --fix:

import { Something, SomethingElse } from './somewhere-else';

@Component({
  selector: 'ds-test-themable',
  standalone: true,
  imports: [TestThemeableComponent],
})
class ThemedTestThemeableComponent extends ThemedComponent<TestThemeableComponent> {
}

Override component must be standalone

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

@Component({
  selector: 'ds-themed-test-themable',
})
class Override extends BaseComponent {
}

Will produce the following error(s):

Themeable components must be standalone

Result of yarn lint --fix:

@Component({
  selector: 'ds-themed-test-themable',
  standalone: true,
})
class Override extends BaseComponent {
}