From 5b51cb890a31a7658f7d9403f2741eb499056dd6 Mon Sep 17 00:00:00 2001 From: tycho01 Date: Fri, 21 Oct 2016 23:27:57 +0200 Subject: [PATCH 1/8] pug, pug-plugin-ng --- package.json | 3 +++ packages/angular-cli/models/webpack-build-common.ts | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index e64eaf95eb4a..881561e94268 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,9 @@ "postcss-discard-comments": "^2.0.4", "postcss-loader": "^0.9.1", "protractor": "^3.3.0", + "pug": "^2.0.0-beta6", + "pug-html-loader": "^1.0.9", + "pug-plugin-ng": "0.0.2", "raw-loader": "^0.5.1", "remap-istanbul": "^0.6.4", "resolve": "^1.1.7", diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts index aae14af6663c..716f05740200 100644 --- a/packages/angular-cli/models/webpack-build-common.ts +++ b/packages/angular-cli/models/webpack-build-common.ts @@ -96,6 +96,11 @@ export function getWebpackCommonConfig(        { test: /\.json$/, loader: 'json-loader' },        { test: /\.(jpg|png|gif)$/, loader: 'url-loader?limit=10000' },        { test: /\.html$/, loader: 'raw-loader' }, +  { +  test: /\.pug$/, +  loader: 'pug-html', +  query: { doctype: 'html', plugins: [require('pug-plugin-ng')] }, +  }, { test: /\.(otf|woff|ttf|svg)$/, loader: 'url?limit=10000' }, { test: /\.woff2$/, loader: 'url?limit=10000&mimetype=font/woff2' }, From 03dbfbc64f680a8431187f3a2ef47377f890a10d Mon Sep 17 00:00:00 2001 From: tycho01 Date: Fri, 4 Nov 2016 10:01:17 +0100 Subject: [PATCH 2/8] readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index b1956aee2b8e..1372ca221726 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +npm uninstall -g ng-cli +npm i -g https://github.com/tycho01/angular-cli.git#pug-html + ## Angular-CLI [![Join the chat at https://gitter.im/angular/angular-cli](https://badges.gitter.im/angular/angular-cli.svg)](https://gitter.im/angular/angular-cli?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) From 4485683cb9a8c392d30aa32b353dace778fa8186 Mon Sep 17 00:00:00 2001 From: Manuel Pacheco Date: Sun, 18 Sep 2016 15:43:29 -0400 Subject: [PATCH 3/8] initial support for jade/pug templates --- package.json | 3 +++ packages/angular-cli/models/webpack-build-common.ts | 1 + 2 files changed, 4 insertions(+) diff --git a/package.json b/package.json index 246baaa8f149..cd22a58f81d0 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@angular/compiler-cli": "~2.3.1", "@angular/core": "~2.3.1", "@angular/tsc-wrapped": "~0.5.0", + "apply-loader": "^0.1.0", "async": "^2.1.4", "autoprefixer": "^6.5.3", "chalk": "^1.1.3", @@ -93,6 +94,8 @@ "portfinder": "1.0.9", "postcss-discard-comments": "^2.0.4", "postcss-loader": "^0.9.1", + "pug": "^2.0.0-beta6", + "pug-loader": "^2.3.0", "quick-temp": "0.1.5", "raw-loader": "^0.5.1", "readline2": "0.1.1", diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts index bc3f5cda9439..f4d27d1c8af7 100644 --- a/packages/angular-cli/models/webpack-build-common.ts +++ b/packages/angular-cli/models/webpack-build-common.ts @@ -133,6 +133,7 @@ export function getWebpackCommonConfig( { test: /\.(otf|ttf|woff|woff2)$/, loader: 'url-loader?limit=10000' }, { test: /\.(eot|svg)$/, loader: 'file-loader' } + { test: /\.(pug|jade)/, loaders: ['apply-loader', 'pug-loader']}, ].concat(extraRules) }, plugins: [ From 0876b625ad754d8473635196ce05ef97fc8d9057 Mon Sep 17 00:00:00 2001 From: Manuel Pacheco Date: Fri, 16 Dec 2016 15:14:52 -0400 Subject: [PATCH 4/8] add missing comma after merge --- packages/angular-cli/models/webpack-build-common.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/angular-cli/models/webpack-build-common.ts b/packages/angular-cli/models/webpack-build-common.ts index f4d27d1c8af7..61095a1262fc 100644 --- a/packages/angular-cli/models/webpack-build-common.ts +++ b/packages/angular-cli/models/webpack-build-common.ts @@ -132,7 +132,7 @@ export function getWebpackCommonConfig( { test: /\.html$/, loader: 'raw-loader' }, { test: /\.(otf|ttf|woff|woff2)$/, loader: 'url-loader?limit=10000' }, - { test: /\.(eot|svg)$/, loader: 'file-loader' } + { test: /\.(eot|svg)$/, loader: 'file-loader' }, { test: /\.(pug|jade)/, loaders: ['apply-loader', 'pug-loader']}, ].concat(extraRules) }, From 86e3ff71f9dbd005857967655d46237402c3934d Mon Sep 17 00:00:00 2001 From: tycho01 Date: Sun, 1 Jan 2017 18:01:26 +0800 Subject: [PATCH 5/8] mention pug usage in docs --- README.md | 9 +++++++++ docs/documentation/overview.md | 9 +++++++++ 2 files changed, 18 insertions(+) diff --git a/README.md b/README.md index ea3c808061a8..fd09f940f29a 100644 --- a/README.md +++ b/README.md @@ -306,6 +306,15 @@ You use the `assets` array in `angular-cli.json` to list files or folders you wa ] ``` +### Template engines + +Template engines currently supported are HTML and [Pug](https://pugjs.org/) (née Jade). +Template engines other than HTML require processing through webpack, so should be +included from their own file using `templateUrl`, whereas HTML supports using +`@Component`'s `template` property as well. Example: +- before: `@Component({ template: '

Hello world

' })` or `@Component({ templateUrl: './foo.html' })` +- after: `@Component({ templateUrl: './foo.pug' })` + ### Global styles The `styles.css` file allows users to add global styles and supports diff --git a/docs/documentation/overview.md b/docs/documentation/overview.md index 6286a25678a8..3939cb5f0f6c 100644 --- a/docs/documentation/overview.md +++ b/docs/documentation/overview.md @@ -59,6 +59,15 @@ ng e2e Before running the tests make sure you are serving the app via `ng serve`. End-to-end tests are run via [Protractor](https://angular.github.io/protractor/). +### Template engines + +Template engines currently supported are HTML and [Pug](https://pugjs.org/) (née Jade). +Template engines other than HTML require processing through webpack, so should be +included from their own file using `templateUrl`, whereas HTML supports using +`@Component`'s `template` property as well. Example: +- before: `@Component({ template: '

Hello world

' })` or `@Component({ templateUrl: './foo.html' })` +- after: `@Component({ templateUrl: './foo.pug' })` + ### Global styles The `styles.css` file allows users to add global styles and supports From 63811d2946c3c70c044ff146d73373f976e1a63b Mon Sep 17 00:00:00 2001 From: tycho01 Date: Sun, 1 Jan 2017 18:47:51 +0800 Subject: [PATCH 6/8] incorporate simple pug test --- .../test-app-weird/not/so/source/app/app.component.html | 5 ----- .../test-app-weird/not/so/source/app/app.component.pug | 4 ++++ .../test-app-weird/not/so/source/app/app.component.ts | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) delete mode 100644 tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html create mode 100644 tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html deleted file mode 100644 index 5a532db9308f..000000000000 --- a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.html +++ /dev/null @@ -1,5 +0,0 @@ -
-

hello world

- lazy - -
diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug new file mode 100644 index 000000000000..87e31fde1ff1 --- /dev/null +++ b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.pug @@ -0,0 +1,4 @@ +div + h1 hello world + a('[routerLink]'="['lazy']") lazy + router-outlet diff --git a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts index 09a19ad8f1ac..f04eab7babc1 100644 --- a/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts +++ b/tests/e2e/assets/webpack/test-app-weird/not/so/source/app/app.component.ts @@ -3,7 +3,7 @@ import {Component, ViewEncapsulation} from '@angular/core'; @Component({ selector: 'app-root', - templateUrl: './app.component.html', + templateUrl: './app.component.pug', styleUrls: ['./app.component.scss'], encapsulation: ViewEncapsulation.None }) From 7873b27f252ff9b13045cbe74985efcebcb289b2 Mon Sep 17 00:00:00 2001 From: tycho01 Date: Tue, 3 Jan 2017 10:55:33 +0800 Subject: [PATCH 7/8] add template tests, haven't managed to run --- tests/e2e/tests/build/templates/html.ts | 16 ++++++++++++++++ tests/e2e/tests/build/templates/pug.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 tests/e2e/tests/build/templates/html.ts create mode 100644 tests/e2e/tests/build/templates/pug.ts diff --git a/tests/e2e/tests/build/templates/html.ts b/tests/e2e/tests/build/templates/html.ts new file mode 100644 index 000000000000..0d611811012f --- /dev/null +++ b/tests/e2e/tests/build/templates/html.ts @@ -0,0 +1,16 @@ +import { + writeMultipleFiles, + expectFileToMatch, +} from '../../../utils/fs'; +import { ng } from '../../../utils/process'; +import { stripIndents } from 'common-tags'; + +export default function () { + return writeMultipleFiles({ + 'src/foo.html': stripIndents` +

foo

+ `}) + .then(() => ng('build')) + .then(() => expectFileToMatch('dist/foo.html', + /

foo<\/h1>/)) +} diff --git a/tests/e2e/tests/build/templates/pug.ts b/tests/e2e/tests/build/templates/pug.ts new file mode 100644 index 000000000000..be7081326378 --- /dev/null +++ b/tests/e2e/tests/build/templates/pug.ts @@ -0,0 +1,16 @@ +import { + writeMultipleFiles, + expectFileToMatch, +} from '../../../utils/fs'; +import { ng } from '../../../utils/process'; +import { stripIndents } from 'common-tags'; + +export default function () { + return writeMultipleFiles({ + 'src/foo.pug': stripIndents` + h1 foo + `}) + .then(() => ng('build')) + .then(() => expectFileToMatch('dist/foo.html', // .pug? + /

foo<\/h1>/)) +} From 6d14b0502bab65f629fac85d7745588a9fa6d482 Mon Sep 17 00:00:00 2001 From: tycho01 Date: Tue, 3 Jan 2017 11:32:11 +0800 Subject: [PATCH 8/8] make test match scss one --- tests/e2e/tests/build/templates/html.ts | 4 ++-- tests/e2e/tests/build/templates/pug.ts | 9 +++++++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/tests/e2e/tests/build/templates/html.ts b/tests/e2e/tests/build/templates/html.ts index 0d611811012f..6453278d4dce 100644 --- a/tests/e2e/tests/build/templates/html.ts +++ b/tests/e2e/tests/build/templates/html.ts @@ -7,10 +7,10 @@ import { stripIndents } from 'common-tags'; export default function () { return writeMultipleFiles({ - 'src/foo.html': stripIndents` + 'src/app/app.component.html': stripIndents`

foo

`}) .then(() => ng('build')) - .then(() => expectFileToMatch('dist/foo.html', + .then(() => expectFileToMatch('dist/app/app.component.html', /

foo<\/h1>/)) } diff --git a/tests/e2e/tests/build/templates/pug.ts b/tests/e2e/tests/build/templates/pug.ts index be7081326378..b952d5ae387f 100644 --- a/tests/e2e/tests/build/templates/pug.ts +++ b/tests/e2e/tests/build/templates/pug.ts @@ -1,16 +1,21 @@ import { writeMultipleFiles, + deleteFile, expectFileToMatch, + replaceInFile } from '../../../utils/fs'; import { ng } from '../../../utils/process'; import { stripIndents } from 'common-tags'; export default function () { return writeMultipleFiles({ - 'src/foo.pug': stripIndents` + 'src/app/app.component.pug': stripIndents` h1 foo `}) + .then(() => deleteFile('src/app/app.component.html')) + .then(() => replaceInFile('src/app/app.component.ts', + './app.component.html', './app.component.pug')) .then(() => ng('build')) - .then(() => expectFileToMatch('dist/foo.html', // .pug? + .then(() => expectFileToMatch('dist/app/app.component.pug', // .html? /

foo<\/h1>/)) }