Создаем самописный framework на нативном JavaScript используя Webpack

# JavaScript framework

Свой велосипед на нативном **javascript** для создания **spa** приложений.

git init

.idea
.vscode
node_modules
.eslintcache

npm init -y

{
  "name": "javascript-framework-webpack",
  "version": "0.0.1",
  "description": "JavaScript framework для создания spa приложений.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["webpack"],
  "author": "",
  "license": "ISC"
}

npm i -D @babel/core @babel/register @babel/preset-env core-js

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": false,
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

"browserslist": [
  "last 2 version",
  "not dead"
],

npm i -D eslint @babel/eslint-parser eslint-plugin-import eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-webpack

npm i -D stylelint stylelint-config-rational-order stylelint-config-recommended-scss stylelint-config-standard stylelint-order stylelint-scss

npm i -D editorconfig-checker prettier

npx mrm lint-staged

"lint-staged": {
  "*": "editorconfig-checker --exclude '.git|.husky|node_modules|.eslintcache'",
  "*.scss": "stylelint --fix",
  "*.js": [
    "eslint --cache --fix",
    "prettier --write"
  ]
}

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.{md,json}]
trim_trailing_whitespace = false

{
  "singleQuote": true,
  "printWidth": 120,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "useTabs": false,
  "endOfLine": "lf",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

{
  "extends": [
    "stylelint-config-recommended-scss",
    "stylelint-config-rational-order"
  ],
  "plugins": [
    "stylelint-scss"
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-if-no-null": null,
    "scss/at-rule-no-unknown": [
      true,
      {
        "ignoreAtRules": [
          "tailwind"
        ]
      }
    ],
    "declaration-empty-line-before": null,
    "order/properties-order": [],
    "plugin/rational-order": [
      true,
      {
        "empty-line-between-groups": true
      }
    ],
    "no-descending-specificity": null,
    "block-no-empty": null,
    "import-notation": null,
    "string-quotes": "double",
    "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
    "selector-no-vendor-prefix": null,
    "scss/no-global-function-names": null
  }
}

module.exports = {
  root: true,
  env: {
    browser: true,
    es2023: true,
    node: true,
  },
  extends: ['airbnb-base', 'prettier'],
  parser: '@babel/eslint-parser',
  rules: {
    indent: ['off', 2, { MemberExpression: 'off' }],
    'no-var': 'error',
    'no-extra-semi': 'warn',
    'comma-dangle': ['error', 'always-multiline'],
    'computed-property-spacing': 'warn',
    'no-mixed-spaces-and-tabs': 'warn',
    'one-var': [
      'error',
      {
        var: 'never',
        let: 'never',
        const: 'never',
      },
    ],
    'unicode-bom': 'warn',
    'object-curly-spacing': ['error', 'always'],
    'class-methods-use-this': 'off',
    'default-param-last': 'off',
    'new-cap': ['error', { properties: false }],
    'no-plusplus': 'off',
    'no-prototype-builtins': 'off',
    'no-restricted-syntax': 'off',
    'no-nested-ternary': 'warn',
    'no-obj-calls': 'warn',
    'no-undefined': 'off',
    'object-curly-newline': 'off',
    'no-return-assign': 'off',
    'import/prefer-default-export': 'off',
    'max-len': 'off',
    'no-multi-assign': 'off',
    'no-unused-vars': 'error',
    'no-undef': 'off',
    'no-console': 'error',
    quotes: [2, 'single'],
    'import/no-dynamic-require': 'off',
    'global-require': 'off',
    semi: ['error', 'never'],
    'arrow-parens': ['error', 'as-needed'],
    'no-underscore-dangle': 'off',
    'no-use-before-define': 'off',
    'no-useless-return': 'off',
    'no-param-reassign': 'off',
    'no-new': 'off',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: 'webpack.config.js',
      },
    },
  },
}

npm i -D webpack webpack-cli webpack-dev-server webpack-merge dotenv glob-all cross-env

npm i -D mini-css-extract-plugin style-loader css-loader postcss-loader autoprefixer sass sass-loader file-loader babel-loader image-webpack-loader

npm i -D clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin svg-sprite-html-webpack svg-inline-loader copy-webpack-plugin terser-webpack-plugin purgecss-webpack-plugin

const { resolve } = require('path') // работа с путями к файлам и каталогам

