|
| 1 | +// Interface representing a Stencil VNode structure |
| 2 | +interface VNodeStencil { |
| 3 | + $tag$?: string; |
| 4 | + $attrs$?: Record<string, unknown> | null; |
| 5 | + $children$?: Array<VNodeStencil | VNodeLike | string> | null; |
| 6 | + $text$?: string | null; |
| 7 | +} |
| 8 | + |
| 9 | +// Interface representing a React-like VNode structure |
| 10 | +interface VNodeLike { |
| 11 | + type?: string | ((...args: unknown[]) => unknown); |
| 12 | + props?: Record<string, unknown> & { children?: Array<VNodeLike | string> | VNodeLike | string }; |
| 13 | + children?: Array<VNodeLike | string> | VNodeLike | string; |
| 14 | +} |
| 15 | + |
| 16 | +// Escapes HTML special characters to prevent XSS attacks |
| 17 | +const escapeHtml = (value: string): string => |
| 18 | + value |
| 19 | + .replace(/&/g, '&') |
| 20 | + .replace(/</g, '<') |
| 21 | + .replace(/>/g, '>') |
| 22 | + .replace(/"/g, '"') |
| 23 | + .replace(/'/g, '''); |
| 24 | + |
| 25 | +// Converts attribute object to HTML attribute string |
| 26 | +const attrsToString = (attrs: Record<string, unknown> | null | undefined): string => { |
| 27 | + if (!attrs) { |
| 28 | + return ''; |
| 29 | + } |
| 30 | + |
| 31 | + return Object.entries(attrs) |
| 32 | + .filter(([, v]) => v !== undefined && v !== null && v !== false) |
| 33 | + .map(([k, v]) => (v === true ? k : `${k}="${escapeHtml(String(v))}"`)) |
| 34 | + .join(' '); |
| 35 | +}; |
| 36 | + |
| 37 | +// Normalizes children to a consistent array format |
| 38 | +const normalizeChildren = (children: unknown): Array<VNodeStencil | VNodeLike | string> => { |
| 39 | + if (children == null) { |
| 40 | + return []; |
| 41 | + } |
| 42 | + |
| 43 | + if (Array.isArray(children)) { |
| 44 | + return children as Array<VNodeStencil | VNodeLike | string>; |
| 45 | + } |
| 46 | + |
| 47 | + return [children as VNodeStencil | VNodeLike | string]; |
| 48 | +}; |
| 49 | + |
| 50 | +// Renders a Stencil VNode to HTML string |
| 51 | +const renderStencil = (node: VNodeStencil): string => { |
| 52 | + if (node.$text$ != null) { |
| 53 | + return escapeHtml(String(node.$text$)); |
| 54 | + } |
| 55 | + |
| 56 | + const tag = node.$tag$ || 'div'; |
| 57 | + const attrs = attrsToString(node.$attrs$ || undefined); |
| 58 | + const children = (node.$children$ || []).map(renderAny).join(''); |
| 59 | + const attrsStr = attrs ? ` ${attrs}` : ''; |
| 60 | + |
| 61 | + return `<${tag}${attrsStr}>${children}</${tag}>`; |
| 62 | +}; |
| 63 | + |
| 64 | +// Renders a React-like VNode to HTML string |
| 65 | +const renderLike = (node: VNodeLike): string => { |
| 66 | + const tag = typeof node.type === 'string' ? node.type : 'div'; |
| 67 | + const props = node.props || {}; |
| 68 | + const { children, ...rest } = props as Record<string, unknown> & { children?: unknown }; |
| 69 | + const attrs = attrsToString(rest); |
| 70 | + const childrenArr = normalizeChildren(children ?? node.children); |
| 71 | + const childrenStr = childrenArr.map(renderAny).join(''); |
| 72 | + const attrsStr = attrs ? ` ${attrs}` : ''; |
| 73 | + |
| 74 | + return `<${tag}${attrsStr}>${childrenStr}</${tag}>`; |
| 75 | +}; |
| 76 | + |
| 77 | +// Main export function that converts JSX to HTML string |
| 78 | +export const renderJsxToHtml = (node: unknown): string => renderAny(node); |
| 79 | + |
| 80 | +// Renders any node type to HTML string with type detection |
| 81 | +const renderAny = (node: unknown): string => { |
| 82 | + if (node == null || node === false) { |
| 83 | + return ''; |
| 84 | + } |
| 85 | + |
| 86 | + if (typeof node === 'string' || typeof node === 'number') { |
| 87 | + return escapeHtml(String(node)); |
| 88 | + } |
| 89 | + |
| 90 | + // Heuristics for detecting node types |
| 91 | + if (typeof node === 'object') { |
| 92 | + const o = node as Record<string, unknown>; |
| 93 | + |
| 94 | + // Check for Stencil VNode |
| 95 | + if ('$tag$' in o || '$text$' in o || '$children$' in o) { |
| 96 | + return renderStencil(node as VNodeStencil); |
| 97 | + } |
| 98 | + |
| 99 | + // Check for React-like VNode |
| 100 | + if ('type' in o || 'props' in o || 'children' in o) { |
| 101 | + return renderLike(node as VNodeLike); |
| 102 | + } |
| 103 | + } |
| 104 | + |
| 105 | + // Fallback for unknown node types |
| 106 | + return escapeHtml(String(node)); |
| 107 | +}; |
0 commit comments