chore: release 5.0.0 (main-beta -> main)

.commitlintrc.yml

@@ -31,13 +31,16 @@ rules:
     -
       - esl-a11y-group
       - esl-alert
+      - esl-anchornav
       - esl-animate
       - esl-base-element
       - esl-carousel
+      - esl-drag-to-scroll
       - esl-event-listener
       - esl-footnotes
       - esl-forms
       - esl-image
+      - esl-image-utils
       - esl-media
       - esl-media-query
       - esl-mixin-element
@@ -59,6 +62,9 @@ rules:
       - patch
       - deps
       - deps-dev
-      - lint
+      - eslint-plugin
+      - eslint-config
       - e2e
       - ci
+      # Deprecated scopes:
+      - lint

.github/dependabot.yml

@@ -25,9 +25,6 @@ updates:
       prefix: "chore"
       include: "scope"
     groups:
-      typescript-eslint:
-        patterns:
-          - "@typescript-eslint/*"
       commit-lint:
         patterns:
           - "@commitlint/*"

.github/workflows/validate.yml

@@ -67,4 +67,4 @@ jobs:
       - name: Install NPM Dependencies
         run: npm ci
       - name: Run ESLint Plugin Tests
-        run: npm run test -w eslint
+        run: npm run test -w eslint-plugin

.gitignore

@@ -12,7 +12,8 @@ node_modules
 *.tgz
 target
 site/dist
-eslint/dist
+
+eslint-plugin/dist
 
 # Generated surces
 /modules

.releaserc.yml

@@ -23,7 +23,7 @@ branches:
 # Release configuration
 plugins:
   - - "@semantic-release/commit-analyzer"
-    - preset: angular
+    - preset: conventionalcommits
       releaseRules:
         - type: style
           release: patch
@@ -49,7 +49,7 @@ plugins:
           release: patch
 
   - - "@semantic-release/release-notes-generator"
-    - preset: angular
+    - preset: conventionalcommits
       parserOpts:
         noteKeywords:
           - BREAKING CHANGE
@@ -68,14 +68,17 @@ plugins:
         - package.json
         - package-lock.json
         - site/package.json
-        - eslint/package.json
+        - eslint-config/package.json
+        - eslint-plugin/package.json
       message: "chore(release): ${nextRelease.version} \n\n${nextRelease.notes}"
 
   - - "@semantic-release/github"
     - assets:
         - path: ./exadel-esl-*.tgz
           label: Released Core NPM Tarball
         - path: ./exadel-eslint-plugin-esl-*.tgz
-          label: Released ESLint NPM Tarball
+          label: Released ESLint Plugin NPM Tarball
+        - path: ./exadel-eslint-config-esl-*.tgz
+          label: Released ESLint Config NPM Tarball
         - path: CHANGELOG.md
           label: Changelog

README.md

@@ -40,7 +40,6 @@ to meet your project needs.
 
 ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work 
 well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. 