module.exports = {
  resolve: {
    extensions: ['.js'],

    // короткий путь до js файлов через символ @, например @/components/ButtonComponent
    // поиск файлов будет производиться в каталоге src
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
}

./webpack
├── loaders
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

const { join } = require('path') // работа с путями к файлам и каталогам
const webpack = require('webpack') // ядро webpack
const { merge } = require('webpack-merge') // объединяет конфигурации

const HtmlWebpackPlugin = require('html-webpack-plugin') // динамически встраивает данные в html
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // сохраняет css и js в отдельные файлы
const CopyWebpackPlugin = require('copy-webpack-plugin') // копирует файлы и директории из одного места в другое
const SvgSpriteHtmlWebpackPlugin = require('svg-sprite-html-webpack') // создает svg спрайт

const jsLoaders = require('./loaders/js-loaders') // обработка js
const cssLoaders = require('./loaders/css-loaders') // обработка стилей
const imageLoaders = require('./loaders/image-loaders') // обработка изображений
const fontLoaders = require('./loaders/font-loaders') // обработка шрифтов

const webpackBase = require('../webpack.config') // базовый конфигурационный файл

// загрузка переменных окружения
require('dotenv').config({
  path: `${process.env.NODE_ENV}.env`, // путь до файла .env, например development.env или production.env
})

module.exports = merge(webpackBase, {
  target: 'web', // целевая среду сборки браузер

  // входная точка
  entry: {
    app: join(__dirname, '../src/main.js'), // основной JavaScript файл приложения
  },

  // исходная точка
  output: {
    publicPath: '/', // публичный путь для доступа к выходным файлам
    path: join(__dirname, '../dist'), // директория для сохранения собранных файлов
    filename: 'js/[name].bundle.js', // имя выходного файла с динамическими именами [name]
    chunkFilename: 'js/[name]-[id].js', // имя файлов чанков с динамическими именами [name]-[id]
    clean: true, // очистка выходной директории перед каждой сборкой
  },

  // дополнительные модули для обработки файлов
  module: {
    rules: [
      // правило для обработки изображений
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        use: imageLoaders,
      },

      // вместо данной конструкции будет использоваться asset/inline,
      // приведенное ниже правило
      // {
      //   test: /\.svg$/,
      //   use: SvgSpriteHtmlWebpackPlugin.getLoader(),
      //   exclude: /node_modules/,
      // },

      // встроенные ресурсы
      // background: url("@/assets/icons/icon-blank.svg")
      {
        test: /\.svg$/,
        type: 'asset/inline',
        resourceQuery: /inline/,
      },

      // правило для обработки шрифтов
      {
        test: /\.(woff2)$/i,
        use: fontLoaders,
      },

      // правило для обработки css модулей
      {
        test: /\.(sa|sc|c)ss$/i,
        use: cssLoaders.map(item => {
          const clone = { ...item }

          if (clone.loader === 'css-loader') {
            clone.options = {
              modules: true, // включение CSS модулей для css-loader
            }
          }

          return clone
        }),
        include: /\.module\.css$/, // применяется только к файлам с расширением .module.css
      },

      // правило для обработки стилей
      {
        test: /\.(sa|sc|c)ss$/i,
        use: cssLoaders,
        exclude: /\.module\.css$/, // исключение файлов с расширением .module.css.
      },

      // правило для обработки скриптов
      {
        test: /\.m?js$/i,
        use: jsLoaders,
        exclude: /node_modules/, // исключение файлов из node_modules
      },
    ],
  },

  // плагины webpack
  plugins: [
    // определение переменных окружения
    new webpack.DefinePlugin({
      // API_URL будет взять с подключенного файла development.env или production.env
      // Далее в коде проекта переменная process.env.API_URL при сборки заменится на свое значение
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    }),

    // создание HTML файла на основе шаблона
    new HtmlWebpackPlugin({
      filename: 'index.html', // имя HTML файла
      template: join(__dirname, '../src/index.html'), // шаблон основного index.html файла
    }),

    // извлечение стилей в отдельные CSS файлы
    new MiniCssExtractPlugin({
      filename: 'css/[name].css', // имя CSS файла
      chunkFilename: 'css/[id].css', // имя файлов чанков стилей
    }),

    // svg спрайт
    // пример: <svg> <use xlink:href="#icon-test"></use> </svg>
    new SvgSpriteHtmlWebpackPlugin({
      append: false, // вставить спрайт вначале <body> для false
      includeFiles: [
        'src/assets/icons/*.svg', // подключаемые в спрайт файлы
      ],
    }),

    // копирование файлов и ресурсов
    new CopyWebpackPlugin({
      patterns: [
        {
          from: join(__dirname, '../src/assets'), // откуда копировать
          to: 'assets/[path][name][ext]', // куда копировать
          noErrorOnMissing: true, // не генерировать ошибки при отсутствии файлов
        },
      ],
    }),
  ],
})

const jsLoaders = require('./loaders/js-loaders') // обработка js
const cssLoaders = require('./loaders/css-loaders') // обработка стилей
const imageLoaders = require('./loaders/image-loaders') // обработка изображений
const fontLoaders = require('./loaders/font-loaders') // обработка шрифтов

./loaders
├── js-loaders.js
├── css-loaders.js
├── font-loaders.js
└── image-loaders.js

module.exports = [
  {
    loader: 'babel-loader', // преобразование es6+ в es5
  },
]

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // извлекать css из js

const devMode = process.env.NODE_ENV === 'development' // определение окружения

module.exports = [
  devMode ? { loader: 'style-loader' } : { loader: MiniCssExtractPlugin.loader }, // инлайн стили или стили в отдельный файл
  { loader: 'css-loader' }, // поддержка css файлов
  { loader: 'postcss-loader' }, // автопрефиксер и другие улучшения
  { loader: 'sass-loader' }, // поддержка scss файлов
]

module.exports = {
  plugins: [
    require('autoprefixer'), // добавляет вендорные префексы браузеров к стилям
  ],
}

module.exports = [
  {
    loader: 'file-loader', // импорт и обработка файлов
    options: {
      outputPath: 'fonts', // каталог куда будет происходить импорт
    },
  },
]

module.exports = [
  {
    loader: 'file-loader', // импорт и обработка файлов
    options: {
      name: '[path][name].[ext]', // имя файла
    },
  },
  {
    loader: 'image-webpack-loader', // оптимизация изображений
    options: {
      mozjpeg: {
        progressive: true,
      },
      optipng: {
        enabled: true,
      },
      pngquant: {
        quality: [0.65, 0.90],
        speed: 4,
      },
      gifsicle: {
        interlaced: false,
      },
      webp: {
        quality: 75,
      },
    },
  },
]

// загрузка переменных окружения
require('dotenv').config({
  path: `${process.env.NODE_ENV}.env`, // путь до файла .env, например development.env или production.env
})

...

// определение переменных окружения
new webpack.DefinePlugin({
  // API_URL будет взять с подключенного файла development.env или production.env
  // Далее в коде проекта переменная process.env.API_URL при сборки заменится на свое значение
  'process.env.API_URL': JSON.stringify(process.env.API_URL),
}),

./
├── development.env
└── production.env

API_URL=https://example.com

"scripts": {
  "prepare": "husky install",
  "develop": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.js",
  "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.prod.js"
},

const { join } = require('path') // работа с путями к файлам и каталогам
const { merge } = require('webpack-merge') // объединяет конфигурации
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // удаляет файлы и каталоги перед каждой сборкой

const common = require('./webpack.common') // общие конфигурации для dev и prod версий

