tomwhite007 / rename-angular-component Goto Github PK

Is your feature request related to a problem? Please describe.
If a Component, Service or Directive is exported by a barrel (index.ts) file, its class name will only be updated in the imports that reference the barrel if the export statement identifies the class specifically.

So, this works:

export { FlightSearchComponent } from './lib/flight-search/flight-search.component';

And this doesn't:

export * from './lib/flight-search/flight-search.component';

Also, if there is more than one barrel file in the import chain the extension will not find the external class name imports because the process doesn't recurse (yet).

Describe the solution you'd like
Make the Indexer find all exported class names from wildcard exports, and recurse through as many exports are there are in the chain for find files affected by barrels.

Is your feature request related to a problem? Please describe.
The extension does not rename component selectors that are referenced inside .spec.ts files. Typical examples include when you use the selector of the component to query it from the DOM using methods such as querySelector or By.css.

Describe the solution you'd like
It would be great if the rename process would affect references of selectors inside *.spec.ts files.

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.
When renaming Component's who's selectors appear inside Inline Templates in .spec.ts, .stories.ts, or .component.ts files, they need to be manually updated currently.

Describe the solution you'd like
Changes to be applied inside those files as well: .spec.ts, .stories.ts, .component.ts

Additional context
If it significantly affects performance, this could be an optional user config switch.

Is your feature request related to a problem? Please describe.
Not sure what's preventing it, but we do a lot of work over the vscode's remote development and sadly this extension doesn't work.

Describe the solution you'd like
Currently just does nothing and prints:

------------------------
Rename Angular Component
------------------------

to the extension log.

Describe alternatives you've considered
Have to remote into the machine hosting the code and run it in a VS code instance locally...

Additional context

I know the extension is called rename-angular-"component", would it be possible to add support for route guards too?

Hi

In order to make use of this fine extension with vs-code forks and derivates (such as openvscode-server) it would help to publish it to open extension-registries such as https://open-vsx.org/

Maybe it is a similar enough process to adapt.

Is your feature request related to a problem? Please describe.
Currently doesn't rename other files in the same folder with the same stub / prefix unless they are a sibling. Currently, the 2-4 directly associated sibling files do get changed, e.g. *.component.ts, *.component.scss, *.component.html, and *.component.spec.ts (are directly associated).

Describe the solution you'd like
Add a config option so that users can choose to rename any file that starts with the same name in the current folder.

Is your feature request related to a problem? Please describe.
VS Code is able to open multiple project folders inside a VS Code Workspace. The Renamer process currently will change all selectors in all open folders, including projects that may have the same named component.

Describe the solution you'd like
Filter out project folders that don't contain the component being renamed so that selector changes only apply to the current project folder.

Is it possible to have the release info in this repo? Take the eslint repo for example.

Describe the bug
Cannot rename Componet. Always getting Error: "The component class file must use the same file naming convention as 'controlarea.component.ts' for this process to run."
But component class file IS already using the same file naming convention.

It doesn't matter what the new name should be. Always getting the same error mesage.

All files are already following the angular style guide:
https://angular.io/guide/styleguide#style-02-01

controlarea.component.ts
controlarea.component.html
controlarea.component.css
and selector: app-controlarea
and class name: ControlareaComponent

Screenshots or Demo Repo

Describe the bug
Under unknown scenarios, some import references to the component were not updated.

This problem was reported as a 5 star review on VSCode Marketplace by Kalia Hayes on 06-Sep-2023. I'd like to get to the bottom of it and would welcome comments from anybody who didn't have all of their imports update correctly. I'll respond with questions about environment and reproducibilty.

Expected behavior
Should update all import references

