bilelmsekni / componizer Goto Github PK
View Code? Open in Web Editor NEWvs code extension for refactoring to components
License: MIT License
vs code extension for refactoring to components
License: MIT License
That would be great if we save the developer from having to install the schematics.
The only way to achieve that AFAICT:
copy-template-dir
as a dependency to the extension and bundle everything before packaging the extension.Any other suggestion?
I tried out to use this vscode extension, but it's not working well. I selected the code inside ** **
, right click and Componize, set component name, but I am facing a error.
<nb-card>
<nb-card-body>
**<footer>sdsadas</footer>**
</nb-card-body>
</nb-card>
Command failed: ng g @componizer/schematics:ng-componize --name footer --activeFile /home/maykon-oliveira/Projects/adlottery/web/src/app/pages/raffles/raffles.component.html --start 4 --end 4 An unhandled exception occurred: Cannot find module '@schematics/angular/utility/project' Require stack: - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@componizer/schematics/ng-componize/utils.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@componizer/schematics/ng-componize/index.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular-devkit/schematics/tools/export-ref.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular-devkit/schematics/tools/index.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/utilities/json-schema.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/models/command-runner.js - /home/maykon-oliveira/Projects/adlottery/web/node_modules/@angular/cli/lib/cli/index.j...
I installed yarn add @componizer/schematics -D
It's in package.json devDependencies: "@componizer/schematics": "^0.0.2",
I was on stackoverflow and I found this https://stackoverflow.com/questions/62917001/cannot-find-module-schematics-angular-utility-project. So I installed, yarn add @schematics/[email protected] -D
, and tried again.
The component was created, but the code inside html file it's not what I selected, it's just <p>component works!</p>
The link to CHANGELOG is broken here https://github.com/bilelmsekni/componizer/blob/master/extension/README.md
If one opens up a project in a folder/path in which one of the names has a space (for example C:/Whatever/My Code/angular-project/src/pasta/pasta-component.html) then the extension fails immediately because it sends the unescaped line directly to the terminal. The solutions seems pretty obvious, surround the "activeFile" line in the script with double-quotes and add a test to verify it will work with a test folder string that has a space in it. I just wanted to submit the issue before fixing, in case there was some reason this shouldn't be done, or if I had missed something. I'm not a regular vscode dev, I just happened to have this problem and know what the solution is.
componizer/extension/src/utils.ts
Line 28 in 4b493db
componizer/extension/src/utils.ts
Line 22 in c17f6b1
Please add the documentation for 'skip-import' parameter , because I had to check the code to understand that I should write 'false' as the value. It wasn't working for me when I tried to specify module, probably because of nested folder structure.
The generated element looks like this:
<my-comp><my-comp/>
.
But it should be instead:
<my-comp></my-comp>
Hi all! Been trying to use the extension but I'm getting this error.
Command failed: npx ng g @componizer/schematics:ng-componize --name hello-world --activeFile "path-to-component.html" --start 39 --end 39 --customSkipImport true --debugMode false
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "/tmp/ng-iql2sW/angular-errors.log" for further details.
I'm trying to refactor this:
<div>hello world</div>
And these are my relevant package.json dependencies:
"@angular-eslint/schematics": "16.2.0",
"@componizer/schematics": "~0.0.7",
"@schematics/angular": "~17.0.0",
"@angular/cli": "^17.0.0",
I'm confused by the error message and I'm not really sure how to proceed. Any help is greatly appreciated.
I tried to refactor html block of a template into separate component, new component is created but it does not contain that html block
Launch local ng command script rather than the global one.
Maybe by replacing
const script = `ng g @componizer/schematics:ng-componize ...`;
by
const script = `npx ng g @componizer/schematics:ng-componize ...`;
in src/utils.ts
?
Not sure about the cwd though.
UPDATE
npx
rather than npm run
which depends on "ng": "ng"
being present in scripts
.
Hi @bilelmsekni ,
I am trying to use your vscode extension for my project. I have also installed below package as my dev-dependency.
"@componizer/schematics": "0.0.7"
I am using angular v13 -> but I tried with angular/cli v 10.2.0, seeing your sample. But it didn't helped.
Can you please help?
npx ng g @componizer/schematics:ng-componize --name filters --activeFile "<file_path_goes_here>" --start 4 --end 98 --customSkipImport false --debugMode true
Schematic input does not validate against the Schema: {"style":"scss","name":"filters","activeFile":"<file_path>","start":4,"end":98,"customSkipImport":"false","debugMode":"true","skipImport":false,"project":"<project_name>"}
Errors:
Data path "" should NOT have additional properties(activeFile).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.