or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

analysis-correctness.mdconfigs.mdenvironment-specific.mdindex.mdmodule-systems.mdpath-resolution.mdstatic-analysis.mdstyle-organization.mdtypescript.md
tile.json

environment-specific.mddocs/

Environment-Specific Rules

These rules are designed for specific environments like Node.js, webpack, or browser contexts, helping enforce platform-appropriate import patterns and build tool optimizations.

Node.js Environment

no-nodejs-modules

Forbids the use of Node.js builtin modules.

const noNodejsModules: RuleModule<'builtin', [
  {
    allow?: string[];
  }?
]>;

Options:

  • allow (string[]): Node.js modules to allow

Example:

// ✗ BAD - Node.js builtin modules (in browser context)
import fs from 'fs';
import path from 'path';
import crypto from 'crypto';

// ✓ GOOD - browser-compatible modules
import axios from 'axios';
import lodash from 'lodash';

// ✓ GOOD - if 'path' is in allow list
import path from 'path';

no-extraneous-dependencies

Forbids the use of extraneous packages (not declared in package.json).

const noExtraneousDependencies: RuleModule<'missing' | 'devDependencies' | 'optionalDependencies' | 'peerDependencies', [
  {
    devDependencies?: boolean | string[];
    optionalDependencies?: boolean | string[];
    peerDependencies?: boolean | string[];
    bundledDependencies?: boolean | string[];
    packageDir?: string | string[];
    includeInternal?: boolean;
    includeTypes?: boolean;
  }?
]>;

Options:

  • devDependencies (boolean|string[]): Allow dev dependencies in certain files
  • optionalDependencies (boolean|string[]): Allow optional dependencies
  • peerDependencies (boolean|string[]): Allow peer dependencies
  • packageDir (string|string[]): Package.json directories to check
  • includeInternal (boolean): Include internal modules in checks
  • includeTypes (boolean): Include @types packages

Example:

// package.json contains: { "dependencies": { "lodash": "^4.0.0" } }

// ✗ BAD - package not in dependencies
import axios from 'axios';

// ✓ GOOD - package in dependencies
import lodash from 'lodash';

// In test files (if devDependencies: true for test patterns)
// ✓ GOOD - dev dependency in test file
import jest from 'jest';

Webpack Environment

no-webpack-loader-syntax

Forbids webpack loader syntax in imports.

const noWebpackLoaderSyntax: RuleModule<'syntax', []>;

Example:

// ✗ BAD - webpack loader syntax in imports
import styles from 'css-loader!./styles.css';
import worker from 'worker-loader!./worker.js';
import template from 'raw-loader!./template.html';

// ✓ GOOD - configure loaders in webpack config
import styles from './styles.css';
import Worker from './worker.js';
import template from './template.html';

// Webpack config instead:
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.worker\.js$/, use: 'worker-loader' }
    ]
  }
};

dynamic-import-chunkname

Enforces a leading comment with the expected chunkname for dynamic imports.

const dynamicImportChunkname: RuleModule<'leadingComment' | 'chunknameFormat', [
  {
    importFunctions?: string[];
    webpackChunknameFormat?: string;
  }?
]>;

Options:

  • importFunctions (string[]): Functions to check for chunknames (default: ['import'])
  • webpackChunknameFormat (string): Regex pattern for chunkname format

Example:

// ✗ BAD - dynamic import without chunkname
const Component = import('./Component');

// ✗ BAD - invalid chunkname format
const Component = import(
  /* webpackChunkName: "invalid-name!" */ 
  './Component'
);

// ✓ GOOD - proper chunkname
const Component = import(
  /* webpackChunkName: "component" */
  './Component'
);

// ✓ GOOD - chunkname with grouping
const utils = import(
  /* webpackChunkName: "utils/[request]" */
  `./utils/${utilName}`
);

Package Dependency Rules

max-dependencies

Enforces the maximum number of dependencies a module can have.

const maxDependencies: RuleModule<'max', [
  {
    max?: number;
    ignoreTypeImports?: boolean;
  }?
]>;

Options:

  • max (number): Maximum number of dependencies (default: 10)
  • ignoreTypeImports (boolean): Don't count TypeScript type imports

Example:

// ✗ BAD - too many dependencies (if max: 3)
import React from 'react';
import lodash from 'lodash';
import axios from 'axios';
import moment from 'moment'; // Exceeds limit

// ✓ GOOD - within dependency limit
import React from 'react';
import lodash from 'lodash';
import axios from 'axios';

Package Manager Integration

Package Resolution

Different package managers have different resolution strategies:

// Yarn PnP (Plug'n'Play) resolution
{
  "import-x/resolver": {
    "node": {
      "paths": [".yarn/cache"]
    }
  }
}

// pnpm resolution with shamefully-hoist
{
  "import-x/resolver": {
    "node": {
      "paths": ["node_modules", ".pnpm"]
    }
  }
}

// Lerna/Nx monorepo resolution
{
  "import-x/resolver": {
    "node": {
      "paths": ["packages/*/node_modules"]
    }
  }
}

Environment-Specific Types

interface EnvironmentOptions {
  node?: boolean;
  browser?: boolean;
  webworker?: boolean;
  serviceworker?: boolean;
}

interface NodeBuiltins {
  allow?: string[];
  ignore?: string[];
}

interface WebpackChunkOptions {
  importFunctions?: string[];
  webpackChunknameFormat?: string;
}

interface DependencyOptions {
  devDependencies?: boolean | string[];
  optionalDependencies?: boolean | string[];
  peerDependencies?: boolean | string[];
  bundledDependencies?: boolean | string[];
  packageDir?: string | string[];
  includeInternal?: boolean;
  includeTypes?: boolean;
}

interface PlatformInfo {
  isNode: boolean;
  isBrowser: boolean;
  isWebWorker: boolean;
  supportsESModules: boolean;
  supportsCommonJS: boolean;
}

Common Environment Configurations

Node.js Server

module.exports = {
  env: { node: true },
  extends: ['plugin:import-x/recommended'],
  rules: {
    'import-x/no-nodejs-modules': 'off',
    'import-x/no-extraneous-dependencies': ['error', {
      devDependencies: ['**/*.test.js', '**/*.spec.js']
    }]
  }
};

Browser/React App

module.exports = {
  env: { browser: true },
  extends: [
    'plugin:import-x/recommended',
    'plugin:import-x/react'
  ],
  rules: {
    'import-x/no-nodejs-modules': 'error',
    'import-x/no-webpack-loader-syntax': 'error'
  }
};

Universal/Isomorphic

module.exports = {
  env: { node: true, browser: true },  
  rules: {
    'import-x/no-nodejs-modules': ['error', {
      allow: ['path', 'util'] // Universal modules
    }]
  }
};