clientnode

Project status

Use case

Simple generic (web and node compatible) utility library.

Content

Features

• Mutual exclusion support through locking management
• Cross browser logging with different log levels
• Extending native JavaScript types like strings, arrays or functions
• A set of helper functions to parse option objects
• Extended dom tree handling.
• Plugin scoped event handling.
• Generic none-redundant plugin pattern for JavaScript and CoffeeScript

Installation

Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:

<script
    src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"
></script>
<!--Inject downloaded file:
<script src="index.js"></script>
-->
<!--Or integrate via cdn:-->
<script
    src="https://torben.website/clientnode/data/distributionBundle/index.js"
></script>

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:

...
"dependencies": {
    ...
    "clientnode": "latest",
    ...
},
...

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.

...
import Tools from 'clientnode'
clas Plugin extends Tools...
Tools({logging: true}).log('test') // shows "test" in console
// or
import {$} from 'clientnode'
$.Tools().isEquivalentDom('<div>', '<script>') // false
// or
{makeArray} = require('clientnode').default
makeArray(2) // [2]
// or
$ = require('clientnode').$
$.Tools().isEquivalentDom('<div>', '<script>') // false
...

Plugin pattern

Use as extension for object orientated, node and browser compatible (optionally jQuery) plugin using inheritance and dom node as return value reference. This plugin pattern gives their instance back if no dom node is provided. Direct initializing the plugin without providing a dom node is also provided. Note: if you want to use it as jQuery (or another or even custom) plugin you have to provide "$" globally before loading this module.

'use strict'
import {$} from 'clientnode'
/**
 * This plugin holds all needed methods to extend input fields to select
 * numbers very smart.
 * @extends clientnode:Tools
 * @property static:_name - Defines this class name to allow retrieving them
 * after name mangling.
 * @property _options - Options extended by the options given to the
 * initializer method.
 */
export default class Example extends $.Tools.class {
    static _name = 'Example';
    /* eslint-disable jsdoc/require-description-complete-sentence */
    /**
     * Initializes the plugin. Later needed dom nodes are grabbed.
     * @param options - An options object.
     * @returns Returns $'s extended current dom node.
     */
    initialize(options = {}) {
    /* eslint-enable jsdoc/require-description-complete-sentence */
        this._options = {/*Default options here*/}
        super.initialize(options)
        return this.$domNode
    }
}
$.fn.Example = function() {
    return $.Tools().controller(Example, arguments, this)
}

Initialisation with given dom node and without:

const $domNode = $('#domNode').Example({firstOption: 'value'});
const exampleInstance = $.Example({firstOption: 'value'});

Function call from previous generated instance via dom node or instance reference:

const returnValue = $('#domNode').Example('method', 'anArgument')
const returnValue = $('#domNode').Example().method('anArgument')
const exampleInstance = $.Example({firstOption: 'value'})
const returnValue = exampleInstance.method('anArgument')