module.exports = merge(common, {
  mode: 'development', // режим разработки
  devtool: 'inline-source-map', // устанавливаем source map для отладки (eval-cheap-module-source-map)
  devServer: { // настройки для сервера разработки
    port: 3003, // порт
    hot: true, // вносит изменения в код приложения без перекомпиляции всего проекта
    compress: true, // сжатие данных
    https: true, // использование https
    historyApiFallback: true, // поддержка HTML5 History API
    static: {
      directory: join(__dirname, '../dist') // указываем путь к статическим файлам
    },
    devMiddleware: { // позволяет моментально видеть изменения
      index: true, // автоматически отображение индексного файла
      publicPath: '/', // базовый url для сервера разработки
      writeToDisk: true, // исходные карты и ресурсы будут записаны на диск
    },
    client: {
      logging: 'log' // логи будут отображаться в консоли браузера
    },
  },
  plugins: [ // плагины webpack
    new CleanWebpackPlugin({ // очистка указанных файлов и каталогов перед сборкой
      cleanOnceBeforeBuildPatterns: [
        join(__dirname, '../dist')
      ]
    })
  ]
})

const { join, resolve } = require('path') // работа с путями к файлам и каталогам
const globAll = require('glob-all') // операции над файлами
const { merge } = require('webpack-merge') // объединяет конфигурации

const TerserPlugin = require('terser-webpack-plugin') // выполняет минимизацию и оптимизацию js
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin') // удаляет неиспользуемые css стили

const common = require('./webpack.common') // общие конфигурации для dev и prod версий

module.exports = merge(common, {
  mode: 'production', // режим production
  output: {
    // исходная точка
    publicPath: '/', // публичный путь для доступа к выходным файлам
    path: resolve(__dirname, '../build'), // устанавливает путь для сохранения собранного кода
    filename: 'js/[name].[contenthash].js', // настройка имени собранного файла с хэшем содержимого
    clean: true, // очистка каталога сборки перед каждой новой сборкой
  },
  optimization: {
    // настройки для оптимизации сборки
    minimizer: [
      new TerserPlugin({
        parallel: true, // параллельная минимизация для ускорения сборки
        extractComments: false, // не извлекать комментарии из сжатого кода
        terserOptions: {
          format: {
            comments: false, // не сохранять комментарии
          },
        },
      }),
    ],
  },
  plugins: [
    new PurgeCSSPlugin({
      paths: globAll.sync(join(__dirname, '../src/**/*.js'), { nodir: true }), // пути к js файлам для анализа стилей
    }),
  ],
})

./src
├── assets
│    ├── favicons
│    ├── icons
│    └── scss
├── core
├── components
├── pages
├── layouts
├── reducers
├── routers
├── services
├── store
├── utils
├── main.js
└── index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Главная страница</title>

    <meta name="theme-color" content="#000">
    <meta name="msapplication-TileColor" content="#000">

    <link rel="icon" href="/assets/favicons/favicon.ico" sizes="any">
    <link rel="icon" href="/assets/favicons/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/assets/favicons/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicons/manifest.json">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

./src/assets/favicons/
├── apple-touch-icon.png
├── favicon.ico
├── icon-192.png
├── icon-512.png
├── icon.svg
└── manifest.json

{
  "name": "JavaScript framework",
  "short_name": "JavaScript framework",
  "description": "JavaScript framework для создания spa приложений",
  "lang": "ru",
  "dir": "ltr",
  "id": "/",
  "start_url": "/",
  "scope": "/",
  "display": "minimal-ui",
  "orientation": "any",
  "theme_color": "#000",
  "background_color": "#000",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "icon.svg",
      "sizes": "any",
      "type": "image/svg",
      "purpose": "maskable"
    }
  ]
}

./src/assets/scss/
├── global.scss
├── mixin.scss
└── variable.scss

@import "variable";

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100vh;
}

html {
  box-sizing: border-box;
}

body {
  position: relative;

  min-width: 380px;
  margin: 0;

  color: $color-black;
  font-size: 16px;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background-color: $color-grey;
}

img {
  max-width: 100%;
  height: auto;
}

#app {
  height: 100%;
}

.container {
  width: 100%;
  max-width: 1210px;
  margin: 0 auto;
  padding: 0 20px;
}

.sr-only {
  position: absolute;

  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;

  border: 0;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(100%);
}

.active {
  color: red;
}

@mixin list-reset {
  margin: 0;
  padding: 0;

  list-style: none;
}

$color-black: #222;
$color-white: #fff;
$color-red: #f31b2c;
$color-grey: #edf1f5;
$color-blue: #1c90e9;
$color-yellow: #ffdd56;

<svg width="800" height="800" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
    fill="currentColor"/>
</svg>

import Router from '@/core/Router/Router' // роутер фрейморка

/**
 * Регистрация роутов
 *
 * @type {*|null}
 */
const router = Router.createRoute({
  // Вид роутинга, в рамках фреймворка будут реализованы
  // два вида:
  // createWebHistory - стандартный роутинг, вида /foo/bar
  // createWebHashHistory - роутинг с хэшем, вида /#/foo/bar
  history: Router.createWebHistory(),

  // Список роутов
  // Здесь мы используем динамический импорт для улучшения производительности
  routes: [
    {
      path: '/', // ссылка на главную страницу
      component: import('@/pages/HomePage'), // класс отвечающий за отображение главной страницы
    },
    {
      path: '/about',
      component: import('@/pages/AboutPage'),
    },
    {
      path: '/.*', // 404 страница
      component: import('@/pages/ErrorPage'), // класс отвечающий за отображение 404 страницы
    },
  ],
})

export default router

import router from '@/routers' // роутер приложения

./src/core/Router/
├── Dispatcher.js
├── HistoryTypeEnum.js
└── Router.js

/**
 * Режимы истории
 *
 * @type {Readonly<{STATE: string, HASH: string}>}
 */
const HISTORY_TYPE_ENUM = Object.freeze({
  HASH: 'hashchange', // для ссылки с хэшем
  STATE: 'popstate', // для стандартной ссылки
})

export default HISTORY_TYPE_ENUM

import HISTORY_TYPE_ENUM from '@/core/Router/HistoryTypeEnum' // виды роутинга

