Добавил наследование, установил лоадеры

package.json

@@ -20,11 +20,11 @@
     "@babel/preset-env": "^7.20.2",
     "babel-loader": "9.1.0",
     "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.2",
+    "css-loader": "6.7.3",
     "eslint": "8.22.0",
     "eslint-config-htmlacademy": "8.0.0",
     "html-webpack-plugin": "5.5.1",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.2",
     "webpack": "5.75.0",
     "webpack-cli": "5.0.0",
     "webpack-dev-server": "4.11.1"

src/main.js

@@ -1,4 +1,4 @@
-import {render, RenderPosition} from './render';
+import {render, RenderPosition} from './framework/render.js';
 import Presenter from './presenter/presenter';
 
 import InfoView from './view/info-view.js';

src/presenter/presenter.js

@@ -3,7 +3,8 @@ import RoutePointView from '../view/route-point-view';
 import PointsListView from '../view/route-points-list-view';
 import EditFormView from '../view/edit-form-view';
 
-import { render } from '../render';
+import {render} from '../framework/render.js';
+
 
 export default class Presenter {
   eventListComponent = new PointsListView();
@@ -19,10 +20,10 @@ export default class Presenter {
     render(new SortView(), this.container);
     render(this.eventListComponent, this.container);
 
-    render(new EditFormView({routePoint: this.routePoints[0]}), this.eventListComponent.getElement());
+    render(new EditFormView({routePoint: this.routePoints[0]}), this.eventListComponent.element);
 
     for(let i = 1; i < this.routePoints.length; i++) {
-      render(new RoutePointView({routePoint: this.routePoints[i]}), this.eventListComponent.getElement());
+      render(new RoutePointView({routePoint: this.routePoints[i]}), this.eventListComponent.element);
     }
   }
 }

src/view/create-new-form-view.js

@@ -1,4 +1,4 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createNewFormViewTemplate() {
   return (
@@ -167,20 +167,8 @@ function createNewFormViewTemplate() {
   );
 }
 
-export default class FiltersView {
-  getTemplate() {
+export default class NewFormView extends AbstractView{
+  get template() {
     return createNewFormViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/edit-form-view.js

@@ -1,6 +1,6 @@
-import { createElement } from '../render';
 import {CITIES, POINT_TYPES} from '../const';
 import {humanizeDate} from '../utils';
+import AbstractView from '../framework/view/abstract-view';
 
 function createDestinationList() {
   return (`<datalist id="destination-list-1">
@@ -110,24 +110,14 @@ function createEditRoutePointTemplate(routePoint) {
   );
 }
 
-export default class EditRoutePointView {
-  getTemplate() {
-    return createEditRoutePointTemplate(this.routePoint);
+export default class EditRoutePointView extends AbstractView {
+  #routePoint = null;
+  get template() {
+    return createEditRoutePointTemplate(this.#routePoint);
   }
 
   constructor({routePoint}) {
-    this.routePoint = routePoint;
-  }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
+    super();
+    this.#routePoint = routePoint;
   }
 }

src/view/filters-view.js

@@ -1,4 +1,4 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createFiltersTemplate() {
   return (
@@ -28,20 +28,8 @@ function createFiltersTemplate() {
   );
 }
 
-export default class FiltersView {
-  getTemplate() {
+export default class FiltersView extends AbstractView {
+  get template() {
     return createFiltersTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/info-view.js

@@ -1,4 +1,4 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createInfoViewTemplate() {
   return (
@@ -16,20 +16,8 @@ function createInfoViewTemplate() {
   );
 }
 
-export default class InfoView {
-  getTemplate() {
+export default class InfoView extends AbstractView {
+  get template() {
     return createInfoViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/route-point-view.js

@@ -1,5 +1,5 @@
-import { createElement } from '../render';
 import {getDateDifference, humanizeDate} from '../utils';
+import AbstractView from '../framework/view/abstract-view';
 
 function createRoutePointOffers(offers) {
   return (
@@ -55,24 +55,15 @@ function createRoutePointViewTemplate(routePoint) {
   );
 }
 
-export default class RoutePointView {
-  getTemplate() {
-    return createRoutePointViewTemplate(this.routePoint);
-  }
-
-  constructor({routePoint}) {
-    this.routePoint = routePoint;
-  }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
+export default class RoutePointView extends AbstractView {
+  #routePoint = null;
 
-    return this.element;
+  get template() {
+    return createRoutePointViewTemplate(this.#routePoint);
   }
 
-  removeElement() {
-    this.element = null;
+  constructor({routePoint}) {
+    super();
+    this.#routePoint = routePoint;
   }
 }

src/view/route-points-list-view.js

@@ -1,25 +1,13 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createRoutePointsListViewTemplate() {
   return (
     '<ul class="trip-events__list"></ul>'
   );
 }
 
-export default class RoutePointsListView {
-  getTemplate() {
+export default class RoutePointsListView extends AbstractView {
+  get template() {
     return createRoutePointsListViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }

src/view/sort-view.js

@@ -1,4 +1,4 @@
-import { createElement } from '../render';
+import AbstractView from '../framework/view/abstract-view';
 
 function createSortViewTemplate() {
   return (
@@ -31,20 +31,8 @@ function createSortViewTemplate() {
   );
 }
 
-export default class SortView {
-  getTemplate() {
+export default class SortView extends AbstractView {
+  get template() {
     return createSortViewTemplate();
   }
-
-  getElement() {
-    if (!this.element) {
-      this.element = createElement(this.getTemplate());
-    }
-
-    return this.element;
-  }
-
-  removeElement() {
-    this.element = null;
-  }
 }