@ohos-ports/hast-to-hyperscript 10.0.1-beta.0

package/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @template {CreateElementLike} H
+ * @param {H} h
+ * @param {Element|Root} tree
+ * @param {string|boolean|Options} [options]
+ * @returns {ReturnType<H>}
+ */
+export function toH<H extends CreateElementLike>(
+  h: H,
+  tree: Element | Root,
+  options?: string | boolean | Options | undefined
+): ReturnType<H>
+export type Element = import('hast').Element
+export type Root = import('hast').Root
+export type Text = import('hast').Text
+export type AssertElement = import('unist-util-is').AssertPredicate<Element>
+export type AssertText = import('unist-util-is').AssertPredicate<Text>
+export type AssertRoot = import('unist-util-is').AssertPredicate<Root>
+export type CreateElementLike = (
+  name: string,
+  attributes: any,
+  children?: any[] | undefined
+) => any
+export type Context = {
+  schema:
+    | import('property-information/lib/util/schema').Schema
+    | import('property-information/lib/util/schema').Schema
+  prefix: string | null
+  key: number
+  react: boolean
+  vue: boolean
+  vdom: boolean
+  hyperscript: boolean
+}
+export type Options = {
+  prefix?: string | null | undefined
+  space?: 'html' | 'svg' | undefined
+}

package/index.js

