dsc
dsc is a JavaScript function for defining DOM structures. It takes an element, properties or attributes, children, and returns a DOM structure. It will add up to 358 bytes to your project.
dsc(element, attributes, ...children)
Usage
Add dsc to your page.
Alternatively, add dsc to your project:
npm install dsc
; const dsc = ; // append <h3>Hello, <strong title="Earthly Planet">World</strong>!</h3>;
When document
is an assumed global, use the browser version.
; // append <h3>Hello, <strong title="Earthly Planet">World</strong>!</h3>;
When using dsc alongside jsdom, initialize dsc with the appropriate
window
object.
;; const dom = `YOUR HTML`;const dsc = ; // append <h3>Hello, <strong title="Earthly Planet">World</strong>!</h3>;
When converting JSX to JS, dsc can be used to generate DOM Elements.
/** @jsx dsc */ <h3>Hello <strong ="Earthly Planet">World</strong>! This is generated content!</h3>; /* becomes */ ;
Read the @babel/plugin-transform-react-jsx documentation for more information about transforming JSX.
Arguments
element
The first argument represents the Element being referenced or created. String arguments create new Elements using the string as the tag name.
// create <h3> using the "h3" string;
// use the created <h3>;
attributes
The second argument represents the properties or attributes being assigned to
the element. When a name exists on the element as a property then the property
is assigned. Otherwise, the attribute is assigned. Attributes with a null
value are removed from the element.
// create <h3 class="foo"> using the "className" property;
// create <h3 class="foo"> using the "class" attribute;
// create <h3> with a click event using the "onclick" property;
children
The third argument and all arguments afterward are children to be appended to the element.
// append "Hello World" as a text node to <h3>;
// append "Hello World" as 3 text nodes to <h3>;
// append a new <h3> to the fragment;
Return
Create returns the element referenced or created by element.
// h3 is <h3>const h3 = ; // h3ish3 is trueconst ish3h3 = h3 === ;