hastscript - npm Package Compare versions

Comparing version 6.0.0 to 7.0.0

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'

index.js

@@ -1,3 +0,1 @@
-'use strict'
-
-module.exports = require('./html')
+export {h, s} from './lib/index.js'

package.json

 {
   "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
   }
 }

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 `&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 @@

New alerts

License Policy Violation

License

This 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 risk

Package 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30804

increased by68.26%

Number of package files

21

increased by110%

Lines of code

553

increased by122.09%

Number of lines in readme file

432

increased by31.31%

Is type module

Yes

Worsened metrics

Dev dependency count

21

increased by110%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + 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)

• Updatedcomma-separated-tokens@^2.0.0

• Updatedhast-util-parse-selector@^3.0.0

• Updatedproperty-information@^6.0.0

• Updatedspace-separated-tokens@^2.0.0