npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@lukaskl/typescript-transform-paths

v3.4.6

Published

Transforms module resolution paths using TypeScript path mapping and/or custom paths

Downloads

2,494

Readme

Forked package

This package is a fork of typescript-transform-paths with a single change - it is forced to treat File System as case sensitive.

typescript-transform-paths

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

Transform compiled source module resolution paths using TypeScript's paths config, and/or custom resolution paths.

Setup Steps

1. Install

<yarn|npm|pnpm> add -D typescript-transform-paths

2. Configure

Add it to plugins in your tsconfig.json

Example Config

{
  "compilerOptions": {
    "baseUrl": "./",
    // Configure your path mapping here
    "paths": {
      "@utils/*": ["utils/*"]
    },
    // Note: To transform paths for both the output .js and .d.ts files, you need both of the below entries
    "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 }
    ]
  }
}

Example result

core/index.ts

// The following transforms path to '../utils/sum'
import { sum } from "@utils/sum";

3. Usage

  • Compile with tsc — Use ts-patch

  • Use with ts-node — Add typescript-transform-paths/register to require config.

    tsconfig.json

    {
      "ts-node": {
        "transpileOnly": true,
        "require": [ "typescript-transform-paths/register" ],
      },
      "compilerOptions" { /* ... */ }
    }
  • Use with node — Use the register script: node -r typescript-transform-paths/register src/index.ts

  • Use with NX — Add the typescript-transform-paths/nx-transformer to project config

    project.json

    {
      /* ... */
      "targets": {
        "build": {
          /* ... */
          "options": {
            /* ... */
            "transformers": [
              { 
                "name": "typescript-transform-paths/nx-transformer",
                "options": { "afterDeclarations": true }
              }
            ]
          }
        }
      }
    }

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", 
        "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