Add utilities to state

This commit adds several useful utilities to the passed `state`.
It also refactors the code so that each handler is in its own file.

Author: wooorm

index.js

@@ -1,6 +1,6 @@
 /**
- * @typedef {import('./lib/index.js').Handle} Handle
- * @typedef {import('./lib/index.js').Space} Space
+ * @typedef {import('./lib/state.js').Handle} Handle
+ * @typedef {import('./lib/state.js').Space} Space
  * @typedef {import('./lib/index.js').Options} Options
  */
 

lib/handlers/comment.js

@@ -0,0 +1,36 @@
+/**
+ * @typedef {import('estree').Comment} Comment
+ * @typedef {import('estree-jsx').JSXExpressionContainer} JsxExpressionContainer
+ * @typedef {import('estree-jsx').JSXEmptyExpression} JsxEmptyExpression
+ * @typedef {import('../state.js').State} State
+ */
+
+/**
+ * Turn a hast comment into an estree node.
+ *
+ * @param {import('hast').Comment} node
+ *   hast node to transform.
+ * @param {State} state
+ *   Info passed around about the current state.
+ * @returns {JsxExpressionContainer}
+ *   estree expression.
+ */
+export function comment(node, state) {
+  /** @type {Comment} */
+  const result = {type: 'Block', value: node.value}
+  state.inherit(node, result)
+  state.comments.push(result)
+
+  /** @type {JsxEmptyExpression} */
+  const expression = {
+    type: 'JSXEmptyExpression',
+    // @ts-expect-error: `comments` is custom.
+    comments: [Object.assign({}, result, {leading: false, trailing: true})]
+  }
+  state.patch(node, expression)
+
+  /** @type {JsxExpressionContainer} */
+  const container = {type: 'JSXExpressionContainer', expression}
+  state.patch(node, container)
+  return container
+}

lib/handlers/element.js