/**
 * Родительский класс для Router
 *
 * Содержит вспомогательные методы для Router.
 */
export default class Dispatcher {
  /**
   * Разрешение на создание экземпляра класса
   *
   * @type {boolean}
   * @protected
   */
  static _initializing = false

  /**
   * Экземпляр класса
   *
   * @type {null}
   * @protected
   */
  static _instance = null

  /**
   * Режим истории по умолчанию с использованием хэша
   *
   * @type {string}
   * @property
   */
  _history = HISTORY_TYPE_ENUM.HASH

  /**
   * Роуты
   *
   * @type {[]}
   * @property
   */
  _routes = []

  /**
   * Основной корневой элемент в который будет добавляться разметка
   *
   * @type {string}
   * @protected
   */
  _root = '#app'

  /**
   * Данный класс является абстрактным
   */
  constructor() {
    if (!Dispatcher._initializing) {
      throw new TypeError('Нельзя напрямую создать экземпляр данного класса')
    }
  }

  /**
   * Получение основного корневого элемента
   *
   * @returns {string}
   */
  get root() {
    return this._root
  }

  /**
   * Изменение основного корневого элемента
   *
   * @param selector
   */
  set root(selector) {
    this._root = selector
  }

  /**
   * Создание экземпляра класса
   *
   * @returns {*|null}
   */
  static get instance() {
    // Возвращаем объект данного класса если он был уже создан
    if (this._instance instanceof this) {
      return this._instance
    }

    // Если объект не был создан создаем его и возвращаем
    Dispatcher._initializing = true
    this._instance = new this()
    Dispatcher._initializing = false

    return this._instance
  }

  /**
   * Получить активный режим истории
   *
   * @returns {string}
   */
  get history() {
    return this._history
  }

  /**
   * Получить список всех роутов
   *
   * @returns {[]}
   */
  get routes() {
    return this._routes
  }

  /**
   * Режим роута с хэшем
   *
   * @returns {string}
   */
  static createWebHashHistory() {
    return HISTORY_TYPE_ENUM.HASH
  }

  /**
   * Режим роута стандартный
   *
   * @returns {string}
   */
  static createWebHistory() {
    return HISTORY_TYPE_ENUM.STATE
  }

  /**
   * Форматирование текущего адреса страницы для режима хэш
   *
   * @returns {string}
   * @protected
   */
  _strippedHashPath() {
    return `/${window.location.hash.replace(/^#\//, '')}` // '#/foo/bar' -> '/foo/bar'
  }

  /**
   * Форматирование текущего адреса страницы в стандартном режиме
   *
   * @returns {string}
   * @protected
   */
  _strippedPath() {
    return `/${window.location.pathname
      .replace(/^\/+|\/+$/g, '') // '////foo/bar////' -> 'foo/bar'
      .replace(/\/+/g, '/')}` // 'foo/////bar' -> 'foo/bar'
  }
}

import Dispatcher from '@/core/Router/Dispatcher' // родительский класс
import HISTORY_TYPE_ENUM from '@/core/Router/HistoryTypeEnum' // виды роутинга

/**
 * Роутер
 *
 */
export default class Router extends Dispatcher {
  /**
   * Хранит область где будет располагаться разметка страницы
   *
   * @type {null}
   * @protected
   */
  _pageElement = null

  /**
   * Создание роутера
   *
   * @param history - вид роута
   * @param routes - маршруты
   * @returns {*|null}
   */
  static createRoute({ history, routes }) {
    // Получаем объект класса Router
    const router = Router.instance

    // Определяем режим навигации по сайту
    router._history = history ?? router._history

    // Получаем зарегистрированные маршруты
    router._routes.push(...routes)

    // Возвращаем объект класса Router
    return router
  }

  /**
   * Отрисовка готовой страницы
   *
   * @returns {Promise<void>}
   */
  render = async () => {
    // Находим нужный роут и получаем его component,
    // то что прописано при регистрации роутов.
    // Например: component: import('@/pages/ProductPage')
    const { component } = this._findRoute(this.getUri())

    // Если роутер не был найден выводим служебную
    // 404 страницу об ошибке.
    // Для того чтобы выводилась пользовательская страница 404,
    // при перечислении маршрутов в самом конце списка нужно указать:
    // path: '/.*' и component: import('@/pages/ErrorPage').
    // Далее уже в файле ErrorPage описать как будет выглядеть страница об ошибках.
    if (!component) {
      this._page404()

      return
    }

    // Получаем параметры страницы
    const params = this._getParams()

    // Получаем саму страницу
    const page = await this._getComponent(component, params)

    // Если у страницы задан шаблон, то рендерим шаблон.
    if (page.layout) {
      await this._renderLayout(page.layout)
    } else {
      this._pageElement = null
    }

    // Рендерим страницу
    await this._renderPage(page)
  }

  /**
   * Рендер шаблона страницы
   *
   * @param layout - import('@/layouts/MainLayout')
   * @returns {Promise<void>}
   * @protected
   */
  _renderLayout = async layout => {
    // Страница будет содержать путь до шаблона вида import('@/layouts/MainLayout'),
    // при создании объекта этого класса MainLayout нужно взять саму разметку шаблона
    // и разметку его внутренних элементов.
    const { component, elements } = await this._getComponent(layout)

    // Определяем область где будет располагаться разметка страницы
    this._pageElement = elements.page

    // Получаем корневой элемент в который рендерится весь сайт
    const root = document.querySelector(this.root)

    // Очищаем старое содержимое
    root.innerHTML = ''

    // Рендерим новое
    root.insertAdjacentElement('afterbegin', component)
  }

  /**
   * Рендер страницы
   *
   * @param component
   * @returns {Promise<void>}
   * @protected
   */
  _renderPage = async ({ component }) => {
    // Получаем корневой элемент в который рендерится весь сайт
    let root = document.querySelector(this._root)

    // Если у страницы был найден шаблон, то рендерить нужно только саму страницу,
    // так как шаблон уже добавлен на страницу сайта
    if (this._pageElement) {
      root = this._pageElement
    }

    // Очищаем старое содержимое
    root.innerHTML = ''

    // Рендерим новое
    root.insertAdjacentElement('afterbegin', component)

    // Очищаем область где будет располагаться разметка страницы
    this._pageElement = null
  }