Describe the bug
I rename a standalone component which is enlisted in the app.module in the imports: [.

Expected behavior
Rename of the enlisted component in the imports: [ list. Currently the name remains the same.

Describe the bug
The rename renames the directive selector in all consuming templates just fine, but because the Input identifier is left as it was, the directive stops working in consuming templates that use a same-named input because it no longer recieves the parameter value.

Describe the bug
If a project or workspace has two components with exactly the same selector, Rename Angular Component replaces all their instances in all the templates they appear in. The process doesn't discriminate between which component's module has been imported.

To Reproduce
Create two projects in the same workspace, and duplicate the code in each.
Run Rename Angular Component on one of the child presenter components.
Then ng serve to see the error.

The selectors for that component in all the .html files will be altered in both projects, but the @Component -> selector decorator will only be changed in the component that was selected to be renamed. So the second component will now error - with unknown element.

Expected behavior
The extension should be aware of what components are available to the template via the module imports. So, then the process can not change templates where the selector is the same but the underlying component is not the one being renamed.

Screenshots or Demo Repo

Desktop (please complete the following information):

• OS: all

Is your feature request related to a problem? Please describe.
If your sibling files don't match the Angular Style guide filename convention, they currently won't be changed.

Describe the solution you'd like
The process should identify any sibling files (html, scss, spec), and fix their filenames if they aren't following convention as well.

Describe the bug
When you rename a component, the main CSS is not renamed, especially when you have only one in the section styleUrl

To Reproduce
Rename any component. The CSS file located in styleUrl stays the same.

Expected behavior
It should also rename the main CSS file located in styleUrl.

Screenshots or Demo Repo
N/A

Desktop (please complete the following information):

• OS: Windows 11

Additional context
Add any other context about the problem here.

Describe the bug
After selecting a new name for a component/service in the extension's renaming dialogue, nothing visibly happens.

To Reproduce
Steps to reproduce the behavior:
Try using the extension in an angular application located in the WSL file system.

Expected behavior
At least a clear error message in the "Rename Angular Component" logs which only displays the following:

------------------------
Rename Angular Component
------------------------

Screenshots or Demo Repo
In the dev tools, one can find the following error:

[Extension Host] Rename process start console.ts:137
[Extension Host] setRenameDetails error:  Error: ENOENT: no such file or directory, open 'C:\home\USERNAME\app-name\package.json'

The application is in fact located at ~/app-name in the Linux file system, but the extension tried to access the application's folder using a path that is relative to my Windows home folder.

Desktop (please complete the following information):

• OS: Windows 11 Version 21H2 (Os Build 22000.613)
• vscode: 1.66.2

Additional context
Unrelated but I also couldn't find a logs file to upload even after turning on the option to generate it. I might not have known where to look though.

Describe the bug
I get this error whenever I copy&paste the full path of the file and then continue to the 2nd step of actually renaming the file:

The component class file must use the same file naming convention as 'dialog-edit-individual-pending-orders.component.desktop.ts' for this process to run.

To Reproduce
F1 in VSCode -> Rename Angular Component -> paste the path of a .ts file that needs renaming -> get the error when trying any rename option, even a single letter change.
Expected behavior
It should rename the component.

Screenshots or Demo Repo

Desktop (please complete the following information):

• OS: Windows 10

The renamer process cannot rename modules yet. But when it does, we can automatically rename same-named modules that sit in the same folder as their component, directive or service.

Is your feature request related to a problem? Please describe.
The extension does not rename service occurrences that are referenced inside .spec.ts files. Typical examples include when you use the jasmine.createSpyObj such as:

const dataServiceSpy = jasmine.createSpyObj('DataService', ['getData']);

In the previous snippet, the DataService value remains unchanged after renaming the service.

Describe the solution you'd like
It would be great if the rename process would affect string occurrences of service classes inside *.spec.ts files.

Describe alternatives you've considered

Additional context

Before continuing, thanks for amazing extension!

Template issue from https://github.com/open-vsx/publish-extensions/blob/HEAD/docs/external_contribution_request.md

Dear extension author,
Please publish this extension to the Open VSX marketplace.

Context

Unfortunately, as Microsoft prohibits usages of the Microsoft marketplace by any other products or redistribution of .vsix files from it, in order to use VS Code extensions in non-Microsoft products, we kindly ask that you take ownership of the VS Code extension namespace in Open VSX and publish this extension on Open VSX.

What is Open VSX? Why does it exist?

Open VSX is a vendor neutral alternative to the MS marketplace used by most other derivatives of VS Code like VSCodium, Gitpod, OpenVSCode, Theia-based IDEs, and so on.

You can read on about Open VSX at the Eclipse Foundation's Open VSX FAQ.

How can you publish to Open VSX?

The docs to publish an extension can be found here. This process is straightforward and shouldn't take too long. Essentially, you need an authentication token and to execute the ovsx publish command to publish your extension. There's also a doc explaining the whole process with an example GitHub Action workflow.

Is your feature request related to a problem? Please describe.
If your rename process renames a folder that contains a lazy loaded module, the router module Routes config remains unchanged because the process cannot read it currently. This results in a lazy loaded path import error at build time.

Describe the solution you'd like
Add support for the rename process to understand and amend Lazy Loaded route import paths.

Describe the bug
Is it possible to have the link to the vscode plugin in the marketplace?

To Reproduce
Steps to reproduce the behavior:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots or Demo Repo
If applicable, add screenshots or link to a repo to help explain your problem.

Desktop (please complete the following information):

• OS:

Additional context
Add any other context about the problem here.

Please add Component delete feature or create new extension for it. it's very annoying when you mistakenly create component and then began to delete all parts of component and cleaning imports into different modules.

Currently, the extension just renames the component, file names and the selector. But I dont use angular file naming conventions so, using this extension is kind of weird for me. While renaming the component it could be nice, If we could just pick options

Is your feature request related to a problem? Please describe.
If a component or directive has a selector that doesn't match the naming convention of the original files, the process is not currently able to recognise the original prefix and apply it to the generated new selector name. So, it doesn't change the existing selector.

Describe the solution you'd like
When an unexpected selector is encountered, the process should give the user an input box to enter the selector (including its prefix), and then proceed with the replacement. It would be useful if the input was prepopulated with a new default selector name, including the default prefix from the angular.json file for that project - so that the user can press enter to accept or start typing to customise.

Describe the bug
The extension fails to find the package.json file when the project is opened in WSL2 on Windows.

To Reproduce

1. Open an angular project in VSCode under WSL2 in Windows
2. Right-click on a component in the file explorer
3. Select ‘Rename Angular Component’
4. Enter a new name, press enter

Expected behavior
The component should be renamed.

Desktop (please complete the following information):

• OS: Windows 10, Ubuntu in WSL2

Additional context

The extension host output reads:

2024-01-03 11:20:01.343 [info] ExtensionService#_doActivateExtension tomwhite007.rename-angular-component, startup: false, activationEvent: 'onCommand:rename-angular-component.renameComponent'
2024-01-03 11:20:02.749 [error] Error: ENOENT: no such file or directory, open 'C:\home\mwaibel\projekte\outbound-ccf\outbound-ccf-frontend\package.json'

The file you’re looking for is in /home/mwaibel/projekte/outbound-ccf/outbound-ccf-frontend/package.json.