@@ -0,0 +1,337 @@
+/**
+ * @typedef {import('hast').Element} Element
+ * @typedef {import('hast').Root} Root
+ * @typedef {import('hast').Text} Text
+ *
+ * @typedef {import('unist-util-is').AssertPredicate<Element>} AssertElement
+ * @typedef {import('unist-util-is').AssertPredicate<Text>} AssertText
+ * @typedef {import('unist-util-is').AssertPredicate<Root>} AssertRoot
+ *
+ * @callback CreateElementLike
+ * @param {string} name
+ * @param {any} attributes
+ * @param {Array.<string|any>} [children]
+ * @returns {any}
+ *
+ * @typedef Context
+ * @property {html|svg} schema
+ * @property {string|null} prefix
+ * @property {number} key
+ * @property {boolean} react
+ * @property {boolean} vue
+ * @property {boolean} vdom
+ * @property {boolean} hyperscript
+ *
+ * @typedef Options
+ * @property {string|null} [prefix]
+ * @property {'html'|'svg'} [space]
+ */
+
+import {html, svg, find, hastToReact} from 'property-information'
+import {stringify as spaces} from 'space-separated-tokens'
+import {stringify as commas} from 'comma-separated-tokens'
+import style from 'style-to-object'
+import {webNamespaces} from 'web-namespaces'
+import {convert} from 'unist-util-is'
+
+const ns = /** @type {Record<string, string>} */ (webNamespaces)
+const toReact = /** @type {Record<string, string>} */ (hastToReact)
+
+const own = {}.hasOwnProperty
+
+/** @type {AssertRoot} */
+// @ts-expect-error it’s correct.
+const root = convert('root')
+/** @type {AssertElement} */
+// @ts-expect-error it’s correct.
+const element = convert('element')
+/** @type {AssertText} */
+// @ts-expect-error it’s correct.
+const text = convert('text')
+
+/**
+ * @template {CreateElementLike} H
+ * @param {H} h
+ * @param {Element|Root} tree
+ * @param {string|boolean|Options} [options]
+ * @returns {ReturnType<H>}
+ */
+export function toH(h, tree, options) {
+  if (typeof h !== 'function') {
+    throw new TypeError('h is not a function')
+  }
+
+  const r = react(h)
+  const v = vue(h)
+  const vd = vdom(h)
+  /** @type {string|boolean|null|undefined} */
+  let prefix
+  /** @type {Element} */
+  let node
+
+  if (typeof options === 'string' || typeof options === 'boolean') {
+    prefix = options
+    options = {}
+  } else {
+    if (!options) options = {}
+    prefix = options.prefix
+  }
+
+  if (root(tree)) {
+    // @ts-expect-error Allow `doctypes` in there, we’ll filter them out later.
+    node =
+      tree.children.length === 1 && element(tree.children[0])
+        ? tree.children[0]
+        : {
+            type: 'element',
+            tagName: 'div',
+            properties: {},
+            children: tree.children
+          }
+  } else if (element(tree)) {
+    node = tree
+  } else {
+    throw new Error(
+      // @ts-expect-error runtime.
+      'Expected root or element, not `' + ((tree && tree.type) || tree) + '`'
+    )
+  }
+
+  return transform(h, node, {
+    schema: options.space === 'svg' ? svg : html,
+    prefix:
+      prefix === undefined || prefix === null
+        ? r || v || vd
+          ? 'h-'
+          : null
+        : typeof prefix === 'string'
+        ? prefix
+        : prefix
+        ? 'h-'
+        : null,
+    key: 0,
+    react: r,
+    vue: v,
+    vdom: vd,
+    hyperscript: hyperscript(h)
+  })
+}
+
+/**
+ * Transform a hast node through a hyperscript interface to *anything*!
+ *
+ * @template {CreateElementLike} H
+ * @param {H} h
+ * @param {Element} node
+ * @param {Context} ctx
+ */
+function transform(h, node, ctx) {
+  const parentSchema = ctx.schema
+  let schema = parentSchema
+  let name = node.tagName
+  /** @type {Record<string, unknown>} */
+  const attributes = {}
+  /** @type {Array.<ReturnType<H>|string>} */
+  const nodes = []
+  let index = -1
+  /** @type {string} */
+  let key
+
+  if (parentSchema.space === 'html' && name.toLowerCase() === 'svg') {
+    schema = svg
+    ctx.schema = schema
+  }
+
+  for (key in node.properties) {
+    if (node.properties && own.call(node.properties, key)) {
+      addAttribute(attributes, key, node.properties[key], ctx, name)
+    }
+  }
+
+  if (ctx.vdom) {
+    if (schema.space === 'html') {
+      name = name.toUpperCase()
+    } else if (schema.space) {
+      attributes.namespace = ns[schema.space]
+    }
+  }
+
+  if (ctx.prefix) {
+    ctx.key++
+    attributes.key = ctx.prefix + ctx.key
+  }
+
+  if (node.children) {
+    while (++index < node.children.length) {
+      const value = node.children[index]
+
+      if (element(value)) {
+        nodes.push(transform(h, value, ctx))
+      } else if (text(value)) {
+        nodes.push(value.value)
+      }
+    }
+  }
+
+  // Restore parent schema.
+  ctx.schema = parentSchema
+
+  // Ensure no React warnings are triggered for void elements having children
+  // passed in.
+  return nodes.length > 0
+    ? h.call(node, name, attributes, nodes)
+    : h.call(node, name, attributes)
+}
+
+/**
+ * @param {Record<string, unknown>} props
+ * @param {string} prop
+ * @param {unknown} value
+ * @param {Context} ctx
+ * @param {string} name
+ */
+// eslint-disable-next-line complexity, max-params
+function addAttribute(props, prop, value, ctx, name) {
+  const info = find(ctx.schema, prop)
+  /** @type {string|undefined} */
+  let subprop
+
+  // Ignore nullish and `NaN` values.
+  // Ignore `false` and falsey known booleans for hyperlike DSLs.
+  if (
+    value === undefined ||
+    value === null ||
+    (typeof value === 'number' && Number.isNaN(value)) ||
+    (value === false && (ctx.vue || ctx.vdom || ctx.hyperscript)) ||
+    (!value && info.boolean && (ctx.vue || ctx.vdom || ctx.hyperscript))
+  ) {
+    return
+  }
+
+  if (Array.isArray(value)) {
+    // Accept `array`.
+    // Most props are space-separated.
+    value = info.commaSeparated ? commas(value) : spaces(value)
+  }
+
+  // Treat `true` and truthy known booleans.
+  if (info.boolean && ctx.hyperscript) {
+    value = ''
+  }
+
+  // VDOM, Vue, and React accept `style` as object.
+  if (
+    info.property === 'style' &&
+    typeof value === 'string' &&
+    (ctx.react || ctx.vue || ctx.vdom)
+  ) {
+    value = parseStyle(value, name)
+  }
+
+  if (ctx.vue) {
+    if (info.property !== 'style') subprop = 'attrs'
+  } else if (!info.mustUseProperty) {
+    if (ctx.vdom) {
+      if (info.property !== 'style') subprop = 'attributes'
+    } else if (ctx.hyperscript) {
+      subprop = 'attrs'
+    }
+  }
+
+  if (subprop) {
+    props[subprop] = Object.assign(props[subprop] || {}, {
+      [info.attribute]: value
+    })
+  } else if (info.space && ctx.react) {
+    props[toReact[info.property] || info.property] = value
+  } else {
+    props[info.attribute] = value
+  }
+}
+
+/**
+ * Check if `h` is `react.createElement`.
+ *
+ * @param {CreateElementLike} h
+ * @returns {boolean}
+ */
+function react(h) {
+  /** @type {unknown} */
+  const node = h('div', {})
+  return Boolean(
+    node &&
+      // @ts-expect-error Looks like a React node.
+      ('_owner' in node || '_store' in node) &&
+      // @ts-expect-error Looks like a React node.
+      (node.key === undefined || node.key === null)
+  )
+}
+
+/**
+ * Check if `h` is `hyperscript`.
+ *
+ * @param {CreateElementLike} h
+ * @returns {boolean}
+ */
+function hyperscript(h) {
+  return 'context' in h && 'cleanup' in h
+}
+
+/**
+ * Check if `h` is `virtual-dom/h`.
+ *
+ * @param {CreateElementLike} h
+ * @returns {boolean}
+ */
+function vdom(h) {
+  /** @type {unknown} */
+  const node = h('div', {})
+  // @ts-expect-error Looks like a vnode.
+  return node.type === 'VirtualNode'
+}
+
+/**
+ * Check if `h` is Vue.
+ *
+ * @param {CreateElementLike} h
+ * @returns {boolean}
+ */
+function vue(h) {
+  /** @type {unknown} */
+  const node = h('div', {})
+  // @ts-expect-error Looks like a Vue node.
+  return Boolean(node && node.context && node.context._isVue)
+}
+
+/**
+ * @param {string} value
+ * @param {string} tagName
+ * @returns {Record<string, string>}
+ */
+function parseStyle(value, tagName) {
+  /** @type {Record<string, string>} */
+  const result = {}
+
+  try {
+    style(value, (name, value) => {
+      if (name.slice(0, 4) === '-ms-') name = 'ms-' + name.slice(4)
+
+      result[
+        name.replace(
+          /-([a-z])/g,
+          /**
+           * @param {string} _
+           * @param {string} $1
+           * @returns {string}
+           */ (_, $1) => $1.toUpperCase()
+        )
+      ] = value
+    })
+  } catch (error) {
+    error.message =
+      tagName + '[style]' + error.message.slice('undefined'.length)
+    throw error
+  }
+
+  return result
+}

