CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tsify

Browserify plugin for compiling TypeScript files with seamless integration and incremental compilation support

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Comprehensive configuration options for tsify, including TypeScript compiler options and tsify-specific settings.

Capabilities

TsifyOptions Interface

Complete configuration interface supporting all TypeScript compiler options and tsify-specific settings.

interface TsifyOptions {
  // tsify-specific options
  /** Files/patterns to exclude from compilation */
  exclude?: string[];
  /** Explicit list of files to compile */
  files?: string[];
  /** Whether to set up as global transform */
  global?: boolean;
  /** Files/patterns to include in compilation */
  include?: string[];
  /** Short form for module option */
  m?: string;
  /** Short form for project option */
  p?: string | Record<string, any>;
  /** Path to tsconfig.json file or directory, or inline tsconfig object */
  project?: string | Record<string, any>;
  /** Short form for target option */
  t?: string;
  /** Custom TypeScript compiler reference */
  typescript?: string | typeof import('typescript');
  
  // TypeScript Compiler Options (commonly used)
  /** Allow JavaScript files to be compiled */
  allowJs?: boolean;
  /** Allow importing modules with .json extension */
  allowSyntheticDefaultImports?: boolean;
  /** Allow default imports from modules without default export */
  esModuleInterop?: boolean;
  /** Ensure consistent casing in file names */
  forceConsistentCasingInFileNames?: boolean;
  /** Enable all strict type checking options */
  strict?: boolean;
  /** Raise error on expressions and declarations with implied any type */
  noImplicitAny?: boolean;
  /** Raise error on this expressions with implied any type */
  noImplicitThis?: boolean;
  /** Report errors for fallthrough cases in switch statements */
  noFallthroughCasesInSwitch?: boolean;
  /** Report errors on unused locals */
  noUnusedLocals?: boolean;
  /** Report errors on unused parameters */
  noUnusedParameters?: boolean;
  /** Enable strict null checks */
  strictNullChecks?: boolean;
  /** Enable strict function types */
  strictFunctionTypes?: boolean;
  /** Enable strict bind/call/apply methods */
  strictBindCallApply?: boolean;
  /** Enable strict property initialization checks */
  strictPropertyInitialization?: boolean;
  /** JSX code generation */
  jsx?: 'preserve' | 'react' | 'react-jsx' | 'react-jsxdev' | 'react-native';
  /** Specify JSX factory function */
  jsxFactory?: string;
  /** Specify JSX fragment factory function */
  jsxFragmentFactory?: string;
  /** Module system */
  module?: 'commonjs' | 'amd' | 'system' | 'umd' | 'es6' | 'es2015' | 'es2020' | 'esnext' | 'none';
  /** Module resolution strategy */
  moduleResolution?: 'node' | 'classic';
  /** ECMAScript target version */
  target?: 'es3' | 'es5' | 'es6' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'esnext';
  /** List of library files to include in compilation */
  lib?: string[];
  /** Base directory for resolving non-relative module names */
  baseUrl?: string;
  /** Path mapping entries for module resolution */
  paths?: Record<string, string[]>;
  /** Allow accessing UMD globals from modules */
  allowUmdGlobalAccess?: boolean;
  /** Remove comments from output */
  removeComments?: boolean;
  /** Emit design-type metadata for decorated declarations */
  emitDecoratorMetadata?: boolean;
  /** Enable experimental decorators */
  experimentalDecorators?: boolean;
  /** Skip type checking of declaration files */
  skipLibCheck?: boolean;
  /** Do not emit outputs if any errors were reported */
  noEmitOnError?: boolean;
  /** Preserve const enums in generated code */
  preserveConstEnums?: boolean;
  /** Do not erase const enum declarations */
  isolatedModules?: boolean;
  /** Import emit helpers from 'tslib' */
  importHelpers?: boolean;
  /** Downlevel iteration for ES5/ES3 */
  downlevelIteration?: boolean;
  /** Enable incremental compilation */
  incremental?: boolean;
  /** Specify file to store incremental compilation information */
  tsBuildInfoFile?: string;
}

Configuration Sources

tsify reads configuration from multiple sources in order of precedence:

  1. Inline options passed to the plugin
  2. tsconfig.json file (automatic detection or specified path)
  3. Default values

Automatic tsconfig.json Detection:

// tsify automatically finds tsconfig.json in current directory or parent directories
browserify()
  .add('src/main.ts')
  .plugin(tsify)  // Uses tsconfig.json automatically
  .bundle();

Custom tsconfig.json Path:

browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    project: './config/custom-tsconfig.json'
  })
  .bundle();

Inline Configuration:

browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    project: {
      compilerOptions: {
        target: 'es2017',
        strict: true,
        esModuleInterop: true,
        allowJs: true
      },
      include: ['src/**/*']
    }
  })
  .bundle();

Option Overrides

tsify overrides certain TypeScript compiler options for Browserify compatibility:

Always Overridden:

  • sourceMapfalse (uses inline source maps when --debug is set)
  • inlineSourceMap → Set based on Browserify's --debug option
  • inlineSources → Set based on Browserify's --debug option
  • module → Defaults to commonjs for Browserify compatibility
  • rootDir → Set internally for proper file resolution
  • outDir → Set internally to virtual output directory

Blacklisted Options (ignored):

  • out - Use Browserify's output options instead
  • outFile - Use Browserify's output options instead
  • noEmit - Must emit for bundling to work

File Inclusion Options

Control which files are included in TypeScript compilation:

interface FileInclusionOptions {
  /** Explicit list of files to compile (overrides tsconfig files) */
  files?: string[];
  /** Glob patterns to include */
  include?: string[];
  /** Glob patterns to exclude */
  exclude?: string[];
}

Usage Examples:

// Only compile entry points and their dependencies
browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    files: []  // Empty array means only entry points
  })
  .bundle();

// Include/exclude patterns
browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    include: ['src/**/*'],
    exclude: ['**/*.test.ts', 'node_modules/**']
  })
  .bundle();

Advanced Configuration

Custom TypeScript Compiler:

const ntypescript = require('ntypescript');

browserify()
  .add('main.ts')
  .plugin(tsify, {
    typescript: ntypescript  // Use alternative compiler
  })
  .bundle();

// Or by name
browserify()
  .add('main.ts')
  .plugin(tsify, {
    typescript: 'ntypescript'
  })
  .bundle();

Global Transform Mode:

browserify()
  .add('src/app.ts')
  .plugin(tsify, {
    global: true,      // Process all files, not just dependencies
    allowJs: true      // Include JavaScript files
  })
  .bundle();

Configuration Examples

React/JSX Setup:

browserify()
  .add('src/App.tsx')
  .plugin(tsify, {
    jsx: 'react-jsx',
    esModuleInterop: true,
    allowSyntheticDefaultImports: true,
    strict: true
  })
  .bundle();

ES2020 with Decorators:

browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    target: 'es2020',
    experimentalDecorators: true,
    emitDecoratorMetadata: true,
    strictPropertyInitialization: false
  })
  .bundle();

Strict Mode with Path Mapping:

browserify()
  .add('src/main.ts')
  .plugin(tsify, {
    strict: true,
    baseUrl: './src',
    paths: {
      '@components/*': ['components/*'],
      '@utils/*': ['utils/*']
    }
  })
  .bundle();

Types

interface ConfigurationContext {
  /** Current working directory */
  currentDirectory: string;
  /** Browserify options */
  browserifyOptions: any;
  /** Resolved tsconfig.json path */
  configFile?: string;
  /** Parsed TypeScript configuration */
  parsedConfig: {
    options: any;
    fileNames: string[];
  };
}

Install with Tessl CLI

npx tessl i tessl/npm-tsify

docs

configuration.md

error-handling.md

index.md

integration.md

internal-api.md

tile.json