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

.releaserc.yml

@@ -23,7 +23,7 @@ branches:
 # Release configuration
 plugins:
   - - "@semantic-release/commit-analyzer"
-    - preset: angular
+    - preset: conventionalcommits
       releaseRules:
         - type: style
           release: patch
@@ -46,7 +46,7 @@ plugins:
           release: patch
 
   - - "@semantic-release/release-notes-generator"
-    - preset: angular
+    - preset: conventionalcommits
       parserOpts:
         noteKeywords:
           - BREAKING CHANGE

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
 

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).

e2e/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.23",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",

eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/eslint-plugin-esl",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.23",
   "keywords": [
     "eslint",
     "eslint-plugin",
@@ -9,6 +9,10 @@
   "license": "MIT",
   "description": "Helper ESLint rules to find and migrate ESL (@exadel/esl) library deprecations",
   "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*.{js,ts,md}"
+  ],
   "scripts": {
     "prepare": "npm run build",
     "test": "jest",
@@ -18,12 +22,8 @@
   "dependencies": {
     "semver": "^7.6.2"
   },
-  "files": [
-    "dist/**/*"
-  ],
-  "types": "dist/index.d.ts",
   "peerDependencies": {
-    "@exadel/esl": "^4.0.0",
+    "@exadel/esl": "*",
     "eslint": ">=8.0.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.23",
   "private": false,
   "description": "Exadel Smart Library (ESL) is the lightweight custom elements library that provide a set of super-flexible components",
   "license": "MIT",
@@ -45,10 +45,14 @@
     "modules/esl-media/providers/**/*.js",
     "modules/esl-share/actions/**/*.js",
     "modules/esl-share/buttons/**/*.js",
+    "modules/esl-carousel/core.js",
+    "modules/esl-carousel/renderers/**/*.js",
+    "src/modules/lib.ts",
     "src/modules/esl-media/providers/**/*.ts",
     "src/modules/esl-share/actions/**/*.ts",
     "src/modules/esl-share/buttons/**/*.ts",
-    "src/modules/lib.ts",
+    "src/modules/esl-carousel/core.ts",
+    "src/modules/esl-carousel/renderers/**/*.ts",
     "polyfills/**/*.js",
     "src/polyfills/**/*.ts"
   ],

site/11ty/htmlmin.transform.js

@@ -12,7 +12,7 @@ const MINIFICATION_CFG = {
   ignoreCustomFragments: [
     /<%[\s\S]*?%>/,
     /<\?[\s\S]*?\?>/,
-    /<script\stype="text\/html"\s*[\s\S]*?<\/script>/i
+    /<script\s+[^>]*type="text\/(?:html|plain)"[^>]*>[\s\S]*?<\/script>/i
   ]
 };
 

site/11ty/sort.filter.js

@@ -1,31 +1,47 @@
 module.exports = (config) => {
-  /** Generic sort njk filter */
-  const createSortFilter = (comparer) => (values) => {
-    if (!Array.isArray(values)) {
-      console.error(`Unexpected values for sort filter: ${values}`);
-      return values;
-    }
-    return [...values].sort(comparer);
-  };
-
-  // Utils
+  /** Resolve date from item */
   const resolveDate = (item) => new Date(item.date).getTime();
+  /** Resolve date from item without fileUpdateDate fallback */
   const resolveMetaDate = (item) => item.data.date ? new Date(item.date).getTime() : Number.POSITIVE_INFINITY;
 
-  /** Comparer composer */
-  const compose = (...cmps) => (a, b) => cmps.reduce((res, cmp) => res || cmp(a, b), 0);
-
-  /** Name metadata comparer */
-  const nameComparer = (a, b) => a.data.name.localeCompare(b.data.name);
-  /** Order metadata comparer */
-  const orderComparer = (a, b) => (a.data.order || 0) - (b.data.order || 0);
   /** Date metadata comparer */
   const dateComparer = (a, b) => resolveDate(a) - resolveDate(b);
   /** Date metadata comparer (will not use file creation date) */
-  const dateComparerStrict = (a, b) => resolveMetaDate(a) - resolveMetaDate(b);
+  const metaDateComparer = (a, b) => resolveMetaDate(a) - resolveMetaDate(b);
+
+  /** Order metadata comparer */
+  const orderComparer = (a, b) => (a.data.order ?? 0) - (b.data.order ?? 0);
 
-  config.addFilter('sortByName', createSortFilter(nameComparer));
-  config.addFilter('sortByNameAndOrder', createSortFilter(compose(orderComparer, nameComparer)));
-  config.addFilter('sortByDate', createSortFilter(dateComparer));
-  config.addFilter('sortByDateStrict', createSortFilter(dateComparerStrict));
+  /** Abstract string comparer */
+  const stringComparer = (field) => (a, b) => {
+    const aField = a.data[field] || '';
+    const bField = b.data[field] || '';
+    return aField.localeCompare(bField, 'en');
+  };
+
+  /** Build comparer for field */
+  const buildComparer = (field) => {
+    switch (field) {
+      case 'date':
+        return dateComparer;
+      case 'meta-date':
+        return metaDateComparer;
+      case 'order':
+        return orderComparer;
+      default:
+        return stringComparer(field);
+    }
+  };
+
+  /** Comparer composer */
+  const compose = (...comparers) => (a, b) => comparers.reduce((res, cmp) => res || cmp(a, b), 0);
+
+  config.addFilter('sortBy', (values, ...fields) => {
+    if (!Array.isArray(values)) {
+      console.error(`Unexpected values for sort filter: ${values}`);
+      return values;
+    }
+    const comparers = fields.map(buildComparer);
+    return [...values].sort(compose(...comparers));
+  });
 };

site/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exadel/esl-website",
-  "version": "4.17.1",
+  "version": "5.0.0-beta.23",
   "private": true,
   "description": "ESL Website source",
   "homepage": "https://esl-ui.com/",
@@ -37,15 +37,12 @@
     "@juggle/resize-observer": "^3.4.0",
     "@types/prismjs": "^1.26.4",
     "@types/smoothscroll-polyfill": "^0.3.4",
-    "@webcomponents/custom-elements": "1.6.0",
     "clean-css-cli": "^5.6.3",
     "html-minifier-terser": "^7.2.0",
     "image-size": "^1.1.1",
-    "intersection-observer": "^0.12.2",
     "js-yaml": "^4.1.0",
     "out-url": "^1.2.2",
     "prismjs": "^1.29.0",
-    "promise-polyfill": "^8.3.0",
     "smoothscroll-polyfill": "^0.4.4",
     "ts-loader": "^9.5.1",
     "webpack": "^5.92.1",

site/src/common/card.less

@@ -0,0 +1,17 @@
+.card {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 100px;
+  flex-direction: column;
+  background: #fff;
+  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.3);
+
+  &-image {
+    flex: 0 0 auto;
+  }
+  &-content {
+    flex: 1 1 auto;
+  }
+}

site/src/common/helpers.less

@@ -100,6 +100,10 @@
     margin-left: 2rem !important;
     margin-right: 2rem !important;
   }
+  &-6 {
+    margin-left: 2.5rem !important;
+    margin-right: 2.5rem !important;
+  }
   &-auto {
     margin-right: auto !important;
     margin-left: auto !important;