npm

npm’s 2019 JavaScript ecosystem survey analysis is now available!Get your copy here »

ng-md-components

0.0.8 • Public • Published

ng-md-components

Markdown templateUrl support for Angular

oclif Version Downloads/week License

Usage

$ ng-md-components --help

OPTIONS
  -d, --directory=directory  (required) Directory to recurse through
  -e, --ext=ext              [default: .md] File extension to look for
  -h, --help                 show CLI help
  -v, --version              show CLI version

Commands

Example

Setup

Let's create an Angular application, using Markdown rather than HTML:

ng new --skip-install --interactive=false a && cd $_
for c in {a..z}; do ng g m "$c"; ng g c "$c" & done
fd .html -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$f.md"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/component.html/component.md/g' {} \;

Reversal, using fd, bash and pandoc

fd .md --exclude README.md -exec bash -c 'f=${0%.*}; pandoc "$0" -o "$f.html"; rm "$0"' {} \;
fd .component.ts -exec sed -i 's/component.md/component.html/g' {} \;

Disadvantages: the fd and bash aren't really cross-platform, and pandoc doesn't do code-highlighting. Also there are no helpful hints saying what's generated, and no explicit way of referencing markdown templateUrl.

Reversal, using ng-md-components

Open a file, let's use src/app/a/a.component.ts:

// templateUrl: './a.component.md' <-- add this line
 
@Component({
  selector: 'app-a',
  templateUrl: './a.component.html', // <-- this gets generated
  styleUrls: ['./a.component.css']
})
export class AComponent {}

As you can see, we have added one line, a comment. Note that our simple parsing means the first templateUrl will be converted into HTML.

Alternative approaches

Extend @Component or create new decorator.

Advantages

  • Can be used without any new precompilation stage

Disadvantage

  • Bundle size
  • Dynamic rather than static, so runtime performance is impacted

Keywords

install

npm i ng-md-components

Downloadsweekly downloads

0

version

0.0.8

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability