or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdcore-api.mddynamic-imports.mdember-addon.mdindex.md
tile.json

configuration.mddocs/

Configuration

Extensive configuration system for customizing auto-import behavior, webpack settings, and build optimization. Configuration is specified in ember-cli-build.js under the autoImport key.

Capabilities

Configuration Options

Complete interface for all supported configuration options:

/**
 * Complete configuration options for ember-auto-import
 * Specified in ember-cli-build.js under autoImport key
 */
interface Options {
  /** Packages to exclude from auto-import processing */
  exclude?: string[];
  
  /** Import path aliases for package name remapping */
  alias?: { [fromName: string]: string };
  
  /** Custom webpack configuration to merge */
  webpack?: Configuration;
  
  /** Public URL for assets (auto-detected if not specified) */
  publicAssetURL?: string;
  
  /** Style loader configuration options */
  styleLoaderOptions?: Record<string, unknown>;
  
  /** CSS loader configuration options */  
  cssLoaderOptions?: Record<string, unknown>;
  
  /** Mini CSS extract plugin configuration options */
  miniCssExtractPluginOptions?: Record<string, unknown>;
  
  /** Disable eval for Content Security Policy compliance */
  forbidEval?: boolean;
  
  /** Packages to skip babel transformation */
  skipBabel?: { package: string; semverRange?: string }[];
  
  /** Dependencies to watch for changes during development */
  watchDependencies?: (string | string[])[];
  
  /** App file patterns to handle through webpack */
  allowAppImports?: string[];
  
  /** Custom script tag insertion location */
  insertScriptsAt?: string;
  
  /** Custom style tag insertion location */
  insertStylesAt?: string;
}

Usage Example:

let app = new EmberApp(defaults, {
  autoImport: {
    exclude: ['some-package'],
    alias: {
      'plotly.js': 'plotly.js-basic-dist',
      'handlebars': 'handlebars/dist/handlebars'
    },
    forbidEval: true,
    skipBabel: [
      {
        package: 'mapbox-gl',
        semverRange: '*'
      }
    ],
    watchDependencies: [
      'my-local-lib',
      ['some-lib', 'its-dependency']
    ],
    allowAppImports: ['lib/*'],
    webpack: {
      resolve: {
        fallback: {
          crypto: false
        }
      }
    }
  }
});

Package Exclusion

Exclude packages from auto-import processing when they're already included another way:

/**
 * Packages to exclude from auto-import processing
 * Useful when packages are included via other means
 */
exclude?: string[];

Usage Examples:

// Exclude specific packages
autoImport: {
  exclude: ['jquery', 'ember-data']
}

// Exclude packages handled by other addons
autoImport: {
  exclude: ['chart.js'] // If included via ember-cli-chart
}

Import Aliases

Remap import paths to different packages or entry points:

/**
 * Import path aliases for package name remapping
 * Supports prefix matching by default, exact matching with $ suffix
 */
alias?: { [fromName: string]: string };

Usage Examples:

autoImport: {
  alias: {
    // Remap package names
    'plotly.js': 'plotly.js-basic-dist',
    
    // Use different entry points  
    'handlebars': 'handlebars/dist/handlebars',
    
    // Exact match only (with $ suffix)
    'some-package/alpha$': 'customized',
    
    // Prefix matching (default behavior)
    'lodash': 'lodash-es' // Also maps 'lodash/get' to 'lodash-es/get'
  }
}

Webpack Configuration

Merge custom webpack configuration for advanced build customization:

/**
 * Custom webpack configuration to merge with auto-import's webpack config
 * Supports all webpack configuration options
 */
webpack?: Configuration;

Usage Examples:

autoImport: {
  webpack: {
    resolve: {
      fallback: {
        crypto: false,
        stream: require.resolve('stream-browserify')
      }
    },
    module: {
      rules: [
        {
          test: /\.worker\.js$/,
          use: { loader: 'worker-loader' }
        }
      ]
    },
    plugins: [
      new DefinePlugin({
        'process.env.API_URL': JSON.stringify(process.env.API_URL)
      })
    ]
  }
}

