Exadel Smart Library (ESL) - is the lightweight custom elements library that provide a set of super-flexible components


Keywords
esl, lightweight, typescript, flexible, web components, web components utils, custom elements, custom elements ts, component library, component-library, custom-elements, custom-elements-ts, dependency-free, exadel, web-components
License
MIT
Install
npm install @exadel/esl@3.0.3

Documentation

Exadel Smart Library

npm npm Downloads version build License

Exadel Smart Library (ESL) is a web components based library that gives you a set of lightweight and flexible custom elements to easily create basic UX modules and make your websites super fast.

Demo Site (draft)

Library Structure

Components

Form Components

Utilities


Installation Guide

  1. Preconditions:

    • Make sure you have all needed polyfills to support browsers from your browser-support list. See Browser support & Polyfills for details.
    • Use bundler to build your project. Currently, only ES6 modules are available for consumption.
  2. Install esl npm dependency

    npm i @exadel/esl --save
    
  3. Import Components/Modules you need.

    import '@exadel/esl/modules/esl-component/core';
    • core module entry usually represents main part of the module;
    • include optional sub-features directly. See component's documentation for details.
    import '@exadel/esl/modules/esl-media/providers/iframe-provider';
    • Some modules contain cumulative all entries.
    • Styles are distributed in two versions:
      • 'ready to use' core.css or core.less
      • mixin version core.mixin.less for custom tagname definition
  4. [Optional] Setup environment configuration, e.g. custom screen breakpoints.

    import {ESLScreenBreakpoints} from '@exadel/esl/modules/esl-media-query/core';
    
    // define XS screen breakpoint for up to 800px screen width
    ESLScreenBreakpoints.addCustomBreakpoint('XS', 1, 800); 
  5. Register components via register static method call

    ESLImage.register();

    You can pass custom tag name to 'register' function, but use this option only in an exceptional situation.

Browser support & Polyfills

Exadel Smart Library does not have dependencies but uses the following list of native browser features:

All of them are fully supported by modern browsers, such as Chrome, Firefox, Safari 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 (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 test-server examples.

Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under ./polyfills directory.


Roadmap

  • Interactive Documentation + demo site redesign
  • ESL Carousel component
  • UI Playground integration to demo site
  • More helpers and sugar of ESLBaseElement (event listener helpers and decorators)
  • Stable version of ESL Footnotes and ESL Popup components
  • Extension of esl-form elements (custom form base, helpers, validation and more)
  • Anchor Navigation component
  • ESLToast component
  • More components in the library

Development Information for contributors

If you are a part of ESL team or want to contribute to the project you can find useful information about the project processes and agreements here:


ESL Core Team: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko.

ESL Contributors: Aliaksandr Auseyeu, Anna Barmina, Anna-Mariia Petryk, Anastasiya Lesun, Andrey Belous, Dzianis Mantsevich, Liubou Masiuk, Natallia Harshunova, Yana Bernatskaya.

Exadel, Inc.