@barefootjs/shared 0.18.2 → 0.18.4

package/dist/dom-prop.d.ts

@@ -42,9 +42,11 @@ export declare function toHTMLAttrName(key: string): string;
  * Runtime variant of attribute name mapping that additionally applies
  * camelCase→kebab conversion for `data-*` and `aria-*` convenience
  * props (e.g. `dataTestId` → `data-test-id`) and preserves SVG XML
- * attribute casing. All other non-SVG keys pass through unchanged —
- * standard HTML attributes like `tabIndex` and `autoFocus` must not
- * be kebab-cased (`tab-index` / `auto-focus` are not valid attrs).
+ * attribute casing. HTML camelCase aliases resolve through the same
+ * `HTML_CAMEL_ALIASES` table as the compile-time variant (`tabIndex` →
+ * `tabindex`); generic kebab-casing still applies ONLY to `data-*` /
+ * `aria-*` — an unknown camelCase key passes through unchanged rather
+ * than being guessed into a hyphenated non-attribute.
  */
 export declare function toHTMLAttrNameRuntime(key: string): string;
 /**

package/dist/index.js

@@ -84,6 +84,63 @@ var SVG_CAMEL_TO_KEBAB = {
   markerMid: "marker-mid",
   markerEnd: "marker-end"
 };
+var HTML_CAMEL_ALIASES = {
+  acceptCharset: "accept-charset",
+  accessKey: "accesskey",
+  allowFullScreen: "allowfullscreen",
+  autoCapitalize: "autocapitalize",
+  autoComplete: "autocomplete",
+  autoCorrect: "autocorrect",
+  autoFocus: "autofocus",
+  autoPlay: "autoplay",
+  cellPadding: "cellpadding",
+  cellSpacing: "cellspacing",
+  charSet: "charset",
+  colSpan: "colspan",
+  contentEditable: "contenteditable",
+  controlsList: "controlslist",
+  crossOrigin: "crossorigin",
+  dateTime: "datetime",
+  dirName: "dirname",
+  encType: "enctype",
+  enterKeyHint: "enterkeyhint",
+  fetchPriority: "fetchpriority",
+  formAction: "formaction",
+  formEncType: "formenctype",
+  formMethod: "formmethod",
+  formNoValidate: "formnovalidate",
+  formTarget: "formtarget",
+  frameBorder: "frameborder",
+  hrefLang: "hreflang",
+  httpEquiv: "http-equiv",
+  imageSizes: "imagesizes",
+  imageSrcSet: "imagesrcset",
+  inputMode: "inputmode",
+  itemID: "itemid",
+  itemProp: "itemprop",
+  itemRef: "itemref",
+  itemScope: "itemscope",
+  itemType: "itemtype",
+  marginHeight: "marginheight",
+  marginWidth: "marginwidth",
+  maxLength: "maxlength",
+  minLength: "minlength",
+  noModule: "nomodule",
+  noValidate: "novalidate",
+  playsInline: "playsinline",
+  popoverTarget: "popovertarget",
+  popoverTargetAction: "popovertargetaction",
+  radioGroup: "radiogroup",
+  readOnly: "readonly",
+  referrerPolicy: "referrerpolicy",
+  rowSpan: "rowspan",
+  spellCheck: "spellcheck",
+  srcDoc: "srcdoc",
+  srcLang: "srclang",
+  srcSet: "srcset",
+  tabIndex: "tabindex",
+  useMap: "usemap"
+};
 var SVG_XML_CAMEL_ATTRS = new Set([
   "allowReorder",
   "attributeName",
@@ -178,6 +235,9 @@ function toHTMLAttrName(key) {
     return "class";
   if (key === "htmlFor")
     return "for";
+  const htmlAlias = HTML_CAMEL_ALIASES[key];
+  if (htmlAlias !== undefined)
+    return htmlAlias;
   const svgKebab = SVG_CAMEL_TO_KEBAB[key];
   if (svgKebab !== undefined)
     return svgKebab;
@@ -188,6 +248,9 @@ function toHTMLAttrNameRuntime(key) {
     return "class";
   if (key === "htmlFor")
     return "for";
+  const htmlAlias = HTML_CAMEL_ALIASES[key];
+  if (htmlAlias !== undefined)
+    return htmlAlias;
   const svgKebab = SVG_CAMEL_TO_KEBAB[key];
   if (svgKebab !== undefined)
     return svgKebab;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/shared",
-  "version": "0.18.2",
+  "version": "0.18.4",
   "description": "Shared constants for BarefootJS compiler and runtime",
   "type": "module",
   "main": "./dist/index.js",

package/src/__tests__/dom-prop.test.ts

@@ -106,12 +106,27 @@ describe('toHTMLAttrName (compile-time)', () => {
     expect(toHTMLAttrName('strokeWidth')).toBe('stroke-width')
   })
 
-  test('tabIndex passes through (no generic kebab)', () => {
-    expect(toHTMLAttrName('tabIndex')).toBe('tabIndex')
+  // #2172: HTML camelCase aliases resolve through HTML_CAMEL_ALIASES —
+  // these are known HTML attributes with a defined lowercase spelling,
+  // NOT the generic kebab conversion (which stays data-*/aria-* only).
+  test('tabIndex lowers to tabindex (HTML alias table)', () => {
+    expect(toHTMLAttrName('tabIndex')).toBe('tabindex')
   })
 
