Tools to rename and remove aliases

[davestewart]

Background

A tool to manipulate both the aliases and the source code would be useful:

Rename

I currently have a project where the path aliases are:

{
  "foo/*": ["src/foo/*"],
  "bar/*": ["src/bar/*"],
  "baz/*": ["src/baz/*"],
}

I would like them to be:

{
  "@foo/*": ["src/foo/*"],
  "@bar/*": ["src/bar/*"],
  "@baz/*": ["src/baz/*"],
}

Remove

Also, some overly-specific aliases that I would like removed:

{
  "foo/*": ["src/foo/*"],
  "bar/*": ["src/foo/bar/*"],     // <-- don't need this
  "baz/*": ["src/foo/bar/baz/*"], // <-- or this
}

Proposal

Having tools to update these would be great.

UI

Not sure how it would look in the CLI right now, perhaps:

• pick from a list
• answer multiple questions, or maybe use the "editor" prompt
• for rename, check for collisions

Then process.

Processing

The source code should be updated when aliases are modified:

• each file will need to be checked.

Rename should be:

• checking the first segment and rename

Removal would need to:

• check if there is a more specific alias and use that
• if not, use the relative path

[mendeza]

Hi Dave. Does the tool already support, or have you given thought, to having conditional paths or regex patterns in paths?
The use case is when testing different versions of the same npm package. So depending on what is currently installed, the actual node module would be either @scope/my-package or @scope/my-package-dev. Regardless, the alias resolves to whichever is present. Does this make sense?

[davestewart]

Hey @mendeza,

Thanks for the message.

Not 100% sure what you are asking. Can you provide some examples?

FYI, the work / UI so far has developed like so:

  == Alias HQ ==

  -- Main Menu --

? What do you want to do? Configure paths

  -- Paths Menu --

? What do you want to do? Rename aliases
? From: ([aeiou])
? To: _$1_
? Flags: g

Preview:

    ✘ @          –>  @
    ✔ @packages  –>  @p_a_ck_a_g_e_s
    ✔ @classes   –>  @cl_a_ss_e_s
    ✔ @app       –>  @_a_pp
    ✔ @data      –>  @d_a_t_a_
    ✔ @services  –>  @s_e_rv_i_c_e_s
    ✔ @views     –>  @v_i__e_ws

? Confirm choices? (Y/n) 

Have had to pause development for a bit whilst I get on with real work!

[mendeza]

Dave, thanks for responding so quickly.
So I have this, potentially in many files:

import { SomeThing } from '@myscope/my-package';

However, the npm package actually in node_modules could be either @myscope/my-package or @myscope/my-package-new or @myscope/my-package-foo. These are all variants of the same lib, perhaps one is stable, another is under development. If the alias path can be conditional or use regex, then we can avoid having to change the import statement simply to test a different package variant. Is that clear now?

[davestewart]

Hmm. Sorry to be taking a while to get this, I'm not sure I understand.

Just to clarify...

The Alias CLI can update source code paths, so you could use it to rewrite your source code, perhaps:

? What do you want to do? Rename aliases
? From: @myscope/my-package
? To: @myscope/my-package-new

But because the path is scoped (effectively, an absolute path) there will never be any relative path resolution to be calculated by the plugin, so the easier option would just be a simple find and replace in your IDE.

The Alias API is designed to map your tsconfig.json path declarations to new formats.

TypeScript supports multiple paths, so you could provide various fallbacks (which will work in TypeScript):

"paths": {
  "@myscope/my-package": [
    "@myscope/my-package",
    "@myscope/my-package-new",
    "@myscope/my-package-foo"
  ]
}

Right now, only the Jest plugin supports multiple paths, but I assume that is not what you want?

Some other options:

Write a custom plugin / resolver

Not sure if this answers your question, but Alias HQ's has a simple plugin system, so you could write your own custom resolver:

• https://github.com/davestewart/alias-hq/blob/master/docs/api/plugins.md

Perhaps check the path name, then use Node's fs lib to see what is installed and return the path that suits you.

NPM install aliases:

https://docs.npmjs.com/cli-commands/install.html

    npm install my-react@npm:react
    npm install jquery2@npm:jquery@2
    npm install jquery3@npm:jquery@3
    npm install npa@npm:npm-package-arg

Do any of those make sense in your case?

[mendeza]

Oh, absolutely. In fact, I'm using npm install aliases at the moment, and am weighing it against doing away with separate package names in favor of dist-tags.

I was simply curious how deep you intended to go with your tool, so as to know where to fit it in the arsenal. Thanks for your great responsiveness!

[davestewart]

Well, always nice to hear new use cases!

Though I still don't fully get your workflow to be honest.

Another option would be npm link then you are free to switch branches in the linked folder and that would give you the same effect.