hastscript
Advanced tools
Comparing version 6.0.0 to 7.0.0
@@ -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 | ||
} | ||
} |
131
readme.md
@@ -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 `<circle>` 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 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
30804
21
553
432
Yes
21
1
+ Addedcomma-separated-tokens@2.0.3(transitive)
+ Addedhast-util-parse-selector@3.1.1(transitive)
+ Addedproperty-information@6.5.0(transitive)
+ Addedspace-separated-tokens@2.0.2(transitive)
- Removedcomma-separated-tokens@1.0.8(transitive)
- Removedhast-util-parse-selector@2.2.5(transitive)
- Removedproperty-information@5.6.0(transitive)
- Removedspace-separated-tokens@1.1.5(transitive)
- Removedxtend@4.0.2(transitive)
Updatedproperty-information@^6.0.0