  /**
   * Базовая страница 404
   *
   * @protected
   */
  _page404() {
    document.querySelector(this._root).innerHTML = 'Страница 404 не найдена'
  }

  /**
   * Получение текущей ссылки
   *
   * @returns {string}
   */
  getUri() {
    // Ссылка будет форматирована согласно выбранному режиму
    if (this._history === HISTORY_TYPE_ENUM.STATE) {
      return this._strippedPath()
    }

    return this._strippedHashPath()
  }

  /**
   * Получение параметров из ссылки
   *
   * Пример: /foo/1/bar/2 => { foo: 1, bar: 2 }
   *
   * @returns {{}}
   * @protected
   */
  _getParams() {
    return this.getUri()
      .slice(1)
      .split('/')
      .reduce((acc, item, index, array) => {
        if (index % 2 === 0 && array[index + 1]) {
          acc[item] = array[index + 1]
        }

        return acc
      }, {})
  }

  /**
   * Поиск текущего роута
   *
   * @param route
   * @returns {*}
   * @protected
   */
  _findRoute(route) {
    return this._routes.find(item => {
      const regex = new RegExp(`^${item.path}$`)

      return route.match(regex)
    })
  }

  /**
   * Получение шаблона или страницы
   *
   * @param component - import('@/foo/bar')
   * @param params - { foo: 1, bar: 2 }
   * @returns {Promise<*>}
   * @protected
   */
  async _getComponent(component, params = {}) {
    let Component = component

    // Так как компонент страницы может быть передан как динамически так и нет,
    // то мы должны проверить при динамическом импорте мы получим Promise
    if (Component instanceof Promise) {
      const module = await Component

      Component = module.default
    }

    return new Component({
      ...params,
      router: this,
    })
  }
}

import router from '@/routers' // роутер приложения
import App from '@/core/App' // для инициализации приложения

import '@/assets/scss/global.scss' // глобальные стили приложения

const app = new App(router) // создаем приложение

app.run() // инициализируем приложение

/**
 * Инициализация приложения
 *
 */
export default class App {
  /**
   * Объект класса Router
   *
   * @type {{}}
   */
  #router = {}

  /**
   * Создание приложения
   *
   * @param router
   */
  constructor(router) {
    // Получаем объект класса Router
    this.#router = router
  }

  /**
   * Инициализация приложения
   *
   * @param selector
   */
  run(selector = '#app') {
    // Определяем основной селектор приложения
    // в котором будет производиться отрисовка сайта
    this.#router['root'] = selector

    // Рендерим страницу сайта
    this._render()

    // При изменении ссылки заново рендерим страницу
    window.addEventListener(this.#router.history, () => this._render())
  }

  /**
   * Рендер страницы сайта
   *
   * @protected
   */
  _render() {
    this.#router.render()
  }
}

export default class BaseComponent {
  /**
   * Node элемент самого компонента
   *
   * @type {null}
   * @protected
   */
  _component = null

  /**
   * Вложенные в компонент элементы верстки
   *
   * С которыми в процессе необходимо будет взаимодействовать.
   *
   * @type {{}}
   * @protected
   */
  _elements = {}

  /**
   * Вложенные в компонент другие компоненты
   *
   * @type {{}}
   * @protected
   */
  _components = {}

  /**
   * Для отмены прослушки событий
   *
   * @type {AbortController}
   * @protected
   */
  _abortController = new AbortController()

  /**
   * Абстрактный класс
   */
  constructor() {
    if (this.constructor.name === 'BaseComponent') {
      throw new TypeError('Абстрактный класс!')
    }
  }

  /**
   * Получение разметки компонента
   *
   * @returns {string}
   * @protected
   */
  get _template() {
    return ''
  }

  /**
   * Получение компонента
   *
   * @returns {null}
   */
  get component() {
    return this._component
  }

  /**
   * Получение вложенных в компонент элементов верстки
   *
   * @returns {{}}
   */
  get elements() {
    return this._elements
  }

  /**
   * Установка вложенных компонентов
   *
   * @param components
   * @protected
   */
  _setComponents(components) {
    this._components = components
  }

  /**
   * Переотрисовка вложенных компонентов
   *
   * @param components
   * @protected
   */
  _reloadComponents(components) {
    this._setComponents(components)
    this._initComponents()
  }

  /**
   * Инициализация компонента
   *
   * @protected
   */
  _init() {
    this._beforeInit().then()
    this._initComponent()
    this._initElements()
    this._initComponents()
    this._initListeners()
    this._afterInit().then()
  }

  /**
   * Пользовательские действия, происходящие до инициализации компонента
   *
   * @returns {Promise<void>}
   * @protected
   */
  async _beforeInit() {
    // Абстрактный метод!
    // await this._loadData()
    // await this._updateData()
  }

  /**
   * Пользовательские действия, происходящие после инициализации компонента
   *
   * @returns {Promise<void>}
   * @protected
   */
  async _afterInit() {
    // Абстрактный метод!
    // await this._loadData()
    // await this._updateData()
  }

  /**
   * Загрузка данных, например по api
   *
   * @protected
   */
  _loadData() {
    // Абстрактный метод!
  }

  /**
   * Обновление данных
   *
   * @protected
   */
  _updateData() {
    // Абстрактный метод!
  }

  /**
   * Создание ноды компонента
   *
   * @protected
   */
  _initComponent() {
    // Создаем элемент обертки
    const wrapper = document.createElement('div')

    // Помещаем внутрь обертки разметку html компонента
    wrapper.innerHTML = this._template

    // Получаем разметку компонента в виде Node
    this._component = wrapper.firstElementChild || wrapper
  }

