Add component lifecycle management

src/Utils.ts

@@ -101,15 +101,6 @@ export function createDescription(
 	return fragment;
 }
 
-let timer: ReturnType<typeof setTimeout>;
-
-export function customDebounce(cb: () => void, timeout: number = 300): void {
-	clearTimeout(timer);
-	timer = setTimeout(() => {
-		cb();
-	}, timeout);
-}
-
 /*
  * compatability with Settings Search Plugin
  */

src/main.ts

@@ -91,7 +91,7 @@ export default class CSSSettingsPlugin extends Plugin {
 
 		this.commandList = [];
 
-		this.debounceTimer = window.setTimeout(() => {
+		this.debounceTimer = activeWindow.setTimeout(() => {
 			const styleSheets = document.styleSheets;
 
 			for (let i = 0, len = styleSheets.length; i < len; i++) {
@@ -102,12 +102,9 @@ export default class CSSSettingsPlugin extends Plugin {
 			// compatability with Settings Search Plugin
 			this.registerSettingsToSettingsSearch();
 
-			this.settingsTab.settingsMarkup.setSettings(
-				this.settingsList,
-				this.errorList
-			);
+			this.settingsTab.setSettings(this.settingsList, this.errorList);
 			this.app.workspace.getLeavesOfType(viewType).forEach((leaf) => {
-				(leaf.view as SettingsView).settingsMarkup.setSettings(
+				(leaf.view as SettingsView).setSettings(
 					this.settingsList,
 					this.errorList
 				);
@@ -287,9 +284,7 @@ export default class CSSSettingsPlugin extends Plugin {
 		document.body.classList.remove('css-settings-manager');
 
 		this.settingsManager.cleanup();
-		this.settingsTab.settingsMarkup.cleanup();
 		this.deactivateView();
-
 		this.unregisterSettingsFromSettingsSearch();
 	}
 
@@ -306,9 +301,6 @@ export default class CSSSettingsPlugin extends Plugin {
 			active: true,
 		});
 
-		(leaf.view as SettingsView).settingsMarkup.setSettings(
-			this.settingsList,
-			this.errorList
-		);
+		(leaf.view as SettingsView).setSettings(this.settingsList, this.errorList);
 	}
 }

src/settingsView/CSSSettingsTab.ts

@@ -1,20 +1,39 @@
 import { App, PluginSettingTab } from 'obsidian';
 import { SettingsMarkup } from './SettingsMarkup';
 import CSSSettingsPlugin from '../main';
+import { ErrorList } from 'src/Utils';
+import { ParsedCSSSettings } from 'src/SettingHandlers';
 
 export class CSSSettingsTab extends PluginSettingTab {
 	settingsMarkup: SettingsMarkup;
+	plugin: CSSSettingsPlugin;
+	settings: ParsedCSSSettings[];
+	errorList: ErrorList;
 
 	constructor(app: App, plugin: CSSSettingsPlugin) {
 		super(app, plugin);
-		this.settingsMarkup = new SettingsMarkup(app, plugin, this.containerEl);
+		this.plugin = plugin;
+	}
+
+	setSettings(settings: ParsedCSSSettings[], errorList: ErrorList) {
+		this.settings = settings;
+		this.errorList = errorList;
+		if (this.settingsMarkup) {
+			this.settingsMarkup.setSettings(settings, errorList);
+		}
 	}
 
 	display(): void {
-		this.settingsMarkup.display();
+		this.settingsMarkup = this.plugin.addChild(
+			new SettingsMarkup(this.app, this.plugin, this.containerEl)
+		);
+		if (this.settings) {
+			this.settingsMarkup.setSettings(this.settings, this.errorList);
+		}
 	}
 
 	hide(): void {
-		this.settingsMarkup.cleanup();
+		this.plugin.removeChild(this.settingsMarkup);
+		this.settingsMarkup = null;
 	}
 }

src/settingsView/SettingComponents/AbstractSettingComponent.ts

@@ -2,31 +2,47 @@ import { CSSSettingsManager } from '../../SettingsManager';
 import { CSSSetting } from '../../SettingHandlers';
 import { getDescription, getTitle } from '../../Utils';
 import fuzzysort from 'fuzzysort';
+import { Component } from 'obsidian';
 
-export abstract class AbstractSettingComponent {
+export abstract class AbstractSettingComponent extends Component {
+	parent: AbstractSettingComponent | HTMLElement;
+	childEl: HTMLElement | null = null;
 	sectionId: string;
 	sectionName: string;
 	setting: CSSSetting;
 	settingsManager: CSSSettingsManager;
 	isView: boolean;
 
 	constructor(
+		parent: AbstractSettingComponent | HTMLElement,
 		sectionId: string,
 		sectionName: string,
 		setting: CSSSetting,
 		settingsManager: CSSSettingsManager,
 		isView: boolean
 	) {
+		super();
+		this.parent = parent;
 		this.sectionId = sectionId;
 		this.sectionName = sectionName;
 		this.setting = setting;
 		this.settingsManager = settingsManager;
 		this.isView = isView;
+	}
 
-		this.onInit();
+	get containerEl() {
+		return this.parent instanceof HTMLElement
+			? this.parent
+			: this.parent.childEl;
 	}
 
-	onInit(): void {}
+	onload(): void {
+		this.render();
+	}
+
+	onunload(): void {
+		this.destroy();
+	}
 
 	/**
 	 * Matches the Component against `str`. A perfect match returns 0, no match returns negative infinity.
@@ -57,10 +73,8 @@ export abstract class AbstractSettingComponent {
 
 	/**
 	 * Renders the Component and all it's children into `containerEl`.
-	 *
-	 * @param containerEl
 	 */
-	abstract render(containerEl: HTMLElement): void;
+	abstract render(): void;
 
 	/**
 	 * Destroys the component and all it's children.

src/settingsView/SettingComponents/ClassMultiToggleSettingComponent.ts

@@ -11,10 +11,9 @@ import { createDescription, getDescription, getTitle } from '../../Utils';
 export class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
 	settingEl: Setting;
 	dropdownComponent: DropdownComponent;
-
 	setting: ClassMultiToggle;
 
-	render(containerEl: HTMLElement): void {
+	render(): void {
 		const title = getTitle(this.setting);
 		const description = getDescription(this.setting);
 
@@ -28,7 +27,7 @@ export class ClassMultiToggleSettingComponent extends AbstractSettingComponent {
 
 		const defaultLabel = this.getDefaultOptionLabel();
 
-		this.settingEl = new Setting(containerEl);
+		this.settingEl = new Setting(this.containerEl);
 		this.settingEl.setName(title);
 		this.settingEl.setDesc(
 			createDescription(description, this.setting.default, defaultLabel)

src/settingsView/SettingComponents/ClassToggleSettingComponent.ts

@@ -6,14 +6,13 @@ import { getDescription, getTitle } from '../../Utils';
 export class ClassToggleSettingComponent extends AbstractSettingComponent {
 	settingEl: Setting;
 	toggleComponent: ToggleComponent;
-
 	setting: ClassToggle;
 
-	render(containerEl: HTMLElement): void {
+	render(): void {
 		const title = getTitle(this.setting);
 		const description = getDescription(this.setting);
 
-		this.settingEl = new Setting(containerEl);
+		this.settingEl = new Setting(this.containerEl);
 		this.settingEl.setName(title);
 		this.settingEl.setDesc(description ?? '');