tessl/npm-script-ext-html-webpack-plugin

Enhances html-webpack-plugin functionality with async and defer attributes for script elements

—

Pending

Overview

Eval results

Files

Custom Attributes

Name: tessl/npm-script-ext-html-webpack-plugin
Author: tessl

Add arbitrary custom attributes to script elements for specialized use cases like CORS, CSP, or custom loading behavior.

Capabilities

Custom Attribute Configuration

Add custom attributes to script elements based on configurable patterns and values.

/**
 * Array of custom attribute configurations
 */
custom?: CustomAttributeConfig[];

interface CustomAttributeConfig {
  test: string | RegExp | Array<string | RegExp>;
  attribute: string;
  value?: any;
}

Usage Examples:

// Single custom attribute
new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/,
    attribute: 'crossorigin',
    value: 'anonymous'
  }
})

// Multiple custom attributes
new ScriptExtHtmlWebpackPlugin({
  custom: [
    {
      test: /\.js$/,
      attribute: 'crossorigin', 
      value: 'anonymous'
    },
    {
      test: 'analytics.js',
      attribute: 'data-category',
      value: 'tracking'
    }
  ]
})

Attribute Types and Values

Custom attributes support various value types for different use cases.

/**
 * Custom attribute value types
 */
interface CustomAttributeConfig {
  test: string | RegExp | Array<string | RegExp>;
  attribute: string;
  value?: string | number | boolean | null | undefined;
}

Value Examples:

new ScriptExtHtmlWebpackPlugin({
  custom: [
    // String value
    {
      test: /\.js$/,
      attribute: 'crossorigin',
      value: 'anonymous'
    },
    // Boolean value (true)
    {
      test: 'critical.js',
      attribute: 'async',
      value: true
    },
    // Boolean attribute (no value)
    {
      test: 'module.js',
      attribute: 'nomodule'
      // value defaults to true for boolean attributes
    },
    // Numeric value
    {
      test: 'versioned.js',
      attribute: 'data-version',
      value: 1.5
    }
  ]
})

Common Use Cases

CORS Configuration

Add Cross-Origin Resource Sharing attributes for CDN scripts.

new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/,
    attribute: 'crossorigin',
    value: 'anonymous'
  }
})

Generated HTML:

<script src="app.js" crossorigin="anonymous"></script>

Content Security Policy (CSP)

Add nonce attributes for Content Security Policy compliance.

new ScriptExtHtmlWebpackPlugin({
  custom: {
    test: /\.js$/,
    attribute: 'nonce',
    value: 'abc123'
  }
})

Generated HTML:

<script src="app.js" nonce="abc123"></script>

Data Attributes

Add custom data attributes for analytics or application-specific metadata.

new ScriptExtHtmlWebpackPlugin({
  custom: [
    {
      test: 'analytics.js',
      attribute: 'data-category',
      value: 'tracking'
    },
    {
      test: /chunk.*\.js$/,
      attribute: 'data-chunk-type',
      value: 'lazy'
    }
  ]
})

Generated HTML:

<script src="analytics.js" data-category="tracking"></script>
<script src="chunk1.js" data-chunk-type="lazy"></script>

Progressive Enhancement

Add attributes for progressive enhancement and feature detection.

new ScriptExtHtmlWebpackPlugin({
  custom: [
    {
      test: 'modern.js',
      attribute: 'type',
      value: 'module'
    },
    {
      test: 'legacy.js', 
      attribute: 'nomodule',
      value: true
    }
  ]
})

Generated HTML:

<script src="modern.js" type="module"></script>
<script src="legacy.js" nomodule></script>

Pattern Matching for Custom Attributes

Custom attributes support the same flexible pattern matching as other plugin features.

/**
 * Pattern matching options for custom attributes
 */
type TestPattern = 
  | string                              // Exact filename match
  | RegExp                              // Regular expression match  
  | Array<string | RegExp>;             // Array of patterns

Pattern Examples:

new ScriptExtHtmlWebpackPlugin({
  custom: [
    // Exact match
    {
      test: 'specific-script.js',
      attribute: 'id',
      value: 'main-script'
    },
    // RegExp pattern
    {
      test: /^vendor-.*\.js$/,
      attribute: 'data-source',
      value: 'third-party'
    },
    // Multiple patterns
    {
      test: ['app.js', 'main.js', /^core/],
      attribute: 'data-priority',
      value: 'high'
    }
  ]
})

Integration with Other Features

Custom attributes work alongside all other plugin features.

// Complete configuration example
new ScriptExtHtmlWebpackPlugin({
  // Script attributes
  async: /chunk.*\.js$/,
  defer: 'analytics.js',
  
  // Resource hints
  preload: 'critical.js',
  prefetch: {
    test: /lazy.*\.js$/,
    chunks: 'async'
  },
  
  // Custom attributes
  custom: [
    // CORS for all scripts
    {
      test: /\.js$/,
      attribute: 'crossorigin',
      value: 'anonymous'
    },
    // Special handling for analytics
    {
      test: 'analytics.js',
      attribute: 'data-consent-required',
      value: 'true'
    },
    // Version tracking for app scripts
    {
      test: /^(app|main)/,
      attribute: 'data-version',
      value: '2.1.5'
    }
  ]
})

Attribute Processing Order

Custom attributes are applied after script attribute processing to ensure they don't interfere with core functionality:

Script inlining (if configured)
Standard attributes (async, defer, module, sync)
Resource hints (preload, prefetch)
Custom attributes (applied last)

Validation and Error Handling

The plugin validates custom attribute configurations and provides helpful error messages.

/**
 * Validates custom attribute configuration
 * @param config - Custom attribute configuration
 * @returns Whether configuration is valid
 */
function validateCustomAttribute(config: CustomAttributeConfig): boolean;

Common validation errors:

Missing test pattern
Missing attribute name
Invalid attribute names (must be valid HTML attribute names)

Example error:

ScriptExtHtmlWebpackPlugin: invalid configuration - custom attribute missing 'test' property

Install with Tessl CLI

npx tessl i tessl/npm-script-ext-html-webpack-plugin

docs

custom-attributes.md

index.md

plugin-configuration.md

tessl/npm-script-ext-html-webpack-plugin