Fixed config

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>
 

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",
-    "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,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",
-    "typedoc": "^0.23.24",
-    "typescript": "^4.9.4"
+    "css-loader": "^6.7.3",
+    "html-webpack-plugin": "^5.5.0",
+    "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: 'index.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',
+  //   }),
+  // ],
+};