@@ -0,0 +1,255 @@
+/**
+ * @typedef {import('hast').Element} Element
+ * @typedef {import('estree').Property} Property
+ * @typedef {import('estree-jsx').JSXElement} JsxElement
+ * @typedef {import('estree-jsx').JSXSpreadAttribute} JsxSpreadAttribute
+ * @typedef {import('estree-jsx').JSXAttribute} JsxAttribute
+ * @typedef {import('../state.js').State} State
+ */
+
+import {stringify as commas} from 'comma-separated-tokens'
+import {svg, find, hastToReact} from 'property-information'
+import {stringify as spaces} from 'space-separated-tokens'
+import {
+  start as identifierStart,
+  cont as identifierCont
+} from 'estree-util-is-identifier-name'
+// @ts-expect-error: `style-to-object` doesn’t support actual ESM + TS correctly.
+import styleToObject from 'style-to-object'
+
+/** @type {(value: string, iterator?: (property: string, value: string, declaration: unknown) => void) => Record<string, string>} */
+const style = styleToObject
+
+const own = {}.hasOwnProperty
+
+/**
+ * Turn a hast element into an estree node.
+ *
+ * @param {Element} node
+ *   hast node to transform.
+ * @param {State} state
+ *   Info passed around about the current state.
+ * @returns {JsxElement}
+ *   estree expression.
+ */
+// eslint-disable-next-line complexity
+export function element(node, state) {
+  const parentSchema = state.schema
+  let schema = parentSchema
+  const props = node.properties || {}
+
+  if (parentSchema.space === 'html' && node.tagName.toLowerCase() === 'svg') {
+    schema = svg
+    state.schema = schema
+  }
+
+  const children = state.all(node)
+
+  /** @type {Array<JsxAttribute | JsxSpreadAttribute>} */
+  const attributes = []
+  /** @type {string} */
+  let prop
+
+  for (prop in props) {
+    if (own.call(props, prop)) {
+      let value = props[prop]
+      const info = find(schema, prop)
+      /** @type {JsxAttribute['value']} */
+      let attributeValue
+
+      // Ignore nullish and `NaN` values.
+      // Ignore `false` and falsey known booleans.
+      if (
+        value === undefined ||
+        value === null ||
+        (typeof value === 'number' && Number.isNaN(value)) ||
+        value === false ||
+        (!value && info.boolean)
+      ) {
+        continue
+      }
+
+      prop = info.space
+        ? hastToReact[info.property] || info.property
+        : info.attribute
+
+      if (Array.isArray(value)) {
+        // Accept `array`.
+        // Most props are space-separated.
+        value = info.commaSeparated ? commas(value) : spaces(value)
+      }
+
+      if (prop === 'style') {
+        /** @type {Record<string, string>} */
+        // @ts-expect-error Assume `value` is an object otherwise.
+        const styleValue =
+          typeof value === 'string' ? parseStyle(value, node.tagName) : value
+
+        /** @type {Array<Property>} */
+        const cssProperties = []
+        /** @type {string} */
+        let cssProp
+
+        for (cssProp in styleValue) {
+          // eslint-disable-next-line max-depth
+          if (own.call(styleValue, cssProp)) {
+            cssProperties.push({
+              type: 'Property',
+              method: false,
+              shorthand: false,
+              computed: false,
+              key: {type: 'Identifier', name: cssProp},
+              value: {type: 'Literal', value: String(styleValue[cssProp])},
+              kind: 'init'
+            })
+          }
+        }
+
+        attributeValue = {
+          type: 'JSXExpressionContainer',
+          expression: {type: 'ObjectExpression', properties: cssProperties}
+        }
+      } else if (value === true) {
+        attributeValue = null
+      } else {
+        attributeValue = {type: 'Literal', value: String(value)}
+      }
+
+      if (jsxIdentifierName(prop)) {
+        attributes.push({
+          type: 'JSXAttribute',
+          name: {type: 'JSXIdentifier', name: prop},
+          value: attributeValue
+        })
+      } else {
+        attributes.push({
+          type: 'JSXSpreadAttribute',
+          argument: {
+            type: 'ObjectExpression',
+            properties: [
+              {
+                type: 'Property',
+                method: false,
+                shorthand: false,
+                computed: false,
+                key: {type: 'Literal', value: String(prop)},
+                // @ts-expect-error No need to worry about `style` (which has a
+                // `JSXExpressionContainer` value) because that’s a valid identifier.
+                value: attributeValue || {type: 'Literal', value: true},
+                kind: 'init'
+              }
+            ]
+          }
+        })
+      }
+    }
+  }
+
+  // Restore parent schema.
+  state.schema = parentSchema
+
+  /** @type {JsxElement} */
+  const result = {
+    type: 'JSXElement',
+    openingElement: {
+      type: 'JSXOpeningElement',
+      attributes,
+      name: state.createJsxElementName(node.tagName),
+      selfClosing: children.length === 0
+    },
+    closingElement:
+      children.length > 0
+        ? {
+            type: 'JSXClosingElement',
+            name: state.createJsxElementName(node.tagName)
+          }
+        : null,
+    children
+  }
+  state.inherit(node, result)
+  return result
+}
+
+/**
+ * Parse CSS rules as a declaration.
+ *
+ * @param {string} value
+ *   CSS text.
+ * @param {string} tagName
+ *   Element name.
+ * @returns {Record<string, string>}
+ *   Props.
+ */
+function parseStyle(value, tagName) {
+  /** @type {Record<string, string>} */
+  const result = {}
+
+  try {
+    style(value, iterator)
+  } catch (error) {
+    const exception = /** @type {Error} */ (error)
+    exception.message =
+      tagName + '[style]' + exception.message.slice('undefined'.length)
+    throw error
+  }
+
+  return result
+
+  /**
+   * Add `name`, as a CSS prop, to `result`.
+   *
+   * @param {string} name
+   *   Key.
+   * @param {string} value
+   *   Value.
+   * @returns {void}
+   *   Nothing.
+   */
+  function iterator(name, value) {
+    if (name.slice(0, 4) === '-ms-') name = 'ms-' + name.slice(4)
+    result[name.replace(/-([a-z])/g, styleReplacer)] = value
+  }
+}
+
+/**
+ * Uppercase `$1`.
+ *
+ * @param {string} _
+ *   Whatever.
+ * @param {string} $1
+ *   an ASCII alphabetic.
+ * @returns {string}
+ *   Uppercased `$1`.
+ */
+function styleReplacer(_, $1) {
+  return $1.toUpperCase()
+}
+
+/**
+ * Checks if the given string is a valid identifier name.
+ *
+ * Allows dashes, so it’s actually JSX identifier names.
+ *
+ * @param {string} name
+ *   Whatever.
+ * @returns {boolean}
+ *   Whether `name` is a valid JSX identifier.
+ */
+function jsxIdentifierName(name) {
+  let index = -1
+
+  while (++index < name.length) {
+    if (!(index ? cont : identifierStart)(name.charCodeAt(index))) return false
+  }
+
+  // `false` if `name` is empty.
+  return index > 0
+
+  /**
+   * @param {number} code
+   * @returns {boolean}
+   */
+  function cont(code) {
+    return identifierCont(code) || code === 45 /* `-` */
+  }
+}