package/license

@@ -0,0 +1,22 @@
+(The MIT License)
+
+Copyright (c) 2016 Titus Wormer <tituswormer@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@ohos-ports/hast-to-hyperscript",
+  "version": "10.0.1-beta.0",
+  "description": "hast utility to transform to something else (react, vue, etc) through a hyperscript DSL",
+  "license": "MIT",
+  "keywords": [
+    "unist",
+    "hast",
+    "hast-util",
+    "util",
+    "utility",
+    "html",
+    "change",
+    "transform",
+    "rehype",
+    "vdom",
+    "virtual",
+    "dom",
+    "hyperscript",
+    "dsl"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/hast-to-hyperscript/10.0.1"
+  },
+  "bugs": {
+    "url": "https://github.com/ohos-ports/ohos-ports/issues"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/unified"
+  },
+  "author": "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
+  "contributors": [
+    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
+    "Jannis Redmann <mail@jannisr.de>",
+    "Koto Hajime <toxictoxer@gmail.com>",
+    "Christian Murphy <christian.murphy.42@gmail.com>"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "files": [
+    "index.d.ts",
+    "index.js"
+  ],
+  "dependencies": {
+    "@types/unist": "^2.0.0",
+    "comma-separated-tokens": "^2.0.0",
+    "property-information": "^6.0.0",
+    "space-separated-tokens": "^2.0.0",
+    "style-to-object": "^0.3.0",
+    "unist-util-is": "^5.0.0",
+    "web-namespaces": "^2.0.0"
+  },
+  "devDependencies": {
+    "@types/hyperscript": "0.0.4",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/tape": "^4.0.0",
+    "@types/virtual-dom": "^2.0.0",
+    "c8": "^7.0.0",
+    "hyperscript": "^2.0.0",
+    "prettier": "^2.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "rehype": "^11.0.0",
+    "remark-cli": "^9.0.0",
+    "remark-preset-wooorm": "^8.0.0",
+    "rimraf": "^3.0.0",
+    "tape": "^5.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^4.0.0",
+    "unist-builder": "^3.0.0",
+    "vdom-to-html": "^2.0.0",
+    "virtual-dom": "^2.0.0",
+    "vue": "^2.0.0",
+    "vue-server-renderer": "^2.0.0",
+    "xo": "^0.42.0"
+  },
+  "scripts": {
+    "prepack": "npm run build && npm run format",
+    "build": "rimraf \"*.d.ts\" && tsc && type-coverage",
+    "format": "remark . -qfo && prettier . -w --loglevel warn && xo --fix",
+    "test-api": "node test.js",
+    "test-coverage": "c8 --check-coverage --branches 100 --functions 100 --lines 100 --statements 100 --reporter lcov node test.js",
+    "test": "npm run build && npm run format && npm run test-coverage"
+  },
+  "prettier": {
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "semi": false,
+    "trailingComma": "none"
+  },
+  "xo": {
+    "prettier": true
+  },
+  "remarkConfig": {
+    "plugins": [
+      "preset-wooorm"
+    ]
+  },
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "strict": true,
+    "ignoreCatch": true,
+    "ignoreFiles": [
+      "index.d.ts"
+    ]
+  }
+}

