@myndpm/pug2html
TypeScript icon, indicating that this package has built-in type declarations

2.0.6 • Public • Published

@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

Readme

Keywords

Package Sidebar

Install

npm i @myndpm/pug2html

Homepage

mynd.dev/

Weekly Downloads

7

Version

2.0.6

License

MIT

Unpacked Size

34.3 kB

Total Files

18

Last publish

Collaborators

  • sergeyakimovmynd
  • myndco
  • nikita-emelianov
  • nevech
  • makarov.dmitriy