-  test('autoFocus passes through (no generic kebab)', () => {
-    expect(toHTMLAttrName('autoFocus')).toBe('autoFocus')
+  test('autoFocus lowers to autofocus (HTML alias table)', () => {
+    expect(toHTMLAttrName('autoFocus')).toBe('autofocus')
+  })
+
+  test('readOnly lowers to the BOOLEAN_ATTRS member readonly', () => {
+    expect(toHTMLAttrName('readOnly')).toBe('readonly')
+  })
+
+  test('spellCheck lowers to the enumerated (non-boolean) spellcheck', () => {
+    expect(toHTMLAttrName('spellCheck')).toBe('spellcheck')
+  })
+
+  test('unknown camelCase names still pass through unchanged', () => {
+    expect(toHTMLAttrName('myCustomAttr')).toBe('myCustomAttr')
   })
 })
 
@@ -144,12 +159,24 @@ describe('toHTMLAttrNameRuntime', () => {
     expect(toHTMLAttrNameRuntime('ariaLabel')).toBe('aria-label')
   })
 
-  test('tabIndex passes through (no kebab)', () => {
-    expect(toHTMLAttrNameRuntime('tabIndex')).toBe('tabIndex')
+  test('tabIndex lowers to tabindex (HTML alias table, #2172)', () => {
+    expect(toHTMLAttrNameRuntime('tabIndex')).toBe('tabindex')
+  })
+
+  test('autoFocus lowers to autofocus (HTML alias table, #2172)', () => {
+    expect(toHTMLAttrNameRuntime('autoFocus')).toBe('autofocus')
+  })
+
+  test('readOnly lowers to the boolean attr spelling readonly (HTML alias table, #2172)', () => {
+    expect(toHTMLAttrNameRuntime('readOnly')).toBe('readonly')
+  })
+
+  test('spellCheck lowers to the enumerated attr spelling spellcheck (HTML alias table, #2172)', () => {
+    expect(toHTMLAttrNameRuntime('spellCheck')).toBe('spellcheck')
   })
 
-  test('autoFocus passes through (no kebab)', () => {
-    expect(toHTMLAttrNameRuntime('autoFocus')).toBe('autoFocus')
+  test('unknown camelCase names still pass through unchanged', () => {
+    expect(toHTMLAttrNameRuntime('myCustomAttr')).toBe('myCustomAttr')
   })
 })
 

package/src/dom-prop.ts

@@ -72,6 +72,79 @@ const SVG_CAMEL_TO_KEBAB: Readonly<Record<string, string>> = {
   markerEnd: 'marker-end',
 }
 
+/**
+ * HTML attributes written in React-style camelCase in JSX that map to a
+ * lowercase (or hyphenated) HTML attribute name. Mirrors React DOM's
+ * HTML attribute aliases. `className` / `htmlFor` are handled before
+ * this table (they predate it); everything here is a plain rename —
+ * value semantics are untouched (`readOnly` becomes the BOOLEAN_ATTRS
+ * member `readonly`; `spellCheck` stays the *enumerated* — NOT boolean
+ * — `spellcheck`).
+ *
+ * Consumed by `toHTMLAttrName` (compile-time Phase 1: `processAttributes`
+ * normalizes IRAttribute.name so adapters emit the HTML name as-is) and
+ * by `toHTMLAttrNameRuntime` (runtime spread paths). Names NOT in this
+ * table pass through unchanged, so `data-*`, `aria-*`, and custom-element
+ * attributes are never rewritten.
+ */
+const HTML_CAMEL_ALIASES: Readonly<Record<string, string>> = {
+  acceptCharset: 'accept-charset',
+  accessKey: 'accesskey',
+  allowFullScreen: 'allowfullscreen',
+  autoCapitalize: 'autocapitalize',
+  autoComplete: 'autocomplete',
+  autoCorrect: 'autocorrect',
+  autoFocus: 'autofocus',
+  autoPlay: 'autoplay',
+  cellPadding: 'cellpadding',
+  cellSpacing: 'cellspacing',
+  charSet: 'charset',
+  colSpan: 'colspan',
+  contentEditable: 'contenteditable',
+  controlsList: 'controlslist',
+  crossOrigin: 'crossorigin',
+  dateTime: 'datetime',
+  dirName: 'dirname',
+  encType: 'enctype',
+  enterKeyHint: 'enterkeyhint',
+  fetchPriority: 'fetchpriority',
+  formAction: 'formaction',
+  formEncType: 'formenctype',
+  formMethod: 'formmethod',
+  formNoValidate: 'formnovalidate',
+  formTarget: 'formtarget',
+  frameBorder: 'frameborder',
+  hrefLang: 'hreflang',
+  httpEquiv: 'http-equiv',
+  imageSizes: 'imagesizes',
+  imageSrcSet: 'imagesrcset',
+  inputMode: 'inputmode',
+  itemID: 'itemid',
+  itemProp: 'itemprop',
+  itemRef: 'itemref',
+  itemScope: 'itemscope',
+  itemType: 'itemtype',
+  marginHeight: 'marginheight',
+  marginWidth: 'marginwidth',
+  maxLength: 'maxlength',
+  minLength: 'minlength',
+  noModule: 'nomodule',
+  noValidate: 'novalidate',
+  playsInline: 'playsinline',
+  popoverTarget: 'popovertarget',
+  popoverTargetAction: 'popovertargetaction',
+  radioGroup: 'radiogroup',
+  readOnly: 'readonly',
+  referrerPolicy: 'referrerpolicy',
+  rowSpan: 'rowspan',
+  spellCheck: 'spellcheck',
+  srcDoc: 'srcdoc',
+  srcLang: 'srclang',
+  srcSet: 'srcset',
+  tabIndex: 'tabindex',
+  useMap: 'usemap',
+}
+
 /**
  * SVG XML attribute names that are case-sensitive and MUST stay in camelCase.
  *
@@ -169,6 +242,8 @@ export function classifyDOMProp(key: string): DOMPropClassification {
 export function toHTMLAttrName(key: string): string {
   if (key === 'className') return 'class'
   if (key === 'htmlFor')   return 'for'
+  const htmlAlias = HTML_CAMEL_ALIASES[key]
+  if (htmlAlias !== undefined) return htmlAlias
   const svgKebab = SVG_CAMEL_TO_KEBAB[key]
   if (svgKebab !== undefined) return svgKebab
   return key
@@ -178,13 +253,17 @@ export function toHTMLAttrName(key: string): string {
  * Runtime variant of attribute name mapping that additionally applies
  * camelCase→kebab conversion for `data-*` and `aria-*` convenience
  * props (e.g. `dataTestId` → `data-test-id`) and preserves SVG XML
- * attribute casing. All other non-SVG keys pass through unchanged —
- * standard HTML attributes like `tabIndex` and `autoFocus` must not
- * be kebab-cased (`tab-index` / `auto-focus` are not valid attrs).
+ * attribute casing. HTML camelCase aliases resolve through the same
+ * `HTML_CAMEL_ALIASES` table as the compile-time variant (`tabIndex` →
+ * `tabindex`); generic kebab-casing still applies ONLY to `data-*` /
+ * `aria-*` — an unknown camelCase key passes through unchanged rather
+ * than being guessed into a hyphenated non-attribute.
  */
 export function toHTMLAttrNameRuntime(key: string): string {
   if (key === 'className') return 'class'
   if (key === 'htmlFor')   return 'for'
+  const htmlAlias = HTML_CAMEL_ALIASES[key]
+  if (htmlAlias !== undefined) return htmlAlias
   const svgKebab = SVG_CAMEL_TO_KEBAB[key]
   if (svgKebab !== undefined) return svgKebab
   if (SVG_XML_CAMEL_ATTRS.has(key)) return key