  /**
   * Получение вложенных элементов в компоненте
   *
   * @param component
   * @protected
   */
  _initElements(component = this._component) {
    // Находим все элементы внутри компонента имеющие атрибут data-el
    const list = component.querySelectorAll('[data-el]')

    // Перебираем каждый вложенный элемент с атрибутом data-el
    list.forEach(item => {
      // Получаем значение атрибута data-el
      const name = item.dataset.el

      // Сохраняем Node каждого элемента
      this._elements[name] = item
    })
  }

  /**
   * Инициализация вложенных компонентов
   *
   * @protected
   */
  _initComponents() {
    // Проходимся по каждому ключу объекта _components
    for (const componentName of Object.keys(this._components)) {
      // Ключи подключаемых компонентов должны совпадать с названием
      // атрибута data-el у вложенных в родительский компонент элемента,
      // находим такой элемент, на его место будет подставляться, вложенный компонент.
      let root = this._elements[componentName]

      // Вложенный компонент можно передать двумя способами:
      // _setComponents({ nameComponent: new SomeComponent() })
      // _setComponents({ nameComponent: SomeComponent })
      // здесь идет определение того каким образом был передан вложенный компонент
      // и на основе этого идет получение свойства _component, который в свою очередь хранит
      // Node элемент компонента
      const { component } =
        typeof this._components[componentName] === 'object' &&
        !Array.isArray(this._components[componentName])
          ? this._components[componentName]
          : new this._components[componentName]()

      // Если элементы найдены, то рендерим компонент
      if (root && component) {
        // Получаем data-el
        component.dataset.el = root.dataset.el

        // Переопределяем внутренний элемент
        this._elements[root.dataset.el] = component

        // Рендерим компонент
        root.insertAdjacentElement('beforebegin', component)
        root.remove()
        root = null

        // Получаем вложенные элементы в компоненте
        this._initElements(component)
      }
    }
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {
    // Абстрактный метод!
  }

  /**
   * Обновление содержимого компонента
   *
   * @param data
   */
  update(data = {}) {
    // Перебираем все необходимые вложенные элементы
    // и изменяем их внутреннее содержимое
    for (const [key, value] of Object.entries(data)) {
      if (this._elements[key]) {
        this._elements[key].innerHTML = value
      }
    }
  }

  /**
   * Полное удаление компонента
   */
  destroy() {
    this._remove()
    this._removeListeners()
  }

  /**
   * Удаление компонента
   *
   * @protected
   */
  _remove() {
    // this._component?.remove()
    this._component.innerHTML = ''
    this._elements = {}
  }

  /**
   * Удаление прослушек событий
   *
   * @protected
   */
  _removeListeners() {
    this._abortController.abort()
  }
}

import BaseComponent from '@/core/BaseComponent' // Базовый компонент

/**
 * Базовая страница
 */
export default class BasePage extends BaseComponent {
  /**
   * Шаблон страницы
   *
   * @type {Promise<{readonly default?: *}>}
   * @protected
   */
  _layout = import('@/layouts/MainLayout')

  /**
   * Заголовок страницы
   *
   * @type {string}
   * @protected
   */
  _title = 'JavaScript framework'

  /**
   * Создание страницы
   */
  constructor() {
    super()

    document.title = 'Главая страница'
  }

  /**
   * Получение шаблона страницы
   *
   * @returns {Promise<{readonly default?: *}>}
   */
  get layout() {
    return this._layout
  }
}

import BaseComponent from '@/core/BaseComponent' // базовый компонент

// Стили шаблона
import '@/layouts/MainLayout/main-layout.scss'

/**
 * Основной шаблон
 */
export default class MainLayout extends BaseComponent {
  /**
   * Создание шаблона
   */
  constructor() {
    super()

    // Инициализируем шаблон
    this._init()
  }

  /**
   * Разметка шаблона
   *
   * @returns {string}
     * @protected
     */
  get _template() {
      return `
        <div class="main-layout">
          <header class="main-header">
            <div class="container">Шапка сайта</div>
          </header>

          <main data-el="page"><!-- PageComponent --></main>

          <footer class="main-footer">
            <div class="container">Copyright 2023</div>
          </footer>
        </div>
      `
  }
}

.main-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.main-header {
  margin-bottom: 20px;

  color: #fff;

  background-color: #000;
}

.main-layout main {
  flex-grow: 1;
}

.main-footer {
  margin-top: 20px;
  padding: 20px 0;

  background-color: #c2c2c2;
}

import BasePage from '@/core/BasePage' // базовая страница
import LogoComponent from '@/components/LogoComponent' // логотип

// Подключаемые компоненты
const components = {
  logo: new LogoComponent({ title: 'JavaScript Framework' }),
}

/**
 * Главная страница
 */
export default class HomePage extends BasePage {
  /**
   * Создание главной страницы
   */
  constructor() {
    super()

    document.title = `Главная страница - ${this._title}`

    // Подключение компонентов
    this._setComponents(components)

    // Инициализация главной страницы
    this._init()
  }

  /**
   * Разметка страницы
   *
   * @returns {string}
   * @protected
   */
  get _template() {
    return `
      <div class="home-page">
        <div class="container">
          <div data-el="logo"><!-- LogoComponent --></div>

          <button type="button" data-el="btn">Кнопка</button>
        </div>
      </div>
    `
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {
    this._elements['btn'].addEventListener('click', () => console.log('Клик по кнопке'))
  }
}

// Значение logo подставится на место data-el="logo"
const components = {
  logo: new LogoComponent({ title: 'JavaScript Framework' }),
}

...

// Значение components.logo подставится на место data-el="logo"
<div data-el="logo"><!-- LogoComponent --></div>

...

<button type="button" data-el="btn">Кнопка</button>

...

...

_initListeners() {
  this._elements['btn'].addEventListener('click', () => console.log('Клик по кнопке'))
}

components.logo = new LogoComponent({ title: 'JavaScript Framework 2.0' })

this._reloadComponents(components)

import BasePage from '@/core/BasePage' // базовая страница

/**
 * Страница о нас
 */
export default class AboutPage extends BasePage {
  /**
   * Создание страницы о нас
   */
  constructor() {
    super()

    document.title = `О нас - ${this._title}`

    // Инициализация страницы о нас
    this._init()
  }

