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 6.0.0 to 7.0.0

lib/core.d.ts

30

index.d.ts

@@ -1,29 +0,1 @@

// TypeScript Version: 3.5
import {Element, Properties, Node} from 'hast'
/**
* DSL to create virtual hast trees for HTML or SVG
*
* @param selector Simple CSS selector
* @param children (Lists of) child nodes
*/
declare function hastscript(
selector?: string,
children?: string | Node | Array<string | Node>
): Element
/**
* DSL to create virtual hast trees for HTML or SVG
*
* @param selector Simple CSS selector
* @param properties Map of properties
* @param children (Lists of) child nodes
*/
declare function hastscript(
selector?: string,
properties?: Properties,
children?: string | Node | Array<string | Node>
): Element
export = hastscript
export {h, s} from './lib/index.js'

@@ -1,3 +0,1 @@

'use strict'
module.exports = require('./html')
export {h, s} from './lib/index.js'
{
"name": "hastscript",
"version": "6.0.0",
"version": "7.0.0",
"description": "hast utility to create trees",

@@ -30,48 +30,60 @@ "license": "MIT",

],
"types": "index.d.ts",
"sideEffects": false,
"type": "module",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"exports": {
".": "./index.js",
"./index.js": "./index.js",
"./html.js": "./lib/html.js",
"./svg.js": "./lib/svg.js",
"./jsx-runtime": "./lib/runtime-html.js",
"./html/jsx-runtime": "./lib/runtime-html.js",
"./svg/jsx-runtime": "./lib/runtime-svg.js"
},
"files": [
"!lib/index.test-d.ts",
"lib/",
"index.d.ts",
"svg.d.ts",
"index.js",
"factory.js",
"html.js",
"svg.js",
"svg-case-sensitive-tag-names.json"
"index.js"
],
"dependencies": {
"@types/hast": "^2.0.0",
"comma-separated-tokens": "^1.0.0",
"hast-util-parse-selector": "^2.0.0",
"property-information": "^5.0.0",
"space-separated-tokens": "^1.0.0"
"comma-separated-tokens": "^2.0.0",
"hast-util-parse-selector": "^3.0.0",
"property-information": "^6.0.0",
"space-separated-tokens": "^2.0.0"
},
"devDependencies": {
"browserify": "^16.0.0",
"dtslint": "^3.0.0",
"nyc": "^15.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-syntax-jsx": "^7.0.0",
"@babel/plugin-transform-react-jsx": "^7.0.0",
"@types/babel__core": "^7.0.0",
"@types/tape": "^4.0.0",
"acorn": "^8.0.0",
"acorn-jsx": "^5.0.0",
"astring": "^1.0.0",
"c8": "^7.0.0",
"estree-util-build-jsx": "^2.0.0",
"prettier": "^2.0.0",
"remark-cli": "^8.0.0",
"remark-preset-wooorm": "^7.0.0",
"svg-tag-names": "^2.0.0",
"remark-cli": "^9.0.0",
"remark-preset-wooorm": "^8.0.0",
"rimraf": "^3.0.0",
"svg-tag-names": "^3.0.0",
"tape": "^5.0.0",
"tinyify": "^2.0.0",
"xo": "^0.32.0"
"tsd": "^0.14.0",
"type-coverage": "^2.0.0",
"typescript": "^4.0.0",
"unist-builder": "^3.0.0",
"xo": "^0.39.0"
},
"scripts": {
"generate": "node build",
"format": "remark . -qfo && prettier . --write && xo --fix",
"build-bundle": "browserify . -s hastscript > hastscript.js",
"build-mangle": "browserify . -s hastscript -p tinyify > hastscript.min.js",
"build": "npm run build-bundle && npm run build-mangle",
"test-api": "node test",
"test-coverage": "nyc --reporter lcov tape test.js",
"test-types": "dtslint .",
"test": "npm run generate && npm run format && npm run build && npm run test-coverage && npm run test-types"
"prepack": "npm run build && npm run format",
"build": "rimraf \"{lib/**,test/**,script/**,}*.d.ts\" && tsc && tsd && type-coverage",
"generate": "node script/generate-jsx && node script/build",
"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": "npm run build && npm run generate && npm run format && npm run test-coverage"
},
"nyc": {
"check-coverage": true,
"lines": 100,
"functions": 100,
"branches": 100
},
"prettier": {

@@ -87,11 +99,6 @@ "tabWidth": 2,

"prettier": true,
"esnext": false,
"rules": {
"unicorn/prefer-number-properties": "off",
"no-self-compare": "off",
"guard-for-in": "off"
},
"ignores": [
"hastscript.js"
]
"no-var": "off",
"prefer-arrow-callback": "off"
}
},

