Socket
Socket
Sign inDemoInstall

typescript-transform-paths

Package Overview
Dependencies
Maintainers
2
Versions
59
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

typescript-transform-paths

Transforms module resolution paths using TypeScript path mapping


Version published
Weekly downloads
163K
decreased by-23.21%
Maintainers
2
Weekly downloads
 
Created
Source

typescript-transform-paths

npm version Build Status Appveyor Build status Conventional Commits code style: prettier All Contributors

Transform module resolution paths in compiled output source to conform with TypeScript internal resolution via tsconfig.json settings (paths, rootDirs, baseUrl)

Install

# NPM
npm i -D typescript-transform-paths

# Yarn
yarn add -D typescript-transform-paths

Usage with ttypescript or ts-patch

Add it to plugins in your tsconfig.json

Example Config

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@utils/*": ["utils/*"]
    },
    "plugins": [
      // Transform paths in output .js files
      { "transform": "typescript-transform-paths" },

      // Transform paths in output .d.ts files (Include this line if you output declarations files)
      { "transform": "typescript-transform-paths", "afterDeclarations": true }
    ]
  }
}

core/index.ts

import { sum } from "@utils/sum";
sum(2, 3);

core/index.js (compiled output)

// core/index.js
var sum_1 = require("../utils/sum");
sum_1.sum(2, 3);

Virtual Directories

TS allows defining virtual directories via the rootDirs compiler option.
To enable virtual directory mapping, use the useRootDirs plugin option.

{
  "compilerOptions": {
    "rootDirs": [ "src", "generated" ],
    "baseUrl": ".",
    "paths": {
      "#root/*": [ "./src/*", "./generated/*" ]
    },
    "plugins": [
      { "transform": "typescript-transform-paths", "useRootDirs": true },
      { "transform": "typescript-transform-paths", "useRootDirs": true, "afterDeclarations": true }
    ]
  }
}
Example
- src/
    - subdir/
      - sub-file.ts
    - file1.ts
- generated/
    - file2.ts

src/file1.ts

import '#root/file2.ts' // resolves to './file2'

src/subdir/sub-file.ts

import '#root/file2.ts' // resolves to '../file2'
import '#root/file1.ts' // resolves to '../file1'

Custom Control

Exclusion patterns

You can disable transformation for paths based on the resolved file path. The exclude option allows specifying glob patterns to match against resolved file path.

For an example context in which this would be useful, see Issue #83

Example:

{
  "compilerOptions": {
    "paths": {
      "sub-module1/*": [ "../../node_modules/sub-module1/*" ],
      "sub-module2/*": [ "../../node_modules/sub-module2/*" ],
    },
    "plugins": [
      { 
        "transform": "typescript-transform-paths", 
        "useRootDirs": true, 
        exclude: [ "**/node_modules/**" ]
      }
    ]
  }
}
// This path will not be transformed
import * as sm1 from 'sub-module1/index'

@transform-path tag

Use the @transform-path tag to explicitly specify the output path for a single statement.

// @transform-path https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js
import react from 'react' // Output path will be the url above

@no-transform-path

Use the @no-transform-path tag to explicitly disable transformation for a single statement.

// @no-transform-path
import 'normally-transformed' // This will remain 'normally-transformed', even though it has a different value in paths config

Articles

Project Guidelines for Contributors

  • Package Manager: yarn (yarn install)
  • Commit messages: Conventional Commit Specs
  • Format before commit: prettier (yarn run format)
  • Releases: standard-version (yarn run release)

Maintainers


Ron S.

Daniel Perez Alvarez

Contributors

Thanks goes to these wonderful people (emoji key):


Daniel Perez Alvarez

💻 🚧 ⚠️

Михайлов Антон

💻 🐛 ⚠️

Joshua Avalon

🐛 📦

Robert Laverty

🐛 ⚠️

Ole Ersoy

🐛 📝

sbmw

🐛

richardspence

🐛

Vitaly Pinchuk

🐛

laij84

🐛

dko-slapdash

🐛

hedwiggggg

🐛 ⚠️ 💻

kuskoman

📖

alex weidner

🐛

Ron S.

🐛 ⚠️ 💻

Vladimir Yakovlev

🐛

vwpo

🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

Keywords

FAQs

Package last updated on 04 Jan 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc