@myndpm/pug2html
CLI utility to convert pug
content to html
.
Also converts inline template
metadata and rename .pug
extension to .html
Usage
npx @myndpm/pug2html [--path <path>] [--git] [--dry-run]
[--diagnose]
[--convert]
[--move]
[--prettify]
-
--path <path>
- Path to the directory for conversion. Default is current directory -
--git
Convert and move files keeping the GIT history -
--dry-run
Do not execute and just print the steps -
--diagnose
Only list and detect line endings on the existing stylesheets in the directory -
--convert
Only convert the pug contents to html -
--move
Only move the pug files to HTML and update the related TS files -
--prettify
Only prettify the converted files
Examples
Only diagnose the given path listing the files to process:
npx @myndpm/pug2html --path relative/path/ --diagnose [--git]
Only runs the pug conversion step:
npx @myndpm/pug2html --convert
Only move the files and update the components:
npx @myndpm/pug2html --move
Only prettify the existing html files:
npx @myndpm/pug2html --prettify
Prints the files and commands that will be executed:
npx @myndpm/pug2html --dry-run [--git]
Perform all the conversion steps on the current folder and commits to git:
npx @myndpm/pug2html --git
Troubleshooting
- Before you commit each step you can review the staged files in your IDE.
- Search on a whole repo
let-
,$implicit
,ngForOf
. Check how it was used in the .pug file and revert if there are any differences. - There might be issues with whitespaces since pug preprocess whitespaces and remove all of them. The only way to fix those - is to run build/unit tests/e2e-s. Most likely there will be no issues or impact will be minor.
- Search for
pug
inside your repo and remove any related code - builders, packages, scripts, etc.
Known issues
There is a known issue with $implicit. Search your codebase for $implicit
and check how let-
were converted.
ng-template([ngTemplateOutlet]="tmpl", [ngTemplateOutletContext]="{ $implicit: elem }")
ng-template(#tmpl, let-elem)
will be converted to
<ng-template [ngTemplateOutlet]="tmpl" [ngTemplateOutletContext]="{ $implicit: elem }"></ng-template>
<ng-template #tmpl let-elem="elem"></ng-template>
<!-- but it should be -->
<ng-template [ngTemplateOutlet]="tmpl" [ngTemplateOutletContext]="{ $implicit: elem }"></ng-template>
<ng-template #tmpl let-elem></ng-template>
let-elem="elem"
=> let-elem
Another known issue is with NgForOf. Search your codebase for ngForOf
and check how let-
were converted.
ng-template(ngFor let-row [ngForOf]="rows" let-i="index")
li ...
will be converted to
<ng-template ngFor let-row="let-row" [ngForOf]="rows" let-i="index">
<li>...</li>
</ng-template>
<!-- but it should be -->
<ng-template ngFor let-row [ngForOf]="rows" let-i="index">
<li>...</li>
</ng-template>
let-row="row"
=> let-row