# Core

# $

Get matches to specified selector or return parsed HTML

Wee.$('.js-element li');

[node, node, ...]

# Contextual

The context selection subsets the query to a more specific scope. This can result in a more limited and efficient traversal of the DOM.

Wee.$('li', '.js-element');

[node, node, ...]

# References

Pre-fetched elements can be selected by using the ‘ref:name’ format.

Wee.$('ref:element');

[node, node, ...]

Note: References can’t be chained like $('ref:element .child'). To scope a selection within a reference pass the ref selector as the context argument like $('.child', 'ref:element').

# Multiple

Multiple selectors can be concatenated with commas. You can even mix refs with standard selectors.

Wee.$('ref:element, .js-element li');

[node, node, ...]

# Parsing HTML

If HTML is provided it will be parsed and returned.

Wee.$('<div class="element" />');

[node]

# External selector engine

To use another query engine set the global WeeSelector variable. This variable can be set anywhere at any time but before Wee instantiation is ideal.

var WeeSelector = Sizzle;

# fn.extend

Extend existing controller with additional methods and properties

# Extend Controller

Wee.fn.extend('controllerName', {
    extendedPublicFunction: function() {
        this.finalPublicFunction('output');
    }
});

Wee.controllerName.extendedPublicFunction();

"Success"

# Extend Core

To extend the core pass a method object as the first argument. This can be done to add additional core methods or override default functionality.

Wee.fn.extend({
    addNumbers: function(num1, num2) {
        return num1 + num2;
    }
});

Wee.addNumbers(2, 4);

6

# fn.make

Create namespaced controller

Controllers serve as the wrapper for custom script. They can be created per page, section, or for specific reusable components. If placed in your build directory you easily create a well-organized, extensible structure.

# Options Object

# Public

Wee.fn.make('controllerName', {
    init: function() {
        return 'Initialized';
    }
});

Wee.controllerName.init();

"Initialized"

Note: To create a new instance of a controller use the following syntax: var instance = Wee.fn.controllerName();

# Private/Public

Private functions can be accessed from public methods by using this.$private.functionName(arguments) syntax. To call back into a public method from a private one use this.$public.functionName(arguments).

Also note that you have access to this.$get(), this.$set(), and this.$push() across both public and private methods. By default stored values are namespaced to the current controller scope. If you need to control global variables use Wee.$get(), Wee.$set(), and Wee.$push().

Wee.fn.make('controllerName', {
    init: function() {
        this.anotherPublicFunction('varName'); // Call public method

        return this.$private.privateFunction('varName'); // Call private method
    },
    anotherPublicFunction: function(key) {
        this.$set(key, 'Success');
    },
    finalPublicFunction: function(output) {
        console.log(output);
    }
}, {
    privateFunction: function(key) {
        return this.anotherPrivateFunction(key); // Call private method
    },
    anotherPrivateFunction: function(key) {
        var output = this.$get(key);

        this.$public.finalPublicFunction(output); // Call public method
    }
});

Wee.controllerName.init();

"Success"

# Constructor

The construct method is immediately executed on controller creation and is useful for setting variables or invoking additional methods.

Wee.fn.make('controllerName', {
    _construct: function() {
        this.publicVariable = 'Public Variable';

        this.init();
    }
});

Note: You can pass a config object to controller constructors.

Wee.fn.make('controllerName', {
    _construct: function(options) {
        this.publicVar = options.publicVar;
    }
}, {
    _construct: function(options) {
        this.privateVar = options.privateVar;
    }
}, {
    args: {
        publicVar: 'public',
        privateVar: 'private'
    }
});

console.log(Wee.controllerName.publicVar);
console.log(Wee.controllerName.privateVar);

"public"
"private"

var instance = Wee.fn.controllerName({
    publicVar: 'another public'
});

console.log(instance.publicVar);

'another public'

# Destructor

The destruct method is executed to perform additional clean up or other actions when the controller is destroyed using this.$destroy() or Wee.controllerName.$destroy() outside the controller.

Wee.fn.make('controllerName', {
    _destruct: function() {
        this.save();
    }
});

# Inheritance

You can easily leverage existing controllers to extend into new controllers by using ‘childController:parentController’ controller name syntax.

Wee.fn.make('parentName', {
    base: function() {
        // Base logic
    }
});

Wee.fn.make('childName:parentName', {
    init: function() {
        this.base();
    }
});

