fix: force classes define templateName

Earilier template names were defined automatically using class name but after minification they do not match the original class names
frontend-park-mail-ru · Dec 17, 2024 · d951681 · d951681
1 parent 916b0df
commit d951681
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 13 deletions.
diff --git a/src/components/AdCard/AdCard.ts b/src/components/AdCard/AdCard.ts
@@ -33,6 +33,7 @@ export default class AdCard extends ReactiveComponent {
                 //     return data.images[state.toShowIndex as number].path;
                 // },
             },
+            templateName: 'AdCard',
             templateData: {
                 ...data,
                 rating: ('' + data.author.rating).slice(0, 3),
@@ -50,7 +51,7 @@ export default class AdCard extends ReactiveComponent {
     private registerHelper() {
         Handlebars.registerHelper('gte', function (a: number, b: number) {
             return a >= b;
-        });      
+        });
     }
 
     addEventListeners() {
@@ -214,8 +215,8 @@ export default class AdCard extends ReactiveComponent {
         const heartButton = this.thisElement.querySelector(
             '.js-fill-heart'
         ) as HTMLButtonElement;
-        
-        console.log(globalStore.auth.isAuthorized)
+
+        console.log(globalStore.auth.isAuthorized);
         if (globalStore.auth.isAuthorized) {
             if (!this.data.isFavorite) {
                 await ApiClient.adToFavourites(this.data.id);

diff --git a/src/components/BaseComponent/BaseComponent.ts b/src/components/BaseComponent/BaseComponent.ts
@@ -2,7 +2,10 @@
 
 interface BaseComponentData {
     parent: HTMLElement;
-    id: number | string;
+    templateName: string /** Name of the template without extension */;
+    id:
+        | number
+        | string /** Id of the component which will be used to refer the HTMLElement. `${templateName}-${id}` */;
     templateData: { [key: string]: unknown };
 }
 
@@ -22,13 +25,12 @@ export default abstract class BaseComponent {
     constructor(data: BaseComponentData) {
         this.thisElement = null as unknown as HTMLElement; // fuck typescript =D
 
-        this.elementId = this.constructor.name + '-' + data.id;
+        this.elementId = data.templateName + '-' + data.id;
 
         // Automatic template set
-        const templateName = `${this.constructor.name}.hbs`;
-        this.template = Handlebars.templates[templateName];
+        this.template = Handlebars.templates[`${data.templateName}.hbs`];
         if (!this.template) {
-            throw new Error('No such template found:' + templateName);
+            throw new Error('No such template found:' + data.templateName);
         }
 
         this.parent = data.parent;

diff --git a/src/components/ChatWindow/ChatWindow.ts b/src/components/ChatWindow/ChatWindow.ts
@@ -13,6 +13,7 @@ export default class ChatWindow extends BaseComponent {
             parent: parent,
             id: '0',
             templateData: {},
+            templateName: 'ChatWindow',
         });
 
         this.recipientId = recipientId;

diff --git a/src/components/ReactiveComponent/ReactiveComponent.ts b/src/components/ReactiveComponent/ReactiveComponent.ts
@@ -23,6 +23,7 @@ interface ReactiveComponentData {
     parent: HTMLElement;
     id: number | string;
     initialState: object;
+    templateName: string;
     templateData: { [key: string]: unknown };
     computedValues: {
         [key: string]: (state: Record<string, unknown>) => unknown;
@@ -46,13 +47,12 @@ export default abstract class ReactiveComponent {
     constructor(data: ReactiveComponentData) {
         this.thisElement = null as unknown as HTMLElement; // fuck typescript =D
 
-        this.#elementId = this.constructor.name + '-' + data.id;
+        this.#elementId = data.templateName + '-' + data.id;
         this.#currentFunc2Recompute = null;
 
-        const templateName = `${this.constructor.name}.hbs`;
-        this.#template = Handlebars.templates[templateName];
+        this.#template = Handlebars.templates[`${data.templateName}.hbs`];
         if (!this.#template) {
-            throw new Error('No such template found:' + templateName);
+            throw new Error('No such template found:' + data.templateName);
         }
 
         this.parent = data.parent;

diff --git a/src/pages/AdPage/AdPage.ts b/src/pages/AdPage/AdPage.ts
@@ -41,6 +41,7 @@ export default class AdPage extends ReactiveComponent {
                 sex: authorInfo.sex === 'M' ? 'Мужской' : 'Женский',
                 isAuthor: data.authorUUID === globalStore.auth.userId,
             },
+            templateName: 'AdPage',
         });
 
         this.#data = data;

diff --git a/src/pages/ChatPage/ChatPage.ts b/src/pages/ChatPage/ChatPage.ts
@@ -12,6 +12,7 @@ export default class ChatPage extends BaseComponent {
             parent: parent,
             id: '',
             templateData: data,
+            templateName: 'ChatPage',
         });
 
         if (!startChatWithRecipientId) return;

diff --git a/src/pages/PaymentPage/PaymentPage.ts b/src/pages/PaymentPage/PaymentPage.ts
@@ -18,6 +18,7 @@ export default class PaymentPage extends BaseComponent {
             templateData: {
                 price: ('' + price).replace(/\B(?=(\d{3})+(?!\d))/g, ' '),
             },
+            templateName: 'PaymentPage',
         });
 
         this.adId = adId;

diff --git a/src/pages/PaymentSuccessPage/PaymentSuccessPage.ts b/src/pages/PaymentSuccessPage/PaymentSuccessPage.ts
@@ -2,7 +2,12 @@ import BaseComponent from '../../components/BaseComponent/BaseComponent';
 
 export default class PaymentSuccessPage extends BaseComponent {
     constructor(parent: HTMLElement) {
-        super({ parent: parent, id: '', templateData: {} });
+        super({
+            parent: parent,
+            id: '',
+            templateData: {},
+            templateName: 'PaymentSuccessPage',
+        });
     }
 
     protected addEventListeners(): void {}