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

@uqt/ts-path-replace

v1.1.1

Published

CLI Tool to replace TypeScript "@alias" paths to relative paths

Downloads

758

Readme

@uqt/ts-path-replace

CLI tool to replace TypeScript paths from @alias/import/paths to ../relative/import/paths

Why this package

The long standing issues with TS not outputting relative paths can be found here.

While there are a number of packages that have already tackled this issues, for whatever reason they were either limiting or did not suite my needs, hence this project.

Additionally, as of TSv3.0, external projects can be referenced in the references property of the tsconfig.json. This allows your project to reference and consume code that is not under the source directory of the current project. At the time of creating the package, no other solution that I could get to work also replaces referenced projects.

Solution

The package provides a CLI and runtime API to rewrite and replace the imports paths of a typescript project. Additionally it will also replace any referenced projects.

Versioning

The package follows semver versioning and releases are automated by semantic release

Installation

# Install Globally
npm install -g @uqt/ts-path-replace

# Install locally
npm install --save-dev @uqt/ts-path-replacr

Usage

CLI

To use the CLI, navigate to the directory and run tspr. By default, it will read the tsconfig.json located in the root directory.

# Globally
$ tspr

# Locally
$ npx tspr

Optionally, you can pass the path to the desired tsconfig.json to process

# Passing in a path to a tsconfig.json
$ npx tspr --tsConfig some/path/to/tsconfig.json

# Replace the paths for the references projects and watch the output directories for changes to rerun
$ npx tspr --tsConfig path/to/tsconfig.json --references true --watch true

Runtime

// commonjs
const tspr = require('@uqt/ts-path-replace');

tspr.tsPathReplace({ path: 'path/to/tsconfig.json' });

// ES6
import { tsPathReplace } from '@uqt/ts-path-replace';

tsPathReplace({
  path: 'path/to/tsconfig.json',
  references: true,
  watch: true,
});

API Documentation

# CLI
tspr [--option]
// run time
tsPathReplace([options]);

Options <Object>

| Option | Description | | ----------------------- | -------------------------------------------------------------------------------------------- | | tsConfig: string | Path to the json config file to process Default: tsconfig.json | | references: boolean | Also replace imports in any referenced projects Default: false | | watch / w: boolean | Watch the output directory for file changes and re-run the path replace Default: false | | ext string | Append a file extension to the paths. Default: no extension added |

Returns Promise<Object>

| Property | Description | | -------------------------- | ----------------------------------------------------------------- | | running: boolean | If the process is still running (watch mode) | | stop(): Promise<void> | A method to stop the process if it currently running (watch mode) |

Example

There is an example of a 'monorepo' style setup located in the /example directory.

The examples includes multiple 'apps' with multiple referenced projects.

To run the example

# You will have to build the project first
npm run build
# Build the example
npm run example:build
# run the path replacement
npm run example:tspr
# run the project
npm run example:run

Running the above should should build the example, replace the import paths and then output some logging to the terminal.

If you look in the example/out directory, you should see all .js files have been replaced with relative imports

Contributing

Contributions and PR's are welcome!

Commit Message Guidelines

Commit Guidelines

Known limitations

  • Only the first element of each of the paths properties is used.
  • The referenced tsConfig in the references must point to an project config file with source files and an output directory, it can't be a config that references other projects and has not project files.