Babel Computed Properties Transformer

Build a Babel plugin that transforms objects with computed property keys into ES5-compatible code. The plugin must optimize AST structure for large objects by using chunking.

Requirements

Transform objects with computed properties like { [expr]: value } into ES5 code that uses a helper function. The critical requirement is handling large objects efficiently:

• Objects with ≤10 computed properties: Create a single nested call chain
• Objects with >10 computed properties: Split into chunks of 10 properties maximum to prevent excessive AST depth

Key Behaviors

1. Use a helper function pattern: _defineProperty(targetObject, key, value)
2. For large objects, process properties in chunks of up to 10
3. Generate temporary variables to hold the object between chunks
4. Preserve the original order of all properties
5. Handle mixed regular and computed properties correctly

Examples

Small object (3 computed properties)

// Input
const obj = {
  [key1]: "value1",
  [key2]: "value2",
  [key3]: "value3"
};

// Output: Single nested call chain
const obj = _defineProperty(
  _defineProperty(
    _defineProperty({}, key1, "value1"),
    key2, "value2"
  ),
  key3, "value3"
);

Large object (22 computed properties)

// Input
const obj = {
  [k1]: "v1",  [k2]: "v2",  [k3]: "v3",  [k4]: "v4",  [k5]: "v5",
  [k6]: "v6",  [k7]: "v7",  [k8]: "v8",  [k9]: "v9",  [k10]: "v10",
  [k11]: "v11", [k12]: "v12", [k13]: "v13", [k14]: "v14", [k15]: "v15",
  [k16]: "v16", [k17]: "v17", [k18]: "v18", [k19]: "v19", [k20]: "v20",
  [k21]: "v21", [k22]: "v22"
};

// Output: Three chunks (10 + 10 + 2)
// Uses temporary variable _obj to hold object between chunks
// Chunk 1 processes properties 1-10
// Chunk 2 processes properties 11-20 on _obj
// Chunk 3 processes properties 21-22 on _obj

Test Cases

• An object with exactly 10 computed properties transforms without chunking (single nested structure) @test
• An object with 11 computed properties transforms with chunking (two chunks: 10 + 1) @test
• An object with 25 computed properties transforms into three chunks (10 + 10 + 5) @test
• Regular (non-computed) properties before computed properties remain in the initial object literal @test

Implementation

@generates

API

/**
 * Babel plugin that transforms computed properties with AST optimization.
 *
 * @returns {Object} Babel plugin object with visitor methods
 */
export default function() {
  return {
    name: "transform-computed-properties-chunked",
    visitor: {
      // Plugin visitor implementation
    }
  };
}

Dependencies { .dependencies }

@babel/core { .dependency }

Provides the core Babel transformation APIs including types, template builders, and visitor patterns.