Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
hastscript
Advanced tools
The hastscript npm package, often abbreviated as 'h', is a utility that allows for the easy creation of HAST (Hypertext Abstract Syntax Tree) nodes. HAST is a virtual DOM representation used for parsing, manipulating, and serializing HTML and XML documents. This package is particularly useful for developers working with virtual DOMs or those who need to manipulate HTML/XML documents programmatically.
Creating elements
This feature allows for the creation of HAST elements. The example demonstrates creating a 'div' element with a class of 'container' and the text 'Hello, world!' as its child.
const h = require('hastscript');
const element = h('div', {className: 'container'}, 'Hello, world!');
Creating elements with children
This feature enables the creation of HAST elements that contain other elements as children. The code sample shows how to create an unordered list ('ul') with two list items ('li') as its children.
const h = require('hastscript');
const list = h('ul', [
h('li', 'Item 1'),
h('li', 'Item 2')
]);
Creating elements with properties
This feature allows for the creation of HAST elements with specific properties. In the example, an anchor ('a') element is created with an 'href' attribute pointing to 'https://example.com' and containing the text 'Visit Example'.
const h = require('hastscript');
const link = h('a', {href: 'https://example.com'}, 'Visit Example');
Similar to hastscript, react-hyperscript provides a way to create React elements using a hyperscript-like syntax. While hastscript is focused on creating HAST nodes for HTML/XML documents, react-hyperscript is tailored for React's virtual DOM.
The virtual-dom package offers a virtual DOM implementation for efficient re-rendering of web interfaces. Unlike hastscript, which is specifically designed for creating HAST nodes, virtual-dom focuses on general virtual DOM functionality, including diffing and patching algorithms.
Snabbdom is a virtual DOM library that is lightweight and extensible. It shares similarities with hastscript in terms of manipulating virtual DOM trees but is more focused on being a core part of user interface rendering and updates, rather than specifically dealing with HAST nodes.
Hyperscript (and virtual-hyperscript
)
compatible DSL for creating virtual HAST trees.
npm:
npm install hastscript
hastscript is also available as an AMD, CommonJS, and globals module, uncompressed and compressed.
Dependencies:
var h = require('hastscript');
AST:
var tree = h('.foo#some-id', [
h('span', 'some text'),
h('input', {
'type': 'text',
'value': 'foo'
}),
h('a.alpha', {
'class': 'bravo charlie',
'style': 'color:/*red*/purple',
'download': 'download'
}, ['delta', 'echo'])
]);
Yields:
{ type: 'element',
tagName: 'div',
properties: { id: 'some-id', className: [ 'foo' ] },
children:
[ { type: 'element',
tagName: 'span',
properties: {},
children: [ { type: 'text', value: 'some text' } ] },
{ type: 'element',
tagName: 'input',
properties: { type: 'text', value: 'foo' },
children: [] },
{ type: 'element',
tagName: 'a',
properties:
{ className: [ 'alpha', 'bravo', 'charlie' ],
style: { color: 'purple' },
download: true },
children:
[ { type: 'text', value: 'delta' },
{ type: 'text', value: 'echo' } ] } ] }
h(selector?[, properties][, children])
DSL for creating virtual HAST trees.
Parameters:
selector
(string
, optional)
— Simple CSS selector, e.g., tag names (foo
), IDs (#bar
)
and classes (.baz
) are supported,
defaults to a div
element.
properties
(Object.<string, *>
, optional)
— Map of properties;
When providing an object to properties.style
,
make sure you camel-case those properties.
children
(string
, Node
, Array.<string|Node>
, optional)
— (List of) child nodes, when strings are encountered,
they are normalised to text
nodes.
Returns: Node
— A HAST node.
FAQs
hast utility to create trees
The npm package hastscript receives a total of 4,412,557 weekly downloads. As such, hastscript popularity was classified as popular.
We found that hastscript demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.