-ESL can also work on IE11 when the whole list of polyfills is provided (see [Browser support & Polyfills](https://github.com/exadel-inc/esl/blob/HEAD/docs/BROWSER_SUPPORT.md) for more details).
 
 ## Library Structure
 
@@ -69,7 +68,8 @@ with excellent performance.
 - ##### [ESL Alert](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-alert/README.md)
 - ##### [ESL Animate](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-animate/README.md)
 - ##### [ESL Footnotes](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-footnotes/README.md) (beta)
-- ##### [ESL Image](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
+- ##### [ESL Image Utils](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image-utils/README.md)
+- ##### [ESL Image (Legacy)](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
 - ##### [ESL Media](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-media/README.md)
 - ##### [ESL Panel](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel/README.md)
 - ##### [ESL Panel Group](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel-group/README.md)

docs/BROWSER_SUPPORT.md

@@ -6,17 +6,11 @@ Exadel Smart Library does not have dependencies but uses the following list of n
 
 - ECMAScript 6 features
     - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) (no Iterable Objects support required)
-      ([ESL polyfill](../src/polyfills/list/es6.array.from.ts) provided)
     - [Array.prototype.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.include](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-      ([ESL polyfill](../src/polyfills/list/es6.array.includes.ts) provided)
     - [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
-      ([ESL polyfill](../src/polyfills/list/es6.object.is.ts) provided)
     - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) (accurate polyfill required)
-      ([ESL polyfill](../src/polyfills/list/es6.object.assign.ts) provided)
     - [ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - Web API
     - [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) constructor + `preventDefault` polyfill
@@ -30,25 +24,6 @@ Exadel Smart Library does not have dependencies but uses the following list of n
     - [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
     - [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
-All of them are fully supported by modern browsers such as Chrome, Firefox, Safari or Edge (>43).
+All of them are fully supported by modern browsers such as Chrome, Firefox, Safari (>13) or Edge (>43).
 
-In order to make ESL work in older browsers, you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (for older versions of Edge and Safari).
-
-Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.
-
-See more details on what polyfill approach might look like in the demo pages source code.
-
-Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under [polyfills](../src/polyfills) directory:
-  - ECMA Script 5: output shim (`HTMLElement` constructor call) - [es5-target-shim.ts](../src/polyfills/es5-target-shim.ts)
-  - ECMA Script 5: IE11, Edge <14 support - [polyfills.es5.ts](../src/polyfills/polyfills.es5.ts)
-    - `Object.is`, `Object.assign` 
-    - `Array.from`, `Array.prototype.find`, `Array.prototype.findIndex`, `Array.prototype.index`
-    - `Event`, `CustomEvent`, `MouseEvent`, `KeyboardEvent`, `FocusEvent` shim
-    - `Event.prototype.preventDefault` shim
-    - `Element.prototype.closest`
-    - `DOMTokenList.prototype.toggle`
-    - *Note: there is no promise polyfill embedded*, use npm:[promise-polyfill](https://www.npmjs.com/package/promise-polyfill) or similar
-  - ECMA Script 6: DOM - [polyfills.es6.ts](../src/polyfills/polyfills.es6.ts)
-    - `Node.isConnected` 
-    - `KeyboardKey.prototype.key` 
-    - `Element.prototype.toggleAttribute` 
+In order to make ESL work in older browsers, you can use polyfill (for older versions of Safari).

docs/COMMIT_CONVENTION.md

@@ -84,7 +84,7 @@ You can increase the importance of the patch changes to the minor using the `MIN
 feat!: Hey I'm breaking something that already exist
 ```
 
-**Identify everything that break or change existing API or behaviour with the `BREACKING CHAGES:` list
+**Identify everything that break or change existing API or behavior with the `BREACKING CHAGES:` list
 ```text
 feat!: Hey I'm breaking something that already exist
 

docs/DEVELOPMENT.md

@@ -61,6 +61,7 @@ ESL codebase is written using TypeScript and LESS CSS-preprocessor.
 
 ESL uses the following tools to keep codebase quality
 - ESLint to lint scripts
+- Own ESLint shared configuration (see [eslint-config](../eslint-config) sub-package)
 - StyleLint to lint styles
 - Jest to run unit tests
 - CommitLint to check commit message format
@@ -112,9 +113,13 @@ ESL project consists of the following directories:
   - [🔧 webpack.config.js](../site/webpack.config.js) - webpack build file for demo pages
 
 
-- [📁 eslint](../eslint) - sub-package root for ESL ESLint plugin 
-  - [📁 src](../eslint/src) - ESLint plugin sources
-  - [📁 test](../eslint/test) - ESLint plugin tests
+- [📁 eslint-plugin](../eslint-plugin) - sub-package root for ESL ESLint plugin 
+  - [📁 src](../eslint-plugin/src) - ESLint plugin sources
+  - [📁 test](../eslint-plugin/test) - ESLint plugin tests
+
+- [📁 eslint-config](../eslint-config) - sub-package root for ESL ESLint shared configuration
+  - [📁 rules](../eslint-config/rules) - ESLint shared configuration rule sets
+  - [📄 index.js](../eslint-config/index.js) - ESLint shared configuration main file
 
 
 - [📁 build](../build) - library common build scripts

e2e/jest-puppeteer.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 if (!process.argv.includes('--no-autorun') && !process.env.PORT) {
   process.env.PORT = '3007';
 }
@@ -11,8 +9,11 @@ module.exports = {
     product: 'chrome',
     args: [
       '--no-sandbox',
-      '--disable-gpu',
       '--disable-setuid-sandbox',
+      '--hide-scrollbars',
+      '--force-device-scale-factor=1',
+      '--high-dpi-support=1',
+      '--disable-gpu',
       '--disable-background-timer-throttling',
       '--disable-backgrounding-occluded-windows',
       '--disable-renderer-backgrounding',

e2e/jest.config.js

@@ -1,18 +1,23 @@
 // Test env in dev mode produces a big amount of stdin/out listeners, so limit increased
 require('events').EventEmitter.defaultMaxListeners  = 50;
 
+// Cleanup diff output directory
+const rimraf = require('rimraf');
+rimraf.sync('./.diff');
+
+// Actual Jest configuration
 module.exports = {
   preset: 'jest-puppeteer',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.feature$': './transformer/gherkin.js'
+    '^.+\\.feature$': './src/transformer/gherkin.js'
   },
   roots: ['./tests/'],
   testRegex: ['(.+)\\.(spec|test)\\.ts$', '(.+).feature'],
   moduleFileExtensions: ['ts', 'js', 'feature'],
-  setupFilesAfterEnv: ['./setup/image.ts', './setup/scenarios.ts'],
+  setupFilesAfterEnv: ['./src/serializers/image-snapshot.ts', './src/scenarios.ts'],
   reporters: [
-    ['./reporters/reporter.js', {
+    ['./src/reporters/reporter.js', {
       diffDir: './.diff',
       outputPath: './.diff/README.md',
       outputPublishPath: './.diff/index.md'

e2e/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "4.18.1",
+  "version": "5.0.0-beta.42",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",
@@ -11,15 +11,20 @@
     "run:update:only": "jest -u --no-autorun",
     "run:tests:only": "jest --no-autorun",
     "run:server": "cd .. && cross-env-shell PORT=3007 npm run start:test --workspace=site",
-    "test": "eslint"
+    "test": "eslint \"**/*.ts\""
   },
   "dependencies": {
     "@types/jest-environment-puppeteer": "^5.0.6",
-    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/pixelmatch": "^5.2.6",
     "@types/puppeteer": "^7.0.4",
-    "jest-image-snapshot": "^6.4.0",
-    "jest-puppeteer": "^10.0.1",
-    "puppeteer": "^22.15.0",
+    "jest-puppeteer": "^10.1.4",
+    "pixelmatch": "^5.3.0",
+    "puppeteer": "^23.10.3",
+    "rimraf": "^6.0.1",
+    "sharp": "^0.33.5",
     "stucumber": "^0.19.0"
+  },
+  "peerDependencies": {
+    "@exadel/esl-website": "../site"
   }
 }

e2e/reporters/printers.js → e2e/src/reporters/printers.js

@@ -32,10 +32,10 @@ function printFiles(fileStat, basePath) {
       const statusTest = test.status === 'passed' ? ':white_check_mark:' : ':x:';
       const timeStr = test.time < 1000 ? `${test.time}ms` : `${test.time / 1000}s`;
 
-      text += `<tr><td>${test.name}:${test.title}</td><td>${statusTest}</td><td>${timeStr}</td></tr>\n`;
+      text += `<tr><td>${test.name}: ${test.title}</td><td>${statusTest}</td><td>${timeStr}</td></tr>\n`;
 
       if (test.status !== 'passed' && test.hasSnapshot) {
-        text += `<tr><td colspan="3"><img src="${resolveURL(basePath, test.snapshot)}" alt="Test Diff ${test.snapshot}"/></td></tr>`;
+        text += `<tr><td colspan="3"><img src="${resolveURL(basePath, `${test.dirPath}/${test.snapshot}`)}" alt="Test Diff ${test.snapshot}"/></td></tr>`;
       }
       if (test.status !== 'passed' && !test.hasSnapshot) {
         text += `<tr><td colspan="3">\n`;