Compare commits

..

49 Commits

Author SHA1 Message Date
9ed0cb3124 Merge https://github.com/apuc/cg-select 2023-10-04 18:36:56 +03:00
5abd09f9d5 Merge pull request #41 from apuc/fix-request-data
Fix request data
2023-10-04 18:28:06 +03:00
d5bbec2b7f added new options in select 2023-10-04 18:26:51 +03:00
49478b316c Create new branch 2023-10-04 14:18:35 +03:00
5c17582f43 Update READMERU.md 2023-06-13 07:01:26 +03:00
92e1cfbe93 Update README.md 2023-06-13 06:59:49 +03:00
8fe132d7d1 Fix readme 2023-04-25 12:40:13 +03:00
6f4a7d23db Fixed Readme 2023-04-25 12:33:26 +03:00
75eed30d19 Update 0.3.12 2023-04-24 20:36:31 +03:00
2f69e4fbbf Update 0.3.12 2023-04-24 20:24:32 +03:00
913f9b1879 Изменил(а) на 'READMERU.md' 2023-04-20 12:26:46 +03:00
9b056cd0df Изменил(а) на 'README.md' 2023-04-20 12:26:06 +03:00
a92ec260ac Изменил(а) на 'READMERU.md' 2023-04-20 12:17:14 +03:00
3c5be8445f Изменил(а) на 'README.md' 2023-04-20 12:15:51 +03:00
da1a41daaa Update Readme 2023-04-17 17:09:57 +03:00
71df31eda9 Update 0.3.11 2023-04-12 15:26:52 +03:00
37bb4d148b Merge pull request #40 from apuc/test-webpack-build
Fixed import select(cdn)
2023-04-11 15:20:12 +03:00
798024d05c Fixed import select(cdn) 2023-04-11 15:19:42 +03:00
f8e76ba5ec Merge pull request #39 from apuc/test-webpack-build
New update 0.3.0
2023-04-06 15:16:04 +03:00
72fdcb6c0b Fix docs 2023-04-06 15:15:24 +03:00
b2c1abf54e New update 0.3.0 2023-04-06 15:14:30 +03:00
e89a20593c testing webpack 2023-04-05 22:05:49 +03:00
570c7f5512 fix 0.2.71 2023-04-04 17:33:14 +03:00
197a5f25c8 Fixed config 2023-03-31 15:02:52 +03:00
70fc08523e Update 0.2.7 2023-03-31 14:51:02 +03:00
b0b02bc105 Update 0.2.6 2023-03-22 21:50:03 +03:00
4df0bb1897 Update 0.2.5 2023-02-27 17:42:07 +03:00
11473e288a Update 0.2.32 2023-02-08 15:21:51 +03:00
Max
3b56254919 Merge https://github.com/apuc/cg-select 2023-01-20 19:22:58 +03:00
136a6bc6e5 pull 30.12 2022-12-30 23:20:33 +03:00
03269cc99f Pull in main repo 2022-12-27 20:09:25 +03:00
d8993da744 Update in main brench 2022-12-22 15:57:06 +03:00
864783aaf8 Update README.md 2022-12-20 15:04:10 +03:00
0a44732782 Pull on main rep 2022-12-20 14:57:21 +03:00
970d84b131 Pull on home directory 2022-11-18 19:25:21 +03:00
6416a42781 Pull in fixed conflict 2022-11-18 12:18:25 +03:00
0fff32cbed Update cg-dropdown.js 2022-11-17 21:19:46 +03:00
6cb388d959 Update index.html 2022-11-17 21:17:21 +03:00
815d92f71d Update index.js 2022-11-17 21:16:25 +03:00
c30b8faf09 Update ExemplePage.scss 2022-11-17 21:15:10 +03:00
2a53537df2 Update index.html 2022-11-17 21:13:02 +03:00
c25d983a02 Fixed search method 2022-11-15 17:42:10 +03:00
fc67642d10 Update index.js 2022-11-15 14:23:53 +03:00
827b684fd3 Update nativSelect.scss 2022-11-14 19:02:28 +03:00
fdb3c73588 Update main.scss 2022-11-14 19:01:03 +03:00
22e9b7692c Update cg-dropdown.js 2022-11-14 18:58:35 +03:00
dafbe807da Update README.md 2022-11-14 13:37:57 +03:00
461578abe7 Update package.json 2022-11-14 13:22:15 +03:00
e1055e171a Update package.json 2022-11-14 13:19:20 +03:00
14 changed files with 9599 additions and 4462 deletions