  /**
   * Разметка страницы
   *
   * @returns {string}
     * @protected
     */
  get _template() {
      return `
        <div>
          Создание самописного framework на нативном JavaScript с использованием Webpack.
        </div>
      `
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {}
}

import BasePage from '@/core/BasePage' // базовая страница

/**
 * Страница 404
 */
export default class ErrorPage extends BasePage {
  /**
   * Создание страницы
   */
  constructor() {
    super()

    document.title = `Страница 404 - ${this._title}`

    // Инициализация страницы
    this._init()
  }

  /**
   * Разметка страницы
   *
   * @returns {string}
     * @protected
     */
  get _template() {
      return `
        <div>
          Страница не найдена 404.
        </div>
      `
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {}
}

import BaseComponent from '@/core/BaseComponent' // базовый компонент

import '@/components/LogoComponent/logo.scss'

/**
 * Логотип
 */
export default class LogoComponent extends BaseComponent {
  /**
   * Создание главной страницы
   */
  constructor({ title = '' } = {}) {
    super()

    this._title = title

    // Инициализация компонента лого
    this._init()
  }

  /**
   * Разметка компонента
   *
   * @returns {string}
   * @protected
   */
  get _template() {
    return `
      <div>
        <img src="logo.svg" width="150" height="80" alt="${this._title}">
      </div>
    `
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {}
}

import Router from '@/core/Router/Router' // роутер
import BaseComponent from '@/core/BaseComponent' // базовый компонент

/**
 * Ссылка на внутренние страницы приложения
 */
export default class Link extends BaseComponent {
  /**
   * Список всех проинициализированных ссылок
   *
   * @type {[]}
   * @protected
   */
  static _links = []

  /**
   * Создание ссылки
   *
   * @param url
   * @param html
   * @param attributes
   * @param activeClass
   */
  constructor({
    url = '',
    html = '',
    attributes = {},
    activeClass = 'active',
  } = {}) {
    super()

    this._router = Router.instance // роутер

    this._url = this._correctUrl(url) // ссылка
    this._html = html // содержимое ссылки
    this._attributes = attributes // атрибуты ссылки
    this._activeClass = activeClass // класс активной ссылки

    this._init() // инициализация компонента Link
  }

  /**
   * Получение роутера
   *
   * @returns {Router.instance}
   */
  get router() {
    return this._router
  }

  /**
   * Получение активного класса
   *
   * @returns {string}
   */
  get activeClass() {
    return this._activeClass
  }

  /**
   * Исправление ссылки для ссылки вида хэш
   *
   * @param url
   * @returns {*}
   * @protected
   */
  _correctUrl(url) {
    if (this._router.history === Router.createWebHashHistory()) {
      url = url.replace(/^\//, '/#/') // меняет / -> /#/
    }

    return url
  }

  /**
   * Инициализация компонента
   *
   * @protected
   */
  _initComponent() {
    // Создаем элемент ссылка
    this._component = document.createElement('a')

    // Если урл ссылки соответствует урл в браузере делаем ссылку активной
    if (this._url === this._router.getUri()) {
      this._component.classList.add(this._activeClass)
    }

    // Добавляем урл в ссылку
    this._component.setAttribute('href', this._url)

    // Добавляем содержимое в ссылку
    this._component.innerHTML = this._html

    // Добавляем аттрибуты ссылки
    Object.entries(this._attributes).forEach(([prop, value]) => {
      this._component.setAttribute(prop, `${value}`)
    })

    // Аккумулируем все ссылки
    Link._links.push({
      link: this._component,
      activeClass: this._activeClass,
    })
  }

  /**
   * Прослушка событий
   *
   * @protected
   */
  _initListeners() {
    this._component.addEventListener('click', async evt => {
      // Отменяем стандартный переход по ссылки
      evt.preventDefault()

      // Получаем урл ссылки
      const path = evt.currentTarget.getAttribute('href')

      // Меняем урл в браузере на урл ссылки
      window.history.pushState(null, null, path)

      // Переключаем классы у активных ссылок
      this._toggleClass()

      // Рендарим страницу
      await this._router.render()
    })

    // Переключаем классы у активных ссылок при изменении страницы
    window.addEventListener(this._router.history, () => this._toggleClass(), {
      signal: this._abortController.signal,
    })
  }

  /**
   * Переключаем классы у активных ссылок
   *
   * @protected
   */
  _toggleClass() {
    Link._links.forEach(({ link, activeClass }) => {
      const linkUri = new URL(link.href).pathname

      if (linkUri === this._router.getUri()) {
        link.classList.add(activeClass)
      } else {
        link.classList.remove(activeClass)
      }
    })
  }
}

...

const components = {
  homeLink: new Link({
    url: '/',
    html: 'Главная страница',
    attributes: { class: 'home' },
  }),

  aboutLink: new Link({
    url: '/about',
    html: 'О фреймворке',
    attributes: { class: 'framework' },
  }),
}

...

constructor() {
  super()

  // Установка компонентов
  this._setComponents(components)

  // Инициализируем шаблон
  this._init()
}

get _template() {
  return `
    <div class="main-layout">
      <header class="main-header">
        <div class="container">
          <div data-el="homeLink"><!-- homeLink --></div>
          <div data-el="aboutLink"><!-- aboutLink --></div>
        </div>
      </header>

      <main data-el="page"><!-- PageComponent --></main>

      <footer class="main-footer">
        <div class="container">Copyright 2023</div>
      </footer>
    </div>
  `
}

/**
 * Запросы к серверу
 *
 * Вольная реализация axios.
 */
export default class Response {
  // Используется для создания объекта класса
  static _initialization = false

  // Опции запроса
  _options = {}

  // Базовый урл запроса
  _baseUrl = ''

  /**
   * Создание запроса напрямую запрещен
   */
  constructor() {
    if (!Response._initialization) {
      throw new TypeError('Нельзя напрямую создать экземпляр данного класса')
    }
  }

