Skip to content

Module: lib/dom/DomSmith

The DomSmith is a utility class that helps to dynamically generate a DOM tree based on a declarative configuration. It supports event handling, DOM node creation, manipulation, and removal. Additionally, it ensures proper cleanup by removing events and references when the destroy() or removeNode() methods are called. This is especially useful for building UI components in a modular way where nodes can be dynamically added, updated, or removed.

Version
2.1.0
Author
Frank Kudermann - alphanull
License
MIT
Source
DomSmith.js, line 38

Constructor

new DomSmith(nodeDef, optionsopt)

Creates a new DomSmith instance.

Parameters:
Name Type Attributes Description
nodeDef DomSmith~NodeDefinition | Array<DomSmith~NodeDefinition> | string

Node definition. Can be an object, a string, or an array of definitions.

options HTMLElement | DomSmith~Options optional

Either a target HTMLElement or an options object.

Members

Stores mount information like target node, insertMode type, parent, and next sibling.

Type
Object
Source
DomSmith.js, line 57

Stores additional node data for cleanup.

Type
WeakMap
Source
DomSmith.js, line 85

Central repository for event listeners.

Type
WeakMap<HTMLElement, Object>
Source
DomSmith.js, line 92

The root node definition or an array of node definitions.

Type
DomSmith~NodeDefinition | Array<DomSmith~NodeDefinition>
Source
DomSmith.js, line 99

Methods

private, static getSupportedDomEvents(eleopt) → Array<string>

Returns an array of supported DOM event names for the given tag.

Parameters:
Name Type Attributes Description
ele HTMLElement optional

The element for which to retrieve supported events.

Returns

Sorted array of event names.

Type Array<string>
Source
DomSmith.js, line 8

mount(optionsopt)

Mounts the created DOM element(s) into the specified location. Supports insertModes: 'append' (default), 'before', 'replace' and 'top. If called after unmount() without arguments, reuses the original location.

Parameters:
Name Type Attributes Description
options HTMLElement | HTMLElement | DomSmith~Options optional

Either a target HTMLElement or an options object.

Throws

If injection node was not found.

Type Error
Source
DomSmith.js, line 123

unmount()

Unmounts the created DOM element(s) from their parent node. For multiple nodes, each child element is removed individually. Also stores the original parent and nextSibling for potential re-mounting.

Source
DomSmith.js, line 211

replaceNode(ref, replaceDef)

Replaces an existing DOM node (specified by its ref) with a new node definition. This method first removes all events from the old node, then replaces it in the DOM.

Parameters:
Name Type Description
ref string

Reference name of the node to be replaced.

replaceDef DomSmith~NodeDefinition

The new node definition to replace the old node.

Throws

If an invalid ref was used.

Type Error
Source
DomSmith.js, line 404

removeNode(nodeDefArgopt) DomSmith~NodeDefinition|Array<DomSmith~NodeDefinition>

Removes all events and references associated with a DOM node. If the passed node definition is an array, iterates through each element.

Parameters:
Name Type Attributes Default Description
nodeDefArg DomSmith~NodeDefinition | Array<DomSmith~NodeDefinition> optional this._dom

The node definition(s) from which to remove events.

Returns

The - possibly modified - node definition(s).

Type DomSmith~NodeDefinition | Array<DomSmith~NodeDefinition>
Source
DomSmith.js, line 429

addEvent(eleOrRef, eventName, handler)

Adds an event listener to the specified element and registers it in the central events repository.

Parameters:
Name Type Description
eleOrRef HTMLElement | string

Target DOM element or ref.

eventName string

Event name (e.g., 'click').

handler function | Array<function()>

Event handler(s) to add.

Throws

If element was not found, or handler is not a function.

Type Error
Source
DomSmith.js, line 466

removeEvent(eleOrRef, eventNameopt, handleropt)

Removes event listener(s) from the specified element. If no eventName and handler are provided, all event listeners for that element are removed. If an eventName is provided but no handler, then all handlers for that event are removed. Otherwise, only the specified handler for the given eventName is removed.

Parameters:
Name Type Attributes Description
eleOrRef HTMLElement | string

Target DOM element or ref.

eventName string optional

Event name (e.g., 'click').

handler function optional

Event handler to remove.

Throws

If element or ref was not found.

Type Error
Source
DomSmith.js, line 502

teardown()

Cleans up all resources: removes all events, unmounts the DOM nodes, and clears all references. DEPRECATED, alias for destroy().

Deprecated:
Since version 2.1.0.
Source
DomSmith.js, line 535

destroy()

Cleans up all resources: removes all events, unmounts the DOM nodes, and clears all references.

Since
2.1.0
Source
DomSmith.js, line 547

static registerPlugin(plugin, optionsopt)

Registers a singleton-style plugin for DomSmith. The plugin may define any of the following methods: addNode, removeNode, mount, unmount & destroy. Duplicate plugin instances will be ignored.

Parameters:
Name Type Attributes Description
plugin Object

The plugin object.

options Object optional

Additional Options for registration.

Parameters:
Name Type Attributes Default Description
priority number optional 0

Priority value for plugin execution order (higher runs earlier).

Source
DomSmith.js, line 575

Type Definitions

Structure of a node definition

Properties
Name Type Attributes Description
_tag string optional

Tag name of the element. Defaults to 'div' if unspecified.

_text string optional

Text content for text nodes.

_ref string optional

A unique reference name used to store a direct reference on the DomSmith instance.

_events Object<string, (function()|Array<function()>)> optional

Object containing event names and their handler(s).

_nodes Array<DomSmith~NodeDefinition> optional

Child node definitions; can be a single NodeDefinition, a string, or an array of them.

any * optional

Additional properties that will be assigned either directly or via setAttribute.

Type
Object
Source
DomSmith.js, line 581
Properties
Name Type Attributes Description
node HTMLElement

Target DOM node for mounting or insertion.

insertMode 'append' | 'before' | 'replace' optional

Injection strategy. Use 'append' to append, 'before' to insert before the node, or 'replace' to replace it. Defaults to 'append'.

Type
Object
Source
DomSmith.js, line 591