client.js
No OneTemporary
Actions

Size

3 KB

Referenced Files

None

Subscribers

None

client.js
View Options

	const VOID = new Set(['br', 'hr', 'img', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'source', 'track', 'wbr']);

	const ESCAPE_MAP = {
	'&': '&',
	'<': '<',
	'>': '>',
	'"': '"',
	"'": '''
	};

	const ATTR_MAP = {
	className: 'class',
	htmlFor: 'for',
	tabIndex: 'tabindex',
	readOnly: 'readonly',
	maxLength: 'maxlength',
	cellSpacing: 'cellspacing',
	cellPadding: 'cellpadding',
	rowSpan: 'rowspan',
	colSpan: 'colspan',
	encType: 'enctype',
	contentEditable: 'contenteditable',
	crossOrigin: 'crossorigin',
	accessKey: 'accesskey',
	autoComplete: 'autocomplete',
	autoFocus: 'autofocus',
	autoPlay: 'autoplay',
	formAction: 'formaction',
	noValidate: 'novalidate'
	};

	const UNITLESS = new Set([
	'animationIterationCount',
	'columns',
	'columnCount',
	'flex',
	'flexGrow',
	'flexShrink',
	'fontWeight',
	'gridColumn',
	'gridRow',
	'lineHeight',
	'opacity',
	'order',
	'orphans',
	'tabSize',
	'widows',
	'zIndex'
	]);

	function camelToKebab(str) {
	return str.replace(/[A-Z]/g, ch => `-${ch.toLowerCase()}`);
	}

	function escapeHTML(str) {
	return String(str).replace(/[&<>"']/g, ch => ESCAPE_MAP[ch]);
	}

	function formatValue(key, val) {
	if (typeof val === 'number' && val !== 0 && !UNITLESS.has(key)) return `${val}px`;
	return val;
	}

	function styleToString(style) {
	return Object.entries(style)
	.filter(([, v]) => v != null && v !== '')
	.map(([k, v]) => `${camelToKebab(k)}:${formatValue(k, v)}`)
	.join(';');
	}

	function renderAttrs(props) {
	let result = '';
	for (const [key, val] of Object.entries(props)) {
	if (key === 'children' \|\| key === 'dangerouslySetInnerHTML') continue;
	if (key.startsWith('on') && key[2] >= 'A' && key[2] <= 'Z') continue;
	if (val == null \|\| val === false) continue;

	if (key === 'style' && typeof val === 'object') {
	result += ` style="${escapeHTML(styleToString(val))}"`;
	continue;
	}

	const attr = ATTR_MAP[key] \|\| key;
	if (val === true) result += ` ${attr}`;
	else result += ` ${attr}="${escapeHTML(val)}"`;
	}
	return result;
	}

	export function renderToHTML(element) {
	if (element == null \|\| typeof element === 'boolean') return '';
	if (typeof element === 'string') return escapeHTML(element);
	if (typeof element === 'number') return String(element);
	if (Array.isArray(element)) return element.map(renderToHTML).join('');

	const { type, props } = element;

	if (type === Symbol.for('react.fragment') \|\| type === undefined) {
	return renderChildren(props?.children);
	}

	if (typeof type === 'function') {
	if (type.prototype && type.prototype.isReactComponent) {
	const instance = new type(props);
	return renderToHTML(instance.render());
	}
	return renderToHTML(type(props));
	}

	const attrStr = renderAttrs(props \|\| {});
	if (VOID.has(type)) return `<${type}${attrStr}>`;

	if (props?.dangerouslySetInnerHTML) {
	return `<${type}${attrStr}>${props.dangerouslySetInnerHTML.__html}</${type}>`;
	}

	return `<${type}${attrStr}>${renderChildren(props?.children)}</${type}>`;
	}

	function renderChildren(children) {
	if (children == null) return '';
	if (Array.isArray(children)) return children.map(renderToHTML).join('');
	return renderToHTML(children);
	}

File Metadata

Mime Type: application/javascript
Expires: Thu, Mar 26, 4:46 PM (2 d)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 511781
Default Alt Text: client.js (3 KB)

Event Timeline