Update 0.2.7

CHANGELOG.md

@@ -63,3 +63,7 @@ Tested in JS and React. Errors in work in React applications are revealed.
 ### 00.03.2023 - update 0.2.6
 
 - Added new theme creation mode.
+
+### 00.03.2023 - update 0.2.7
+
+- Switch to new webpack project builder.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.6
+## version ~ 0.2.7
 
 <a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
 
@@ -90,7 +90,7 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
 | 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                            |
+| Comment                   |                 Tested in Js applications and it works.                  |                                               Works only with a crutch in the form `setTimeout()`                                                |                            not yet available                            |                            not yet available                            |
 
 ## History
 

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## Версия ~ 0.2.6
+## Версия ~ 0.2.7
 
 <a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
 

example/example.scss

@@ -1,211 +0,0 @@
-@import '/src/main.scss';
-
-* {
-  font-size: 14px;
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-.body-example {
-  background: #000000c4;
-}
-
-.container {
-  margin: 0 auto;
-  width: 900px;
-
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
-
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.header {
-  width: 100%;
-  border-radius: 5px;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  background-color: #2a2f3b;
-  margin-bottom: 8px;
-
-  h1 {
-    font-size: 57px;
-    color: white;
-    font-family: 'Times New Roman', Times, serif;
-    margin: 40px 0 12px 0;
-  }
-
-  &__logoBox {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__logo {
-    width: 13%;
-    height: 16%;
-    border: 1px solid #525252;
-    border-radius: 50%;
-
-    margin: 22px 0 0 29px;
-  }
-
-  .navlist {
-    display: flex;
-    justify-content: space-around;
-    margin: 15px 0 30px 0;
-    padding: 0;
-    width: 230px;
-
-    li {
-      display: inline;
-      list-style: none;
-      text-decoration: none;
-
-      a {
-        color: white;
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
-
-.content {
-  margin-top: 15px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
-}
-
-.example-select {
-  width: 100%;
-  background-color: #5c5c5c;
-  border-radius: 5px;
-  margin: 15px 0 0 0;
-
-  &_title {
-    height: 45px;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    color: white;
-    padding: 20px 0 0 40px;
-    margin: 0 0 30px 0;
-    background-color: #2a2f3b;
-    font-size: 20px;
-  }
-  &_submit {
-    width: 200px;
-    height: 35px;
-    border-radius: 10px;
-    border: none;
-    margin-top: 20px;
-    margin: 20px 15px;
-    cursor: pointer;
-    transition: 1s;
-    -webkit-transition: 1s;
-    -moz-transition: 1s;
-    -ms-transition: 1s;
-    -o-transition: 1s;
-
-    &:hover {
-      background-color: #d7d7d7;
-      transition: 1s;
-      -webkit-transition: 1s;
-      -moz-transition: 1s;
-      -ms-transition: 1s;
-      -o-transition: 1s;
-    }
-  }
-
-  .layout-select {
-    margin: 15px;
-  }
-}
-
-code {
-  display: none;
-}
-
-pre {
-  background: #1e1e1e;
-  margin: 15px;
-  padding: 15px;
-  color: #88d0f7;
-  border-radius: 15px;
-  font-size: 16px;
-  line-height: 20px;
-}
-
-.code {
-  &__class,
-  &__var,
-  &__string,
-  &__keyword {
-    font-size: 16px;
-    line-height: 20px;
-  }
-  &__class {
-    color: #4ec9b0;
-  }
-
-  &__var {
-    color: #34a7ff;
-  }
-
-  &__string {
-    color: #ce9178;
-  }
-
-  &__keyword {
-    color: #5090ca;
-  }
-}
-
-.check-code {
-  width: 200px;
-  height: 35px;
-  cursor: pointer;
-  border: none;
-  border-radius: 10px;
-  margin: 20px 15px;
-  transition: all 1s;
-}
-
-.active {
-  display: block;
-}
-
-@media (max-width: 576px) {
-  .container {
-    width: 95%;
-  }
-
-  .header {
-    margin-top: 15px;
-    h1 {
-      font-size: 32px;
-    }
-  }
-
-  .example-select_title {
-    font-size: 14px;
-    height: 40px;
-  }
-}

index.js

@@ -1,3 +1,6 @@
 import { CGSelect } from './src/cg-select';
 
+let select = new CGSelect();
+select.disabled(true);
+
 export default CGSelect;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "source": "index.js",
   "main": "dist/index.js",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
@@ -10,10 +10,9 @@
   },
   "homepage": "https://cg-select.itguild.info",
   "scripts": {
-    "watch": "parcel watch",
+    "start": "npx webpack-dev-server --mode development",
-    "build": "parcel build",
+    "dev": "npx webpack --mode development",
-    "deploy": "gh-pages -d dist",
+    "build": "npx webpack --mode production"
-    "predeploy": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -24,17 +23,22 @@
     "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",
-    "prettier": "^2.7.1"
+    "sass": "^1.60.0",
+    "sass-loader": "^13.2.2",
+    "ts-loader": "^9.4.2",
+    "typedoc": "^0.23.28",
+    "typescript": "^5.0.2",
+    "webpack": "^5.77.0"
   },
   "dependencies": {
-    "@parcel/optimizer-css": "^2.8.0",
     "@types/prettier": "^2.7.2",
-    "gh-pages": "^4.0.0",
+    "css-loader": "^6.7.3",
-    "typedoc": "^0.23.24",
+    "html-webpack-plugin": "^5.5.0",
-    "typescript": "^4.9.4"
+    "style-loader": "^3.3.2",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
   },
   "keywords": [
     "select",

tsconfig.json

@@ -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. */
   }
 }

webpack.config.js

@@ -0,0 +1,37 @@
+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,
+  },
+  // devServer: {
+  //   open: true,
+  //   port: 5000,
+  // },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.s[ac]ss$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  // plugins: [
+  //   new HtmlWebpackPlugin({
+  //     template: path.resolve(__dirname, './test/index.html'),
+  //     filename: 'index.html',
+  //   }),
+  // ],
+};