refactor: Switch SVG_KEBAB_CASE over

preactjs · Sep 22, 2024 · c12a3b5 · c12a3b5
1 parent 8e49cc2
commit c12a3b5
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 7 deletions.
diff --git a/src/index.js b/src/index.js
@@ -5,7 +5,7 @@ import {
 	NAMESPACE_REPLACE_REGEX,
 	HTML_LOWER_CASE,
 	HTML_ENUMERATED,
-	SVG_CAMEL_CASE,
+	SVG_KEBAB_CASE,
 	createComponent
 } from './lib/util.js';
 import { options, h, Fragment } from 'preact';
@@ -631,7 +631,7 @@ function _renderToString(
 					// serialize boolean aria-xyz or enumerated attribute values as strings
 					v = v + EMPTY_STR;
 				} else if (isSvgMode) {
-					if (SVG_CAMEL_CASE.test(name)) {
+					if (SVG_KEBAB_CASE.has(name)) {
 						name =
 							name === 'panose1'
 								? 'panose-1'

diff --git a/src/lib/util.js b/src/lib/util.js
@@ -18,7 +18,6 @@ export const VOID_ELEMENTS = new Set([
 ]);
 export const UNSAFE_NAME = /[\s\n\\/='"\0<>]/;
 export const NAMESPACE_REPLACE_REGEX = /^(xlink|xmlns|xml)([A-Z])/;
-
 export const HTML_LOWER_CASE = new Set([
 	'accessKey',
 	'accessKeyLabel',
@@ -64,8 +63,82 @@ export const HTML_LOWER_CASE = new Set([
 	'itemID',
 	'itemRef'
 ]);
-
-export const SVG_CAMEL_CASE = /^ac|^ali|arabic|basel|cap|clipPath$|clipRule$|color|dominant|enable|fill|flood|font|glyph[^R]|horiz|image|letter|lighting|marker[^WUH]|overline|panose|pointe|paint|rendering|shape|stop|strikethrough|stroke|text[^L]|transform|underline|unicode|units|^v[^i]|^w|^xH/;
+export const SVG_KEBAB_CASE = new Set([
+	'accentHeight',
+	'accumulate',
+	'alignmentBaseline',
+	'arabicForm',
+	'baselineShift',
+	'capHeight',
+	'clipPath',
+	'clipRule',
+	'colorInterpolation',
+	'colorInterpolationFilters',
+	'colorProfile',
+	'colorRendering',
+	'dominantBaseline',
+	'enableBackground',
+	'fillOpacity',
+	'fillRule',
+	'floodColor',
+	'floodOpacity',
+	'fontFamily',
+	'fontSize',
+	'fontSizeAdjust',
+	'fontStretch',
+	'fontStyle',
+	'fontVariant',
+	'fontWeight',
+	'glyphName',
+	'glyphOrientationHorizontal',
+	'glyphOrientationVertical',
+	'horizAdvX',
+	'horizOriginX',
+	'imageRendering',
+	'letterSpacing',
+	'lightingColor',
+	'markerEnd',
+	'markerMid',
+	'markerStart',
+	'overlinePosition',
+	'overlineThickness',
+	'paintOrder',
+	'panose1',
+	'pointerEvents',
+	'renderingIntent',
+	'shapeRendering',
+	'stopColor',
+	'stopOpacity',
+	'strikethroughPosition',
+	'strikethroughThickness',
+	'strokeDasharray',
+	'strokeDashoffset',
+	'strokeLinecap',
+	'strokeLinejoin',
+	'strokeMiterlimit',
+	'strokeOpacity',
+	'strokeWidth',
+	'textAnchor',
+	'textDecoration',
+	'textRendering',
+	'transformOrigin',
+	'underlinePosition',
+	'underlineThickness',
+	'unicodeBidi',
+	'unicodeRange',
+	'unitsPerEm',
+	'vAlphabetic',
+	'vectorEffect',
+	'vertAdvY',
+	'vertOriginX',
+	'vertOriginY',
+	'vHanging',
+	'vIdeographic',
+	'vMathematical',
+	'wordSpacing',
+	'writingMode',
+	'xHeight'
+]);
 
 // Boolean DOM properties that translate to enumerated ('true'/'false') attributes
 export const HTML_ENUMERATED = new Set(['draggable', 'spellcheck']);

diff --git a/src/pretty.js b/src/pretty.js
@@ -8,7 +8,7 @@ import {
 	UNSAFE_NAME,
 	VOID_ELEMENTS,
 	NAMESPACE_REPLACE_REGEX,
-	SVG_CAMEL_CASE,
+	SVG_KEBAB_CASE,
 	HTML_LOWER_CASE,
 	getContext
 } from './lib/util.js';
@@ -252,7 +252,7 @@ function _renderToStringPretty(
 			} else if (NAMESPACE_REPLACE_REGEX.test(name)) {
 				name = name.replace(NAMESPACE_REPLACE_REGEX, '$1:$2').toLowerCase();
 			} else if (isSvgMode) {
-				if (SVG_CAMEL_CASE.test(name)) {
+				if (SVG_KEBAB_CASE.has(name)) {
 					name =
 						name === 'panose1'
 							? 'panose-1'