config

Each sQuery method requires a configuration object when called. If accessing the sQuery methods as properties returned from an sQuery() function call, you do not need to explicitly pass any configuration as they will be passed implicitly. The config parameter is always the last parameter of an sQuery method, and typically never has to be manually passed.

The config argument will be mutated internally (merging with any bound this object) to create a new single object, e.g:

export default function addModifier(node, modifier, config) {
    config = Object.assign(this || {}, config || {});

    ...
}

^{Source: .addModifier() method}

This means that an alternative way to pass config is:

sQuery.addModifier.bind(myConfigObject)(...args);

...as opposed to:

sQuery.addModifier(...args, myConfigObject);

Naturally, you can utilise both to merge default configuration with custom configuration:

sQuery.addModifier.bind(defaultConfig)(...args, customConfig);

N.B: This is advanced stuff; with normal usage using the sQuery() function, you shouldn't need to be passing any config when calling the sQuery methods

Properties

• Namespace
• ComponentGlue
• ModifierGlue

Namespace

Typically when calling an sQuery method, the method will require a namespace on which to base the logic of the method. The namespace will be determined automatically from the element(s) involved, but sometimes you may wish to explicitly pass a different namespace.

Consider the following element:

<div class="foo">...</div> 

We can add a bar modifier using addModifier('bar') to get:

<div class="foo-bar">...</div> 

However, if we needed a different outcome similar to the following:

<div class="foo fizz-bar">...</div> 

...we would have to explicitly pass fizz in the configuration as the namespace:

.addModifier('bar', { namespace: 'fizz' });

ComponentGlue/ModifierGlue

With the Synergy convention, components and modifiers are 'glued' to modules and other components with a configurable text string. By default, the value is - (a single hyphen) for modifierGlue, and _ (a single underscore) for componentGlue. The below example shows a button module with a large modifier:

<div class="button-large" id="demo">Large Button</div>

It's very unlikely you would ever need to pass a modifierGlue value explicitly when using an sQuery API (typically, one project will have one convention, and the value can be set globally with sQuery.init()).

This flexiblity, however, means that you can mix conventions in the same project should you need to, meaning you could achieve something like:

<div class="button-large btn--round" id="demo">Large Button</div>

...with:

sQuery('#demo').addModifier('round', {
    namespace: 'btn',
    modifierGlue: '--'
});

...if you do find yourself requring the need for something like this, seek the advice of an adult.