create cdn-main

Fixed import select(cdn)

.babelrc

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

.gitignore

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

CHANGELOG.md

@@ -60,6 +60,23 @@ 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.

README.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.2.6
+## version ~ 0.3.11
 
 <a href="https://github.com/apuc/cg-select/blob/main/READMERU.md">ЧИТАТЬ НА РУССКОМ</a>
 
@@ -90,10 +90,12 @@ 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
 
 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

READMERU.md

@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## Версия ~ 0.2.6
+## Версия ~ 0.3.11
 
 <a href="https://github.com/apuc/cg-select/blob/main/README.md">English README</a>
 
@@ -96,3 +96,5 @@ const dropdown = new CGSelect({
 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

docs/index.html

@@ -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.1</h2>
           </a>
           <p>
             This component allows you to create a custom select. It offers more flexible

index.js

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

package.json

@@ -1,8 +1,8 @@
 {
   "name": "cg-select",
-  "version": "0.2.6",
+  "version": "0.3.11",
   "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.0.1",
+    "webpack-dev-server": "^4.13.2"
   },
   "keywords": [
     "select",

src/cg-select.ts

@@ -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;
@@ -130,10 +130,14 @@ export class CGSelect implements ICgSelect {
    * } 
    */
   constructor(setting: ICgSelect) {
-    this.init(setting);
-    this.render();
-    this.closeSelectClick();
-    this.initEvent();
+    if (setting) {
+      this.init(setting);
+      this.render();
+      this.closeSelectClick();
+      this.initEvent();
+    } else {
+      throw new Error('Specify settings!');
+    }
   }
 
   //Getters

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,53 @@
+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: {
+      name: 'CGSelect',
+      type: 'window',
+      export: 'default',
+    },
+  },
+  // 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',
+  //   }),
+  // ],
+};