CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-dependency-cruiser

Validates and visualizes dependencies with custom rules for JavaScript, TypeScript, and CoffeeScript projects

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

transpiler-support.mddocs/

Transpiler Support

Access information about supported transpilers and file extensions, with runtime availability checking.

Capabilities

Available Transpilers

Get information about supported transpilers and their current availability.

/**
 * Returns an array of supported transpilers with availability information
 * @returns Array of transpiler information including version and availability
 */
function getAvailableTranspilers(): IAvailableTranspiler[];

interface IAvailableTranspiler {
  /** Name of the transpiler (e.g., "typescript", "babel") */
  name: string;
  
  /** Supported version range (semver) */
  version: string;
  
  /** Whether transpiler is available in current environment */
  available: boolean;
  
  /** Current version installed (if available) */
  currentVersion: string;
}

Usage Examples:

import { getAvailableTranspilers } from "dependency-cruiser";

// Check all available transpilers
const transpilers = getAvailableTranspilers();

transpilers.forEach(transpiler => {
  console.log(`${transpiler.name}: ${transpiler.available ? 'available' : 'not available'}`);
  if (transpiler.available) {
    console.log(`  Version: ${transpiler.currentVersion} (supports ${transpiler.version})`);
  }
});

// Check if specific transpiler is available
const typescript = transpilers.find(t => t.name === "typescript");
if (typescript?.available) {
  console.log("TypeScript analysis available");
}

// Filter only available transpilers
const availableTranspilers = transpilers.filter(t => t.available);
console.log(`${availableTranspilers.length} transpilers available`);

Supported Extensions

Get information about all supported file extensions and their availability.

/**
 * All supported file extensions with availability status
 */
const allExtensions: IAvailableExtension[];

interface IAvailableExtension {
  /** File extension (e.g., ".js", ".ts", ".vue") */
  extension: string;
  
  /** Whether extension is supported in current environment */
  available: boolean;
}

Usage Examples:

import { allExtensions } from "dependency-cruiser";

// List all supported extensions
console.log("Supported extensions:");
allExtensions.forEach(ext => {
  const status = ext.available ? "✓" : "✗";
  console.log(`  ${status} ${ext.extension}`);
});

// Get only available extensions
const availableExts = allExtensions
  .filter(ext => ext.available)
  .map(ext => ext.extension);
console.log("Available:", availableExts.join(", "));

// Check if specific extension is supported
const typescriptSupported = allExtensions.find(
  ext => ext.extension === ".ts"
)?.available;

if (typescriptSupported) {
  console.log("TypeScript files can be analyzed");
}

Supported Transpilers

Detailed information about each supported transpiler and language.

JavaScript (Always Available):

  • Extensions: .js, .cjs, .mjs, .jsx
  • Parser: Built-in (Acorn-based)
  • Features: Full ES6+ support, JSX parsing

TypeScript:

  • Extensions: .ts, .tsx, .d.ts, .cts, .mts, .d.cts, .d.mts
  • Package: typescript (>=2.0.0 <6.0.0)
  • Features: Type checking, pre-compilation dependencies, JSDoc imports
  • Configuration: Via tsconfig.json

Babel:

  • Extensions: Configurable (typically .js, .jsx, .ts, .tsx)
  • Package: @babel/core (>=7.0.0 <8.0.0)
  • Features: Custom presets and plugins
  • Configuration: Via .babelrc, babel.config.js, or package.json

CoffeeScript:

  • Extensions: .coffee, .litcoffee, .coffee.md, .csx, .cjsx
  • Packages: coffeescript (>=1.0.0 <3.0.0) or coffee-script (>=1.0.0 <2.0.0)
  • Features: CoffeeScript compilation and dependency analysis

SWC (Fast Compiler):

  • Extensions: .js, .cjs, .mjs, .jsx, .ts, .tsx, .d.ts
  • Package: @swc/core (>=1.0.0 <2.0.0)
  • Features: High-performance TypeScript/JavaScript compilation
  • Alternative: Can be used as parser override

Svelte:

  • Extensions: .svelte
  • Package: svelte/compiler (>=3.0.0 <6.0.0)
  • Features: Svelte component analysis and dependency extraction

Vue.js:

  • Extensions: .vue
  • Packages:
    • vue-template-compiler (>=2.0.0 <3.0.0) for Vue 2
    • @vue/compiler-sfc (>=3.0.0 <4.0.0) for Vue 3
  • Features: Single File Component analysis

LiveScript:

  • Extensions: .ls
  • Package: livescript (>=1.0.0 <2.0.0)
  • Features: LiveScript compilation and analysis

Runtime Environment Detection

Determine transpiler availability and configuration in the current environment.

Check Environment Setup:

import { getAvailableTranspilers, allExtensions } from "dependency-cruiser";

function analyzeEnvironment() {
  const transpilers = getAvailableTranspilers();
  const extensions = allExtensions;
  
  console.log("Environment Analysis:");
  console.log("===================");
  
  // Language support summary
  const jsSupport = extensions.filter(e => 
    [".js", ".cjs", ".mjs", ".jsx"].includes(e.extension)
  ).every(e => e.available);
  
  const tsSupport = transpilers.find(t => t.name === "typescript")?.available;
  const babelSupport = transpilers.find(t => t.name === "babel")?.available;
  
  console.log(`JavaScript: ${jsSupport ? "✓" : "✗"}`);
  console.log(`TypeScript: ${tsSupport ? "✓" : "✗"}`);
  console.log(`Babel: ${babelSupport ? "✓" : "✗"}`);
  
  // Recommended setup
  if (!tsSupport && !babelSupport) {
    console.log("\nRecommendation: Install typescript or @babel/core for enhanced analysis");
  }
  
  return {
    javascript: jsSupport,
    typescript: tsSupport,
    babel: babelSupport,
    availableExtensions: extensions.filter(e => e.available).map(e => e.extension)
  };
}

