XEER Framework

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 shell script $ npm i xeer-js #### From Source Clone the repository and install dependencies using your prefered package manager sh $ 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: sh $ 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