xeer-js

Javascript Framework

Usage no npm install needed!

<script type="module">
  import xeerJs from 'https://cdn.skypack.dev/xeer-js';
</script>

README


npm License: MIT Gzipped Size Compatibility ES5 =8-yellow" alt="Node Version >= 8" />

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

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