Update Angular 16 (#454)

* Update Angular 16 * Update ESLint * Add version to install instructions in README.md * Update @angular/flex-layout * Increase GitHub icon size in demo nav-bar
jfcere · May 7, 2023 · 37f67d2 · 37f67d2
1 parent f4b56ff
commit 37f67d2
Show file tree

Hide file tree

Showing 9 changed files with 3,297 additions and 2,832 deletions.
diff --git a/README.md b/README.md
@@ -54,8 +54,8 @@ StackBlitz available @ [https://stackblitz.com/edit/ngx-markdown](https://stackb
 To add ngx-markdown library to your `package.json` use the following commands.
 
 ```bash
-npm install ngx-markdown marked --save
-npm install @types/marked --save-dev
+npm install ngx-markdown marked@^4.3.0 --save
+npm install @types/marked@^4.3.0 --save-dev
 ```
 
 As the library is using [Marked](https://github.com/chjj/marked) parser you will need to add `node_modules/marked/marked.min.js` to your application.
@@ -75,7 +75,7 @@ If you are using [Angular CLI](https://cli.angular.io/) you can follow the `angu
 To add [Prism.js](http://prismjs.com/) library to your `package.json` use the following command.
 
 ```bash
-npm install prismjs --save
+npm install prismjs@^1.28.0 --save
 ```
 
 To activate [Prism.js](http://prismjs.com/) syntax highlight you will need to include...
@@ -241,7 +241,7 @@ Optionally, to automatically present some lines as output without providing the
 To add [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) library to your `package.json` use the following command.
 
 ```bash
-npm install emoji-toolkit --save
+npm install emoji-toolkit@^7.0.0 --save
 ```
 
 To activate [Emoji-Toolkit](https://github.com/joypixels/emoji-toolkit) for emoji suppport you will need to include...
@@ -275,7 +275,7 @@ Using `markdown` component and/or directive, you will be able to use the `emoji`
 To add [KaTeX](https://katex.org/) library to your `package.json` use the following command.
 
 ```bash
-npm install katex --save
+npm install katex@^0.16.0 --save
 ```
 
 To activate [KaTeX](https://katex.org/) math rendering you will need to include...
@@ -339,7 +339,7 @@ public options: KatexOptions = {
 To add [Mermaid](https://mermaid-js.github.io/) library to your `package.json` use the following command.
 
 ```bash
-npm install mermaid --save
+npm install mermaid@^9.1.2 --save
 ```
 
 To activate [Mermaid](https://mermaid-js.github.io/) diagramming and charting tool you will need to include...
@@ -395,7 +395,7 @@ public options: MermaidAPI.Config = {
 To add [Clipboard](https://clipboardjs.com/) library to your `package.json` use the following command.
 
 ```bash
-npm install clipboard --save
+npm install clipboard@^2.0.11 --save
 ```
 
 To activate [Clipboard](https://clipboardjs.com/) allowing copy-to-clipboard you will need to include...

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -9,7 +9,7 @@ <h1>ngx-markdown</h1>
       </mat-icon>
     </button>
     <a mat-icon-button href="https://github.com/jfcere/ngx-markdown">
-      <img src="assets/icon-github.svg">
+      <img class="github-icon" src="assets/icon-github.svg">
     </a>
   </mat-toolbar-row>
 </mat-toolbar>

diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -23,6 +23,13 @@ $viewport-offset-x: 16px;
   display: block;
 }
 
+.github-icon {
+  --mdc-icon-button-icon-size: 28px;
+  position: relative;
+  top: -2px;
+  left: -2px;
+}
+
 .mat-mdc-tab-nav-bar--sticky {
   @include mat.elevation(6);
   transition: box-shadow .3s ease-out;

diff --git a/demo/src/app/shared/clipboard-button/clipboard-button.module.ts b/demo/src/app/shared/clipboard-button/clipboard-button.module.ts
@@ -10,6 +10,5 @@ import { ClipboardButtonComponent } from './clipboard-button.component';
     MatSnackBarModule,
   ],
   declarations: [ClipboardButtonComponent],
-  entryComponents: [ClipboardButtonComponent],
 })
 export class ClipboardButtonModule { }
diff --git a/demo/src/styles.scss b/demo/src/styles.scss
@@ -74,8 +74,8 @@ table {
 input,
 textarea {
   font-family: monospace !important;
-  font-size: 15px !important;
-  line-height: 1.125 !important;
+  font-size: 14px !important;
+  line-height: 1.25 !important;
 }
 
 [hidden] {

diff --git a/lib/package.json b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown",
-  "version": "15.1.2",
+  "version": "16.0.0-beta.0",
   "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights",
   "homepage": "https://github.com/jfcere/ngx-markdown",
   "license": "MIT",
@@ -30,19 +30,20 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@types/marked": "^4.0.3",
-    "marked": "^4.0.17",
+    "@angular/common": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@types/marked": "^4.3.0",
+    "marked": "^4.3.0",
     "rxjs": "^6.5.3 || ^7.4.0",
-    "zone.js": "~0.11.4 || ~0.12.0 || ~0.13.0"
+    "zone.js": "~0.13.0"
   },
   "optionalDependencies": {
     "clipboard": "^2.0.11",
     "emoji-toolkit": "^7.0.0",
     "katex": "^0.16.0",
     "mermaid": "^9.1.2",
     "prismjs": "^1.28.0"
-  }
+  },
+  "sideEffects": false
 }
diff --git a/lib/src/markdown.module.ts b/lib/src/markdown.module.ts
@@ -25,15 +25,10 @@ const sharedDeclarations = [
   MarkdownPipe,
 ];
 
-const sharedEntryComponents = [
-  ClipboardButtonComponent,
-];
-
 @NgModule({
   imports: [CommonModule],
   exports: sharedDeclarations,
   declarations: sharedDeclarations,
-  entryComponents: sharedEntryComponents,
 })
 export class MarkdownModule {
   static forRoot(markdownModuleConfig?: MarkdownModuleConfig): ModuleWithProviders<MarkdownModule> {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-markdown",
-  "version": "15.1.2",
+  "version": "16.0.0-beta.0",
   "description": "Angular library that uses marked to parse markdown to html combined with Prism.js for synthax highlights",
   "homepage": "https://github.com/jfcere/ngx-markdown",
   "license": "MIT",
@@ -46,17 +46,17 @@
     "publish:lib": "npm publish ./dist/lib"
   },
   "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/cdk": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/flex-layout": "14.0.0-beta.41",
-    "@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/animations": "^16.0.0",
+    "@angular/cdk": "^16.0.0",
+    "@angular/common": "^16.0.0",
+    "@angular/compiler": "^16.0.0",
+    "@angular/core": "^16.0.0",
+    "@angular/flex-layout": "15.0.0-beta.42",
+    "@angular/forms": "^16.0.0",
+    "@angular/material": "^16.0.0",
+    "@angular/platform-browser": "^16.0.0",
+    "@angular/platform-browser-dynamic": "^16.0.0",
+    "@angular/router": "^16.0.0",
     "clipboard": "^2.0.11",
     "emoji-toolkit": "^7.0.0",
     "gumshoejs": "^5.1.2",
@@ -68,41 +68,41 @@
     "prismjs": "^1.29.0",
     "rxjs": "~6.5.3",
     "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
+    "zone.js": "~0.13.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular-eslint/builder": "~15.0.0",
-    "@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/cli": "~15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@angular/language-service": "^15.0.0",
+    "@angular-devkit/build-angular": "^16.0.0",
+    "@angular-eslint/builder": "~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/cli": "~16.0.0",
+    "@angular/compiler-cli": "^16.0.0",
+    "@angular/language-service": "^16.0.0",
     "@types/jasmine": "~4.3.0",
-    "@types/marked": "^4.0.7",
-    "@typescript-eslint/eslint-plugin": "~5.43.0",
-    "@typescript-eslint/parser": "~5.43.0",
+    "@types/marked": "^4.3.0",
+    "@typescript-eslint/eslint-plugin": "~5.59.2",
+    "@typescript-eslint/parser": "~5.59.2",
     "angular-cli-ghpages": "^0.5.3",
     "coveralls": "^3.1.1",
     "cpy-cli": "^3.1.1",
-    "eslint": "^8.28.0",
+    "eslint": "^8.39.0",
     "eslint-import-resolver-typescript": "~3.5.2",
     "eslint-plugin-import": "~2.26.0",
     "eslint-plugin-jsdoc": "~39.6.2",
     "eslint-plugin-prefer-arrow": "~1.2.3",
-    "jasmine-core": "~4.5.0",
+    "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "karma-junit-reporter": "^2.0.1",
     "linklocal": "^2.8.2",
-    "ng-packagr": "^15.0.0",
+    "ng-packagr": "^16.0.0",
     "raw-loader": "4.0.2",
     "rimraf": "^2.7.0",
-    "typescript": "~4.8.2"
+    "typescript": "~5.0.2"
   }
-}
+}