lib/handlers/index.js

@@ -0,0 +1,28 @@
+import {comment} from './comment.js'
+import {element} from './element.js'
+import {mdxExpression} from './mdx-expression.js'
+import {mdxJsxElement} from './mdx-jsx-element.js'
+import {mdxjsEsm} from './mdxjs-esm.js'
+import {text} from './text.js'
+import {root} from './root.js'
+
+export const handlers = {
+  comment,
+  doctype: ignore,
+  element,
+  mdxFlowExpression: mdxExpression,
+  mdxTextExpression: mdxExpression,
+  mdxJsxFlowElement: mdxJsxElement,
+  mdxJsxTextElement: mdxJsxElement,
+  mdxjsEsm,
+  text,
+  root
+}
+
+/**
+ * Handle a node that is ignored.
+ *
+ * @returns {void}
+ *   Nothing.
+ */
+function ignore() {}

lib/handlers/mdx-expression.js

@@ -0,0 +1,47 @@
+/**
+ * @typedef {import('mdast-util-mdx-expression').MdxFlowExpression} MdxFlowExpression
+ * @typedef {import('mdast-util-mdx-expression').MdxTextExpression} MdxTextExpression
+ * @typedef {import('estree').Expression} Expression
+ * @typedef {import('estree-jsx').JSXEmptyExpression} JsxEmptyExpression
+ * @typedef {import('estree-jsx').JSXExpressionContainer} JsxExpressionContainer
+ * @typedef {import('../state.js').State} State
+ */
+
+import {attachComments} from 'estree-util-attach-comments'
+
+/**
+ * Turn an MDX expression node into an estree node.
+ *
+ * @param {MdxFlowExpression | MdxTextExpression} node
+ *   hast node to transform.
+ * @param {State} state
+ *   Info passed around about the current state.
+ * @returns {JsxExpressionContainer}
+ *   estree expression.
+ */
+export function mdxExpression(node, state) {
+  const estree = node.data && node.data.estree
+  const comments = (estree && estree.comments) || []
+  /** @type {Expression | JsxEmptyExpression | undefined} */
+  let expression
+
+  if (estree) {
+    state.comments.push(...comments)
+    attachComments(estree, estree.comments)
+    expression =
+      (estree.body[0] &&
+        estree.body[0].type === 'ExpressionStatement' &&
+        estree.body[0].expression) ||
+      undefined
+  }
+
+  if (!expression) {
+    expression = {type: 'JSXEmptyExpression'}
+    state.patch(node, expression)
+  }
+
+  /** @type {JsxExpressionContainer} */
+  const result = {type: 'JSXExpressionContainer', expression}
+  state.inherit(node, result)
+  return result
+}