testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rudimentary support for the most used directives of AngularJS 1.x (#6869)

Browse Source 
* Rudimentary support for the most used directives of AngularJS 1.x

* add ng-class and ng-style

* add changelog entry in the new format

* Update pr-6869.md

* update snapshots
This commit is contained in:
Georgii Dolzhykov authored and GitHub committed 2020-02-18 00:38:23 +02:00
1 parent ee61bdf435
commit 16c0a7a10f
4 files changed
+265 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/angular/pr-6869.md
+15
View File
@@ -0,0 +1,15 @@
#### Unofficial rudimentary support for some of the most used directives of AngularJS 1.x ([#6869](https://github.com/prettier/prettier/pull/6869) by [@thorn0](https://github.com/thorn0))
While there are some syntax incompatibilities (one-time bindings and the precedence of `|`) between the expression languages of the old AngularJS and the new Angular, overall the two languages are compatible enough for legacy and hybrid AngularJS-based projects to be able to benefit from using Prettier. Previously, when Prettier formatted AngularJS templates using the Angular parser, it formatted expressions only in interpolations. Now, some of the most used AngularJS directives are formatted too, namely: `ng-if`, `ng-show`, `ng-hide`, `ng-class`, `ng-style`.
<!-- prettier-ignore -->
```html
<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading ">Warning!</div>
<!-- Output (Prettier stable) -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading ">Warning!</div>
<!-- Output (Prettier master) -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
```
src/language-html/printer-html.js
+6 -1
View File
@@ -1059,7 +1059,12 @@ function printEmbeddedAttributeValue(node, originalTextToDoc, options) {
* [(target)]="angularExpression"
* bindon-target="angularExpression"
*/
const ngExpressionBindingPatterns = ["^\\[.+\\]$", "^bind(on)?-"];
const ngExpressionBindingPatterns = [
"^\\[.+\\]$",
"^bind(on)?-",
// Unofficial rudimentary support for some of the most used directives of AngularJS 1.x
"^ng-(if|show|hide|class|style)$"
];
/**
* i18n="longDescription"
* i18n-attr="longDescription"
tests/html_angular/__snapshots__/jsfmt.spec.js.snap
+234
View File
@@ -1,5 +1,239 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`angularjs.html 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
trailingComma: "none"
| printWidth
=====================================input======================================
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
=====================================output=====================================
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
!!$ctrl.error.message &&
!(
$ctrl.error.kind === 'validator' &&
$ctrl.form.$valid &&
$ctrl.error.form === $ctrl.form
)
"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
================================================================================
`;
exports[`angularjs.html 2`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
=====================================output=====================================
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
!!$ctrl.error.message &&
!(
$ctrl.error.kind === 'validator' &&
$ctrl.form.$valid &&
$ctrl.error.form === $ctrl.form
)
"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
================================================================================
`;
exports[`angularjs.html 3`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 1
| printWidth
=====================================input======================================
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
=====================================output=====================================
<div
ng-if="
$ctrl.shouldShowWarning &&
!$ctrl.loading
"
>
Warning!
</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
!!$ctrl
.error
.message &&
!(
$ctrl
.error
.kind ===
'validator' &&
$ctrl
.form
.$valid &&
$ctrl
.error
.form ===
$ctrl.form
)
"
>
<div
ng-if="
$ctrl
.error
.html
"
ng-bind-html="$ctrl.error.message"
></div>
<div
ng-if="
!$ctrl
.error
.html
"
ng-bind="$ctrl.error.message"
></div>
</div>
================================================================================
`;
exports[`angularjs.html 4`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
=====================================output=====================================
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
!!$ctrl.error.message &&
!(
$ctrl.error.kind === 'validator' &&
$ctrl.form.$valid &&
$ctrl.error.form === $ctrl.form
)
"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
================================================================================
`;
exports[`angularjs.html 5`] = `
====================================options=====================================
bracketSpacing: false
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
=====================================output=====================================
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="
!$ctrl.showsFormBelowPlain() &&
!!$ctrl.error.message &&
!(
$ctrl.error.kind === 'validator' &&
$ctrl.form.$valid &&
$ctrl.error.form === $ctrl.form
)
"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>
================================================================================
`;
exports[`attr-name.component.html 1`] = `
====================================options=====================================
parsers: ["angular"]
tests/html_angular/angularjs.html
+10
View File
@@ -0,0 +1,10 @@
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading">Warning!</div>
<div
class="common--error-message"
test-hook="upper-error-message"
ng-if="!$ctrl.showsFormBelowPlain() && !!$ctrl.error.message && !($ctrl.error.kind === 'validator' && $ctrl.form.$valid && $ctrl.error.form === $ctrl.form)"
>
<div ng-if="$ctrl.error.html" ng-bind-html="$ctrl.error.message"></div>
<div ng-if="!$ctrl.error.html" ng-bind="$ctrl.error.message"></div>
</div>