30:T10c9,function asTable(obj, options = {}) { const { height = 400, scope = DOM.uid().id, // Context is the parent object .path and .value filter = (value, path, context) => true, formatKey = (key, path, context) => key, formatValue = (value, path, context) => serialize(value), expand = expandNonEmpty, copyRoot = "ROOT", css = defaultCss } = options; const withKey = (key, el) => { el.dataset.keyType = typeof key; el.dataset.key = key; return el; }; let filtered = false; const filterPath = refPath => { if(filtered) { filtered = false; wrapper.firstChild.replaceWith(format(obj, filter)); return; } filtered = true; const _filter = (val, path, context) => { if(path.length <= refPath.length) { const refKey = refPath[path.length - 1]; const key = path[path.length - 1]; if(refKey !== key && !(isIndex(refKey) && isIndex(key))) return false; } return filter(val, path, context); }; const table = format(obj, _filter, refPath); if(table instanceof HTMLTableElement) { const tokens = refPath.flatMap((d, i) => [ i ? html`▸` : "", html`${isIndex(d) ? "*" : d}` ]); table.prepend(html`Filtering by:${tokens}`); } wrapper.firstChild.replaceWith(table); }; const getHandlers = path => ({ onclick: e => { if(document.getSelection()?.type === "Range") return; const handle = () => { e.preventDefault(); }; if(e.shiftKey) handle(), copyPath(copyRoot, path); else if(e.altKey) handle(), filterPath(path); else if(e.target.localName !== "a") { handle(); e.currentTarget.parentElement.classList.toggle("hidden"); } }, }); const title = "Shift-click to copy path\nAlt-click to filter path"; const _renderValue = (value, path, context) => { const output = formatValue(value, path, context); const type = output instanceof Element ? `type-custom` : `type-${typeof value}`; return html`

${output}`; }; const _renderRow = (key, content, path, context) => { return withKey(key, html`

${formatKey(key, path, context)}

${content}`); }; const format = (root, filter, refPath) => { const pathVisits = new WeakMap(); return walk(root, _expand, _format); function _expand(value, path, context) { let visits = pathVisits.get(context.path); if(visits?.has(value)) return; const keys = expand(value, path, context); if(!keys) return; visits = new Set(visits); visits.add(value); pathVisits.set(path, visits); const _context = {value, path}; return keys.filter((key) => { // Capture security errors. Todo: Make this optional. try { return filter(value[key], [...path, key], _context) } catch(e) { } }); } function _format(valueOrKeys, path, context, isLeaf) { if(isLeaf) { return _renderValue(valueOrKeys, path, { ...context, isRecursion: pathVisits.get(context.path)?.has(valueOrKeys), isLeaf, }); } // Handle objects without expandable properties. if(!valueOrKeys.length) { // While a path filter is active, skip partially matching paths. if(path.length < refPath?.length) return; // Retrieve the actual value from the context. const key = path[path.length - 1]; const value = context?.value?.[key] ?? context.value; return _renderValue(value, path, {...context, isEmpty: true}); } const rows = []; for(const [key, content] of valueOrKeys) { if(content) rows.push(_renderRow(key, content, path, context)); } return rows.length ? html`${rows}` : undefined; } }; const wrapper = htl.html`

${format(obj, filter)}