Vue Template ES2015 Compiler

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.

Package Information

• Package Name: vue-template-es2015-compiler
• Package Type: npm
• Language: JavaScript
• Installation: npm install vue-template-es2015-compiler

Core Imports

const transpile = require("vue-template-es2015-compiler");

Basic Usage

const transpile = require("vue-template-es2015-compiler");

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

// With custom options
const customOptions = {
  transforms: {
    stripWith: true,
    stripWithFunctional: false
  },
  objectAssign: 'Object.assign'
};
const transpiledWithOptions = transpile(renderCode, customOptions);

Architecture

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

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

Capabilities

Code Transpilation

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

/**
 * Transpiles JavaScript code with ES2015+ features for Vue.js templates
 * @param {string} code - The JavaScript code to transpile
 * @param {TranspileOptions} [opts] - Optional configuration options
 * @returns {string} Transpiled JavaScript code
 */
function transpile(code, opts);

Usage Examples:

const transpile = require("vue-template-es2015-compiler");

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

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

// With custom configuration
const customConfig = {
  transforms: {
    stripWith: false, // Keep 'with' blocks
    modules: false
  },
  objectAssign: 'customAssign'
};
const customResult = transpile(spreadCode, customConfig);

Default Configuration

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

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

Types

/**
 * Configuration options for the transpile function
 * @typedef {Object} TranspileOptions
 * @property {Object} [transforms] - Transform configuration settings
 * @property {boolean} [transforms.modules=false] - Whether to transform ES modules
 * @property {boolean} [transforms.stripWith=true] - Whether to strip 'with' blocks from render functions
 * @property {boolean} [transforms.stripWithFunctional=false] - Whether to handle functional render context
 * @property {string} [objectAssign='Object.assign'] - Polyfill method for object spread operations
 */

Key Features

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

Common Use Cases

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