Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

hastscript

Package Overview
Dependencies
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

hastscript - npm Package Compare versions

Comparing version 7.0.2 to 7.1.0

6

html.d.ts
export {h} from './lib/html.js'
/**
* Acceptable child value
*/
export type Child = import('./lib/index.js').Child
/**
* Acceptable properties value.
*/
export type Properties = import('./lib/index.js').Properties

4

html.js
/**
* @typedef {import('./lib/index.js').Child} Child Acceptable child value
* @typedef {import('./lib/index.js').Properties} Properties Acceptable properties value.
* @typedef {import('./lib/index.js').Child} Child
* @typedef {import('./lib/index.js').Properties} Properties
*/
export {h} from './lib/html.js'

@@ -1,9 +0,4 @@

/**
* Acceptable child value
*/
export type Child = import('./lib/index.js').Child
/**
* Acceptable properties value.
*/
export type Properties = import('./lib/index.js').Properties
export type Result = import('./lib/index.js').Result
export {h, s} from './lib/index.js'
/**
* @typedef {import('./lib/index.js').Child} Child Acceptable child value
* @typedef {import('./lib/index.js').Properties} Properties Acceptable properties value.
* @typedef {import('./lib/index.js').Child} Child
* @typedef {import('./lib/index.js').Properties} Properties
* @typedef {import('./lib/index.js').Result} Result
*/
export {h, s} from './lib/index.js'
/**
* @param {Schema} schema
* @param {string} defaultTagName
* @param {Array.<string>} [caseSensitive]
* @param {Array<string>} [caseSensitive]
*/

@@ -12,9 +12,9 @@ export function core(

(): Root
(selector: null | undefined, ...children: HChild[]): Root
(selector: null | undefined, ...children: Array<HChild>): Root
(
selector: string,
properties?: HProperties | undefined,
...children: HChild[]
properties?: HProperties,
...children: Array<HChild>
): Element
(selector: string, ...children: HChild[]): Element
(selector: string, ...children: Array<HChild>): Element
}

@@ -30,17 +30,17 @@ export type Root = import('hast').Root

export type HStyleValue = string | number
export type HStyle = {
[x: string]: HStyleValue
}
export type HStyle = Record<string, HStyleValue>
export type HPrimitiveValue = string | number | boolean | null | undefined
export type HArrayValue = Array<string | number>
export type HPropertyValue = HPrimitiveValue | (string | number)[]
/**
* Acceptable properties value.
*/
export type HProperties = {
[property: string]:
| {
[x: string]: HStyleValue
}
| HPropertyValue
[property: string]: HStyle | HPropertyValue
}
export type HPrimitiveChild = string | number | null | undefined
export type HArrayChild = Array<Node | HPrimitiveChild>
/**
* Acceptable child value
*/
export type HChild = Node | HPrimitiveChild | (Node | HPrimitiveChild)[]

@@ -12,11 +12,13 @@ /**

* @typedef {string|number} HStyleValue
* @typedef {Object.<string, HStyleValue>} HStyle
* @typedef {Record<string, HStyleValue>} HStyle
* @typedef {string|number|boolean|null|undefined} HPrimitiveValue
* @typedef {Array.<string|number>} HArrayValue
* @typedef {Array<string|number>} HArrayValue
* @typedef {HPrimitiveValue|HArrayValue} HPropertyValue
* @typedef {{[property: string]: HPropertyValue|HStyle}} HProperties
* Acceptable properties value.
*
* @typedef {string|number|null|undefined} HPrimitiveChild
* @typedef {Array.<Node|HPrimitiveChild>} HArrayChild
* @typedef {Array<Node|HPrimitiveChild>} HArrayChild
* @typedef {Node|HPrimitiveChild|HArrayChild} HChild
* Acceptable child value
*/

@@ -36,3 +38,3 @@

* @param {string} defaultTagName
* @param {Array.<string>} [caseSensitive]
* @param {Array<string>} [caseSensitive]
*/

@@ -46,5 +48,5 @@ export function core(schema, defaultTagName, caseSensitive) {

* (): Root
* (selector: null|undefined, ...children: HChild[]): Root
* (selector: string, properties?: HProperties, ...children: HChild[]): Element
* (selector: string, ...children: HChild[]): Element
* (selector: null|undefined, ...children: Array<HChild>): Root
* (selector: string, properties?: HProperties, ...children: Array<HChild>): Element
* (selector: string, ...children: Array<HChild>): Element
* }}