# $concat

Concatenate values into global storage

Wee.$concat('key', 1);
Wee.$concat('key', [2, 3], true);

[2, 3, 1]

# $diff

Generate a delta from two objects

Wee.$diff({
    key1: 'Don',
    key2: true,
    key3: {
        nested: true
    }
}, {
    key1: 'Don',
    key3: {
        nested: false
    },
    key4: 'new'
});

{
    key1: {
        after: "Don",
        before: "Don",
        type: "-"
    },
    key2: {
        after: undefined,
        before: true,
        type: "d"
    },
    key3: {
        nested: {
            after: false,
            before: true,
            type: "u"
        }
    },
    key4: {
        after: "new",
        before: undefined,
        type: "c"
    }
}

# $drop

Remove key or value from global array

# Key

Wee.$set('key', {
    key1: 'Don',
    key2: 'Draper'
});
Wee.$drop('key.key2');

{
    key1: 'Don'
}

# Value

Wee.$set('key', [1, 2, 3]);
Wee.$drop('key', 2);

[1, 3]

# $each

Execute function for each matching selection

# Options Object

# Simple

Wee.$each('ref:element', function(el, i) {
    // Callback logic
});

# Advanced

Wee.$each('ref:element', function(el, i) {
    // Callback logic
}, {
    reverse: true,
    scope: this
});

# $env

Get current environment or set current environment against specified object

# Set

The key values can either be strings for a direct match or a functions for more complex evaluation. If a function is provided the response should be a boolean. If no match is found the default environment value is used.

:: split-code

Wee.$env({
    prod: 'www.weepower.com',
    stage: 'stage.weepower.com'
});

'prod'

:::

# Get

Wee.$env();

'prod'

# $envSecure

Determine if the current environment is SSL encrypted

Wee.$envSecure();

true

# $equals

Compare two values for strict equality

Wee.$equals(1, 2);
Wee.$equals({
    key: true
}, {
    key: false
});
Wee.$equals([1, 2, 3], [1, 2, 3]);

false
false
true

# $exec

Execute specified function or controller method

Wee.$exec('controllerName:methodName');

Wee.$exec('controllerName:methodName', {
    scope: this,
    args: [
        'Hello',
        123
    ]
});

Wee.$exec(function() {
    //
});

Wee.$exec([
    'controllerName:methodName',
    'controllerName2:methodName2'
]);

# $get

Get global variable

Wee.$get('key');
Wee.$get('key', 'Fallback');
Wee.$get('key');
Wee.$get('key', 'Fallback', true);
Wee.$get('key');

null
Fallback
null
Fallback
Fallback

# Get All

Wee.$get();

{object}

# $has

Check if storage criteria is set

# Key

Wee.$set('key', {
    key1: 'Don'
});
Wee.$has('key.key1');

true

# Value

Wee.$set('key', [1, 2, 3]);
Wee.$has('key', 4);

false

# $isArray

Determine if value is an array

Wee.$isArray([
    'string',
    'string2'
]);

Wee.$isArray('string');

true
false

# $isFunction

Determine if value is a function

Wee.$isFunction({});
Wee.$isFunction('string');
Wee.$isFunction('controller:fn');
Wee.$isFunction(function() {});

false
false
true
true

# $isObject

Determine if value is an object

Wee.$isObject({});
Wee.$isObject('string');

true
false

# $isString

Determine if value is a string

Wee.$isString({});
Wee.$isString('string');

false
true

# $map

Translate items in an array or selection to new array

The callback receives the current element as well as the index.

# Array

Wee.$map([1, 2, 3], function(val) {
    return val + 1;
});

[2, 3, 4]

# Selection

Wee.$map('ref:element', function(el, i) {
    return $(el).text();
});

['text', 'text', ...]

# $merge

Extend object into global storage

Storage value or prepend value

Wee.$merge('key', {
    key1: 'value'
});
Wee.$merge('key', {
    key2: 'value2'
});

{
    key1: "value",
    key2: "value"
}

# $observe

Attach callback to data storage change

# Options Object

# Basic

Wee.$observe('key', function(data, type) {
    console.log(data);
}, {
    recursive: true
});

Wee.$set('key.nested', 5);

{
    nested: 5
}

# Advanced

Wee.$set('key', 1);
Wee.$observe('key', function(data, type, diff) {
    if (type == 'set' && diff.before === 1) {
        console.log(data);
    }
}, {
    diff: true,
    once: true,
    value: 2
});

Wee.$set('key', 2);

2

# $parseHTML

Create document fragment from an HTML string

var el = Wee.$parseHTML('<span class="testing">Testing</span>');
Wee.$hasClass(el.childNodes, 'testing');

# $push

Push value into global array

Wee.$push('key', 'Success');
Wee.$push('key', 'Success 2');

Wee.$get('key');
Wee.$get('key.0');

["Success", "Success 2"]
Success

# $serialize

Serialize

Wee.$serialize({
    key1: 123,
    key2: [
        'value 1',
        'value 2'
    ]
});

key1=123&key2[]=value+1&key2[]=value+2

Only the first level of the object is serialized.

# $set

Set global variable

# Simple

Wee.$set('key', 'Success');

"Success"

# Callbacks

Wee.$set('key', function() {
    return 5 * 5;
});

Wee.$set('key', 'controllerName:publicFunction', {
    scope: this,
    args: [
        'Hello',
        123
    ]
});

# $setRef

Add ref elements to datastore

Available data-ref values are pushed into the global storage for later retrieval. This method can be called after dynamic content is injected to ensure new refs are available for selection.

<div data-ref="element"></div>

Wee.$setRef();

$('ref:element');

<div data-ref="element"></div>

Note: This function is called by default on page load and after relevant DOM manipulation. Subsequent calls clear the cache for the provided context and reset the references.

# $setVar

Add metadata variables to datastore

# Single Value

Available data-set values are pushed into the global storage for later retrieval.

<div data-set="key" data-value="value"></div>

Wee.$setVar();

Wee.$get('key');

"value"

# Value Array

To push into an array instead of setting a single value append array brackets to the end of the key.

<div data-set="key[]" data-value="value1"></div>
<div data-set="key[]" data-value="value2"></div>
<div data-set="key[]" data-value="value3"></div>

Wee.$get('key');

["value1", "value2", "value3"]

# Simple Object

To create a keyed object you can pass keys into the array notation

<div data-set="obj.key1" data-value="value1"></div>
<div data-set="obj.key2" data-value="value2"></div>
<div data-set="obj.key3" data-value="value3"></div>

Wee.$get('obj');

{
    "key1": "value1",
    "key2": "value2"
    "key3": "value3"
}

# Complex Object

You can also nest objects by continuing the array notation.

<div data-set="obj.key1" data-value="value1"></div>
<div data-set="obj.key2.sub1" data-value="value2"></div>
<div data-set="obj.key2.sub2" data-value="value3"></div>

Wee.$get('obj');

{
    "key1": "value1",
    "key2": {
        "sub1": "value2",
        "sub2": "value2"
    }
}

# JSON

<div data-set="obj" data-value='{"key": true}'></div>

Wee.$get('obj.key');

true

This function is called by default on page load.

# $toArray

Cast value to array if it isn't one

Wee.$toArray(['test']);
Wee.$toArray('test');

["test"]
["test"]

# $trigger

Execute matching observed callbacks

Wee.$observe('key', function() {
    console.log('Success');
});

::: code-split

Wee.$trigger('key');

"Success"

:::

# $type

Determine the JavaScript type of an object

Wee.$type([
    'string',
    'string2'
]);
Wee.$type({});
Wee.$type('string');

array
object
string

# $unique

Create new array with only unique values from source array

Wee.$unique([1, 1, 2, 3, 3, 3, 4]);

[1, 2, 3, 4]

# $unobserve

Remove callback from data storage change

# Remove All

Wee.$unobserve();

# Remove Single

Wee.$unobserve('key.nested');

# $unserialize

Convert serialized string back into an object

Wee.$unserialize('key1=123&key2[]=value+1&key2[]=value+2');

{
    "key1": "123",
    "key2[]": [
        "value 1",
        "value 2"
    ]
}

# $extend

Extend target object with source object(s)

# Clone Object

If the second argument is an empty object literal, the third object will be cloned.

Wee.$extend(true, {}, {
    key1: 'val1',
    key2: 'val2'
});

{
    "key1": "val1",
    "key2": "val2"
}

# Merge Objects

Wee.$extend({
    key1: 'val1',
    key2: 'val2'
}, {
    key2: 'val3',
    key3: 'val4'
});

{
    "key1": "val1",
    "key2": "val3",
    "key3": "val4"
}