  /**
   * Создание запроса
   *
   * @param options
   * @returns {Response}
   */
  static create(options = {}) {
    // Создаем объект класса
    Response._initialization = true
    const response = new Response()
    Response._initialization = false

    // Получаем базовый урл
    response._baseUrl = options.baseUrl ?? ''

    // Удаляем базовый урл из опциональных параметров
    delete options.baseUrl

    // Получаем опциональные параметры
    response._options = options

    return response
  }

  /**
   * Запрос на сервер
   *
   * @param url
   * @param options
   * @returns {Promise<any>}
   * @private
   */
  _response = async (url, options = {}) => {
    try {
      const response = await fetch(url, options)

      return await response.json()
    } catch (e) {
      // eslint-disable-next-line
      if (process.env.NODE_ENV === 'development') console.log(e.message)
      throw e
    }
  }

  /**
   * Получение данных методом GET
   *
   * @param url
   * @returns {Promise<*>}
   */
  get(url = '') {
    url = new URL(url, this._baseUrl)

    return this._response(url.href, this._options)
  }

  /**
   * Получение данных методом POST
   *
   * @param url
   * @param data
   * @returns {Promise<*>}
   */
  post(url = '', data = {}) {
    url = new URL(url, this._baseUrl)

    this._options = {
      ...this._options,
      method: 'post',
      body: data,
    }

    return this._response(url.href, this._options)
  }
}

import Response from '@/core/Response' // подобие axios

// Подготовительные POST запросы
const apiClientPost = Response.create({
  baseUrl: process.env.API_URL, // смотреть файл development.env или production.env
  credentials: 'omit',
  headers: {
    'Content-Type': 'application/json; charset=UTF-8',
  },
})

// Подготовительные GET запросы
const apiClientGet = Response.create({
  baseUrl: process.env.API_URL, // смотреть файл development.env или production.env
  credentials: 'omit',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
})

export default {
  /**
   * Добавление продукта
   *
   * @param data
   * @returns {*}
   */
  addProducts(data) {
    return apiClientPost.post('/products/add', data)
  },

  /**
   * Получение продуктов
   *
   * @returns {*}
   */
  loadProducts() {
    return apiClientGet.get('/products')
  },
}

import ProductService from '@/services/ProductService'

const { addProducts, loadProducts } = ProductService

const products = await loadProducts()
const res = await addProducts(JSON.stringify({ name: 'Product new', type: 'discount' }))

/**
 * Менеджер состояний
 *
 * Вольная реализация Redux.
 */
export default class Store {
  /**
   * Редьюсеры
   *
   * @type {[]}
   * @protected
   */
  _reducers = []

  /**
   * Состояния
   *
   * @type {{}}
   * @protected
   */
  _state = {}

  /**
   * События
   *
   * @type {{}}
   * @protected
   */
  _listeners = {}

  /**
   * Создание хранилища
   *
   * @param reducers
   * @param initState
   */
  constructor(reducers = [], initState = {}) {
    this._reducers = reducers
    this._state = initState
  }

  /**
   * Получить состояние
   *
   * @param name
   * @returns {{}|*}
   */
  getState(name = '') {
    if (this._state[name]) {
      return this._state[name]
    }

    return this._state
  }

  /**
   * Установить состояние
   *
   * @param newState
   * @protected
   */
  _setState(newState) {
    this._state = newState
  }

  /**
   * Подписки на события
   *
   * @param name
   * @param callback
   * @returns {(function(): void)|*}
   */
  subscribe(name, callback) {
    if (!this._listeners[name]) {
      this._listeners[name] = []
    }

    this._listeners[name].push(callback)

    return () => {
      this._listeners = this._listeners[name].filter(
        listener => listener !== callback,
      )
    }
  }

  /**
   * Вызов события
   *
   * @param action
   */
  dispatch(action) {
    for (const reducer of this._reducers) {
      const previousState = this.getState()
      const newState = reducer(previousState, action)

      if (newState) {
        this._setState(newState)

        const listeners = this._listeners[action.type]

        if (listeners) {
          const currentState = this.getState()

          for (const listener of listeners) {
            listener(currentState)
          }
        }
      }
    }
  }
}

import BidService from '@/services/BidService' // запросы заявок

const { loadBids } = BidService // получение заявок

export const REFRESH_BIDS = 'REFRESH_BIDS' // для обновления заявок

/**
 * Обновление заявок
 *
 * @param bids
 * @returns {{bids, type: string}}
 */
export const refreshBids = bids => ({
  type: REFRESH_BIDS,
  bids,
})

/**
 * Получение заявок
 *
 * @type {*}
 */
const bids = await loadBids()

/**
 * Состояние заявок
 *
 * @type {{bids: *, countBids}}
 */
export const bidsState = {
  bids,
  countBids: bids.length,
}

/**
 * Reducer заявок
 *
 * @param previousState
 * @param action
 * @returns {*|null}
 */
export const bidsReducer = (previousState, action) => {
  switch (action.type) {
    case REFRESH_BIDS:
      previousState.bids = action.bids

      return {
        ...previousState,
      }

    default:
      return null
  }
}

export default bidsReducer

import Store from '@/core/Store' // хранилище типа Redux
import { bidsReducer, bidsState } from '@/reducers/bidsReducer' // reducer для заявок

// Объединяем все reducer
const reducers = [bidsReducer]

// Объединяем все состояния
const initState = {
  ...bidsState,
}

// Регистрация хранилища состояний
const store = new Store(reducers, initState)
const storeKey = Symbol.for('storeKey')

// Не обязательно использовать globalThis можно просто вернуть store
// globalThis в дальнейшем может пригодиться для отладки
globalThis[storeKey] = store

export default globalThis[storeKey]

import store from '@/store'

store.subscribe(REFRESH_BIDS, () => {
  // Здесь происходит какая то логика.
  // Данный колбэк сработает при вызове редьюсера у которого параметр type будет равен REFRESH_BIDS.
})

const data = [1,2,3,4,5]

store.dispatch(refreshBids(data))