feat(component): make Angular 10.0.0 a supported peer dependency

closes #177
DethAriel · Sep 10, 2020 · 3d7756b · 3d7756b
1 parent 98edce6
commit 3d7756b
Show file tree

Hide file tree

Showing 49 changed files with 9,229 additions and 19 deletions.
diff --git a/demo/index.ts b/demo/index.ts
@@ -7,10 +7,16 @@ const supportedOlderVersions = ['v6', 'v7', 'v8'];
 
 generateSourcesForOlderVersions();
 generateSourcesForV9();
+generateSourcesForV10();
 
 function generateSourcesForV9() {
-  readDirRecursively('v9-template').forEach(processFileForV9);
-  readDirRecursively('v-all/bin').forEach(processFileForV9);
+  readDirRecursively('v9-template').forEach((file) => processFileForVersions(file, ['v9']));
+  readDirRecursively('v-all/bin').forEach((file) => processFileForVersions(file, ['v9']));
+}
+
+function generateSourcesForV10() {
+  readDirRecursively('v10-template').forEach((file) => processFileForVersions(file, ['v10']));
+  readDirRecursively('v-all/bin').forEach((file) => processFileForVersions(file, ['v10']));
 }
 
 function generateSourcesForOlderVersions() {
@@ -72,10 +78,6 @@ function processFileForOlderVersions(file: string): void {
   processFileForVersions(file, supportedOlderVersions);
 }
 
-function processFileForV9(file: string): void {
-  processFileForVersions(file, ['v9']);
-}
-
 function processFileForVersions(file: string, versions: string[]): void {
   if (file.endsWith('.template.ts')) {
     const fileExports = require('./' + file);

diff --git a/demo/package.json b/demo/package.json
@@ -9,13 +9,15 @@
     "clean:v7": "cd v7 && yarn clean",
     "clean:v8": "cd v8 && yarn clean",
     "clean:v9": "cd v9 && yarn clean",
-    "clean:all": "yarn generate && rimraf dist && yarn clean:v6 && yarn clean:v7 && yarn clean:v8 && yarn clean:v9",
+    "clean:v10": "cd v10 && yarn clean",
+    "clean:all": "yarn generate && rimraf dist && yarn clean:v6 && yarn clean:v7 && yarn clean:v8 && yarn clean:v9 && yarn clean:v10",
     "build:v6": "cd v6 && yarn build",
     "build:v7": "cd v7 && yarn build",
     "build:v8": "cd v8 && yarn build",
     "build:v9": "cd v9 && yarn build",
+    "build:v10": "cd v10 && yarn build",
     "prebuild:all": "check-node-version --node $(cat .nvmrc)",
-    "build:all": "yarn clean:all && yarn build:v6 && yarn build:v7 && yarn build:v8 && yarn build:v9",
+    "build:all": "yarn clean:all && yarn build:v6 && yarn build:v7 && yarn build:v8 && yarn build:v9 && yarn build:v10",
     "build": "yarn install && yarn generate && yarn pack-latest && yarn build:all",
     "pack-latest": "cd .. && yarn pack-latest"
   },

diff --git a/demo/v-all/bin/build-v9.ts → demo/v-all/bin/build-vNew.ts b/demo/v-all/bin/build-v9.ts → demo/v-all/bin/build-vNew.ts
@@ -2,8 +2,10 @@ import { examples, Example } from './examples';
 import { execSync } from "child_process";
 import * as fs from 'fs';
 
+const angularVersion = process.argv[2];
+const isLatest = process.argv[3] === "--latest";
+
 examples.forEach(buildExample)
-execSync('rm -rf ../dist/ng-recaptcha/v9-temp', { stdio: 'inherit' })
 
 function buildExample(example: Example) {
   if (example.additional) {
@@ -20,9 +22,9 @@ function buildExample(example: Example) {
   }
 
   const angularSettings = JSON.parse(fs.readFileSync('./angular.json', { encoding: 'utf-8' }));
-  angularSettings.projects.v9.architect.build.options.outputPath = `../dist/ng-recaptcha/v9-temp`;
-  angularSettings.projects.v9.architect.build.options.index = `src/${indexFileName}`;
-  angularSettings.projects.v9.architect.build.options.main = `src/app/examples/${example.name}/${example.name}-demo.main.ts`;
+  angularSettings.projects[angularVersion].architect.build.options.outputPath = `../dist/ng-recaptcha/${angularVersion}-temp`;
+  angularSettings.projects[angularVersion].architect.build.options.index = `src/${indexFileName}`;
+  angularSettings.projects[angularVersion].architect.build.options.main = `src/app/examples/${example.name}/${example.name}-demo.main.ts`;
   fs.writeFileSync('./angular.json', JSON.stringify(angularSettings, null, 2), { encoding: 'utf-8' });
 
   const tsConfig = JSON.parse(fs.readFileSync('./tsconfig.app.json', { encoding: 'utf-8' }));
@@ -34,5 +36,6 @@ function buildExample(example: Example) {
 
 
   execSync('yarn ng-build', { stdio: 'inherit' });
-  execSync('cp -R ../dist/ng-recaptcha/v9-temp/ ../dist/ng-recaptcha', { stdio: 'inherit' });
+  const targetDir = `../dist/ng-recaptcha${isLatest ? '' : `/${angularVersion}`}`;
+  execSync(`cp -R ../dist/ng-recaptcha/${angularVersion}-temp/ ${targetDir}`, { stdio: 'inherit' });
 }
diff --git a/demo/v-all/bin/file-gen-v9.ts → demo/v-all/bin/file-gen-vNew.ts b/demo/v-all/bin/file-gen-v9.ts → demo/v-all/bin/file-gen-vNew.ts
diff --git a/demo/v10-template/.browserslistrc b/demo/v10-template/.browserslistrc
@@ -0,0 +1,18 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
diff --git a/demo/v10-template/.gitignore.copy b/demo/v10-template/.gitignore.copy
@@ -0,0 +1,2 @@
+/*
+!yarn.lock
diff --git a/demo/v10-template/angular.json b/demo/v10-template/angular.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "v10": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "../dist/ng-recaptcha",
+            "index": "src/index.html",
+            "main": "src/app/examples/basic/basic-demo.main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "outputHashing": "all",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/images"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ]
+            }
+          }
+        }
+      }
+    }},
+  "defaultProject": "v10"
+}
diff --git a/demo/v10-template/package.json b/demo/v10-template/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "v10-template",
+  "version": "0.0.0",
+  "scripts": {
+    "file-gen": "ts-node ./bin/file-gen-vNew.ts v10 --latest",
+    "latest": "yarn remove ng-recaptcha; yarn install; yarn add ng-recaptcha@../../ng-recaptcha-latest.tgz --update-checksums",
+    "clean": "rimraf src/app/examples/**/*{-demo.main.ts,-demo.data.ts}",
+    "serve": "http-server ./dist -a localhost -p 9000 -c-1",
+    "start": "run-s build-dev serve",
+    "ng-build": "ng build",
+    "build": "yarn latest && run-s clean file-gen webpack:prod",
+    "webpack:prod": "ts-node ./bin/build-vNew.ts v10 --latest"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~10.1.0",
+    "@angular/cdk": "^10.0.0",
+    "@angular/common": "~10.1.0",
+    "@angular/compiler": "~10.1.0",
+    "@angular/core": "~10.1.0",
+    "@angular/forms": "~10.1.0",
+    "@angular/material": "^10.0.0",
+    "@angular/platform-browser": "~10.1.0",
+    "@angular/platform-browser-dynamic": "~10.1.0",
+    "@angular/router": "~10.1.0",
+    "ng-recaptcha": "../../ng-recaptcha-latest.tgz",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1001.0",
+    "@angular/cli": "~10.1.0",
+    "@angular/compiler-cli": "~10.1.0",
+    "@types/node": "^12.11.1",
+    "highlight.js": "^10.1.1",
+    "npm-run-all": "^4.1.2",
+    "rimraf": "^2.6.3",
+    "ts-node": "~8.3.0",
+    "typescript": "~4.0.2"
+  }
+}
diff --git a/demo/v10-template/src/app/demo-wrapper/demo-wrapper.component.ts b/demo/v10-template/src/app/demo-wrapper/demo-wrapper.component.ts
@@ -0,0 +1,66 @@
+import { MediaMatcher } from '@angular/cdk/layout';
+import { ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+
+
+export interface PageSettings {
+  title: string;
+  feature: string;
+  content: {
+    html: string;
+    component: string;
+    module: string;
+    additional?: {
+      title: string;
+      type: string;
+      content: string;
+    }
+  };
+}
+export interface NavLink {
+  label: string;
+  path: string;
+  feature: string;
+}
+export const PAGE_SETTINGS = new InjectionToken<PageSettings>('PAGE_SETTINGS');
+export const NAV_LINKS = new InjectionToken<NavLink[]>('NAV_LINKS');
+
+@Component({
+  selector: 'recaptcha-demo-wrapper',
+  styleUrls: [
+    './recaptcha-demo-wrapper.component.css',
+  ],
+  templateUrl: './recaptcha-demo-wrapper.component.html',
+})
+export class DemoWrapperComponent implements OnInit, OnDestroy {
+  public site = {
+    title: 'ng-recaptcha',
+    description: 'Angular component for Google reCAPTCHA',
+    baseurl: '/ng-recaptcha',
+  };
+  public mobileQuery: MediaQueryList;
+  public sidebarOpened: boolean = false;
+
+  private mobileQueryListener: () => void;
+
+  constructor(
+    @Inject(PAGE_SETTINGS) public page: PageSettings,
+    @Inject(NAV_LINKS) public navLinks: NavLink[],
+    private titleService: Title,
+    media: MediaMatcher,
+    changeDetectorRef: ChangeDetectorRef,
+  ) {
+    this.mobileQuery = media.matchMedia('(max-width: 600px)');
+    this.mobileQueryListener = () => changeDetectorRef.detectChanges();
+    this.mobileQuery.addListener(this.mobileQueryListener);
+  }
+
+  public ngOnInit() {
+    this.titleService.setTitle(`${this.page.title} | ${this.site.title}`);
+  }
+
+  public ngOnDestroy(): void {
+    this.mobileQuery.removeListener(this.mobileQueryListener);
+  }
+}
diff --git a/demo/v10-template/src/app/demo-wrapper/demo-wrapper.module.ts b/demo/v10-template/src/app/demo-wrapper/demo-wrapper.module.ts
@@ -0,0 +1,35 @@
+import { LayoutModule } from '@angular/cdk/layout';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DemoWrapperComponent, NAV_LINKS } from './demo-wrapper.component';
+import { navLinks } from './demo-wrapper.data.auto-gen';
+
+@NgModule({
+  declarations: [DemoWrapperComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatSidenavModule,
+    MatListModule,
+    LayoutModule,
+  ],
+  exports: [
+    DemoWrapperComponent,
+  ],
+  providers: [
+    { provide: NAV_LINKS, useValue: navLinks },
+  ],
+})
+export class DemoWrapperModule { }
diff --git a/demo/v10-template/src/app/demo-wrapper/recaptcha-demo-wrapper.component.css b/demo/v10-template/src/app/demo-wrapper/recaptcha-demo-wrapper.component.css
@@ -0,0 +1,75 @@
+.recaptcha-demo-wrapper .filler {
+  flex: 1 1 auto;
+}
+
+.recaptcha-demo-wrapper > mat-toolbar {
+  box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
+  z-index: 2;
+}
+
+.recaptcha-demo-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.recaptcha-demo-wrapper mat-sidenav-container {
+  flex: 1;
+}
+
+.recaptcha-demo-wrapper mat-sidenav {
+  width: 200px;
+  box-shadow: 3px 0 6px rgba(0,0,0,.24);
+}
+
+.recaptcha-demo-wrapper mat-nav-list {
+  padding-top: 0;
+}
+
+.recaptcha-demo-wrapper mat-nav-list h3 {
+  font-size: 12px;
+  letter-spacing: 1px;
+  line-height: 24px;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 0 16px;
+  background: rgba(0,0,0,.32);
+  color: hsla(0,0%,100%,.87);
+}
+
+.recaptcha-demo-wrapper mat-nav-list a {
+  border-bottom: 1px solid rgba(0,0,0,.06);
+}
+
+.recaptcha-demo-wrapper mat-nav-list a.active {
+  font-weight: 600;
+}
+
+.recaptcha-demo-wrapper main {
+  padding: 15px;
+  flex-grow: 1;
+}
+
+.recaptcha-demo-wrapper mat-sidenav-content {
+  height: 100%;
+  display: block;
+}
+
+.recaptcha-demo-wrapper .layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.recaptcha-demo-wrapper footer {
+  margin-top: 40px;
+  padding: 10px;
+  font-size: 12px;
+  text-align: center;
+  background: #3f51b5;
+  color: hsla(0,0%,100%,.87);
+}
+
+.recaptcha-demo-wrapper footer h3 {
+  margin: 0;
+}