Merge pull request #206 from what1s1ove/wd-190-private-properties

wd-190: replace underscore with private fields

.eslintrc.yml

@@ -86,9 +86,6 @@ rules:
   arrow-parens:
     - error
     - always
-  no-underscore-dangle:
-    - error
-    - allowAfterThis: true
   no-multiple-empty-lines:
     - error
     - max: 1

source/scripts/libs/components/loader/loader.js

@@ -1,28 +1,33 @@
 import { getLoaderElement } from './libs/helpers/helpers.js'
 
 class Loader {
+	/** @type {HTMLElement} */
+	#containerNode
+
+	/** @type {HTMLElement | undefined} */
+	#loaderNode
+
 	/**
 	 * @param {{
 	 * 	containerNode: HTMLElement
 	 * }} constructor
 	 */
 	constructor({ containerNode }) {
-		this._containerNode = containerNode
+		this.#containerNode = containerNode
 
-		/** @type {HTMLElement | undefined} */
-		this._loaderNode = undefined
+		this.#loaderNode = undefined
 	}
 
 	/** @returns {void} */
 	init() {
-		this._loaderNode = getLoaderElement()
+		this.#loaderNode = getLoaderElement()
 
-		this._containerNode.prepend(this._loaderNode)
+		this.#containerNode.prepend(this.#loaderNode)
 	}
 
 	/** @returns {void} */
 	remove() {
-		let loaderNode = /** @type {HTMLElement} */ (this._loaderNode)
+		let loaderNode = /** @type {HTMLElement} */ (this.#loaderNode)
 
 		loaderNode.remove()
 	}

source/scripts/libs/components/toast/toast.js

@@ -9,21 +9,27 @@ import {
 /** @typedef {import('~/libs/types/types').ToastMessagePayload} ToastMessagePayload */
 
 class Toast {
+	/** @type {boolean} */
+	#isShowingMessage
+
+	/** @type {ToastMessagePayload[]} */
+	#messages
+
+	/** @type {HTMLElement | undefined} */
+	#toastNode
+
 	constructor() {
-		/** @type {HTMLElement | undefined} */
-		this._toastNode = undefined
-		/** @type {ToastMessagePayload[]} */
-		this._messages = []
-		/** @type {boolean} */
-		this._isShowingMessage = false
+		this.#toastNode = undefined
+		this.#messages = []
+		this.#isShowingMessage = false
 	}
 
 	/**
 	 * @param {ToastMessagePayload} messagePayload
 	 * @returns {Promise<void>}
 	 */
-	async _displayToastMessage(messagePayload) {
-		let toastNode = /** @type {HTMLElement} */ (this._toastNode)
+	async #displayToastMessage(messagePayload) {
+		let toastNode = /** @type {HTMLElement} */ (this.#toastNode)
 		let { cb, duration = TOAST_DEFAULT_DURATION, message } = messagePayload
 
 		toastNode.classList.add(TOAST_SHOW_CLASS_NAME)
@@ -41,29 +47,29 @@ class Toast {
 	}
 
 	/** @returns {Promise<void>} */
-	async _initShowingMessages() {
+	async #initShowingMessages() {
 		let messagePayload = /** @type {ToastMessagePayload} */ (
-			this._messages.shift()
+			this.#messages.shift()
 		)
 
-		this._isShowingMessage = true
+		this.#isShowingMessage = true
 
-		await this._displayToastMessage(messagePayload)
+		await this.#displayToastMessage(messagePayload)
 
-		let hasMessages = this._messages.length > 0
+		let hasMessages = this.#messages.length > 0
 
 		if (hasMessages) {
-			this._initShowingMessages()
+			this.#initShowingMessages()
 
 			return
 		}
 
-		this._isShowingMessage = false
+		this.#isShowingMessage = false
 	}
 
 	/** @returns {void} */
 	init() {
-		this._toastNode = /** @type {HTMLElement} */ (
+		this.#toastNode = /** @type {HTMLElement} */ (
 			document.querySelector(`.toast`)
 		)
 	}
@@ -73,10 +79,10 @@ class Toast {
 	 * @returns {void}
 	 */
 	pushMessage(message) {
-		this._messages.push(message)
+		this.#messages.push(message)
 
-		if (!this._isShowingMessage) {
-			this._initShowingMessages()
+		if (!this.#isShowingMessage) {
+			this.#initShowingMessages()
 		}
 	}
 }

source/scripts/libs/packages/http/http.package.js

@@ -49,7 +49,7 @@ class Http {
 	 * }} options
 	 * @returns {Headers}
 	 */
-	_getHeaders({ contentType }) {
+	#getHeaders({ contentType }) {
 		let headers = new Headers()
 
 		if (contentType) {
@@ -71,7 +71,7 @@ class Http {
 	 */
 	load(url, options = {}) {
 		let { contentType, method = HttpMethod.GET, payload } = options
-		let headers = this._getHeaders({
+		let headers = this.#getHeaders({
 			contentType,
 		})
 		let isJSON = checkIsOneOf(contentType, ContentType.JSON)

source/scripts/libs/packages/storage/storage.package.js

@@ -1,36 +1,35 @@
 class Storage {
+	/** @type {globalThis.Storage} */
+	#storage
+
 	/**
 	 * @param {{
 	 * 	storage: globalThis.Storage
 	 * }} constructor
 	 */
 	constructor({ storage }) {
-		/**
-		 * @private
-		 * @type {globalThis.Storage}
-		 */
-		this._storage = storage
+		this.#storage = storage
 	}
 
 	/** @returns {void} */
 	clear() {
-		return this._storage.clear()
+		return this.#storage.clear()
 	}
 
 	/**
 	 * @param {string} key
 	 * @returns {string | null}
 	 */
 	getItem(key) {
-		return this._storage.getItem(key)
+		return this.#storage.getItem(key)
 	}
 
 	/**
 	 * @param {string} key
 	 * @returns {void}
 	 */
 	removeItem(key) {
-		return this._storage.removeItem(key)
+		return this.#storage.removeItem(key)
 	}
 
 	/**
@@ -39,7 +38,7 @@ class Storage {
 	 * @returns {void}
 	 */
 	setItem(key, value) {
-		return this._storage.setItem(key, value)
+		return this.#storage.setItem(key, value)
 	}
 }
 

source/scripts/packages/timeline/timeline-api.js

@@ -8,6 +8,18 @@ import { TimelineApiPath } from './libs/enums/enums.js'
 /** @typedef {import('./libs/types/types')} TimelineCreatePayload */
 
 class TimelineApi {
+	/** @type {(typeof ApiPath)[keyof typeof ApiPath]} */
+	#apiPath
+
+	/** @type {string} */
+	#baseUrl
+
+	/** @type {string} */
+	#filesApiPath
+
+	/** @type {Http} */
+	#http
+
 	/**
 	 * @param {{
 	 * 	baseUrl: string
@@ -16,31 +28,31 @@ class TimelineApi {
 	 * }} config
 	 */
 	constructor({ baseUrl, filesApiPath, http }) {
-		this._http = http
-		this._baseUrl = baseUrl
-		this._filesApiPath = filesApiPath
-		this._apiPath = ApiPath.TIMELINE
+		this.#http = http
+		this.#baseUrl = baseUrl
+		this.#filesApiPath = filesApiPath
+		this.#apiPath = ApiPath.TIMELINE
 	}
 
 	/**
 	 * @param {string} path
 	 * @returns {string}
 	 */
-	_getApiUrl(path) {
-		return `${this._baseUrl}${this._apiPath}${path}`
+	#getApiUrl(path) {
+		return `${this.#baseUrl}${this.#apiPath}${path}`
 	}
 
 	/**
 	 * @param {string} path
 	 * @returns {string}
 	 */
-	_getFileUrl(path) {
-		return `${this._filesApiPath}${path}.json`
+	#getFileUrl(path) {
+		return `${this.#filesApiPath}${path}.json`
 	}
 
 	/** @returns {Promise<Timeline[]>} */
 	getTimelines() {
-		return this._http.load(this._getFileUrl(this._apiPath), {
+		return this.#http.load(this.#getFileUrl(this.#apiPath), {
 			method: HttpMethod.GET,
 		})
 	}
@@ -50,7 +62,7 @@ class TimelineApi {
 	 * @returns {Promise<Timeline>}
 	 */
 	saveTimeline(payload) {
-		return this._http.load(this._getApiUrl(TimelineApiPath.ROOT), {
+		return this.#http.load(this.#getApiUrl(TimelineApiPath.ROOT), {
 			contentType: ContentType.JSON,
 			method: HttpMethod.POST,
 			payload,

source/scripts/pages/form/form.js

@@ -13,47 +13,38 @@ let timelineSkillTypes = Object.values(TimelineSkillType)
 let timelineTypes = Object.values(TimelineType)
 
 class Form {
+	/** @type {HTMLFormElement | undefined} */
+	#formNode
+
+	/** @type {(event_: SubmitEvent) => Promise<void>} */
+	#handleSubmit
+
+	/** @type {TimelineApi} */
+	#timelineApi
+
 	/**
 	 * @param {{
 	 * 	timelineApi: TimelineApi
 	 * }} constructor
 	 */
 	constructor({ timelineApi }) {
-		this._timelineApi = timelineApi
-
-		/** @type {HTMLFormElement | undefined} */
-		this._formNode = undefined
-
-		this._handleSubmit = this._handleSubmit.bind(this)
-	}
-
-	/**
-	 * @param {SubmitEvent} event_
-	 * @returns {Promise<void>}
-	 */
-	async _handleSubmit(event_) {
-		event_.preventDefault()
-
-		let formNode = /** @type {HTMLFormElement} */ (this._formNode)
-		let formValues = /** @type {TimelineCreatePayload} */ (
-			getFormValues(formNode)
-		)
+		this.#timelineApi = timelineApi
 
-		await this._timelineApi.saveTimeline(getTransformedTimeline(formValues))
+		this.#formNode = undefined
 
-		formNode.reset()
+		this.#handleSubmit = this.#submitHandler.bind(this)
 	}
 
-	/** @returns {void} */
-	_initListeners() {
-		let formNode = /** @type {HTMLFormElement} */ (this._formNode)
+	/** @type {() => void} */
+	#initListeners() {
+		let formNode = /** @type {HTMLFormElement} */ (this.#formNode)
 
-		formNode.addEventListener(`submit`, this._handleSubmit)
+		formNode.addEventListener(`submit`, this.#handleSubmit)
 	}
 
 	/** @returns {void} */
-	_initSelects() {
-		let formNode = /** @type {HTMLFormElement} */ (this._formNode)
+	#initSelects() {
+		let formNode = /** @type {HTMLFormElement} */ (this.#formNode)
 
 		fillSelectOptions(
 			/** @type {HTMLSelectElement} */ (
@@ -69,15 +60,32 @@ class Form {
 		)
 	}
 
+	/**
+	 * @param {SubmitEvent} event_
+	 * @returns {Promise<void>}
+	 */
+	async #submitHandler(event_) {
+		event_.preventDefault()
+
+		let formNode = /** @type {HTMLFormElement} */ (this.#formNode)
+		let formValues = /** @type {TimelineCreatePayload} */ (
+			getFormValues(formNode)
+		)
+
+		await this.#timelineApi.saveTimeline(getTransformedTimeline(formValues))
+
+		formNode.reset()
+	}
+
 	/** @returns {void} */
 	init() {
-		this._formNode = /** @type {HTMLFormElement} */ (
+		this.#formNode = /** @type {HTMLFormElement} */ (
 			document.querySelector(`form[name="timeline"]`)
 		)
 
-		this._initSelects()
+		this.#initSelects()
 
-		this._initListeners()
+		this.#initListeners()
 	}
 }