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

index.mddocs/

ember-auto-import

ember-auto-import is an Ember CLI addon that provides zero-configuration importing of NPM packages into Ember applications and addons. It automatically handles webpack bundling for imported dependencies, supports both static and dynamic imports, and eliminates the need for manual configuration of external dependencies.

Package Information

  • Package Name: ember-auto-import
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install --save-dev ember-auto-import webpack

Core Imports

The package provides an Ember addon that installs automatically when added to dependencies. No direct imports are needed - the addon works transparently:

// No imports needed - works automatically after installation
// Simply import any NPM package and ember-auto-import handles it
import { someLibrary } from 'some-npm-package';
import lodash from 'lodash';
import * as d3 from 'd3';

For dynamic imports with the babel plugin:

// In ember-cli-build.js - add babel plugin for dynamic import support
let app = new EmberApp(defaults, {
  babel: {
    plugins: [require.resolve('ember-auto-import/babel-plugin')],
  },
});

The main addon module export (internal):

// Internal addon structure - automatically loaded by Ember CLI
const addon = require('ember-auto-import');
// addon provides standard Ember CLI addon interface

Basic Usage

After installation, simply import any NPM package without additional configuration:

// Static imports work immediately
import lodash from 'lodash';
import { format } from 'date-fns';
import * as d3 from 'd3';

// Use in your Ember components
export default Component.extend({
  didInsertElement() {
    const formatted = format(new Date(), 'yyyy-MM-dd');
    const data = lodash.groupBy(this.items, 'category');
    d3.select(this.element).selectAll('div').data(data);
  }
});

For dynamic imports (requires babel plugin):

// Dynamic import for code splitting
export default Route.extend({
  model() {
    return Promise.all([
      fetch('/api/data').then(r => r.json()),
      import('chart.js').then(module => module.default),
    ]).then(([data, Chart]) => {
      return { data, Chart };
    });
  }
});

Architecture

ember-auto-import is built around several key components:

  • Ember Addon: Standard Ember CLI addon that integrates into the build pipeline
  • Import Analyzer: Scans JavaScript/TypeScript files for import statements and categorizes them
  • Package Resolver: Resolves NPM package dependencies and handles version conflicts
  • Webpack Bundler: Bundles external dependencies separately from Ember's build system
  • Leader Election: Coordinates between multiple addon instances in complex dependency trees
  • Babel Plugin: Transforms dynamic imports for proper code splitting

Capabilities

Ember Addon Integration

Core Ember CLI addon functionality providing automatic NPM package importing without configuration.

module.exports = {
  name: string;
  init(...args: any[]): void;
  setupPreprocessorRegistry(type: string, registry: any): void;
  included(...args: unknown[]): void;
  registerV2Addon(packageName: string, packageRoot: string): void;
  leader(): AutoImportSharedAPI;
  postprocessTree(which: string, tree: Node): Node;
}

Ember Addon Integration

Configuration Options

Extensive configuration system for customizing auto-import behavior, webpack settings, and build optimization.

interface Options {
  exclude?: string[];
  alias?: { [fromName: string]: string };
  webpack?: Configuration;
  publicAssetURL?: string;
  forbidEval?: boolean;
  skipBabel?: { package: string; semverRange?: string }[];
  watchDependencies?: (string | string[])[];
  allowAppImports?: string[];
  insertScriptsAt?: string;
  insertStylesAt?: string;
}

Configuration

Dynamic Import Support

Babel plugin enabling dynamic imports with code splitting for lazy loading of dependencies.

function emberAutoImport(babel: any): BabelPlugin;

interface BabelPlugin {
  inherits: any;
  visitor: {
    Import(path: any, state: any): void;
    CallExpression(path: any): void;
  };
}

Dynamic Imports

Auto Import Core API

Internal API for managing import analysis, package resolution, and bundle generation.

interface AutoImportSharedAPI {
  isPrimary(addonInstance: AddonInstance): boolean;
  analyze(tree: Node, addon: AddonInstance, treeType?: TreeType, supportsFastAnalyzer?: true): Node;
  included(addonInstance: AddonInstance): void;
  addTo(tree: Node): Node;
  registerV2Addon(packageName: string, packageRoot: string, compatOptions?: CompatOptions): void;
}

class AutoImport implements AutoImportSharedAPI {
  static register(addon: AddonInstance): void;
  static lookup(addon: AddonInstance): AutoImportSharedAPI;
}

Core API