fix: made component fields truly readonly

Before there were type hints that it is a readonly field. Now, there are only
getters, no setters. Thus those fields can truly not change as soon as they
are assigned in construction.

Author: Tygo-van-den-Hurk

lib/core/components/class.ts

@@ -3,6 +3,7 @@
 import type {
   ComponentConstructorArguments,
   ComponentInterface,
+  ComponentLevels,
   ComponentRenderArguments,
 } from '#lib/core/components/interfaces';
 import { Logger } from '#lib/logger';
@@ -11,46 +12,65 @@ import componentUtils from '#lib/core/components/utils/index';
 
 /** Incorporates the constructor arguments into itself. */
 const Base = class Component implements ComponentConstructorArguments {
-  /** Utils related to components and their workings. */
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  public static readonly utils = Object.freeze({ ...componentUtils });
-
-  /** The levels of certain components. Used for selectors: `slyde-component[level=1]`. */
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  public static readonly level = Object.freeze({
-    /** The level at which the blocks can be placed. */
-    block: 2,
-    /** The level at which the presentation can be placed. */
-    presentation: 0,
-    /** The level at which the slides can be placed. */
-    slide: 1,
-  });
-
-  public readonly name;
-  public readonly attributes;
-  public readonly focusMode;
-  public readonly level;
-  public readonly path;
-  public readonly id;
+  readonly #name;
+  readonly #attributes;
+  readonly #focusMode;
+  readonly #level;
+  readonly #path;
+  readonly #id;
 
   /**
    * Creates a new `Component` from the arguments provided.
    */
   public constructor(args: ComponentConstructorArguments) {
-    this.name = new.target.name;
     Logger.debug(`constructing ${new.target.name} at ${args.path}`);
-    this.attributes = args.attributes;
-    this.focusMode = args.focusMode;
-    this.level = args.level;
-    this.path = args.path;
-    this.id = args.id;
+    this.#name = new.target.name;
+    this.#attributes = args.attributes;
+    this.#focusMode = args.focusMode;
+    this.#level = args.level;
+    this.#path = args.path;
+    this.#id = args.id;
+  }
+
+  /** Utils related to components and their workings. */
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  public static get utils() {
+    return Object.freeze({ ...componentUtils });
+  }
+
+  /** The levels of certain components. Used for selectors: `slyde-component[level=1]`. */
+  public static get level(): ComponentLevels {
+    return Object.freeze({ block: 2, presentation: 0, slide: 1 });
+  }
+
+  public get name(): ComponentInterface['name'] {
+    return this.#name;
+  }
+
+  public get attributes(): ComponentInterface['attributes'] {
+    return this.#attributes;
+  }
+
+  public get focusMode(): ComponentInterface['focusMode'] {
+    return this.#focusMode;
+  }
+
+  public get level(): ComponentInterface['level'] {
+    return this.#level;
+  }
+
+  public get path(): ComponentInterface['path'] {
+    return this.#path;
+  }
+
+  public get id(): ComponentInterface['id'] {
+    return this.#id;
   }
 };
 
 /** The `Component` base class before the registry is injected. */
 abstract class Component extends Base implements ComponentInterface {
-  /** The width of this component. */
-  public readonly width = Component.utils.extract({
+  readonly #width = Component.utils.extract({
     aliases: ['width', 'w'],
     context: this,
     transform(value, context, key) {
@@ -61,8 +81,7 @@ abstract class Component extends Base implements ComponentInterface {
     },
   });
 
-  /** The height of this component. */
-  public readonly height = Component.utils.extract({
+  readonly #height = Component.utils.extract({
     aliases: ['height', 'h'],
     context: this,
     transform(value, context, key) {
@@ -73,8 +92,7 @@ abstract class Component extends Base implements ComponentInterface {
     },
   });
 
-  /** The maner of displaying this component. */
-  public readonly display = Component.utils.extract({
+  readonly #display = Component.utils.extract({
     aliases: ['display', 'd'],
     context: this,
     fallback: 'block',
@@ -96,8 +114,20 @@ abstract class Component extends Base implements ComponentInterface {
     }
   }
 
+  public get width(): string | undefined {
+    return this.#width;
+  }
+
+  public get height(): string | undefined {
+    return this.#height;
+  }
+
+  public get display(): string {
+    return this.#display;
+  }
+
   public canBeAtLevel(level: number): ReturnType<ComponentInterface['canBeAtLevel']> {
-    const hierarchy = (this as Partial<Pick<this, 'hierarchy'>>).hierarchy?.() ?? '*';
+    const hierarchy = (this as Partial<this>).hierarchy?.() ?? '*';
     if (hierarchy === '*') return true;
     if (hierarchy.includes(level)) return true;
 
@@ -131,6 +161,9 @@ declare namespace ComponentWithRegistry {
   /** The type for an instance of a `MarkupRenderer`. */
   export type Instance = Component;
 
+  /** The levels at which certain types of components live. */
+  export type Levels = ComponentLevels;
+
   /**
    * The arguments to provide to the constructor of a component.
    */

lib/core/components/interfaces.ts

@@ -1,3 +1,13 @@
+/** The levels at which certain types of components live. */
+export interface ComponentLevels {
+  /** The level at which the presentation can be placed. */
+  presentation: number;
+  /** The level at which the slides can be placed. */
+  slide: number;
+  /** The level at which the blocks can be placed. */
+  block: number;
+}
+
 /**
  * The arguments to provide to the constructor of a component.
  */
@@ -88,6 +98,15 @@ export interface ComponentInterface extends ComponentConstructorArguments {
    */
   readonly name: string;
 
+  /** The width of this component. */
+  readonly width?: string;
+
+  /** The height of this component. */
+  readonly height?: string;
+
+  /** The maner of displaying this component. */
+  readonly display: string;
+
   /**
    * Render this component to HTML.
    */

lib/core/render/render.ts

@@ -136,6 +136,7 @@ export const render = async function render(input: XmlParserResult): Promise<str
   const context = {
     attributes: input.root.attributes,
     canBeAtLevel: (): boolean => true,
+    display: '',
     focusMode: 'default',
     hierarchy: (): '*' => '*',
     id: '0',

lib/core/render/utils.ts

@@ -6,7 +6,7 @@ import type { XmlParserElementNode } from 'xml-parser-xo';
 /** Wraps HTML in a `<slyde-component>` This is to make it easier for us to select elements. */
 export const wrapper = function wrapper(
   // eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
-  component: Component.Instance,
+  component: Component.Interface,
   state: RenderState,
   children: string
 ): string {

test/lib/core/components/utils/extract.test.ts

@@ -12,22 +12,21 @@ describe('function extract', () => {
     spy.mockReset();
   });
 
+  const error = function error(): never {
+    throw new Error('Function not implemented.');
+  }
+
   const instance = {
     attributes: {},
-    canBeAtLevel(): ReturnType<Component.Interface['canBeAtLevel']> {
-      throw new Error('Function not implemented.');
-    },
+    canBeAtLevel: error,
+    display: '',
     focusMode: 'follows',
-    hierarchy(): ReturnType<Component.Interface['hierarchy']> {
-      throw new Error('Function not implemented.');
-    },
+    hierarchy: error,
     id: '0',
     level: 0,
     name: '',
     path: 'xpath://',
-    render(): ReturnType<Component.Interface['render']> {
-      throw new Error('Function not implemented.');
-    },
+    render: error,
   } satisfies Component.Interface;
 
   test('looking for property that exists', () => {

test/lib/core/components/utils/transform.test.ts

@@ -2,22 +2,21 @@ import { describe, expect, test } from 'vitest';
 import type { ComponentInterface } from '#lib/core/components';
 import transform from '#lib/core/components/utils/transform';
 
-const fakeContext = {
+const error = function error(): never {
+  throw new Error('Function not implemented.');
+}
+
+const instance = {
   attributes: {},
-  canBeAtLevel(): boolean {
-    throw new Error('Function not implemented.');
-  },
+  canBeAtLevel: error,
+  display: '',
   focusMode: 'follows',
-  hierarchy(): ReturnType<ComponentInterface['hierarchy']> {
-    throw new Error('Function not implemented.');
-  },
-  id: '',
+  hierarchy: error,
+  id: '0',
   level: 0,
-  name: 'TestComponent',
-  path: '/test/path',
-  render(): string {
-    throw new Error('Function not implemented.');
-  },
+  name: '',
+  path: 'xpath://',
+  render: error,
 } satisfies ComponentInterface;
 
 describe('function transform.boolean', () => {
@@ -36,11 +35,11 @@ describe('function transform.boolean', () => {
     ['0', false],
     ['-', false],
   ])('converts "%s" to %s', (input, expected) => {
-    expect(boolean(input, fakeContext, 'key')).toBe(expected);
+    expect(boolean(input, instance, 'key')).toBe(expected);
   });
 
   test('throws on invalid boolean', () => {
-    expect(() => boolean('maybe', fakeContext, 'key')).toThrow();
+    expect(() => boolean('maybe', instance, 'key')).toThrow();
   });
 });
 
@@ -53,11 +52,11 @@ describe('function transform.number', () => {
     [10, 10],
     ['0', 0],
   ])('converts "%s" to %s', (input, expected) => {
-    expect(number(input, fakeContext, 'padding')).toBe(expected);
+    expect(number(input, instance, 'padding')).toBe(expected);
   });
 
   test('throws on invalid number', () => {
-    expect(() => number('abc', fakeContext, 'padding')).toThrow();
+    expect(() => number('abc', instance, 'padding')).toThrow();
   });
 });
 
@@ -66,10 +65,10 @@ describe('function transform.enum', () => {
   const colorEnum = transform.enum(colors);
 
   test.each(colors)('accepts valid enum value "%s"', (value) => {
-    expect(colorEnum(value, fakeContext, 'color')).toBe(value);
+    expect(colorEnum(value, instance, 'color')).toBe(value);
   });
 
   test('throws on invalid enum', () => {
-    expect(() => colorEnum('yellow', fakeContext, 'color')).toThrow();
+    expect(() => colorEnum('yellow', instance, 'color')).toThrow();
   });
 });

test/lib/core/render/utils.test.ts

@@ -11,7 +11,7 @@ import { describe, expect, test } from 'vitest';
 import type { XmlParserElementNode } from 'xml-parser-xo';
 
 describe('function wrapper', () => {
-  const component: Component.Instance = {
+  const component: Component.Interface = {
     attributes: {},
     canBeAtLevel(): never {
       throw new Error('Function not implemented.');
@@ -32,7 +32,7 @@ describe('function wrapper', () => {
     },
     // eslint-disable-next-line no-void
     width: void 0,
-  } satisfies Component.Instance;
+  } satisfies Component.Interface;
 
   const state: RenderState = {
     globals: Globals.instance,