Refactor some code

Author: wooorm

lib/handlers/li.js

@@ -6,6 +6,16 @@
  * @typedef {import('../state.js').State} State
  */
 
+/**
+ * @typedef ExtractResult
+ *   Result of extracting a leading checkbox.
+ * @property {Element | undefined} checkbox
+ *   The checkbox that was removed, if any.
+ * @property {Element} rest
+ *   If there was a leading checkbox, a deep clone of the node w/o the leading
+ *   checkbox; otherwise a reference to the given, untouched, node.
+ */
+
 import {phrasing} from 'hast-util-phrasing'
 
 /**
@@ -19,15 +29,14 @@ import {phrasing} from 'hast-util-phrasing'
 export function li(state, node) {
   // If the list item starts with a checkbox, remove the checkbox and mark the
   // list item as a GFM task list item.
-  const {cleanNode, checkbox} = extractLeadingCheckbox(node)
-  const checked = checkbox && Boolean(checkbox.properties.checked)
-
-  const spread = spreadout(cleanNode)
-  const children = state.toFlow(state.all(cleanNode))
+  const {rest, checkbox} = extractLeadingCheckbox(node)
+  const checked = checkbox ? Boolean(checkbox.properties.checked) : null
+  const spread = spreadout(rest)
+  const children = state.toFlow(state.all(rest))
 
   /** @type {ListItem} */
   const result = {type: 'listItem', spread, checked, children}
-  state.patch(cleanNode, result)
+  state.patch(node, result)
   return result
 }
 
@@ -75,23 +84,36 @@ function spreadout(node) {
 }
 
 /**
- * If the first bit of content in an element is a checkbox, create a copy of
- * the element that does not include the checkbox and return the cleaned up
- * copy alongside the checkbox that was removed. If there was no leading
- * checkbox, this returns the original element unaltered (not a copy).
+ * Extract a leading checkbox from a list item.
+ *
+ * If there was a leading checkbox, makes a deep clone of the node w/o the
+ * leading checkbox; otherwise a reference to the given, untouched, node is
+ * given back.
+ *
+ * So for example:
+ *
+ * ```html
+ * <li><input type="checkbox">Text</li>
+ * ```
  *
- * This detects trees like:
- *   `<li><input type="checkbox">Text</li>`
- * And returns a tree like:
- *   `<li>Text</li>`
+ * …becomes:
  *
- * Or with nesting:
- *   `<li><p><input type="checkbox">Text</p></li>`
- * Which returns a tree like:
- *   `<li><p>Text</p></li>`
+ * ```html
+ * <li>Text</li>
+ * ```
+ *
+ * ```html
+ * <li><p><input type="checkbox">Text</p></li>
+ * ```
+ *
+ * …becomes:
+ *
+ * ```html
+ * <li><p>Text</p></li>
+ * ```
  *
  * @param {Readonly<Element>} node
- * @returns {{cleanNode: Element, checkbox: Element | null}}
+ * @returns {ExtractResult}
  */
 function extractLeadingCheckbox(node) {
   const head = node.children[0]
@@ -103,31 +125,25 @@ function extractLeadingCheckbox(node) {
     head.properties &&
     (head.properties.type === 'checkbox' || head.properties.type === 'radio')
   ) {
-    return {
-      cleanNode: {...node, children: node.children.slice(1)},
-      checkbox: head
-    }
+    const rest = {...node, children: node.children.slice(1)}
+    return {checkbox: head, rest}
   }
 
-  // The checkbox may be nested in another element. If the first element has
-  // children, look for a leading checkbox inside it.
+  // The checkbox may be nested in another element.
+  // If the first element has children, look for a leading checkbox inside it.
   //
-  // NOTE: this only handles nesting in `<p>` elements, which is most common.
-  // It's possible a leading checkbox might be nested in other types of flow or
+  // This only handles nesting in `<p>` elements, which is most common.
+  // It’s possible a leading checkbox might be nested in other types of flow or
   // phrasing elements (and *deeply* nested, which is not possible with `<p>`).
   // Limiting things to `<p>` elements keeps this simpler for now.
   if (head && head.type === 'element' && head.tagName === 'p') {
-    const {cleanNode: cleanHead, checkbox} = extractLeadingCheckbox(head)
+    const {checkbox, rest: restHead} = extractLeadingCheckbox(head)
+
     if (checkbox) {
-      return {
-        cleanNode: {
-          ...node,
-          children: [cleanHead, ...node.children.slice(1)]
-        },
-        checkbox
-      }
+      const rest = {...node, children: [restHead, ...node.children.slice(1)]}
+      return {checkbox, rest}
     }
   }
 
-  return {cleanNode: node, checkbox: null}
+  return {checkbox: undefined, rest: node}
 }