Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved Angular compatibility #2229

Merged
merged 19 commits into from
Jan 3, 2024
Merged

Improved Angular compatibility #2229

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
430fbec
fix(angular-material): improved compatibility by removing angular fle…
JBBianchi Dec 14, 2023
71533e8
fix(angular-test): added broader compatibility with angular
JBBianchi Dec 14, 2023
acf87c7
Merge branch 'master' into angular-v15-no-flex-layout
JBBianchi Dec 14, 2023
e343b9d
fix(angular-material): fixed @angular-devkit/build-angular version
JBBianchi Dec 14, 2023
a875f74
fix(pnpm): forced usage of angular v15
JBBianchi Dec 14, 2023
2d4599a
fix(angular-material): fixed tests by removing empty component styles.
JBBianchi Dec 14, 2023
d7ff134
fix(angular): updated to Angular 16
JBBianchi Dec 15, 2023
ed3b902
fix(angular-material): fixed linting
JBBianchi Dec 15, 2023
3ebb626
fix(angular-material): PR review fixes
JBBianchi Dec 16, 2023
6ec6c9d
Merge branch 'master' into angular-v15-no-flex-layout
JBBianchi Dec 16, 2023
19af601
fix(angular-material): added padding on "mat cards"
JBBianchi Dec 19, 2023
ca30fa0
Merge branch 'master' into angular-v15-no-flex-layout
lucas-koehler Dec 20, 2023
47ff208
fix(angular): dropper support for angular v15 & range control event b…
JBBianchi Dec 23, 2023
8eacb77
fix(angular): dropper support for angular v15 & range control event b…
JBBianchi Dec 23, 2023
38d5960
Merge branch 'angular-v15-no-flex-layout' of https://github.com/JBBia…
JBBianchi Dec 24, 2023
fe5f906
Update pnpm lock file
lucas-koehler Jan 2, 2024
d23996f
Revert "Update pnpm lock file"
lucas-koehler Jan 2, 2024
878fbe3
fix(angular): removed pnpm overrides in favor of dev deps
JBBianchi Jan 2, 2024
44244a0
Update dependencies and restrict vue via pnpm override to ~3.3.13
lucas-koehler Jan 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,5 +49,10 @@
"**/node_modules": true,
"**/lib": true
},
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"[javascript][javascriptreact][typescript][typescriptreact][vue]": {
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
}
23 changes: 23 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,28 @@
"typescript": "4.2.3",
"webpack": "^4.41.2",
"webpack-merge": "^4.2.2"
},
"pnpm": {
"overrides": {
"@angular/animations": "^16.0.0",
"@angular/cdk": "^16.0.0",
"@angular/common": "^16.0.0",
"@angular/core": "^16.0.0",
"@angular/forms": "^16.0.0",
"@angular/material": "^16.0.0",
"@angular/platform-browser": "^16.0.0",
"@angular/router": "^16.0.0",
"@angular-devkit/build-angular": "^16.0.0",
"@angular-eslint/eslint-plugin": "^16.0.0",
"@angular-eslint/eslint-plugin-template": "^16.0.0",
"@angular-eslint/schematics": "^16.0.0",
"@angular-eslint/template-parser": "^16.0.0",
"@angular/compiler": "^16.0.0",
"@angular/compiler-cli": "^16.0.0",
"@angular/platform-browser-dynamic": "^16.0.0",
"@ngtools/webpack": "^16.0.0",
"ng-packagr": "^16.0.0",
"zone.js": "^0.13.0"
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need these overrides now that we removed Angular 15 compatibility?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure. If I'm not mistaken, as the packages declare a compatibility with Angular 16 and 17 (and maybe 18 in the future), pnpm will install the highest version compatible by default, so v17. So we need the overrides to say "build with v16 even if the lib is compatible with v17".

Copy link
Member

@sdirix sdirix Jan 2, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use Angular 16 in the devDependencies and not 16 || 17? As we don't bundle Angular the peerDependencies version is the important one for the consumer and could still be 16 || 17 even if the devDependencies only declare 16.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sdirix thanks for your input, that's better indeed.

}
}
2 changes: 1 addition & 1 deletion packages/angular-material/example/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
import 'core-js/es7/reflect';
import 'core-js/es/reflect';
import 'zone.js/dist/zone';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Expand Down
62 changes: 29 additions & 33 deletions packages/angular-material/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"typings": "./lib/esm/index.d.ts",
"scripts": {
"build": "ngc && ngc -p tsconfig.cjs.json",
"build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js",
"build:examples-app": "ngc -p tsconfig.example.json && rollup -c rollup.example.config.js --bundleConfigAsCjs",
"dev": "pnpm run build:examples-app && npx http-server ./example/dist/ -c-1 -o",
"clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
"lint": "eslint .",
Expand All @@ -61,15 +61,14 @@
]
},
"peerDependencies": {
"@angular/animations": "^15.0.0",
"@angular/cdk": "^15.0.0",
"@angular/common": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/flex-layout": "^15.0.0-beta",
"@angular/forms": "^15.0.0",
"@angular/material": "^15.0.0",
"@angular/platform-browser": "^15.0.0",
"@angular/router": "^15.0.0",
"@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/cdk": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@jsonforms/angular": "3.2.0-alpha.3",
"@jsonforms/angular-test": "^3.2.0-alpha.3",
"@jsonforms/core": "3.2.0-alpha.3",
Expand All @@ -80,32 +79,31 @@
"lodash": "^4.17.21"
},
"devDependencies": {
"@angular-devkit/build-angular": "~15.2.10",
"@angular-eslint/eslint-plugin": "^15.0.0",
"@angular-eslint/eslint-plugin-template": "^15.0.0",
"@angular-eslint/schematics": "^15.0.0",
"@angular-eslint/template-parser": "^15.0.0",
"@angular/animations": "^15.0.0",
"@angular/cdk": "^15.0.0",
"@angular/common": "^15.0.0",
"@angular/compiler": "^15.0.0",
"@angular/compiler-cli": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/flex-layout": "^15.0.0-beta",
"@angular/forms": "^15.0.0",
"@angular/material": "^15.0.0",
"@angular/platform-browser": "^15.0.0",
"@angular/platform-browser-dynamic": "^15.0.0",
"@angular/router": "^15.0.0",
"@angular-devkit/build-angular": "~15.2.10 || ^16.0.0 || ^17.0.0",
"@angular-eslint/eslint-plugin": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular-eslint/eslint-plugin-template": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular-eslint/schematics": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular-eslint/template-parser": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/animations": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/cdk": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/common": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/compiler": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/compiler-cli": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/core": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/forms": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/material": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/platform-browser": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/platform-browser-dynamic": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@angular/router": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
"@jsonforms/angular": "workspace:*",
"@jsonforms/angular-test": "workspace:*",
"@jsonforms/core": "workspace:*",
"@jsonforms/examples": "workspace:*",
"@ngtools/webpack": "^15.0.0",
"@ngtools/webpack": "^15.0.0 || ^16.0.0 || ^17.0.0",
"@rollup/plugin-commonjs": "^23.0.3",
"@rollup/plugin-json": "^5.0.2",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-replace": "^5.0.1",
"@types/jasmine": "~3.8.0",
Expand All @@ -130,18 +128,16 @@
"karma-jasmine-html-reporter": "^1.7.0",
"karma-sourcemap-loader": "^0.3.8",
"karma-webpack": "^5.0.0",
"ng-packagr": "^15.0.0",
"ng-packagr": "^15.0.0 || ^16.0.0 || ^17.0.0",
"null-loader": "^0.1.1",
"nyc": "^15.1.0",
"prettier": "^2.8.4",
"protractor": "^7.0.0",
"rimraf": "^3.0.2",
"rollup": "^2.78.0",
"rollup-plugin-cleanup": "^3.2.1",
"rollup": "^3.0.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-import-css": "^3.3.1",
"rollup-plugin-typescript2": "^0.34.1",
"rollup-plugin-visualizer": "^5.4.1",
"rxjs": "^6.6.0",
"ts-loader": "^6.2.1",
"tslib": "^2.5.0",
Expand Down
3 changes: 3 additions & 0 deletions packages/angular-material/rollup.example.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const config = {
format: 'iife',
sourcemap: true,
},
// Disable treeshaking when generating bundles
// see: https://github.com/angular/angular/pull/32069
treeshake: false,
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
Expand Down
16 changes: 13 additions & 3 deletions packages/angular-material/src/controls/autocomplete.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,15 @@ import { map, startWith } from 'rxjs/operators';
* <pre><code>
* ...
* imports: [JsonFormsAngularMaterialModule, MatAutocompleteModule],
* declarations: [AutocompleteControlRenderer],
* entryComponents: [AutocompleteControlRenderer]
* declarations: [AutocompleteControlRenderer]
* ...
* </code></pre>
*
*/
@Component({
selector: 'AutocompleteControlRenderer',
template: `
<mat-form-field fxFlex [fxHide]="hidden">
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
Expand Down Expand Up @@ -99,6 +98,17 @@ import { map, startWith } from 'rxjs/operators';
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AutocompleteControlRenderer
Expand Down
22 changes: 16 additions & 6 deletions packages/angular-material/src/controls/boolean.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,7 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
@Component({
selector: 'BooleanControlRenderer',
template: `
<div
[fxHide]="hidden"
fxLayout="column"
fxLayoutAlign="center"
style="height:100%"
>
<div [ngStyle]="{ display: hidden ? 'none' : '' }" class="boolean-control">
<mat-checkbox
(change)="onChange($event)"
[checked]="isChecked()"
Expand All @@ -54,6 +49,21 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
<mat-error class="mat-caption">{{ error }}</mat-error>
</div>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
.boolean-control {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BooleanControlRenderer extends JsonFormsControl {
Expand Down
13 changes: 12 additions & 1 deletion packages/angular-material/src/controls/date.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
@Component({
selector: 'DateControlRenderer',
template: `
<mat-form-field fxFlex [fxHide]="hidden">
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
Expand All @@ -51,6 +51,17 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DateControlRenderer extends JsonFormsControl {
Expand Down
13 changes: 12 additions & 1 deletion packages/angular-material/src/controls/number.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import merge from 'lodash/merge';
@Component({
selector: 'NumberControlRenderer',
template: `
<mat-form-field fxFlex [fxHide]="hidden">
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
Expand All @@ -57,6 +57,17 @@ import merge from 'lodash/merge';
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NumberControlRenderer extends JsonFormsControl {
Expand Down
16 changes: 15 additions & 1 deletion packages/angular-material/src/controls/range.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,11 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
@Component({
selector: 'RangeControlRenderer',
template: `
<div fxFlex fxLayout="column" [fxHide]="hidden">
<div [ngStyle]="{ display: hidden ? 'none' : '' }" class="range-control">
<label class="mat-caption" style="color:rgba(0,0,0,.54)">{{
label
}}</label>
<!-- TODO: The 'tickInterval' property no longer exists -->
JBBianchi marked this conversation as resolved.
Show resolved Hide resolved
<mat-slider
[disabled]="!isEnabled()"
[max]="max"
Expand All @@ -55,6 +56,19 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
<mat-error class="mat-caption">{{ error }}</mat-error>
</div>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
.range-control {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class RangeControlRenderer extends JsonFormsControl {
Expand Down
13 changes: 12 additions & 1 deletion packages/angular-material/src/controls/text.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
@Component({
selector: 'TextControlRenderer',
template: `
<mat-form-field fxFlex [fxHide]="hidden">
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<input
matInput
Expand All @@ -46,6 +46,17 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TextControlRenderer extends JsonFormsControl {
Expand Down
13 changes: 12 additions & 1 deletion packages/angular-material/src/controls/textarea.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
@Component({
selector: 'TextAreaRenderer',
template: `
<mat-form-field fxFlex [fxHide]="hidden">
<mat-form-field [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-label>{{ label }}</mat-label>
<textarea
matInput
Expand All @@ -45,6 +45,17 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
<mat-error>{{ error }}</mat-error>
</mat-form-field>
`,
styles: [
`
:host {
display: flex;
flex-direction: row;
}
mat-form-field {
flex: 1 1 auto;
}
`,
],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TextAreaRenderer extends JsonFormsControl {
Expand Down
2 changes: 1 addition & 1 deletion packages/angular-material/src/controls/toggle.renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import {
@Component({
selector: 'ToggleControlRenderer',
template: `
<div [fxHide]="hidden">
<div [ngStyle]="{ display: hidden ? 'none' : '' }">
<mat-slide-toggle
(change)="onChange($event)"
[checked]="isChecked()"
Expand Down
Loading