Babel Configuration

Control babel transformation for specific packages:

/**
 * Packages to skip babel transformation
 * Useful for pre-transpiled packages that break with double transpilation
 */
skipBabel?: { package: string; semverRange?: string }[];

Usage Examples:

autoImport: {
  skipBabel: [
    {
      package: 'mapbox-gl',
      semverRange: '*' // All versions
    },
    {
      package: 'some-es5-lib',
      semverRange: '^2.0.0' // Only version 2.x
    }
  ]
}

Development Watching

Watch dependencies for changes during development:

/**
 * Dependencies to watch for changes during development
 * Triggers rebuilds when watched packages change
 */
watchDependencies?: (string | string[])[];

Usage Examples:

autoImport: {
  watchDependencies: [
    'my-local-lib', // Direct dependency
    ['some-lib', 'nested-dep'], // Nested dependency
    '@my-org/shared-utils'
  ]
}

App Import Handling

Process app files through webpack instead of Ember's pipeline:

/**
 * App file patterns to handle through webpack
 * Uses minimatch patterns for file matching
 */
allowAppImports?: string[];

Usage Examples:

autoImport: {
  allowAppImports: [
    'lib/*',           // All files in lib directory
    'utils/big-lib.js', // Specific file
    'assets/*.worker.js' // Worker files
  ]
}

// Now you can dynamically import app files
import('my-app/lib/massive-utility').then(module => {
  // This will be code-split thanks to allowAppImports
});

Asset and HTML Configuration

Control asset URLs and HTML insertion points:

/**
 * Public URL for assets, auto-detected if not specified
 * Required for CDN deployments or custom asset paths
 */
publicAssetURL?: string;

/**
 * Custom script tag insertion location in HTML
 * Allows manual control over script placement and attributes
 */
insertScriptsAt?: string;

/**
 * Custom style tag insertion location in HTML  
 * Allows manual control over stylesheet placement and attributes
 */
insertStylesAt?: string;

Usage Examples:

autoImport: {
  publicAssetURL: 'https://cdn.example.com/assets/',
  insertScriptsAt: 'custom-scripts-go-here',
  insertStylesAt: 'custom-styles-go-here'
}

Then in your HTML template:

<head>
  <custom-styles-go-here></custom-styles-go-here>
</head>
<body>
  <custom-scripts-go-here></custom-scripts-go-here>
</body>

Content Security Policy

Configure CSP-compliant builds:

/**
 * Disable eval for Content Security Policy compliance
 * Uses slower sourcemap implementation but CSP-safe
 */
forbidEval?: boolean;

Usage Example:

autoImport: {
  forbidEval: true // Required for strict CSP environments
}

Loader Options

Customize webpack loaders for styles and CSS:

/**
 * Style loader configuration options
 * Controls how CSS is injected into the page
 */
styleLoaderOptions?: Record<string, unknown>;

/**
 * CSS loader configuration options
 * Controls CSS processing and module resolution
 */
cssLoaderOptions?: Record<string, unknown>;

/**
 * Mini CSS extract plugin configuration options
 * Controls CSS file extraction in production builds
 */
miniCssExtractPluginOptions?: Record<string, unknown>;

Usage Examples:

autoImport: {
  styleLoaderOptions: {
    insert: 'head'
  },
  cssLoaderOptions: {
    modules: {
      localIdentName: '[name]__[local]___[hash:base64:5]'
    }
  },
  miniCssExtractPluginOptions: {
    filename: 'assets/[name]-[contenthash].css'
  }
}

Configuration in Addons

For addon authors, configuration should be specified in the addon's index.js file:

// In your addon's index.js file
module.exports = {
  name: 'my-addon',
  options: {
    autoImport: {
      exclude: ['some-package'],
      skipBabel: [
        { package: 'pre-compiled-lib', semverRange: '*' }
      ]
    }
  }
};