Okiba Core

🏅

Sharp collection of tools for front-end development, created with performance in mind. 🗡

Our primary concerns are: maximum FPS and minimum bundle size 🚀

You can visualize it as a bag full of ninja tools for you to pick and use to tackle your front-end challenges.

Okiba is:

A set of tools you can use separately.

It is meant to level-up and ease-in your web-development routines.

It's designed so that you can drop-in as much or as less you want, by importing just what you actually use, up to a single function level, so that your final bundle will stay slim.

It is always evolving and open to contributons from OSS peers.

Okiba is not:

A library, framework or language.

It is not meant to replace the tools you already have, but rather offer battle-tested solutions to common routine tasks; sometimes it offers a cheaper alternative.

It does not impose choiches and integrates smoothly with frameworks you already use.

We strive to achieve affidability and affordability.

Our granularity is fine

We export single units that you can import separately. ✨

This way tree-shake and uglification can work at their best.

Being dependency-free you always know what you're using and can look it up in our API, no surpises.

Our code is DRY and minimal

If something is common we abstract it away. 💡

We don't put something in until it is actually needed.

We strictly check for duplication and complexity, and take charge of some development pain in order to keep bundle size small.

Our seriousness level is high

Our quality checks are automated. 🤖

Metrics matter, so our CI tools help us by enforcing 100% coverage and A maintainability.

No line makes it into master if the overall code quality gets degraded.

We could state that our API is 100% documented, but we still have no tests in place to back this metric up... so we don't 🤡

Installation

You can grab all Okiba Core packages by using npx installer:

npx @okiba/core

Usage

Untranspiled code 🛑

Okiba Core packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

{
  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

Full API List:

arrays

Array utils for okiba js

arrayOrOne, castArray, spliceOne

class-utils

Utilities that operate on classes

mixin

component

Manages a DOM component, binds UI and recursively binds child components. Can be extended or instantiated

constructor, onDestroy, destroy

dom

Utilities to work with dom elements and selectors

byId, qs, qsa, on, off, eventCoords, offset, getElements, matches, isChildOf, delegate, createCustomEvent

drag-emitter

Emits drag events for all common pointers kinds (touch & mouse)

constructor, destroy

easings

Collection of easings to alter a value

event-emitter

Emits events that can be listened and unlistened to. Allows for a catch-all event which is always triggered.

on, off, emit, hasListeners, destroy

evented-component

A component that has events. Extends Component and composes with EventEmitter, inerithing both's method sets.

on, off, emit, destroy

functions

A collection of contextless utility functions

debounce

math

Collection of math functions

lerp, map, cap, distance, round

pool-system

Manages a dinamically grown pool of DOM Elements import PoolSystem from '@okiba/pool-system'

constructor, ensure, get, free, destroy

resource-loader

Manages loading of resources trough fetch to boost caching. Transparently relies on a WebWorker if possible to load on a separate thread.

load

search

Search utilities

binarySearch

store

A store module to implement state management. It allows registering to prop updates, as well as any update trough the catch-all callback.

constructor, set, get, getState, setState, reset, subscribe, unsubscribe

time-progress

Maps progress ovrer time, normalized between 0 and 1

constructor, update, reset, setProgress, setDirection, reverse

worker-utils

Set of useful functions to ease WebWorkers development

createWorker