fix: #996 Handle property alias (#997)

* fix: #996 Handle property alias

* fix: Lint - Unnamed function

packages/million/alias.ts

@@ -0,0 +1,99 @@
+/**
+ * From `getAttributeAlias.js` in React-DOM
+ * https://github.com/facebook/react/blob/b09e102ff1e2aaaf5eb6585b04609ac7ff54a5c8/packages/react-dom-bindings/src/shared/getAttributeAlias.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const aliases = new Map([
+  ['acceptCharset', 'accept-charset'],
+  ['htmlFor', 'for'],
+  ['httpEquiv', 'http-equiv'],
+  // HTML and SVG attributes, but the SVG attribute is case sensitive.],
+  ['crossOrigin', 'crossorigin'],
+  // This is a list of all SVG attributes that need special casing.
+  // Regular attributes that just accept strings.],
+  ['accentHeight', 'accent-height'],
+  ['alignmentBaseline', 'alignment-baseline'],
+  ['arabicForm', 'arabic-form'],
+  ['baselineShift', 'baseline-shift'],
+  ['capHeight', 'cap-height'],
+  ['clipPath', 'clip-path'],
+  ['clipRule', 'clip-rule'],
+  ['colorInterpolation', 'color-interpolation'],
+  ['colorInterpolationFilters', 'color-interpolation-filters'],
+  ['colorProfile', 'color-profile'],
+  ['colorRendering', 'color-rendering'],
+  ['dominantBaseline', 'dominant-baseline'],
+  ['enableBackground', 'enable-background'],
+  ['fillOpacity', 'fill-opacity'],
+  ['fillRule', 'fill-rule'],
+  ['floodColor', 'flood-color'],
+  ['floodOpacity', 'flood-opacity'],
+  ['fontFamily', 'font-family'],
+  ['fontSize', 'font-size'],
+  ['fontSizeAdjust', 'font-size-adjust'],
+  ['fontStretch', 'font-stretch'],
+  ['fontStyle', 'font-style'],
+  ['fontVariant', 'font-variant'],
+  ['fontWeight', 'font-weight'],
+  ['glyphName', 'glyph-name'],
+  ['glyphOrientationHorizontal', 'glyph-orientation-horizontal'],
+  ['glyphOrientationVertical', 'glyph-orientation-vertical'],
+  ['horizAdvX', 'horiz-adv-x'],
+  ['horizOriginX', 'horiz-origin-x'],
+  ['imageRendering', 'image-rendering'],
+  ['letterSpacing', 'letter-spacing'],
+  ['lightingColor', 'lighting-color'],
+  ['markerEnd', 'marker-end'],
+  ['markerMid', 'marker-mid'],
+  ['markerStart', 'marker-start'],
+  ['overlinePosition', 'overline-position'],
+  ['overlineThickness', 'overline-thickness'],
+  ['paintOrder', 'paint-order'],
+  ['panose-1', 'panose-1'],
+  ['pointerEvents', 'pointer-events'],
+  ['renderingIntent', 'rendering-intent'],
+  ['shapeRendering', 'shape-rendering'],
+  ['stopColor', 'stop-color'],
+  ['stopOpacity', 'stop-opacity'],
+  ['strikethroughPosition', 'strikethrough-position'],
+  ['strikethroughThickness', 'strikethrough-thickness'],
+  ['strokeDasharray', 'stroke-dasharray'],
+  ['strokeDashoffset', 'stroke-dashoffset'],
+  ['strokeLinecap', 'stroke-linecap'],
+  ['strokeLinejoin', 'stroke-linejoin'],
+  ['strokeMiterlimit', 'stroke-miterlimit'],
+  ['strokeOpacity', 'stroke-opacity'],
+  ['strokeWidth', 'stroke-width'],
+  ['textAnchor', 'text-anchor'],
+  ['textDecoration', 'text-decoration'],
+  ['textRendering', 'text-rendering'],
+  ['transformOrigin', 'transform-origin'],
+  ['underlinePosition', 'underline-position'],
+  ['underlineThickness', 'underline-thickness'],
+  ['unicodeBidi', 'unicode-bidi'],
+  ['unicodeRange', 'unicode-range'],
+  ['unitsPerEm', 'units-per-em'],
+  ['vAlphabetic', 'v-alphabetic'],
+  ['vHanging', 'v-hanging'],
+  ['vIdeographic', 'v-ideographic'],
+  ['vMathematical', 'v-mathematical'],
+  ['vectorEffect', 'vector-effect'],
+  ['vertAdvY', 'vert-adv-y'],
+  ['vertOriginX', 'vert-origin-x'],
+  ['vertOriginY', 'vert-origin-y'],
+  ['wordSpacing', 'word-spacing'],
+  ['writingMode', 'writing-mode'],
+  ['xmlnsXlink', 'xmlns:xlink'],
+  ['xHeight', 'x-height'],
+]);
+
+export default function getAttributeAlias(name: string): string {
+  return aliases.get(name) || name;
+}

packages/million/template.ts

@@ -1,3 +1,4 @@
+import getAttributeAlias from './alias';
 import {
   X_CHAR,
   VOID_ELEMENTS,
@@ -61,8 +62,11 @@ export const renderToTemplate = (
     if (name === 'key' || name === 'ref' || name === 'children') {
       continue;
     }
+
+    const alias = getAttributeAlias(name);
+    if (alias) name = alias;
+
     if (name === 'className') name = 'class';
-    if (name === 'htmlFor') name = 'for';
 
     if (name.startsWith('on')) {
       const isValueHole = '$' in value;

test/alias.test.ts

@@ -0,0 +1,41 @@
+import { describe, it } from 'vitest';
+import type { VElement } from '../packages/million';
+import { block as createBlock } from '../packages/million';
+import type { MillionProps } from '../packages/types';
+
+const fn = (props?: MillionProps): VElement => {
+  return {
+    type: 'div',
+    props: {
+      children: [
+        {
+          type: 'svg',
+          props: {
+            className: props?.bar,
+            strokeWidth: 1,
+            children: [
+              {
+                type: 'path',
+                props: {
+                  d: 'M9 12l2 2 4-4',
+                  strikethroughThickness: props.thickness,
+                },
+              },
+            ],
+          },
+        },
+      ],
+    },
+  };
+};
+
+describe.concurrent('block', () => {
+  it('should resolve alias', ({ expect }) => {
+    const block = createBlock(fn);
+    const main = block({ bar: 'bar', thickness: 2 });
+    main.m();
+    expect(main.l?.outerHTML).toEqual(
+      '<div><svg stroke-width="1" class="bar"><path d="M9 12l2 2 4-4" strikethrough-thickness="2"></path></svg></div>',
+    );
+  });
+});