feat: add ESM version of library

.gitignore

@@ -3,3 +3,4 @@
 /.idea/
 *.DS_Store
 /temp/
+/esm/

.npmignore

@@ -0,0 +1,5 @@
+/.grunt/
+/node_modules/
+/.idea/
+*.DS_Store
+/temp/

README.md

@@ -19,6 +19,12 @@ Then include it in your source code:
 import getCssSelector from 'css-selector-generator';
 ```
 
+Or you can use the ESM version:
+
+```javascript
+import getCssSelector from 'css-selector-generator/esm';
+```
+
 ## How to use
 
 Simplest way to use it is to provide an element reference, without any options.

build/.gitignore

@@ -0,0 +1,2 @@
+*
+!package.json

build/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package.json

@@ -3,16 +3,23 @@
   "title": "CSS Selector Generator",
   "version": "3.4.5-0",
   "description": "JavaScript object that creates unique CSS selector for given element.",
-  "author": "Riki Fridrich <[email protected]> (http://fczbkk.com)",
+  "author": "Riki Fridrich <[email protected]> (https://fczbkk.com)",
   "license": "MIT",
+  "type": "module",
   "main": "build/index.js",
+  "exports": {
+    "./esm": "./esm/index.js"
+  },
+  "module": "./esm/index.js",
   "types": "types/index.d.ts",
   "scripts": {
     "test": "karma start ./tools/karma.conf.js",
     "dev": "npm run test -- --no-single-run --auto-watch",
-    "prebuild": "npm run lint:build && rimraf ./build",
-    "build": "webpack --config ./tools/webpack.build.js",
-    "lint": "eslint ./src/**/*.ts ./test/**/*.js ./tools/**/*.js --config .eslintrc.js",
+    "prebuild": "npm run lint:build",
+    "build": "npm run build:umd && npm run build:esm",
+    "build:umd": "webpack --config ./tools/webpack.build.js",
+    "build:esm": "tsc --project ./tsconfig.esm.json",
+    "lint": "eslint ./src/**/*.ts ./test/**/*.js ./tools/**/*.js --config .eslintrc.cjs",
     "lint:build": "npm run lint -- --max-warnings 0",
     "doc": "tsc ./src/*.ts --declaration --allowJs --emitDeclarationOnly --downlevelIteration --outDir types",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -37,7 +44,6 @@
     "karma-webpack": "^5.0.0",
     "mocha": "^9.1.3",
     "raw-loader": "^4.0.2",
-    "rimraf": "^3.0.2",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.2",
     "webpack": "^5.65.0",

test/complex.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 import {testSelector} from '../src/utilities-dom.ts'
 import html_code from './html/complex.html'
 

test/index.spec.js

@@ -1,6 +1,6 @@
 import {assert} from 'chai'
 import {testSelector} from '../src/utilities-dom.ts'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 
 describe('CssSelectorGenerator', function () {
 

test/memo.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {createMemo} from '../src/memo'
+import {createMemo} from '../src/memo.ts'
 
 describe('Memo', () => {
 

test/options-blacklist.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 
 describe('options: blacklist', function () {
 

test/options-combine-between-selectors.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 
 describe('options: combineBetweenSelectors', function () {
 

test/options-combine-within-selector.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 
 describe('options: combineWithinSelector', function () {
 

test/options-include-tag.spec.js

@@ -1,4 +1,4 @@
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 import {assert} from 'chai'
 
 describe('options: includeTag', function () {

test/options-max-number.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {sanitizeMaxNumber} from '../src/utilities-options'
+import {sanitizeMaxNumber} from '../src/utilities-options.ts'
 
 describe('options: maxNumber', () => {
 

test/options-whitelist.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 
 describe('options: whitelist', function () {
 

test/selector-attribute.spec.js

@@ -1,5 +1,5 @@
 import {assert} from 'chai'
-import getCssSelector from '../src'
+import getCssSelector from '../src/index.ts'
 import {getAttributeSelectors} from '../src/selector-attribute.ts'
 
 describe('selector - attribute', function () {

test/selector-nth-of-type.spec.js

@@ -1,6 +1,6 @@
 import {assert} from 'chai'
 import {getNthOfTypeSelector} from '../src/selector-nth-of-type.ts'
-import {getCssSelector} from '../src'
+import {getCssSelector} from '../src/index.ts'
 import {constructSelector} from '../src/utilities-selectors.ts'
 
 describe('selector - nth-of-type', function () {

tools/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

tsconfig.base.json

@@ -0,0 +1,18 @@
+{
+  "include": [
+    "./src/**/*.ts"
+  ],
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es6",
+    "allowJs": true,
+    "sourceMap": true,
+    "moduleResolution": "node",
+    "lib": [
+      "ES6",
+      "DOM",
+      "DOM.Iterable"
+    ]
+  }
+}

tsconfig.esm.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./esm"
+  }
+}

tsconfig.json

@@ -1,15 +1,3 @@
 {
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "module": "es6",
-    "target": "es6",
-    "allowJs": true,
-    "sourceMap": true,
-    "moduleResolution": "node",
-    "lib": [
-      "ES6",
-      "DOM",
-      "DOM.Iterable"
-    ]
-  }
+  "extends": "./tsconfig.base.json"
 }