0
# Vue Template ES2015 Compiler
1

2
Vue Template ES2015 Compiler is a post-processor for Vue.js template render functions that adds ES2015+ feature support and ensures strict-mode compliance. It transforms raw render functions generated by vue-template-compiler to support modern JavaScript features while maintaining broad browser compatibility.
3

4
## Package Information
5

6
- **Package Name**: vue-template-es2015-compiler
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install vue-template-es2015-compiler`
10

11
## Core Imports
12

13
```javascript
14
const transpile = require("vue-template-es2015-compiler");
15
```
16

17
## Basic Usage
18

19
```javascript
20
const transpile = require("vue-template-es2015-compiler");
21

22
// Basic transpilation of render function code
23
const renderCode = 'function render() { return this.items.map(({ name, ...rest }) => h("div", rest, name)); }';
24
const transpiledCode = transpile(renderCode);
25

26
// With custom options
27
const customOptions = {
28
  transforms: {
29
    stripWith: true,
30
    stripWithFunctional: false
31
  },
32
  objectAssign: 'Object.assign'
33
};
34
const transpiledWithOptions = transpile(renderCode, customOptions);
35
```
36

37
## Architecture
38

39
Vue Template ES2015 Compiler is designed as a lightweight, single-purpose utility that:
40

41
- **Buble Integration**: Uses a custom Buble build for ES2015+ transpilation
42
- **Vue-Specific Features**: Includes custom transforms for stripping 'with' blocks from render functions
43
- **Options Merging**: Deep merges user options with sensible defaults
44
- **Strict Mode Compliance**: Ensures render functions work in strict mode environments
45

46
## Capabilities
47

48
### Code Transpilation
49

50
Transforms JavaScript code with ES2015+ features to ensure compatibility and Vue.js-specific optimizations.
51

52
```javascript { .api }
53
/**
54
 * Transpiles JavaScript code with ES2015+ features for Vue.js templates
55
 * @param {string} code - The JavaScript code to transpile
56
 * @param {TranspileOptions} [opts] - Optional configuration options
57
 * @returns {string} Transpiled JavaScript code
58
 */
59
function transpile(code, opts);
60
```
61

62
**Usage Examples:**
63

64
```javascript
65
const transpile = require("vue-template-es2015-compiler");
66

67
// Object spread transpilation
68
const spreadCode = 'const obj = { ...a, ...b };';
69
const result = transpile(spreadCode);
70
// Converts to: const obj = Object.assign({}, a, b);
71

72
// Arrow function transpilation in render context
73
const arrowCode = 'items.map(item => ({ ...item, processed: true }))';
74
const processed = transpile(arrowCode);
75

76
// With custom configuration
77
const customConfig = {
78
  transforms: {
79
    stripWith: false, // Keep 'with' blocks
80
    modules: false
81
  },
82
  objectAssign: 'customAssign'
83
};
84
const customResult = transpile(spreadCode, customConfig);
85
```
86

87
### Default Configuration
88

89
The transpiler uses the following default configuration when no options are provided:
90

91
- `transforms.modules: false` - Module transforms are disabled
92
- `transforms.stripWith: true` - 'with' blocks are stripped from Vue render functions  
93
- `transforms.stripWithFunctional: false` - Functional render context handling is disabled
94
- `objectAssign: 'Object.assign'` - Object spread operations use Object.assign polyfill
95

96
## Types
97

98
```javascript { .api }
99
/**
100
 * Configuration options for the transpile function
101
 * @typedef {Object} TranspileOptions
102
 * @property {Object} [transforms] - Transform configuration settings
103
 * @property {boolean} [transforms.modules=false] - Whether to transform ES modules
104
 * @property {boolean} [transforms.stripWith=true] - Whether to strip 'with' blocks from render functions
105
 * @property {boolean} [transforms.stripWithFunctional=false] - Whether to handle functional render context
106
 * @property {string} [objectAssign='Object.assign'] - Polyfill method for object spread operations
107
 */
108
```
109

110
## Key Features
111

112
1. **ES2015+ Support**: Enables object spread, arrow functions, destructuring, and other modern JavaScript features in Vue templates
113
2. **Strict Mode Compliance**: Removes 'with' blocks to ensure render functions work in strict mode
114
3. **Object.assign Polyfilling**: Automatically converts object spread to Object.assign calls for IE compatibility
115
4. **Vue Ecosystem Integration**: Designed specifically for use with vue-loader and vueify
116
5. **Configurable Transforms**: Allows customization of transpilation behavior through options
117

118
## Common Use Cases
119

120
- **Vue Template Processing**: Primary use in vue-loader and vueify for template compilation
121
- **Build-Time Optimization**: Transforms templates during build process for optimal runtime performance
122
- **Legacy Browser Support**: Ensures modern JavaScript features work in older browsers
123
- **Strict Mode Environments**: Removes problematic 'with' statements for strict mode compatibility