CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ember-auto-import

Zero-config import from NPM packages for Ember applications and addons

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

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: '*' }
      ]
    }
  }
};

Install with Tessl CLI

npx tessl i tessl/npm-ember-auto-import

docs

configuration.md

core-api.md

dynamic-imports.md

ember-addon.md

index.md

tile.json