3
.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
node_modules
dist
.parcel-cache
test

View File

@ -60,6 +60,34 @@ Tested in JS and React. Errors in work in React applications are revealed.
- Fixed bugs.
- Changed structure.
### 00.03.2023 - update 0.2.6
### 01.03.2023 - update 0.2.6
- Added new theme creation mode.
### 01.03.2023 - update 0.2.7
- Switch to new webpack project builder.
##### 04.03.2023 - fix 0.2.71
- Select import fixed.
### 06.03.2023 - update 0.3.0
- Completely redesigned assembly to webpack and completed the transition to a new platform.
- Assembly bugs fixed
##### 04.03.2023 - fix 0.3.1
- Fixed import select.
##### 04.03.2023 - fix 0.3.12
- Optimized code.
- Added error messages when using public methods.
### 04.10.2023 - update 0.3.2
- Added the ability to set the name attribute for further sending data to the server. (\*nameSelect: string)
- Added a function to POST a request to the server when selecting an item. (\*getRequestUrl: string)
- Optimized code.

View File

@ -1,8 +1,8 @@
# CG-SELECT
## version ~ 0.2.6
## version ~ 0.3.2
<a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
This component allows you to create a custom select. It offers more flexible customization and use of select.
Customization, multi-selection and live search by elements are available.
@ -19,10 +19,22 @@ Customization, multi-selection and live search by elements are available.
## Installation
#### NPM
```
npm i cg-select
```
#### CDN
```
<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
```
#### PHP
Repository: <a href="https://git.itguild.info/apuc/php-cg-select-v2">PHP cg-select package integration</a>
## Usage
### To create a component, you need:
@ -67,6 +79,74 @@ const dropdown = new CGSelect({
});
```
### An example of initialization a CGSelect in React.
```javascript
import { useEffect } from 'react';
import CGSelect from 'cg-select';
const App = () => {
useEffect(() => {
const drop = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
}, []);
return (
<div className="App">
<button className="cg-dropdown cg-dropdown_selector"></button>
</div>
);
};
```
### An example of initialization a CGSelect in Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Example of different selects
<a href="https://cg-select.itguild.info/">View live example</a>
@ -87,13 +167,17 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
## Compatibility
| Application Compatibility | JS | React | Angular | Vue |
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Comment | Tested in Js applications and it works. | Works only with a crutch in the form `setTimeout()` | not yet available | not yet available |
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/yes.png"></img> |
| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | The select is initiated inside the `mounted() `hook |
## History
16.12.2022 - release version 0.1.0!
20.01.2023 - upgrade to version 0.2.1
06.03.2023 - upgrade to version 0.3.0

View File

@ -1,8 +1,8 @@
# CG-SELECT
## Версия ~ 0.2.6
## Версия ~ 0.3.2
<a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
<a href="https://git.itguild.info/apuc/cg-select/src/branch/master/README.md">English README</a>
Этот компонент позволяет вам создать пользовательский Select. Он предлагает более гибкую настройку и использование select.
Доступна кастомизация, multi-selection, живой поиск по элементам и многое другое.
@ -19,10 +19,22 @@
## Установка
#### NPM
```
npm i cg-select
```
#### CDN
```
<script src="https://cdn.itguild.info/items/cg-select/latest/main.js"></script>
```
#### PHP
Репозиторий: <a href="https://git.itguild.info/apuc/php-cg-select-v2">Интеграция пакета cg-select для PHP</a>
## Использование
### Для создания компонента необходимо:
@ -68,6 +80,74 @@ const dropdown = new CGSelect({
});
```
### Пример инициализации CGSelect в React.
```javascript
import { useEffect } from 'react';
import CGSelect from 'cg-select';
const App = () => {
useEffect(() => {
const drop = new CGSelect({
selector: '.cg-dropdown_selector',
placeholder: 'Выберите авто',
items: [
'BMW',
{
id: '213sade',
title: 'Opel',
value: 1,
},
'Mersedes',
'MAN',
'Ferari',
],
});
}, []);
return (
<div className="App">
<button className="cg-dropdown cg-dropdown_selector"></button>
</div>
);
};
```
### Пример инициализации CGSelect в Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Примеры различных вариантов выбора.
<a href="https://cg-select.itguild.info/">Рабочий пример</a>
@ -88,11 +168,13 @@ const dropdown = new CGSelect({
| Совместимость в приложениях | JS | React | Angular | Vue |
| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
| Комментарий | Протестировано в Js приложениях | Работает только с костылем в виде `setTimeout()` | пока недоступно | пока недоступно |
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/yes.png"></img> |
| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | Инициация селекта происходит внутри хука `mounted()` |
## История
16.12.2022 - release version 0.1.0!
20.01.2023 - upgrade to version 0.2.1
06.03.2023 - upgrade to version 0.3.0

View File

@ -62,7 +62,7 @@
</a>
<a href="#version--0231" id="version--0231" style="color: inherit; text-decoration: none">
<h2>version ~ 0.2.6</h2>
<h2>version ~ 0.3.12</h2>
</a>
<p>
This component allows you to create a custom select. It offers more flexible

View File

@ -1,3 +1,3 @@
import { CGSelect } from './src/cg-select';
import CGSelect from './src/cg-select';
export default CGSelect;

13618
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,8 +1,8 @@
{
"name": "cg-select",
"version": "0.2.6",
"version": "0.3.2",
"source": "index.js",
"main": "dist/index.js",
"main": "dist/main.js",
"description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
"author": {
"name": "CraftGroup",
@ -10,10 +10,9 @@
},
"homepage": "https://cg-select.itguild.info",
"scripts": {
"watch": "parcel watch",
"build": "parcel build",
"deploy": "gh-pages -d dist",
"predeploy": "npm run build"
"start": "npx webpack-dev-server --mode development",
"dev": "npx webpack --mode development",
"build": "npx webpack --mode production"
},
"repository": {
"type": "git",
@ -24,17 +23,25 @@
"url": "https://github.com/apuc/cg-select/issues"
},
"devDependencies": {
"@parcel/transformer-sass": "^2.7.0",
"jsdoc": "^4.0.0",
"parcel": "^2.7.0",
"prettier": "^2.7.1"
},
"dependencies": {
"@parcel/optimizer-css": "^2.8.0",
"@babel/core": "^7.21.4",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/preset-env": "^7.21.4",
"@babel/preset-typescript": "^7.21.4",
"@types/prettier": "^2.7.2",
"gh-pages": "^4.0.0",
"typedoc": "^0.23.24",
"typescript": "^4.9.4"
"babel-loader": "^9.1.2",
"css-loader": "^6.7.3",
"html-webpack-plugin": "^5.5.0",
"jsdoc": "^4.0.0",
"prettier": "^2.7.1",
"sass": "^1.60.0",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2",
"ts-loader": "^9.4.2",
"typedoc": "^0.23.28",
"typescript": "^5.0.2",
"webpack": "^5.77.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.13.2"
},
"keywords": [
"select",

View File

@ -32,7 +32,7 @@ import { CustomTheme, CustomThemeJson } from 'components/theme/theme.interface';
* @description This class implements the functionality of a custom select, with customization capabilities.
* @author Ovsyanikov Maxim
*/
export class CGSelect implements ICgSelect {
export default class CGSelect implements ICgSelect {
selector?: string;
selected?: string;
placeholder?: string;
@ -46,6 +46,8 @@ export class CGSelect implements ICgSelect {
label?: string;
styles?: IStyle;
event?: string;
nameSelect?: string;
getRequestUrl?: string;
url?: string;
multiselect?: boolean;
multiselectTag?: boolean;
@ -95,6 +97,11 @@ export class CGSelect implements ICgSelect {
* @type {Element | null}
*/
private buttonAction?: Element | null;
/**
* Array for request
* @type {IItems}
*/
private forUrlSelectedItems: IItems[] = [];
/**
* @param {ICgSelect} setting Object accepting select settings.
@ -113,6 +120,8 @@ export class CGSelect implements ICgSelect {
nativeSelectMode: true/false,
listDisplayMode: true/false,
language: 'ru/en',
nameSelect: "titleYouSelect";
getRequestUrl: "/endpoint/123";
styles: {
head: {
background: '...',
@ -130,10 +139,14 @@ export class CGSelect implements ICgSelect {
* }
*/
constructor(setting: ICgSelect) {
if (setting) {
this.init(setting);
this.render();
this.closeSelectClick();
this.initEvent();
} else {
throw new Error('Specify settings!');
}
}
//Getters
@ -193,6 +206,8 @@ export class CGSelect implements ICgSelect {
styles,
label,
event,
nameSelect,
getRequestUrl,
selected,
placeholder,
theme,
@ -212,6 +227,8 @@ export class CGSelect implements ICgSelect {
this.styles = styles;
this.label = label;
this.event = event;
this.nameSelect = nameSelect;
this.getRequestUrl = getRequestUrl;
this.selected = selected;
this.placeholder = placeholder;
this.theme = theme;
@ -279,7 +296,7 @@ export class CGSelect implements ICgSelect {
}
const ulList = document.createElement('ul');
const nativeSelect = createNativeSelect();
const nativeSelect = createNativeSelect(this.nameSelect);
let inputSearch: HTMLInputElement;
let textNode: Text;
@ -380,7 +397,7 @@ export class CGSelect implements ICgSelect {
const response = await fetch(this.url!);
const dataUrl = await response.json();
const nativeSelect = createNativeSelect();
const nativeSelect = createNativeSelect(this.nameSelect!);
dataUrl.forEach((dataItem: IItems, index: number) => {
const item = {
@ -609,6 +626,17 @@ export class CGSelect implements ICgSelect {
select!.innerText = this.selectedItems.join(',');
}
}
if (this.getRequestUrl!) {
this.forUrlSelectedItems.push(item);
fetch(this.getRequestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
body: JSON.stringify(this.forUrlSelectedItems),
});
}
} else {
if (this.multiselectTag) {
const tagItem = document.getElementById(`tag-${index}-${item.id}`);
@ -618,6 +646,17 @@ export class CGSelect implements ICgSelect {
if (Array.isArray(this.selectedItems)) {
this.selectedItems.splice(checkIndex, 1);
this.indexes.splice(checkIndex, 1);
if (this.getRequestUrl! && this.forUrlSelectedItems.length > 0) {
this.forUrlSelectedItems.splice(checkIndex, 1);
fetch(this.getRequestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
body: JSON.stringify(this.forUrlSelectedItems),
});
}
nativeOptionMultiple(nativeOption, item.title, false);
}
}
@ -644,6 +683,16 @@ export class CGSelect implements ICgSelect {
option.classList.remove('active');
});
option.classList.add('active');
if (this.getRequestUrl!) {
fetch(this.getRequestUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
},
body: JSON.stringify(item),
});
}
}
clearSelect(select!, this.element!, selectedItemsClear);
@ -660,7 +709,7 @@ export class CGSelect implements ICgSelect {
private selectMode(nativeSelectMode: boolean) {
let win = window.outerWidth;
if (nativeSelectMode === true) {
if (nativeSelectMode) {
const select = this.element!.querySelector('.cg-select');
const list = this.element!.querySelector('.list');
const nativeSelect = this.element!.querySelector('.nativeSelect');
@ -792,11 +841,12 @@ export class CGSelect implements ICgSelect {
const textNoRezult = this.element!.querySelector('.noRezult');
const textNode = document.createTextNode(textInListSearch);
search!.setAttribute('placeholder', placeholder);
search!.setAttribute('placeholder', placeholder);
textNoRezult!.textContent = '';
textNoRezult!.appendChild(textNode);
} else {
throw new Error('You cannot change the language if it is not enabled searchMode!');
}
}
@ -807,20 +857,21 @@ export class CGSelect implements ICgSelect {
* @method buttonControl
*/
public buttonControl(button: Element, method: string) {
if (this.listDisplayMode) {
return;
}
if (!this.listDisplayMode) {
this.buttonAction = button!;
button.addEventListener('click', () => {
if (method.toLowerCase() === 'open') {
switch (method.toLowerCase()) {
case 'open':
this.open(true);
} else if (method.toLowerCase() === 'close') {
break;
case 'close':
this.close();
} else {
return;
break;
}
});
} else {
throw new Error('Sheet display enabled in listDisplayMode!');
}
}
/**
@ -832,7 +883,7 @@ export class CGSelect implements ICgSelect {
const select = this.element!.querySelector('.cg-select');
const nativeSelect = this.element!.querySelector('.nativeSelect');
if (value === true) {
if (value) {
this.element!.setAttribute('disabled', 'true');
nativeSelect!.setAttribute('disabled', 'true');
select!.classList.add('disabled');
@ -871,10 +922,8 @@ export class CGSelect implements ICgSelect {
*/
public deleteItem(index: number) {
if (this.category) {
console.log('can`t add item to category');
return;
throw new Error('Unable to remove item from category!');
}
const item = this.items[index];
this.items.splice(index, 1);
@ -897,8 +946,7 @@ export class CGSelect implements ICgSelect {
*/
public selectIndex(index: number) {
if (this.category) {
console.log('can`t add item to category');
return;
throw new Error('Unable to select item from category!');
}
const options = this.element!.querySelectorAll('.list__item') as NodeListOf<HTMLElement>;

View File

@ -5,10 +5,14 @@ import { ICreateBreadCrumb } from './create-element.interface';
* The method that creates the native select.
* @returns {HTMLSelectElement} Returns the created native select.
*/
export function createNativeSelect(): HTMLSelectElement {
export function createNativeSelect(nameSelect: string | undefined): HTMLSelectElement {
const nativeSelect = document.createElement('select');
nativeSelect.setAttribute('name', 'dataSelect');
if (nameSelect == undefined) {
nativeSelect.setAttribute('name', 'CgSelect');
} else {
nativeSelect.setAttribute('name', nameSelect!);
}
nativeSelect.classList.add('nativeSelect');
return nativeSelect;
}

View File

@ -75,6 +75,18 @@ export interface ICgSelect {
* @type {string}
*/
event?: string;
/**
* Optional parameter responsible for the native select attribute.
* @type {string}
*/
nameSelect?: string;
/**
* Optional parameter responsible for the sending address when selected in the select.
* @type {string}
*/
getRequestUrl?: string;
/**
* Required parameter (if no other way to get data (items) is specified),
* data that comes from the backend in the format { id: "", title: "", value: ""}.

View File

@ -6,18 +6,14 @@
/* Modules */
"module": "commonjs" /* Specify what module code is generated. */,
"rootDir": "./" /* Specify the root folder within your source files. */,
// "moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
"baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
"outDir": "./dist" /* Specify an output folder for all emitted files. */,
"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
"moduleResolution": "node",
"strict": true,
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}

50
webpack.config.js Normal file
View File

@ -0,0 +1,50 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
clean: true,
library: 'CGSelect',
libraryTarget: 'umd',
},
// devServer: {
// open: true,
// port: 5500,
// },
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { targets: 'defaults' }]],
plugins: ['@babel/plugin-proposal-class-properties'],
},
},
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
// plugins: [
// new HtmlWebpackPlugin({
// template: path.resolve(__dirname, './test/index.html'),
// filename: 'index.html',
// }),
// ],
};