@trousers/registry
is responsible for storing the state of the styles have been mounted, mounting them to the head of the document and also providing a way to clear the styles.
Is the factory function which exposes the registry API.
Arguments:
parentElement
: HTMLElementattributeId
: stringoptions
?: ObjectforceNewNode
: booleanappendBefore
: HTMLElement
Returns:
register
: Functionclear
: Functionhas
: Function
Registers provided styles. Please note that this method is significantly faster in prodmode because it uses insertRule. However the drawback is that you cannot augment the styles once they're mounted.
Arguments:
id
: string - unique identifier for the provided stylestyles
: string - style stringisGlobal
?: boolean - whether the styles should be treated as global or not
Example:
import registry from '@trousers/registry';
const clientRegistry = registry(
document.createElement('head'),
'i-love-trousers',
);
clientRegistry.register('1', 'background-color:red;');
Returns true if the style id is already tracked by this registry
Arguments:
id
: string - unique identifier for the provided style
Example:
import registry from '@trousers/registry';
const clientRegistry = registry(
document.createElement('head'),
'i-love-trousers',
);
clientRegistry.has('1'); // Returns false!
clientRegistry.register('1', 'background-color:red;');
clientRegistry.has('1'); // Returns true!
Flushes all styles tracked by this registry
Example:
import registry from '@trousers/registry';
const clientRegistry = registry(
document.createElement('head'),
'i-love-trousers',
);
clientRegistry.register('1', 'background-color:red;');
clientRegistry.clear(); // clears the style element attached to this registry