feat: angular 18

.github/workflows/ci.yml

@@ -9,6 +9,9 @@ on:
   pull_request:
     branches: [ master ]
 
+permissions:
+  contents: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,12 +21,37 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v4
       with:
+        registry-url: "https://registry.npmjs.org"
         node-version: ${{ matrix.node-version }}
-    - run: yarn --frozen-lockfile
+
+    - uses: actions/cache@v4
+      id: yarn-cache
+      with:
+        path: .yarn
+        key: ${{ runner.os }}-yarn-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-yarn-
+
+    - run: corepack enable
+    - run: yarn --immutable
+
     - run: yarn ci-build
+
     - run: yarn ci-test
+
     - run: yarn ci-lint
+
+    - name: Publish documentation
+      if: github.ref == 'refs/heads/master'
+      run: |
+        git config user.name "github-actions[bot]"
+        git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+        git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY
+        yarn publish:gh-pages

.gitignore

@@ -8,7 +8,13 @@
 /bazel-out
 
 # dependencies
+.pnp.*
+.yarn/*
+
 /node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
 
 # profiling files
 chrome-profiler-events.json

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+
+yarn lint
+yarn lint-staged

.yarnrc.yml

@@ -0,0 +1,5 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+nodeLinker: node-modules

CHANGES.md

@@ -1,3 +1,7 @@
+# 18.0.0 - 2024-05-25
+- Support Angular 18 (#98)
+- Add new inputs `style` / `styleClass` (#88)
+
 # 17.0.0 - 2023-11-20
 - Support Angular 17 (#84 / #85)
 

README.md

@@ -6,13 +6,37 @@
 Easy to use QR code generator for Angular projects.
 
 **Features:**
-* Compatible with Angular 17
+* Compatible with Angular 18
 * Leverages the widely used [qrcode](https://www.npmjs.com/package/qrcode) 
   package to do the heavy lifting
 * Renders to HTML Canvas
 
 **[Change Log](CHANGES.md)**
 
+<!-- toc -->
+
+  - [Installation](#installation)
+  - [Usage](#usage)
+    - [Component](#component)
+      - [value: string (required)](#value-string-required)
+      - [size: string | number (optional)](#size-string--number-optional)
+      - [darkColor: RGBAColor (optional)](#darkcolor-rgbacolor-optional)
+      - [lightColor: RGBAColor (optional)](#lightcolor-rgbacolor-optional)
+      - [style: { [klass: string]: any; } (optional)](#style--klass-string-any--optional)
+      - [styleClass: string (optional)](#styleclass-string-optional)
+      - [errorCorrectionLevel: string (optional)](#errorcorrectionlevel-string-optional)
+      - [centerImageSrc: string (optional)](#centerimagesrc-string-optional)
+      - [centerImageSize: string | number (optional)](#centerimagesize-string--number-optional)
+      - [margin: number (optional)](#margin-number-optional)
+    - [Directive](#directive)
+- [Demo](#demo)
+- [Angular compatibility matrix](#angular-compatibility-matrix)
+- [Known / Common Issues](#known--common-issues)
+  - [Reference Error 'global' is not defined](#reference-error-global-is-not-defined)
+- [Footnote / Package History](#footnote--package-history)
+
+<!-- tocstop -->
+
 ## Installation
 Add as a dependency to your angular application:
 
@@ -21,17 +45,22 @@ Add as a dependency to your angular application:
 ## Usage
 Import into your consuming module (Eg: AppModule):
 
-     import { QrCodeModule } from 'ng-qrcode';
-
-     @NgModule({
-       imports: [
-         QrCodeModule
-       ]
-     })
+```typescript
+import { QrCodeModule } from 'ng-qrcode';
 
-### Component
+@NgModule({
+  imports: [
+    QrCodeModule
+  ]
+})
+```
 
-    <qr-code value="Yo world!" size="300" errorCorrectionLevel="M"></qr-code>
+### Component
+```angular17html
+<qr-code value="Hello world!" 
+         size="300" 
+         errorCorrectionLevel="M" />
+``` 
 
 #### value: string (required)  
 The value to encode in the QR code, eg: a url
@@ -106,6 +135,7 @@ major version.
 
 | Angular Version | ng-qrcode Versions |
 |-----------------|--------------------|
+| ^18             | ^18                |
 | ^17             | ^17                |
 | ^16             | ^16                |
 | ^15             | ^8                 |
@@ -117,7 +147,7 @@ major version.
 | ^7              | ^2                 |
 
 
-# Known/Common Issues
+# Known / Common Issues
 
 ## Reference Error 'global' is not defined
 Essentially in some cases Angular will bundle a version of the buffer library that is not
@@ -135,4 +165,4 @@ The source for this was lost, and this repository is a re-write, first released
 as v2.0.0 that uses the `qrcode` npm package to generate QR Codes.
 
 v2.0.0 should be backwards compatible, aside from a rename of the exported NgModule from 
-QRCodeModule -> QrCodeModule for consistency. 
+QRCodeModule -> QrCodeModule for consistency.

angular.json

@@ -52,11 +52,12 @@
       },
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ng-qrcode-demo",
+            "outputPath": {
+              "base": "dist/ng-qrcode-demo"
+            },
             "index": "projects/ng-qrcode-demo/src/index.html",
-            "main": "projects/ng-qrcode-demo/src/main.ts",
             "polyfills": [
               "zone.js"
             ],
@@ -69,12 +70,11 @@
               "projects/ng-qrcode-demo/src/styles.scss"
             ],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "projects/ng-qrcode-demo/src/main.ts"
           },
           "configurations": {
             "production": {
@@ -89,8 +89,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

package.json

@@ -1,89 +1,88 @@
 {
   "name": "ng-qrcode",
-  "description": "Simple AOT compatible QR code generator for your Angular project.",
+  "private": true,
   "version": "0.0.0",
-  "license": "MIT",
   "author": {
     "name": "Michael Nahkies",
     "email": "support@nahkies.co.nz"
   },
+  "license": "MIT",
+  "description": "Simple AOT compatible QR code generator for your Angular project.",
   "repository": {
     "type": "git",
     "url": "https://github.com/mnahkies/ng-qrcode.git"
   },
   "bugs": {
     "url": "https://github.com/mnahkies/ng-qrcode/issues"
   },
-  "packageManager": "yarn@1.22.19",
   "scripts": {
-    "ng": "ng",
+    "postinstall": "husky",
+    "clean": "rm -rf ./dist ./coverage",
+    "docs:generate": "markdown-toc -i --bullets=- ./README.md",
     "start": "ng serve",
     "build": "ng build --project ng-qrcode --configuration production",
     "build-for-publish": "ng build --project ng-qrcode --configuration production && cp ./README.md ./CHANGES.md ./LICENSE ./dist/ng-qrcode/",
-    "build-publish-demo-app": "ng build --project=ng-qrcode-demo --configuration production --base-href \"/ng-qrcode/\" && ngh --dir=./dist/ng-qrcode-demo",
+    "build-demo-app": "ng build --project=ng-qrcode-demo --configuration production",
+    "publish:gh-pages": "yarn build-demo-app && yarn gh-pages -d ./dist/ng-qrcode-demo/browser -b gh-pages --nojekyll",
     "test": "ng test",
     "lint": "ng lint",
-    "ci-pipeline": "yarn ci-build && yarn ci-test && yarn ci-lint",
+    "ci-pipeline": "yarn clean && yarn ci-build && yarn ci-test && yarn ci-lint",
     "postci-pipeline": "cp ./README.md ./CHANGES.md ./LICENSE ./dist/ng-qrcode/",
     "ci-build": "ng build --project ng-qrcode --configuration production && ng build --project=ng-qrcode-demo --configuration production",
     "ci-test": "ng test --code-coverage",
     "ci-lint": "ng lint"
   },
-  "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.3",
-    "@angular/common": "^17.0.3",
-    "@angular/compiler": "^17.0.3",
-    "@angular/core": "^17.0.3",
-    "@angular/forms": "^17.0.3",
-    "@angular/platform-browser": "^17.0.3",
-    "@angular/platform-browser-dynamic": "^17.0.3",
-    "@angular/router": "^17.0.3",
-    "core-js": "^3.33.3",
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/router": "^18.0.0",
     "qrcode": "^1.5.3",
     "rxjs": "^7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.1",
-    "@angular-eslint/builder": "17.4.1",
-    "@angular-eslint/eslint-plugin": "17.4.1",
-    "@angular-eslint/eslint-plugin-template": "17.4.1",
-    "@angular-eslint/schematics": "17.4.1",
-    "@angular-eslint/template-parser": "17.4.1",
-    "@angular/cli": "^17.0.1",
-    "@angular/compiler-cli": "^17.0.3",
-    "@angular/language-service": "^17.0.3",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular-eslint/builder": "18.0.0-alpha.1",
+    "@angular-eslint/eslint-plugin": "18.0.0-alpha.1",
+    "@angular-eslint/eslint-plugin-template": "18.0.0-alpha.1",
+    "@angular-eslint/schematics": "18.0.0-alpha.1",
+    "@angular-eslint/template-parser": "18.0.0-alpha.1",
+    "@angular/cli": "^18.0.1",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
     "@types/jasmine": "~5.1.2",
-    "@types/jasminewd2": "^2.0.13",
     "@types/node": "^20.9.2",
     "@types/qrcode": "^1.5.5",
-    "@typescript-eslint/eslint-plugin": "7.9.0",
-    "@typescript-eslint/parser": "7.9.0",
-    "angular-cli-ghpages": "^1.0.7",
+    "@typescript-eslint/eslint-plugin": "7.10.0",
+    "@typescript-eslint/parser": "7.10.0",
     "eslint": "^8.54.0",
+    "gh-pages": "^6.1.1",
+    "husky": "^9.0.11",
     "jasmine-core": "~5.1.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "^6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "karma-mocha-reporter": "^2.2.5",
-    "ng-packagr": "^17.0.1",
-    "ts-node": "^10.9.1",
-    "typescript": "~5.2.2"
+    "lint-staged": "^15.2.5",
+    "markdown-toc": "^1.2.0",
+    "ng-packagr": "^18.0.0",
+    "typescript": "~5.4.5"
+  },
+  "lint-staged": {
+    "*.md": [
+      "sh -c 'yarn docs:generate'"
+    ]
+  },
+  "engines": {
+    "node": ">=20 <23"
   },
-  "keywords": [
-    "qr",
-    "code",
-    "qrcode",
-    "qr-code",
-    "angular",
-    "angular2",
-    "ng",
-    "ngx",
-    "ng2"
-  ]
+  "packageManager": "yarn@4.2.2"
 }

projects/ng-qrcode-demo/karma.conf.js

@@ -9,7 +9,6 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-mocha-reporter'),
       require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
@@ -26,7 +25,7 @@ module.exports = function (config) {
       ],
       fixWebpackSourcePaths: true
     },
-    reporters: ['mocha', 'kjhtml'],
+    reporters: ['kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

projects/ng-qrcode-demo/src/app/app.component.html

@@ -37,7 +37,7 @@ <h3>Inputs:</h3>
       <label for="errorCorrectionLevel">Error Correction Level</label>
       <select id="errorCorrectionLevel" name="errorCorrectionLevel" [(ngModel)]="errorCorrectionLevel">
         @for (value of errorCorrectionLevels; track value) {
-          <option [value]="value">{{value}}</option>
+          <option [value]="value">{{ value }}</option>
         }
       </select>
 
@@ -68,9 +68,7 @@ <h3>Result:</h3>
                [errorCorrectionLevel]="errorCorrectionLevel"
                [centerImageSrc]="centerImageSrc"
                [centerImageSize]="centerImageSize ? this.centerImageSize : undefined"
-               [margin]="margin">
-      </qr-code>
+               [margin]="margin" />
     </div>
-
   </div>
 </div>