An experimental javascript framework aiming to be a complete prototyping framework .

XEER framework contains :

• Core Utils
  • Extended Collection utilities: chunk, omit, join, etc.
  • Function helpers: throttle, debounce, etc.
  • String analyzers and transformers.
  • Concise Type Checking: isNull, isObj, etc.
• DOM Utils
  • Flexible, Fool-Proof element/class/attribute/style CRUD
  • Painless, Predicable Event Handling
  • Optional native method wrappers for addEventListener, etc. for debugging or other purposes
• HTTP Client
  • Supports Promises and async/await
  • Rate Limitting
  • Request cancellation
• VirtualDOM
• Dynamic ViewModel Components ~~( React, Vue, Mithril, ... )~~

• Installation
  • Package Manager
  • From Source
• Usage
  • Node module
  • Bundled
• Extensions
  • How to use
• TODO

Installation

Package Manager

Simply use any package manager (npm, yarn, pnpm, ...) to install from npmjs.org

$ npm i xeer-js

From Source

Clone the repository and install dependencies using your prefered package manager

$ git clone https://github.com/kasra-sh/xeer-js.git
$ cd xeer-js
$ npm install

To regenerate extensions and bundles, make sure you have Parcel installed globaly:

$ pnpm bundle

Usage

Node module

Use any package manager (npm, yarn, pnpm, ...) to install from npmjs.org

$ npm i xeer-js

Bundled

Clone the repository and install dependencies using your prefered package manager

$ git clone https://github.com/kasra-sh/xeer-js.git
$ cd xeer-js
$ npm install
$ npm bundle

bundled files are generated in dist directory. xeer-bundle-es5.js supports IE9+ and xeer-bundle.js is for modern browsers supporting async/await syntax.

Extensions

Extensions are helper methods appended to prototypes which help make the code cleaner. For example X.addClass($('div'), 'container') will become $('div').$addClass('container'). Extension method names all have $ prepended to their names to prevent method overrides or duplication.

How to use

• If using a bundled version, extensions are enabled by default.

  <!-- Modern !-->
      <script src="xeer-bundle.js"></script>
  <!-- Legacy !-->
      <script src="xeer-bundle-es5.js"></script>
      <script>
        var obj = {
            ABC: "text1",
            ACD: "text2",
            BAR: 1
        }
        console.log(obj.$filter((v,k)=>k.$startsWith('A')));
        // Outputs object { ABC: "text1", ACD: "text2" }
      </script>
  <!-- ... !-->

• If using as module in a node project:

  // All extensions
  require("xeer-js/ext"); 
  
  // Stream processing extensions
  require("xeer-js/colelctions.ext");  
    
  // DOM extensions
  require("xeer-js/dom.ext");

TODO

• ViewModel Rendering
• Documentation