feat: change default attribute-name-strategy from none to camelCase (#7479)

# Pull Request

## 📖 Description

Changes the default `attribute-name-strategy` from `"none"` to `"camelCase"` across the FAST monorepo. This applies to:

- **`microsoft-fast-build` Rust crate**: The `AttributeNameStrategy` enum's `#[default]` is moved from `None` to `CamelCase`
- **`@microsoft/fast-build` CLI**: Default strategy passed to the WASM renderer and CLI help text updated
- **`@microsoft/fast-html` AttributeMap**: Default fallback changed from `"none"` to `"camelCase"`

With this change, dashed HTML attribute names on custom elements (e.g. `foo-bar`) are now converted to camelCase state keys (e.g. `fooBar`) by default. The `"none"` strategy remains available as an explicit opt-in.

## 📑 Test Plan

- All existing Rust tests pass (`cargo test`)
- All Playwright tests pass (`npm run test`)
- All fixtures rebuilt successfully (`npm run build:fixtures`)
- Biome check passes (`npm run biome:check`)
- Change files validated (`npm run checkchange`)

## ✅ Checklist

### General

- [x] I have included a change request file using `$ npm run change`
- [ ] I have added tests for my changes.
- [x] I have tested my changes.
- [x] I have updated the project documentation to reflect my changes.
- [x] I have read the [CONTRIBUTING](https://github.com/microsoft/fast/blob/main/CONTRIBUTING.md) documentation and followed the [standards](https://github.com/microsoft/fast/blob/main/CODE_OF_CONDUCT.md#our-standards) for this project.

Author: janechu

change/@microsoft-fast-build-285b7229-8023-4304-83b0-25de34f617ce.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: change default attribute-name-strategy from none to camelCase",
+  "packageName": "@microsoft/fast-build",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@microsoft-fast-html-c20e636d-e975-46f4-9e0b-c7b6c8143ef6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat: change default attribute-name-strategy from none to camelCase",
+  "packageName": "@microsoft/fast-html",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

crates/microsoft-fast-build/DESIGN.md

@@ -267,8 +267,8 @@ Controls how HTML attribute names are mapped to state property names when buildi
 
 | Strategy | Behaviour | Example |
 |----------|-----------|---------|
-| `"none"` (default) | Attribute names are lowercased as-is. Dashes are preserved. | `foo-bar` → `foo-bar` → `{{foo-bar}}` |
-| `"camelCase"` | Dashed attribute names are converted to camelCase. | `foo-bar` → `fooBar` → `{{fooBar}}` |
+| `"camelCase"` (default) | Dashed attribute names are converted to camelCase. | `foo-bar` → `fooBar` → `{{fooBar}}` |
+| `"none"` | Attribute names are lowercased as-is. Dashes are preserved. | `foo-bar` → `foo-bar` → `{{foo-bar}}` |
 
 The `camelCase` strategy only applies to attributes that are **not** already handled by a specialized conversion:
 

crates/microsoft-fast-build/src/config.rs

@@ -8,13 +8,13 @@
 pub enum AttributeNameStrategy {
     /// No conversion — attribute names are lowercased as-is.
     /// `foo-bar` stays `foo-bar`, matching `{{foo-bar}}` in the template.
-    #[default]
     None,
     /// Convert dashed attribute names to camelCase.
     /// `foo-bar` becomes `fooBar`, matching `{{fooBar}}` in the template.
     /// Attributes that are already handled by specialized lookup tables
     /// (`data-*`, `aria-*`, and HTML global attributes like `tabindex`)
     /// are unaffected — those always use their standard property names.
+    #[default]
     CamelCase,
 }
 

crates/microsoft-fast-build/src/wasm.rs

@@ -13,8 +13,8 @@ pub fn render(entry: &str, state: &str) -> Result<String, JsValue> {
 /// Render a FAST HTML template with custom element templates and a JSON state string.
 /// `templates_json` is a JSON object mapping element names to their HTML template strings,
 /// e.g. `{"my-button": "<template>...</template>"}`.
-/// `attribute_name_strategy` controls attribute-to-property mapping: `"none"` (default)
-/// or `"camelCase"`. Pass an empty string for the default.
+/// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
+/// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
 pub fn render_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
@@ -32,8 +32,8 @@ pub fn render_with_templates(entry: &str, templates_json: &str, state: &str, att
 /// output, while non-primitive values (`array`, `object`, `null`) are stripped.
 ///
 /// `templates_json` is a JSON object mapping element names to their HTML template strings.
-/// `attribute_name_strategy` controls attribute-to-property mapping: `"none"` (default)
-/// or `"camelCase"`. Pass an empty string for the default.
+/// `attribute_name_strategy` controls attribute-to-property mapping: `"camelCase"` (default)
+/// or `"none"`. Pass an empty string for the default.
 /// Returns the rendered HTML or throws a JavaScript error.
 #[wasm_bindgen]
 pub fn render_entry_with_templates(entry: &str, templates_json: &str, state: &str, attribute_name_strategy: &str) -> Result<String, JsValue> {
@@ -102,12 +102,12 @@ fn parse_templates_map(templates_json: &str) -> Result<HashMap<String, String>,
 }
 
 /// Build an `Option<RenderConfig>` from the strategy string.
-/// Returns `None` for `""` or `"none"` (use defaults), `Some(config)` otherwise.
+/// Returns `None` for `""` or `"camelCase"` (use defaults), `Some(config)` for `"none"`.
 fn build_config(strategy: &str) -> Result<Option<RenderConfig>, JsValue> {
     match strategy {
-        "" | "none" => Ok(None),
-        "camelCase" => Ok(Some(
-            RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::CamelCase),
+        "" | "camelCase" => Ok(None),
+        "none" => Ok(Some(
+            RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None),
         )),
         _ => Err(JsValue::from_str(&format!(
             "Invalid attribute-name-strategy '{}': expected 'none' or 'camelCase'",

crates/microsoft-fast-build/tests/attribute_name_strategy.rs

@@ -118,24 +118,24 @@ fn test_none_strategy_multi_dashed_attr_preserved() {
     assert!(result.contains("42"), "none strategy should preserve dashes: {result}");
 }
 
-// ── default config matches none strategy ──────────────────────────────────────
+// ── default config matches camelCase strategy ─────────────────────────────────
 
 #[test]
-fn test_default_config_matches_none() {
-    let locator = make_locator(&[("my-el", "<span>{{foo-bar}}</span>")]);
+fn test_default_config_matches_camel_case() {
+    let locator = make_locator(&[("my-el", "<span>{{fooBar}}</span>")]);
     let result_default = render_with_locator(
         r#"<my-el foo-bar="hello"></my-el>"#,
         &empty_root(),
         &locator,
         None,
     ).unwrap();
-    let result_none = render_with_locator(
+    let result_camel = render_with_locator(
         r#"<my-el foo-bar="hello"></my-el>"#,
         &empty_root(),
         &locator,
-        Some(&none_config()),
+        Some(&camel_config()),
     ).unwrap();
-    assert_eq!(result_default, result_none, "default should match none strategy");
+    assert_eq!(result_default, result_camel, "default should match camelCase strategy");
 }
 
 // ── camelCase with binding resolution ─────────────────────────────────────────

crates/microsoft-fast-build/tests/custom_elements.rs

@@ -1,6 +1,6 @@
 mod common;
 use common::{make_locator, empty_root};
-use microsoft_fast_build::{render_template, render_with_locator, render_template_with_locator, render_entry_template_with_locator, Locator, RenderError};
+use microsoft_fast_build::{render_template, render_with_locator, render_template_with_locator, render_entry_template_with_locator, Locator, RenderError, RenderConfig, AttributeNameStrategy};
 
 // ── attribute → state mapping ─────────────────────────────────────────────────
 
@@ -218,26 +218,28 @@ fn test_locator_name_from_f_template_attribute_not_file_stem() {
 
 #[test]
 fn test_custom_element_kebab_attr_hyphens_preserved() {
-    // kebab-case attr names are lowercased; hyphens are preserved
+    // kebab-case attr names are lowercased; with explicit none strategy, hyphens are preserved
     let locator = make_locator(&[("my-el", "<span>{{selected-user-id}}</span>")]);
+    let none_config = RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None);
     let result = render_template_with_locator(
         r#"<my-el selected-user-id="42"></my-el>"#,
         "{}",
         &locator,
-        None,
+        Some(&none_config),
     ).unwrap();
     assert!(result.contains("42"), "kebab attr resolved: {result}");
 }
 
 #[test]
 fn test_custom_element_multi_word_kebab_attrs() {
-    // multiple kebab-case attrs are lowercased and passed to the child scope as-is
+    // multiple kebab-case attrs are lowercased; with explicit none strategy, passed to the child scope as-is
     let locator = make_locator(&[("my-el", "<p>{{show-details}}</p><p>{{enable-continue}}</p>")]);
+    let none_config = RenderConfig::new().with_attribute_name_strategy(AttributeNameStrategy::None);
     let result = render_template_with_locator(
         r#"<my-el show-details="true" enable-continue="false"></my-el>"#,
         "{}",
         &locator,
-        None,
+        Some(&none_config),
     ).unwrap();
     assert!(result.contains("true"), "show-details: {result}");
     assert!(result.contains("false"), "enable-continue: {result}");

packages/fast-build/DESIGN.md

@@ -148,7 +148,7 @@ Three WASM functions are used:
 | Function | Used when |
 |----------|-----------|
 | `wasm.render(entry, state)` | No custom element templates |
-| `wasm.render_entry_with_templates(entry, templatesJson, state, strategy)` | At least one template was loaded. `strategy` is `"none"` or `"camelCase"`. |
+| `wasm.render_entry_with_templates(entry, templatesJson, state, strategy)` | At least one template was loaded. `strategy` is `"camelCase"` or `"none"`. |
 | `wasm.parse_f_templates(html)` | Parsing `<f-template>` elements from each matched HTML file |
 
 `templatesJson` is a JSON-stringified object mapping element names to their raw inner template strings (the content extracted from `<template>` inside `<f-template>`). The WASM renderer uses this map to resolve custom element tags and inject Declarative Shadow DOM.

packages/fast-build/README.md

@@ -39,7 +39,7 @@ fast build [options]
 | `--state="<path>"` | `state.json` | JSON file containing the template state |
 | `--output="<path>"` | `output.html` | Where to write the rendered HTML |
 | `--templates="<glob>"` | _(none)_ | Glob pattern(s) for custom element template HTML files. Separate multiple patterns with commas. A warning is printed if not provided or if no files match a pattern. |
-| `--attribute-name-strategy="<strategy>"` | `none` | Strategy for mapping HTML attribute names to state property names on custom elements. `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). See [Attribute name strategy](#attribute-name-strategy). |
+| `--attribute-name-strategy="<strategy>"` | `camelCase` | Strategy for mapping HTML attribute names to state property names on custom elements. `"camelCase"` converts dashes to camelCase (e.g. `foo-bar` → `fooBar`). `"none"` preserves dashes (e.g. `foo-bar` → `foo-bar`). See [Attribute name strategy](#attribute-name-strategy). |
 | `--config="<path>"` | `fast-build.config.json` | Path to a JSON configuration file. If omitted, `fast-build.config.json` in the current directory is used when present. CLI arguments take precedence over config values. See [Configuration file](#configuration-file). |
 
 ### Example
@@ -113,8 +113,8 @@ The `--attribute-name-strategy` option controls how HTML attribute names on cust
 
 | Strategy | Behaviour | Template binding |
 |---|---|---|
-| `none` (default) | Attribute names lowercased as-is, dashes preserved | `foo-bar` → `{{foo-bar}}` |
-| `camelCase` | Dashed attribute names converted to camelCase | `foo-bar` → `{{fooBar}}` |
+| `camelCase` (default) | Dashed attribute names converted to camelCase | `foo-bar` → `{{fooBar}}` |
+| `none` | Attribute names lowercased as-is, dashes preserved | `foo-bar` → `{{foo-bar}}` |
 
 The `camelCase` strategy only affects "plain" custom element attributes. It does **not** change:
 - `data-*` attributes (always use `dataset.*` grouping)

packages/fast-build/bin/fast.js

@@ -335,7 +335,7 @@ async function runBuild(args) {
     let rendered;
     if (Object.keys(templatesMap).length > 0) {
         rendered = wasm.render_entry_with_templates(
-            entryContent, JSON.stringify(templatesMap), stateContent, attributeNameStrategy || "none"
+            entryContent, JSON.stringify(templatesMap), stateContent, attributeNameStrategy || ""
         );
     } else {
         rendered = wasm.render(entryContent, stateContent);
@@ -357,9 +357,9 @@ async function main() {
             '  --output="output.html" Output file path (default: output.html)\n' +
             '  --entry="index.html"   Entry HTML template file (default: index.html)\n' +
             '  --state="state.json"   State JSON file (default: state.json)\n' +
-            '  --attribute-name-strategy="none"\n' +
+            '  --attribute-name-strategy="camelCase"\n' +
             '                         Strategy for mapping attribute names to property names.\n' +
-            '                         "none" (default) or "camelCase".\n' +
+            '                         "camelCase" (default) or "none".\n' +
             '  --config="<path>"      Path to a fast-build config JSON file.\n' +
             '                         Defaults to "fast-build.config.json" in the\n' +
             '                         current directory if it exists. File paths in\n' +