|
| 1 | +/** |
| 2 | + * Copyright (c) Meta Platforms, Inc. and affiliates. |
| 3 | + * |
| 4 | + * This source code is licensed under the MIT license found in the |
| 5 | + * LICENSE file in the root directory of this source tree. |
| 6 | + */ |
| 7 | + |
| 8 | +import type { Config, NewPlugin, Printer, Refs } from '../types' |
| 9 | +import { |
| 10 | + printChildren, |
| 11 | + printComment, |
| 12 | + printElement, |
| 13 | + printElementAsLeaf, |
| 14 | + printProps, |
| 15 | + printShadowRoot, |
| 16 | + printText, |
| 17 | +} from './lib/markup' |
| 18 | + |
| 19 | +const ELEMENT_NODE = 1 |
| 20 | +const TEXT_NODE = 3 |
| 21 | +const COMMENT_NODE = 8 |
| 22 | +const FRAGMENT_NODE = 11 |
| 23 | + |
| 24 | +const ELEMENT_REGEXP = /^(?:(?:HTML|SVG)\w*)?Element$/ |
| 25 | + |
| 26 | +function testHasAttribute(val: any) { |
| 27 | + try { |
| 28 | + return typeof val.hasAttribute === 'function' && val.hasAttribute('is') |
| 29 | + } |
| 30 | + catch { |
| 31 | + return false |
| 32 | + } |
| 33 | +} |
| 34 | + |
| 35 | +function testNode(val: any) { |
| 36 | + const constructorName = val.constructor.name |
| 37 | + const { nodeType, tagName } = val |
| 38 | + const isCustomElement |
| 39 | + = (typeof tagName === 'string' && tagName.includes('-')) |
| 40 | + || testHasAttribute(val) |
| 41 | + |
| 42 | + return ( |
| 43 | + (nodeType === ELEMENT_NODE |
| 44 | + && (ELEMENT_REGEXP.test(constructorName) || isCustomElement)) |
| 45 | + || (nodeType === TEXT_NODE && constructorName === 'Text') |
| 46 | + || (nodeType === COMMENT_NODE && constructorName === 'Comment') |
| 47 | + || (nodeType === FRAGMENT_NODE && constructorName === 'DocumentFragment') |
| 48 | + ) |
| 49 | +} |
| 50 | + |
| 51 | +export const test: NewPlugin['test'] = (val: any) => |
| 52 | + val?.constructor?.name && testNode(val) |
| 53 | + |
| 54 | +type HandledType = Element | Text | Comment | DocumentFragment |
| 55 | + |
| 56 | +function nodeIsText(node: HandledType): node is Text { |
| 57 | + return node.nodeType === TEXT_NODE |
| 58 | +} |
| 59 | + |
| 60 | +function nodeIsComment(node: HandledType): node is Comment { |
| 61 | + return node.nodeType === COMMENT_NODE |
| 62 | +} |
| 63 | + |
| 64 | +function nodeIsFragment(node: HandledType): node is DocumentFragment { |
| 65 | + return node.nodeType === FRAGMENT_NODE |
| 66 | +} |
| 67 | + |
| 68 | +export interface FilterConfig extends Config { |
| 69 | + filterNode?: (node: any) => boolean |
| 70 | +} |
| 71 | + |
| 72 | +function filterChildren(children: any[], filterNode?: (node: any) => boolean): any[] { |
| 73 | + // Filter out text nodes that only contain whitespace to prevent empty lines |
| 74 | + // This is done regardless of whether a filterNode is provided |
| 75 | + let filtered = children.filter((node) => { |
| 76 | + // Filter out text nodes that are only whitespace |
| 77 | + if (node.nodeType === TEXT_NODE) { |
| 78 | + const text = node.data || '' |
| 79 | + // Keep text nodes that have non-whitespace content |
| 80 | + return text.trim().length > 0 |
| 81 | + } |
| 82 | + return true |
| 83 | + }) |
| 84 | + |
| 85 | + // Apply additional user-provided filter if specified |
| 86 | + if (filterNode) { |
| 87 | + filtered = filtered.filter(filterNode) |
| 88 | + } |
| 89 | + |
| 90 | + return filtered |
| 91 | +} |
| 92 | + |
| 93 | +export function createDOMElementFilter(filterNode?: (node: any) => boolean): NewPlugin { |
| 94 | + return { |
| 95 | + test, |
| 96 | + serialize: ( |
| 97 | + node: HandledType, |
| 98 | + config: Config, |
| 99 | + indentation: string, |
| 100 | + depth: number, |
| 101 | + refs: Refs, |
| 102 | + printer: Printer, |
| 103 | + ) => { |
| 104 | + if (nodeIsText(node)) { |
| 105 | + return printText(node.data, config) |
| 106 | + } |
| 107 | + |
| 108 | + if (nodeIsComment(node)) { |
| 109 | + return printComment(node.data, config) |
| 110 | + } |
| 111 | + |
| 112 | + const type = nodeIsFragment(node) |
| 113 | + ? 'DocumentFragment' |
| 114 | + : node.tagName.toLowerCase() |
| 115 | + |
| 116 | + if (++depth > config.maxDepth) { |
| 117 | + return printElementAsLeaf(type, config) |
| 118 | + } |
| 119 | + |
| 120 | + const children = Array.prototype.slice.call(node.childNodes || node.children) |
| 121 | + const filteredChildren = filterChildren(children, filterNode) |
| 122 | + |
| 123 | + const shadowChildren = (nodeIsFragment(node) || !node.shadowRoot) |
| 124 | + ? [] |
| 125 | + : Array.prototype.slice.call(node.shadowRoot.children) |
| 126 | + const filteredShadowChildren = filterChildren(shadowChildren, filterNode) |
| 127 | + |
| 128 | + return printElement( |
| 129 | + type, |
| 130 | + printProps( |
| 131 | + nodeIsFragment(node) |
| 132 | + ? [] |
| 133 | + : Array.from(node.attributes, attr => attr.name).sort(), |
| 134 | + nodeIsFragment(node) |
| 135 | + ? {} |
| 136 | + : [...node.attributes].reduce<Record<string, string>>( |
| 137 | + (props, attribute) => { |
| 138 | + props[attribute.name] = attribute.value |
| 139 | + return props |
| 140 | + }, |
| 141 | + {}, |
| 142 | + ), |
| 143 | + config, |
| 144 | + indentation + config.indent, |
| 145 | + depth, |
| 146 | + refs, |
| 147 | + printer, |
| 148 | + ), |
| 149 | + (filteredShadowChildren.length > 0 |
| 150 | + ? printShadowRoot(filteredShadowChildren, config, indentation + config.indent, depth, refs, printer) |
| 151 | + : '') |
| 152 | + + printChildren( |
| 153 | + filteredChildren, |
| 154 | + config, |
| 155 | + indentation + config.indent, |
| 156 | + depth, |
| 157 | + refs, |
| 158 | + printer, |
| 159 | + ), |
| 160 | + config, |
| 161 | + indentation, |
| 162 | + ) |
| 163 | + }, |
| 164 | + } |
| 165 | +} |
| 166 | + |
| 167 | +export default createDOMElementFilter |
0 commit comments