@@ -102,3 +109,8 @@ "remarkConfig": {

]
},
"typeCoverage": {
"atLeast": 100,
"detail": true,
"strict": true
}
}

@@ -21,2 +21,5 @@ # hastscript

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.
[npm][]:

@@ -31,4 +34,3 @@

```js
var h = require('hastscript')
var s = require('hastscript/svg')
import {h, s} from 'hastscript'

@@ -143,8 +145,19 @@ // Children as an array:

### `h(selector?[, properties][, ...children])`
This package exports the following identifiers: `h` and `s`.
There is no default export.
### `s(selector?[, properties][, ...children])`
### `h(selector?[, properties][, …children])`
DSL to create virtual [**hast**][hast] [*trees*][tree] for HTML or SVG.
### `s(selector?[, properties][, …children])`
Create virtual [**hast**][hast] [*trees*][tree] for HTML or SVG.
##### Signatures
* `h(): root`
* `h(null[, …children]): root`
* `h(name[, properties][, …children]): element`
(and the same for `s`).
##### Parameters

@@ -156,5 +169,7 @@

Can contain a tag name (`foo`), IDs (`#bar`), and classes (`.baz`).
If there is no tag name in the selector, `h` defaults to a `div` element,
and `s` to a `g` element.
If the selector is a string but there is no tag name in it, `h` defaults to
build a `div` element, and `s` to a `g` element.
`selector` is parsed by [`hast-util-parse-selector`][parse-selector].
When string, builds an [`Element`][element].
When nullish, builds a [`Root`][root] instead.

@@ -164,12 +179,90 @@ ###### `properties`

Map of properties (`Object.<*>`, optional).
Keys should match either the HTML attribute name, or the DOM property name, but
are case-insensitive.
Cannot be given when building a [`Root`][root].
###### `children`
(Lists of) child nodes (`string`, `Node`, `Array.<string|Node>`, optional).
When strings are encountered, they are mapped to [`text`][text] nodes.
(Lists of) children (`string`, `number`, `Node`, `Array.<children>`, optional).
When strings or numbers are encountered, they are mapped to [`Text`][text]
nodes.
If [`Root`][root] nodes are given, their children are used instead.
##### Returns
[`Element`][element].
[`Element`][element] or [`Root`][root].
## JSX
`hastscript` can be used with JSX.
Either use the automatic runtime set to `hastscript/html`, `hastscript/svg`,
or `hastscript` (shortcut for HTML).
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
that SVG can be used too:
`example-html.jsx`:
```jsx
/** @jsxImportSource hastscript */
console.log(
<div class="foo" id="some-id">
<span>some text</span>
<input type="text" value="foo" />
<a class="alpha bravo charlie" download>
deltaecho
</a>
</div>
)
console.log(
<form method="POST">
<input type="text" name="foo" />
<input type="text" name="bar" />
<input type="submit" name="send" />
</form>
)
```
`example-svg.jsx`:
```jsx
/** @jsxImportSource hastscript/svg */
console.log(
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 500 500">
<title>SVG `&lt;circle&gt;` element</title>
<circle cx={120} cy={120} r={100} />
</svg>
)
```
Because JSX does not allow dots (`.`) or number signs (`#`) in tag names, you
have to pass class names and IDs in as attributes.
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.
Babel also lets you configure this in a script:
```jsx
/** @jsx s @jsxFrag null */
import {s} from 'hastscript'
console.log(<rect />)
```
This is useful because it allows using *both* `html` and `svg`, although in
different files.
## Security

@@ -271,5 +364,5 @@

[build-badge]: https://img.shields.io/travis/syntax-tree/hastscript.svg
[build-badge]: https://github.com/syntax-tree/hastscript/workflows/main/badge.svg
[build]: https://travis-ci.org/syntax-tree/hastscript
[build]: https://github.com/syntax-tree/hastscript/actions

@@ -294,5 +387,5 @@ [coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/hastscript.svg

[chat-badge]: https://img.shields.io/badge/chat-spectrum-7b16ff.svg
[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
[chat]: https://spectrum.chat/unified/syntax-tree
[chat]: https://github.com/syntax-tree/unist/discussions

@@ -327,2 +420,4 @@ [npm]: https://docs.npmjs.com/cli/install

[root]: https://github.com/syntax-tree/xast#root
[text]: https://github.com/syntax-tree/hast#text

@@ -332,2 +427,10 @@

[build-jsx]: https://github.com/wooorm/estree-util-build-jsx
[bublé]: https://github.com/Rich-Harris/buble
[babel]: https://github.com/babel/babel
[babel-jsx]: https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-react-jsx
[parse-selector]: https://github.com/syntax-tree/hast-util-parse-selector

@@ -334,0 +437,0 @@

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