@@ -58,3 +60,3 @@ */

* @param {HProperties|HChild} [properties]
* @param {HChild[]} children
* @param {Array<HChild>} children
* @returns {HResult}

@@ -186,3 +188,3 @@ */

if (Array.isArray(result)) {
/** @type {Array.<string|number>} */
/** @type {Array<string|number>} */
const finalResult = []

@@ -208,3 +210,3 @@

/**
* @param {Array.<Child>} nodes
* @param {Array<Child>} nodes
* @param {HChild} value

@@ -265,3 +267,3 @@ * @returns {void}

function style(value) {
/** @type {Array.<string>} */
/** @type {Array<string>} */
const result = []

@@ -281,7 +283,7 @@ /** @type {string} */

/**
* @param {Array.<string>} values
* @returns {Object.<string, string>}
* @param {Array<string>} values
* @returns {Record<string, string>}
*/
function createAdjustMap(values) {
/** @type {Object.<string, string>} */
/** @type {Record<string, string>} */
const result = {}

@@ -288,0 +290,0 @@ let index = -1

export {h} from './html.js'
export {s} from './svg.js'
/**
* Acceptable child value
*/
export type Child = import('./core.js').HChild
/**
* Acceptable properties value.
*/
export type Properties = import('./core.js').HProperties
export type Result = import('./core.js').HResult
/**
* @typedef {import('./core.js').HChild} Child Acceptable child value
* @typedef {import('./core.js').HProperties} Properties Acceptable properties value.
* @typedef {import('./core.js').HChild} Child
* @typedef {import('./core.js').HProperties} Properties
* @typedef {import('./core.js').HResult} Result
*/

@@ -5,0 +6,0 @@

@@ -1,2 +0,2 @@

import {HProperties, HChild, HResult} from './core.js'
import type {HProperties, HChild, HResult} from './core.js'

@@ -21,3 +21,3 @@ export namespace JSX {

*/
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style, @typescript-eslint/consistent-type-definitions
interface IntrinsicElements {

@@ -37,2 +37,3 @@ [name: string]:

*/
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
interface ElementChildrenAttribute {

@@ -39,0 +40,0 @@ /**

@@ -1,2 +0,2 @@

import {HProperties, HChild, HResult} from './core.js'
import type {HProperties, HChild, HResult} from './core.js'

@@ -26,3 +26,3 @@ /**

*/
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style, @typescript-eslint/consistent-type-definitions
export interface IntrinsicElements {

@@ -42,2 +42,3 @@ [name: string]:

*/
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
export interface ElementChildrenAttribute {

@@ -44,0 +45,0 @@ /**

@@ -13,3 +13,18 @@ export * from './jsx-automatic.js'

type: string,
props: import('./runtime.js').JSXProps,
props: Record<
string,
| string
| number
| boolean
| import('hast').Root
| import('hast').Element
| import('hast').Comment
| import('hast').DocType
| import('hast').Text
| import('./core.js').HStyle
| import('./core.js').HArrayValue
| import('./core.js').HArrayChild
| null
| undefined
>,
key?: string | undefined

@@ -28,5 +43,20 @@ ): import('hast').Element

type: string,
props: import('./runtime.js').JSXProps,
props: Record<
string,
| string
| number
| boolean
| import('hast').Root
| import('hast').Element
| import('hast').Comment
| import('hast').DocType
| import('hast').Text
| import('./core.js').HStyle
| import('./core.js').HArrayValue
| import('./core.js').HArrayChild
| null
| undefined
>,
key?: string | undefined
): import('hast').Element
}

@@ -13,3 +13,18 @@ export * from './jsx-automatic.js'

type: string,
props: import('./runtime.js').JSXProps,
props: Record<
string,
| string
| number
| boolean
| import('hast').Root
| import('hast').Element
| import('hast').Comment
| import('hast').DocType
| import('hast').Text
| import('./core.js').HStyle
| import('./core.js').HArrayValue
| import('./core.js').HArrayChild
| null
| undefined
>,
key?: string | undefined

@@ -28,5 +43,20 @@ ): import('hast').Element

type: string,
props: import('./runtime.js').JSXProps,
props: Record<
string,
| string
| number
| boolean
| import('hast').Root
| import('hast').Element
| import('hast').Comment
| import('hast').DocType
| import('hast').Text
| import('./core.js').HStyle
| import('./core.js').HArrayValue
| import('./core.js').HArrayChild
| null
| undefined
>,
key?: string | undefined
): import('hast').Element
}

@@ -11,3 +11,3 @@ /**

*
* @typedef {{[x: string]: HPropertyValue|HStyle|HChild}} JSXProps
* @typedef {Record<string, HPropertyValue|HStyle|HChild>} JSXProps
*/

@@ -25,5 +25,5 @@ /**

},
key?: string | undefined
key?: string
): Root
(type: string, props: JSXProps, key?: string | undefined): Element
(type: string, props: JSXProps, key?: string): Element
}

@@ -36,5 +36,5 @@ jsxs: {

},
key?: string | undefined
key?: string
): Root
(type: string, props: JSXProps, key?: string | undefined): Element
(type: string, props: JSXProps, key?: string): Element
}

@@ -50,19 +50,2 @@ }

export type Core = typeof import('./core.js').core
export type JSXProps = {
[x: string]:
| string
| number
| boolean
| import('hast').Root
| import('hast').Element
| import('hast').DocType
| import('hast').Comment
| import('hast').Text
| {
[x: string]: import('./core.js').HStyleValue
}
| import('./core.js').HArrayValue
| import('./core.js').HArrayChild
| null
| undefined
}
export type JSXProps = Record<string, HPropertyValue | HStyle | HChild>

@@ -11,3 +11,3 @@ /**

*
* @typedef {{[x: string]: HPropertyValue|HStyle|HChild}} JSXProps
* @typedef {Record<string, HPropertyValue|HStyle|HChild>} JSXProps
*/

@@ -14,0 +14,0 @@

@@ -26,9 +26,3 @@ export const s: {

}
/**
* Acceptable child value
*/
export type Child = import('./core.js').HChild
/**
* Acceptable properties value.
*/
export type Properties = import('./core.js').HProperties
/**
* @typedef {import('./core.js').HChild} Child Acceptable child value
* @typedef {import('./core.js').HProperties} Properties Acceptable properties value.
* @typedef {import('./core.js').HChild} Child
* @typedef {import('./core.js').HProperties} Properties
*

@@ -5,0 +5,0 @@ * @typedef {import('./jsx-classic').Element} s.JSX.Element

{
"name": "hastscript",
"version": "7.0.2",
"version": "7.1.0",
"description": "hast utility to create trees",

@@ -75,12 +75,12 @@ "license": "MIT",

"prettier": "^2.0.0",
"remark-cli": "^9.0.0",
"remark-preset-wooorm": "^8.0.0",
"remark-cli": "^11.0.0",
"remark-preset-wooorm": "^9.0.0",
"rimraf": "^3.0.0",
"svg-tag-names": "^3.0.0",
"tape": "^5.0.0",
"tsd": "^0.17.0",
"tsd": "^0.24.0",
"type-coverage": "^2.0.0",
"typescript": "^4.0.0",
"unist-builder": "^3.0.0",
"xo": "^0.42.0"
"xo": "^0.52.0"
},

@@ -92,4 +92,4 @@ "scripts": {

"format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
"test-api": "node test/index.js",
"test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov node test/index.js",
"test-api": "node --conditions development test/index.js",
"test-coverage": "c8 --check-coverage --100 --reporter lcov npm run test-api",
"test": "npm run build && npm run generate && npm run format && npm run test-coverage"

@@ -96,0 +96,0 @@ },

@@ -11,17 +11,43 @@ # hastscript

[**hast**][hast] utility to create [*trees*][tree] in HTML or SVG.
[hast][] utility to create trees with ease.
Similar to [`hyperscript`][hyperscript], [`virtual-dom/h`][virtual-hyperscript],
[`React.createElement`][react], and [Vue’s `createElement`][vue],
but for [**hast**][hast].
## Contents
Use [`unist-builder`][u] to create any [**unist**][unist] tree.
* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
* [`h(selector?[, properties][, …children])`](#hselector-properties-children)
* [`s(selector?[, properties][, …children])`](#sselector-properties-children)
* [JSX](#jsx)
* [Types](#types)
* [Compatibility](#compatibility)
* [Security](#security)
* [Related](#related)
* [Contribute](#contribute)
* [License](#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](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
This package is [ESM only][esm].
In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
[npm][]:
```sh

@@ -31,2 +57,16 @@ npm install hastscript

In Deno with [`esm.sh`][esmsh]:
```js
import {h} from 'https://esm.sh/hastscript@7'
```
In browsers with [`esm.sh`][esmsh]:
```html
<script type="module">
import {h} from 'https://esm.sh/hastscript@7?bundle'
</script>
```
## Use

@@ -37,3 +77,2 @@

// Children as an array:
console.log(

@@ -50,15 +89,3 @@ h('.foo#some-id', [

// Children as arguments:
console.log(
h(
'form',
{method: 'POST'},
h('input', {type: 'text', name: 'foo'}),
h('input', {type: 'text', name: 'bar'}),
h('input', {type: 'submit', value: 'send'})
)
)
// SVG:
console.log(
s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewbox: '0 0 500 500'}, [

@@ -101,27 +128,2 @@ s('title', 'SVG `<circle>` element'),

type: 'element',
tagName: 'form',
properties: {method: 'POST'},
children: [
{
type: 'element',
tagName: 'input',
properties: {type: 'text', name: 'foo'},
children: []
},
{
type: 'element',
tagName: 'input',
properties: {type: 'text', name: 'bar'},
children: []
},
{
type: 'element',
tagName: 'input',
properties: {type: 'submit', value: 'send'},
children: []
}
]
}
{
type: 'element',
tagName: 'svg',

@@ -148,5 +150,9 @@ properties: {xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 500 500'},

This package exports the following identifiers: `h` and `s`.
This package exports the identifiers `h` and `s`.
There is no default export.
The export map supports the automatic JSX runtime.
You can pass `hastscript/html` (or `hastscript`) or `hastscript/svg` to your
build tool (TypeScript, Babel, SWC) as with an `importSource` option or similar.
### `h(selector?[, properties][, …children])`

@@ -162,3 +168,3 @@

* `h(null[, …children]): root`
* `h(name[, properties][, …children]): element`
* `h(selector[, properties][, …children]): element`

@@ -181,3 +187,3 @@ (and the same for `s`).

Map of properties (`Object.<*>`, optional).
Map of properties (`Record<string, any>`, optional).
Keys should match either the HTML attribute name, or the DOM property name, but

@@ -189,3 +195,3 @@ are case-insensitive.

(Lists of) children (`string`, `number`, `Node`, `Array.<children>`, optional).
(Lists of) children (`string`, `number`, `Node`, `Array<children>`, optional).
When strings or numbers are encountered, they are mapped to [`Text`][text]

@@ -202,8 +208,6 @@ nodes.

`hastscript` can be used with JSX.
Either use the automatic runtime set to `hastscript/html`, `hastscript/svg`,
or `hastscript` (shortcut for HTML).
Either use the automatic runtime set to `hastscript/html` (or `hastscript`) or
`hastscript/svg` or import `h` or `s` yourself and define it as the pragma (plus
set the fragment to `null`).
Or import `h` or `s` yourself and define it as the pragma (plus set the fragment
to `null`).
The example above can then be written like so, using inline pragmas, so

@@ -216,3 +220,2 @@ that SVG can be used too:

/** @jsxImportSource hastscript */
console.log(

@@ -227,10 +230,2 @@ <div class="foo" id="some-id">

)
console.log(
<form method="POST">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="submit" name="send" />
</form>
)
```

@@ -250,17 +245,13 @@

Because JSX does not allow dots (`.`) or number signs (`#`) in tag names, you
have to pass class names and IDs in as attributes.
> 👉 **Note**: while `h` supports dots (`.`) for classes or number signs (`#`)
> for IDs in `selector`, those are not supported in JSX.
You can use [`estree-util-build-jsx`][build-jsx] to compile JSX away.
You could also use [bublé][], but it’s not ideal (`jsxFragment` is currently
only available on the API, not the CLI, and it only allows a single pragma).
For [Babel][], use [`@babel/plugin-transform-react-jsx`][babel-jsx] and either
pass `pragma: 'h'` and `pragmaFrag: 'null'`, or pass `importSource:
'hastscript'`.
This is less ideal because it allows a single pragma.
This is not perfect as it allows only a single pragma.
Alternatively, Babel also lets you configure this with a comment:
Babel also lets you configure this in a script:
```jsx

@@ -273,5 +264,21 @@ /** @jsx s @jsxFrag null */

This is useful because it allows using *both* `html` and `svg`, although in
This is useful because it allows using *both* `html` and `svg` when used in
different files.
## Types
This package is fully typed with [TypeScript][].
It exports the additional types:
* `Child` — valid value used as a child
* `Properties` — valid properties passed to an element
* `Result` — output of a `h` (or `s`) call
## Compatibility
Projects maintained by the unified collective are compatible with all maintained
versions of Node.js.
As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
Our projects sometimes work with older versions, but this is not guaranteed.
## Security

@@ -285,3 +292,3 @@

```js
const tree = {type: 'root', children: []}
const tree = h()

@@ -301,3 +308,3 @@ tree.children.push(h('script', 'alert(1)'))

```js
const tree = {type: 'root', children: []}
const tree = h()

@@ -321,3 +328,3 @@ // Somehow someone injected these properties instead of an expected `src` and

```js
const tree = {type: 'root', children: []}
const tree = h()

@@ -341,3 +348,3 @@ // Somehow this isn’t the expected `'wooorm'`.

Either do not use user input in `hastscript` or use
[`hast-util-santize`][sanitize].
[`hast-util-santize`][hast-util-sanitize].

@@ -347,19 +354,19 @@ ## Related

* [`unist-builder`](https://github.com/syntax-tree/unist-builder)
— Create any unist tree
— create unist trees
* [`xastscript`](https://github.com/syntax-tree/xastscript)
— Create a xast tree
— create xast trees
* [`hast-to-hyperscript`](https://github.com/syntax-tree/hast-to-hyperscript)
— Convert a Node to React, Virtual DOM, Hyperscript, and more
— turn hast into React, Preact, Vue, etc
* [`hast-util-from-dom`](https://github.com/syntax-tree/hast-util-from-dom)
— Transform a DOM tree to hast
— turn DOM trees into hast
* [`hast-util-select`](https://github.com/syntax-tree/hast-util-select)
— `querySelector`, `querySelectorAll`, and `matches`
* [`hast-util-to-html`](https://github.com/syntax-tree/hast-util-to-html)
— Stringify nodes to HTML
— turn hast into HTML
* [`hast-util-to-dom`](https://github.com/syntax-tree/hast-util-to-dom)
— Transform to a DOM tree
— turn hast into DOM trees
## Contribute
See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
See [`contributing.md`][contributing] in [`syntax-tree/.github`][health] for
started.

@@ -406,22 +413,20 @@ See [`support.md`][support] for ways to get help.

[license]: license
[esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
[author]: https://wooorm.com
[esmsh]: https://esm.sh
[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
[typescript]: https://www.typescriptlang.org
[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
[license]: license
[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
[author]: https://wooorm.com
[hyperscript]: https://github.com/dominictarr/hyperscript
[health]: https://github.com/syntax-tree/.github
[virtual-hyperscript]: https://github.com/Matt-Esch/virtual-dom/tree/HEAD/virtual-hyperscript
[contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md
[react]: https://reactjs.org/docs/glossary.html#react-elements
[support]: https://github.com/syntax-tree/.github/blob/main/support.md
[vue]: https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
[coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md
[unist]: https://github.com/syntax-tree/unist
[tree]: https://github.com/syntax-tree/unist#tree

@@ -439,6 +444,6 @@

[x]: https://github.com/syntax-tree/xastscript
[build-jsx]: https://github.com/wooorm/estree-util-build-jsx
[bublé]: https://github.com/Rich-Harris/buble
[babel]: https://github.com/babel/babel

@@ -452,2 +457,2 @@

[sanitize]: https://github.com/syntax-tree/hast-util-sanitize
[hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize
export {s} from './lib/svg.js'
/**
* Acceptable child value
*/
export type Child = import('./lib/index.js').Child
/**
* Acceptable properties value.
*/
export type Properties = import('./lib/index.js').Properties
/**
* @typedef {import('./lib/index.js').Child} Child Acceptable child value
* @typedef {import('./lib/index.js').Properties} Properties Acceptable properties value.
* @typedef {import('./lib/index.js').Child} Child
* @typedef {import('./lib/index.js').Properties} Properties
*/
export {s} from './lib/svg.js'
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc