To help you get started, we've collected the most common ways that hastscript is being used within popular public projects.

SAP / luigi / website / docs / src / unified-plugins / rehype-copy-to-clipboard.js View on Github

function modify(node, prop) {
    const notYetProcessed = !node.properties.className || node.properties.className.indexOf('canCopyCode') === -1; // prevent infinite loop
    if (node.tagName === 'pre' && notYetProcessed) {
      // Docu: https://github.com/syntax-tree/hastscript#use
      const newNodeData = h('div.copyCodeContainer', [
        h('a.copyCode', { onclick: 'copyCode(event, this)' }, 
          [h('div', [
            h('img', { src: prependForExport() + '/images/copy-clipboard-default.svg' }),
            h('.popoverCopy', [
              'Click to copy'
            ])]
          )]
        ),
        h('pre.canCopyCode', node.children)
      ]);
      Object.assign(node, newNodeData);
    }
  }
}

View more ways to use hastscript

hastscript

[![Build][build-badge]][build] [![Coverage][coverage-badge]][coverage] [![Downloads][downloads-badge]][downloads] [![Size][size-badge]][size] [![Sponsors][sponsors-badge]][collective] [![Backers][backers-badge]][collective] [![Chat][chat-badge]][chat]

[hast][] utility to create trees with ease.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API
  • h(selector?[, properties][, …children])
  • s(selector?[, properties][, …children])
  • Child
  • Properties
  • Result
• Syntax tree
• JSX
• Types
• Compatibility
• Security
• Related
• Contribute
• License

What is this?

This package is a hyperscript interface (like createElement from React and h from Vue and such) to help with creating hast trees.

When should I use this?

You can use this utility in your project when you generate hast syntax trees with code. It helps because it replaces most of the repetition otherwise needed in a syntax tree with function calls. It also helps as it improves the attributes you pass by turning them into the form that is required by hast.

You can instead use [unist-builder][u] when creating any unist nodes and [xastscript][x] when creating xast (XML) nodes.

Install

This package is [ESM only][esm]. In Node.js (version 16+), install with [npm][]:

npm install hastscript

In Deno with [esm.sh][esmsh]:

import {h} from 'https://esm.sh/hastscript@9'

In browsers with [esm.sh][esmsh]:

Use

import {h, s} from 'hastscript'

console.log(
  h('.foo#some-id', [
    h('span', 'some text'),
    h('input', {type: 'text', value: 'foo'}),
    h('a.alpha', {class: 'bravo charlie', download: 'download'}, [
      'delta',
      'echo'
    ])
  ])
)

console.log(
  s('svg', {xmlns: 'https://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [
    s('title', 'SVG `