package/readme.md

@@ -0,0 +1,253 @@
+# hast-to-hyperscript
+
+[![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**][hast] utility to transform a [*tree*][tree] to something else through
+a [hyperscript][] interface.
+
+## 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.
+
+[npm][]:
+
+```sh
+npm install hast-to-hyperscript
+```
+
+## Use
+
+```js
+import {toH} from 'hast-to-hyperscript'
+import h from 'hyperscript'
+
+const tree = {
+  type: 'element',
+  tagName: 'p',
+  properties: {id: 'alpha', className: ['bravo']},
+  children: [
+    {type: 'text', value: 'charlie '},
+    {
+      type: 'element',
+      tagName: 'strong',
+      properties: {style: 'color: red;'},
+      children: [{type: 'text', value: 'delta'}]
+    },
+    {type: 'text', value: ' echo.'}
+  ]
+}
+
+// Transform (`hyperscript` needs `outerHTML` to serialize):
+const doc = toH(h, tree).outerHTML
+
+console.log(doc)
+```
+
+Yields:
+
+```html
+<p class="bravo" id="alpha">charlie <strong>delta</strong> echo.</p>
+```
+
+## API
+
+This package exports the following identifiers: `toH`.
+There is no default export.
+
+### `toH(h, tree[, options|prefix])`
+
+Transform a [**hast**][hast] [*tree*][tree] to something else through a
+[hyperscript][] interface.
+
+###### Parameters
+
+*   `h` ([`Function`][h]) — Hyperscript function
+*   `tree` ([`Node`][node]) — [*Tree*][tree] to transform
+*   `prefix` — Treated as `{prefix: prefix}`
+*   `options.prefix` (`string` or `boolean`, optional)
+    — Prefix to use as a prefix for keys passed in `attrs` to `h()`,
+    this behavior is turned off by passing `false`, turned on by passing
+    a `string`.
+    By default, `h-` is used as a prefix if the given `h` is detected as being
+    `virtual-dom/h` or `React.createElement`
+*   `options.space` (enum, `'svg'` or `'html'`, default: `'html'`)
+    — Whether `node` is in the `'html'` or `'svg'` space.
+    If an `svg` element is found when inside the HTML space, `toH` automatically
+    switches to the SVG space when entering the element, and switches back when
+    exiting
+
+###### Returns
+
+`*` — Anything returned by invoking `h()`.
+
+### `function h(name, attrs, children)`
+
+Create an [*element*][element] from the given values.
+
+###### Content
+
+`h` is called with the node that is currently compiled as the context object
+(`this`).
+
+###### Parameters
+
+*   `name` (`string`) — Tag-name of element to create
+*   `attrs` (`Object.<string>`) — Attributes to set
+*   `children` (`Array.<* | string>`) — List of children (results of previously
+    invoking `h()`)
+
+###### Returns
+
+`*` — Anything.
+
+##### Caveats
+
+###### Nodes
+
+Most hyperscript implementations only support [*elements*][element] and
+[*texts*][text].
+[**hast**][hast] supports [*doctype*][doctype], [*comment*][comment], and
+[*root*][root] as well.
+
+*   If anything other than an `element` or `root` node is given, `toH` throws
+*   If a [*root*][root] is given with no [*children*][child], an empty `div`
+    [*element*][element] is returned
+*   If a [*root*][root] is given with one [*element*][element] [*child*][child],
+    that element is transformed
+*   Otherwise, the children are wrapped in a `div` [*element*][element]
+
+If unknown nodes (a node with a [*type*][type] not defined by [**hast**][hast])
+are found as [*descendants*][descendant] of the given [*tree*][tree], they are
+ignored: only [*text*][text] and [*element*][element] are transformed.
+
+###### Support
+
+Although there are lots of libraries mentioning support for a hyperscript-like
+interface, there are significant differences between them.
+For example, [`hyperscript`][hyperscript] doesn’t support classes in `attrs` and
+[`virtual-dom/h`][vdom] needs an `attributes` object inside `attrs` most of the
+time.
+`toH` works around these differences for:
+
+*   [`React.createElement`][react]
+*   Vue’s [`createElement`][vue]
+*   [`virtual-dom/h`][vdom]
+*   [`hyperscript`][hyperscript]
+
+## Security
+
+Use of `hast-to-hyperscript` can open you up to a
+[cross-site scripting (XSS)][xss] attack if the hast tree is unsafe.
+Use [`hast-util-sanitize`][sanitize] to make the hast tree safe.
+
+## Related
+
+*   [`hastscript`][hastscript]
+    — Hyperscript compatible interface for creating nodes
+*   [`hast-util-sanitize`][sanitize]
+    — Sanitize nodes
+*   [`hast-util-from-dom`](https://github.com/syntax-tree/hast-util-from-dom)
+    — Transform a DOM tree to hast
+*   [`unist-builder`](https://github.com/syntax-tree/unist-builder)
+    — Create any unist tree
+*   [`xastscript`](https://github.com/syntax-tree/xastscript)
+    — Create a xast tree
+
+## Contribute
+
+See [`contributing.md` in `syntax-tree/.github`][contributing] for ways to get
+started.
+See [`support.md`][support] for ways to get help.
+
+This project has a [code of conduct][coc].
+By interacting with this repository, organization, or community you agree to
+abide by its terms.
+
+## License
+
+[MIT][license] © [Titus Wormer][author]
+
+<!-- Definitions -->
+
+[build-badge]: https://github.com/syntax-tree/hast-to-hyperscript/workflows/main/badge.svg
+
+[build]: https://github.com/syntax-tree/hast-to-hyperscript/actions
+
+[coverage-badge]: https://img.shields.io/codecov/c/github/syntax-tree/hast-to-hyperscript.svg
+
+[coverage]: https://codecov.io/github/syntax-tree/hast-to-hyperscript
+
+[downloads-badge]: https://img.shields.io/npm/dm/hast-to-hyperscript.svg
+
+[downloads]: https://www.npmjs.com/package/hast-to-hyperscript
+
+[size-badge]: https://img.shields.io/bundlephobia/minzip/hast-to-hyperscript.svg
+
+[size]: https://bundlephobia.com/result?p=hast-to-hyperscript
+
+[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
+
+[backers-badge]: https://opencollective.com/unified/backers/badge.svg
+
+[collective]: https://opencollective.com/unified
+
+[chat-badge]: https://img.shields.io/badge/chat-discussions-success.svg
+
+[chat]: https://github.com/syntax-tree/unist/discussions
+
+[npm]: https://docs.npmjs.com/cli/install
+
+[license]: license
+
+[author]: https://wooorm.com
+
+[contributing]: https://github.com/syntax-tree/.github/blob/HEAD/contributing.md
+
+[support]: https://github.com/syntax-tree/.github/blob/HEAD/support.md
+
+[coc]: https://github.com/syntax-tree/.github/blob/HEAD/code-of-conduct.md
+
+[vdom]: https://github.com/Matt-Esch/virtual-dom/tree/HEAD/virtual-hyperscript
+
+[hyperscript]: https://github.com/hyperhype/hyperscript
+
+[react]: https://reactjs.org/docs/glossary.html#react-elements
+
+[vue]: https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
+
+[hastscript]: https://github.com/syntax-tree/hastscript
+
+[tree]: https://github.com/syntax-tree/unist#tree
+
+[child]: https://github.com/syntax-tree/unist#child
+
+[type]: https://github.com/syntax-tree/unist#type
+
+[descendant]: https://github.com/syntax-tree/unist#descendant
+
+[hast]: https://github.com/syntax-tree/hast
+
+[node]: https://github.com/syntax-tree/hast#nodes
+
+[text]: https://github.com/syntax-tree/hast#text
+
+[doctype]: https://github.com/syntax-tree/hast#doctype
+
+[root]: https://github.com/syntax-tree/hast#root
+
+[comment]: https://github.com/syntax-tree/hast#comment
+
+[element]: https://github.com/syntax-tree/hast#element
+
+[h]: #function-hname-attrs-children
+
+[xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
+
+[sanitize]: https://github.com/syntax-tree/hast-util-sanitize