Skip to content

ref: comptime lookup for tagName #1544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

ref: comptime lookup for tagName #1544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
fcb79af
ref: comptime lookup for tagName
JonasBa Jul 20, 2024
c64cac0
format
JonasBa Jul 20, 2024
2a966f4
revert mutation change
JonasBa Jul 20, 2024
de5d5f8
add changeset
JonasBa Jul 20, 2024
f9028de
Merge branch 'master' into jb/perf/get-valid-tagname
JonasBa Sep 19, 2024
de28f51
remove unused fn
JonasBa Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/sour-feet-smile.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"rrweb-snapshot": minor
"rrdom": minor
---

improve tagName resolution
2 changes: 1 addition & 1 deletion packages/rrdom/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ function getValidTagName(element: HTMLElement): string {
if (element instanceof HTMLFormElement) {
return 'FORM';
}
return element.tagName.toUpperCase();
return element.tagName;
Copy link
Member

@Juice10 Juice10 Jul 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe for XML the tagNames are not always uppercased. But maybe this is more correct in that case. Also I'm not sure in what cases we record XML (maybe for some older XHTML websites?).

Copy link
Contributor Author

@JonasBa JonasBa Jul 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe for XML the tagNames are not always uppercased.

Correct. The only thing I'm unsure of if if this change has any downstream effects. I dont know if we rely on this to be uppercase, but my knowledge here is pretty limited.

}

/**
Expand Down
158 changes: 158 additions & 0 deletions packages/rrweb-snapshot/src/snapshot.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ export function genId(): number {
}

function getValidTagName(element: HTMLElement): Lowercase<string> {
const commonTagName = HTML_TAGNAMES[element.tagName];
if (commonTagName) {
return commonTagName;
}

// https://github.com/rrweb-io/rrweb-snapshot/issues/56
if (element instanceof HTMLFormElement) {
return 'form';
}
Expand All @@ -57,6 +63,158 @@ function getValidTagName(element: HTMLElement): Lowercase<string> {
return processedTagName;
}

const HTML_TAGNAMES: Record<string, Lowercase<string>> = {
A: 'a',
ABBR: 'abbr',
ACRONYM: 'acronym',
ADDRESS: 'address',
APPLET: 'applet',
AREA: 'area',
ARTICLE: 'article',
ASIDE: 'aside',
AUDIO: 'audio',
B: 'b',
BASE: 'base',
BASEFONT: 'basefont',
BDI: 'bdi',
BDO: 'bdo',
BGSOUND: 'bgsound',
BIG: 'big',
BLINK: 'blink',
BLOCKQUOTE: 'blockquote',
BODY: 'body',
BR: 'br',
BUTTON: 'button',
CANVAS: 'canvas',
CAPTION: 'caption',
CENTER: 'center',
CITE: 'cite',
CODE: 'code',
COL: 'col',
COLGROUP: 'colgroup',
COMMAND: 'command',
CONTENT: 'content',
DATA: 'data',
DATALIST: 'datalist',
DD: 'dd',
DEL: 'del',
DETAILS: 'details',
DFN: 'dfn',
DIALOG: 'dialog',
DIR: 'dir',
DIV: 'div',
DL: 'dl',
DT: 'dt',
ELEMENT: 'element',
EM: 'em',
EMBED: 'embed',
FIELDSET: 'fieldset',
FIGCAPTION: 'figcaption',
FIGURE: 'figure',
FONT: 'font',
FOOTER: 'footer',
FORM: 'form',
FRAME: 'frame',
FRAMESET: 'frameset',
H1: 'h1',
H2: 'h2',
H3: 'h3',
H4: 'h4',
H5: 'h5',
H6: 'h6',
HEAD: 'head',
HEADER: 'header',
HGROUP: 'hgroup',
HR: 'hr',
HTML: 'html',
I: 'i',
IFRAME: 'iframe',
IMAGE: 'image',
IMG: 'img',
INPUT: 'input',
INS: 'ins',
ISINDEX: 'isindex',
KBD: 'kbd',
KEYGEN: 'keygen',
LABEL: 'label',
LEGEND: 'legend',
LI: 'li',
LINK: 'link',
LISTING: 'listing',
MAIN: 'main',
MAP: 'map',
MARK: 'mark',
MARQUEE: 'marquee',
MATH: 'math',
MENU: 'menu',
MENUITEM: 'menuitem',
META: 'meta',
METER: 'meter',
MULTICOL: 'multicol',
NAV: 'nav',
NEXTID: 'nextid',
NOBR: 'nobr',
NOEMBED: 'noembed',
NOFRAMES: 'noframes',
NOSCRIPT: 'noscript',
OBJECT: 'object',
OL: 'ol',
OPTGROUP: 'optgroup',
OPTION: 'option',
OUTPUT: 'output',
P: 'p',
PARAM: 'param',
PICTURE: 'picture',
PLAINTEXT: 'plaintext',
PRE: 'pre',
PROGRESS: 'progress',
Q: 'q',
RB: 'rb',
RBC: 'rbc',
RP: 'rp',
RT: 'rt',
RTC: 'rtc',
RUBY: 'ruby',
S: 's',
SAMP: 'samp',
SCRIPT: 'script',
SEARCH: 'search',
SECTION: 'section',
SELECT: 'select',
SHADOW: 'shadow',
SLOT: 'slot',
SMALL: 'small',
SOURCE: 'source',
SPACER: 'spacer',
SPAN: 'span',
STRIKE: 'strike',
STRONG: 'strong',
STYLE: 'style',
SUB: 'sub',
SUMMARY: 'summary',
SUP: 'sup',
SVG: 'svg',
TABLE: 'table',
TBODY: 'tbody',
TD: 'td',
TEMPLATE: 'template',
TEXTAREA: 'textarea',
TFOOT: 'tfoot',
TH: 'th',
THEAD: 'thead',
TIME: 'time',
TITLE: 'title',
TR: 'tr',
TRACK: 'track',
TT: 'tt',
U: 'u',
UL: 'ul',
VAR: 'var',
VIDEO: 'video',
WBR: 'wbr',
XMP: 'xmp',
};

let canvasService: HTMLCanvasElement | null;
let canvasCtx: CanvasRenderingContext2D | null;

Expand Down