Extension to Transpiler Mapping

Understanding which transpiler is used for each file extension.

// Internal mapping (informational)
const extensionMappings = {
  // JavaScript (always available)
  ".js": "javascript",
  ".cjs": "javascript", 
  ".mjs": "javascript",
  ".jsx": "javascript",
  
  // TypeScript (requires typescript package)
  ".ts": "typescript",
  ".tsx": "typescript",
  ".d.ts": "typescript",
  ".cts": "typescript",
  ".mts": "typescript",
  ".d.cts": "typescript",
  ".d.mts": "typescript",
  
  // Vue (requires vue compiler)
  ".vue": "vue-template-compiler or @vue/compiler-sfc",
  
  // Svelte (requires svelte)
  ".svelte": "svelte",
  
  // CoffeeScript (requires coffeescript)
  ".coffee": "coffeescript",
  ".litcoffee": "coffeescript",
  ".coffee.md": "coffeescript",
  ".csx": "coffeescript",
  ".cjsx": "coffeescript",
  
  // LiveScript (requires livescript)
  ".ls": "livescript"
};

Parser Selection

Control which parser is used for analysis (advanced usage).

type ParserType = "acorn" | "tsc" | "swc";

interface ICruiseOptions {
  /** Override parser selection (experimental) */
  parser?: ParserType;
}

Parser Characteristics:

  • acorn (default): Fast, reliable JavaScript parser with JSX support
  • tsc: TypeScript compiler parser, required for TypeScript features
  • swc: Very fast Rust-based parser, good for large codebases

Usage:

import { cruise } from "dependency-cruiser";

// Force SWC parser for performance
const result = await cruise(
  ["src"],
  { 
    parser: "swc",
    // SWC must be available for this to work
  }
);

// Force TypeScript parser for detailed analysis
const result = await cruise(
  ["src"],
  { 
    parser: "tsc",
    tsPreCompilationDeps: true
  }
);

Transpiler Configuration Integration

Integrate transpiler configurations with dependency analysis.

TypeScript Integration:

import { cruise } from "dependency-cruiser";

const result = await cruise(
  ["src"],
  { 
    tsPreCompilationDeps: true,
    detectJSDocImports: true // Implies parser: "tsc"
  },
  { extensions: [".ts", ".tsx", ".js"] },
  { 
    tsConfig: { 
      fileName: "./tsconfig.json",
      compilerOptions: {
        paths: {
          "@/*": ["./src/*"]
        }
      }
    }
  }
);

Babel Integration:

import extractBabelConfig from "dependency-cruiser/config-utl/extract-babel-config";

const babelConfig = await extractBabelConfig("./.babelrc.js");

const result = await cruise(
  ["src"],
  { moduleSystems: ["es6", "cjs"] },
  {},
  { babelConfig }
);

Performance Considerations

Choose appropriate transpilers and configurations for optimal performance.

Performance Tips:

  1. Parser Selection: Use acorn for pure JavaScript, tsc only when TypeScript features needed
  2. Extension Filtering: Limit extensions in resolve options to only necessary types
  3. Transpiler Availability: Check availability before configuring complex transpiler setups
  4. Caching: Use caching when repeatedly analyzing with expensive transpilers

Optimized Setup:

import { getAvailableTranspilers } from "dependency-cruiser";

const transpilers = getAvailableTranspilers();
const hasSWC = transpilers.find(t => t.name === "swc")?.available;
const hasTypeScript = transpilers.find(t => t.name === "typescript")?.available;

const optimizedConfig = {
  // Use fast parser if available
  parser: hasSWC ? "swc" : "acorn",
  
  // Only enable TypeScript features if needed
  tsPreCompilationDeps: hasTypeScript && needsTypeScriptAnalysis,
  
  // Cache expensive transpiler operations
  cache: {
    folder: "node_modules/.cache/dependency-cruiser",
    strategy: "content" // More thorough for transpiled content
  }
};

Troubleshooting Transpiler Issues

Common issues and solutions when working with transpilers.

Missing Transpiler:

import { getAvailableTranspilers } from "dependency-cruiser";

const transpilers = getAvailableTranspilers();
const missing = transpilers.filter(t => !t.available);

if (missing.length > 0) {
  console.log("Missing transpilers:");
  missing.forEach(t => {
    console.log(`  ${t.name}: npm install ${t.name}@"${t.version}"`);
  });
}

Version Compatibility:

const typescript = transpilers.find(t => t.name === "typescript");
if (typescript && typescript.available) {
  console.log(`TypeScript ${typescript.currentVersion} found`);
  console.log(`Supports versions: ${typescript.version}`);
  
  // Check if version might cause issues
  const currentMajor = parseInt(typescript.currentVersion.split('.')[0]);
  if (currentMajor >= 5) {
    console.log("Note: TypeScript 5+ may have compatibility considerations");
  }
}

Install with Tessl CLI

npx tessl i tessl/npm-dependency-cruiser

docs

cli-tools.md

configuration-management.md

core-analysis.md

index.md

output-formatting.md

reporter-plugins.md

rule-system.md

transpiler-support.md

tile.json