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

closes #168

README.md

@@ -232,7 +232,7 @@ import { RECAPTCHA_LANGUAGE } from 'ng-recaptcha';
 
 You can find the list of supported languages in [reCAPTCHA docs](https://developers.google.com/recaptcha/docs/language).
 
-### <a name="example-preload-api"></a>Loading the reCAPTCHA API by yourself [(see in action)](https://dethariel.github.io/ng-recaptcha/preload-api)
+### <a name="example-preload-api"></a>Loading the reCAPTCHA API by yourself [(see in action)](https://dethariel.github.io/ng-recaptcha/v8/preload-api)
 
 By default, the component assumes that the reCAPTCHA API loading will be handled
 by the `RecaptchaLoaderService`. However, you can override that by providing your

demo/index.ts

@@ -3,9 +3,19 @@ import fs from 'fs';
 import merge from 'lodash.merge';
 import path from 'path';
 
-const supportedVersions = ['v6', 'v7', 'v8'];
+const supportedOlderVersions = ['v6', 'v7', 'v8'];
 
-readDirRecursively('v-all').forEach(processFile);
+generateSourcesForOlderVersions();
+generateSourcesForV9();
+
+function generateSourcesForV9() {
+  readDirRecursively('v9-template').forEach(processFileForV9);
+  readDirRecursively('v-all/bin').forEach(processFileForV9);
+}
+
+function generateSourcesForOlderVersions() {
+  readDirRecursively('v-all').forEach(processFileForOlderVersions);
+}
 
 function readDirRecursively(dir: string, filePathList: string[] = []): string[] {
   const entries = fs.readdirSync(dir);
@@ -58,13 +68,21 @@ function copyToDestination(filePath: string, from: string): void {
   fs.copyFileSync(from, filePath);
 }
 
-function processFile(file: string): void {
+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);
 
     const actualRelativePath = stripFirstDir(stripSuffix(file, '.template.ts'));
 
-    supportedVersions.forEach((version) => {
+    versions.forEach((version) => {
       if (fileExports[version]) {
         writeToDestination(`${version}/${actualRelativePath}`, fileExports[version]);
       }
@@ -73,7 +91,7 @@ function processFile(file: string): void {
     const actualRelativePath = stripFirstDir(stripSuffix(file, '.merge'));
     const commonContents = JSON.parse(fs.readFileSync(file, { encoding: 'UTF-8' }));
 
-    supportedVersions.forEach((version) => {
+    versions.forEach((version) => {
       const versionContents = JSON.parse(
         fs.readFileSync(
           `${version}/${actualRelativePath}.merge`,
@@ -92,13 +110,13 @@ function processFile(file: string): void {
   } else if (file.endsWith('.copy')) {
     const actualRelativePath = stripFirstDir(stripSuffix(file, '.copy'));
 
-    supportedVersions.forEach((version) => {
+    versions.forEach((version) => {
       copyToDestination(`${version}/${actualRelativePath}`, file);
     });
   } else {
     const actualRelativePath = stripFirstDir(file);
 
-    supportedVersions.forEach((version) => {
+    versions.forEach((version) => {
       copyToDestination(`${version}/${actualRelativePath}`, file);
     });
   }

demo/package.json

@@ -8,12 +8,14 @@
     "clean:v6": "cd v6 && yarn clean",
     "clean:v7": "cd v7 && yarn clean",
     "clean:v8": "cd v8 && yarn clean",
-    "clean:all": "yarn generate && rimraf dist && yarn clean:v6 && yarn clean:v7 && yarn clean:v8",
+    "clean:v9": "cd v9 && yarn clean",
+    "clean:all": "yarn generate && rimraf dist && yarn clean:v6 && yarn clean:v7 && yarn clean:v8 && yarn clean:v9",
     "build:v6": "cd v6 && yarn build",
     "build:v7": "cd v7 && yarn build",
     "build:v8": "cd v8 && yarn build",
+    "build:v9": "cd v9 && yarn build",
     "prebuild:all": "check-node-version --node $(cat .nvmrc)",
-    "build:all": "yarn clean:all && yarn build:v6 && yarn build:v7 && yarn build:v8",
+    "build:all": "yarn clean:all && yarn build:v6 && yarn build:v7 && yarn build:v8 && yarn build:v9",
     "build": "yarn install && yarn generate && yarn pack-latest && yarn build:all",
     "pack-latest": "cd .. && yarn pack-latest"
   },

demo/v-all/bin/build-v9.ts

@@ -0,0 +1,38 @@
+import { examples, Example } from './examples';
+import { execSync } from "child_process";
+import * as fs from 'fs';
+
+examples.forEach(buildExample)
+execSync('rm -rf ../dist/ng-recaptcha/v9-temp', { stdio: 'inherit' })
+
+function buildExample(example: Example) {
+  if (example.additional) {
+    // FIXME "ng build" supports multiple entry points out of the box.
+    // However, that should be possible. And once we figure out how to do this properly,
+    // this function should also generate resources for such examples
+    return;
+  }
+
+  const indexFileName = example.index ? 'index.html' : example.name + '.html';
+
+  if (!fs.existsSync(`src/${indexFileName}`)) {
+    fs.copyFileSync('src/index.html', `src/${indexFileName}`);
+  }
+
+  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`;
+  fs.writeFileSync('./angular.json', JSON.stringify(angularSettings, null, 2), { encoding: 'utf-8' });
+
+  const tsConfig = JSON.parse(fs.readFileSync('./tsconfig.app.json', { encoding: 'utf-8' }));
+  tsConfig.files = [
+    `src/app/examples/${example.name}/${example.name}-demo.main.ts`,
+    "src/polyfills.ts"
+  ];
+  fs.writeFileSync('./tsconfig.app.json', JSON.stringify(tsConfig, null, 2), { encoding: 'utf-8' });
+
+
+  execSync('yarn ng-build', { stdio: 'inherit' });
+  execSync('cp -R ../dist/ng-recaptcha/v9-temp/ ../dist/ng-recaptcha', { stdio: 'inherit' });
+}

demo/v-all/bin/file-gen-v9.ts

@@ -0,0 +1,88 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import { examples } from './examples';
+
+const sourceDir = path.join(process.cwd(), 'src');
+
+function writeExampleFile(featureName, fileName, contents) {
+  const location = path.join(sourceDir, 'app', 'examples', featureName, fileName);
+
+  fs.writeFileSync(location, contents, { encoding: 'UTF8' });
+}
+
+function highlightRequire(file: string, lang: string) {
+  var hl = require('highlight.js');
+  var highlightAuto = hl.highlightAuto;
+  var highlight = hl.highlight;
+
+  const data = JSON.stringify(highlightCode(fs.readFileSync(file, { encoding: 'utf-8' }), lang))
+
+  function highlightCode(code: string, lang: string | undefined) {
+    if(lang) {
+      return highlight(lang, code).value;
+    }
+
+    return highlightAuto(code).value;
+  }
+
+  return data;
+}
+
+function generateMain(featureName) {
+  const contents = `import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DemoModule } from './${featureName}-demo.module';
+
+enableProdMode();
+platformBrowserDynamic().bootstrapModule(DemoModule);
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.main.ts`, contents);
+}
+
+function generateData(example) {
+  const featureName = example.name;
+  const additionalContents = !example.additional ? '' : `
+    additional: {
+      content: ${highlightRequire(`./src/app/examples/${featureName}/${example.additional.filename}.ts`, example.additional.type)},
+      title: '${example.additional.title}',
+      type: '${example.additional.type}',
+    },`;
+  const contents = `// tslint:disable no-require-imports no-submodule-imports
+import { PageSettings } from '../../demo-wrapper/demo-wrapper.component';
+
+export const settings: PageSettings = {
+  feature: '${featureName}',
+  title: '${example.title}',
+  content: {
+    component: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.component.ts`, 'ts')},
+    html: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.component.html`, 'html')},
+    module: ${highlightRequire(`./src/app/examples/${featureName}/${featureName}-demo.module.ts`, 'ts')},${additionalContents}
+  },
+};
+`;
+
+  writeExampleFile(featureName, `${featureName}-demo.data.ts`, contents);
+}
+
+function generateLinks() {
+  const location = path.join(sourceDir, 'app', 'demo-wrapper', 'demo-wrapper.data.auto-gen.ts');
+  const contents = `export const navLinks = [
+  ${examples.filter(e => !e.additional).map((e) => `{
+    label: '${e.label}',
+    path: '${e.path}',
+    feature: '${e.name}',
+  },`).join('\n  ')}
+];
+`;
+
+  fs.writeFileSync(location, contents, { encoding: 'UTF8' });
+}
+
+function generateFiles() {
+  examples.map((e) => e.name).forEach(generateMain);
+  examples.forEach(generateData);
+  generateLinks();
+}
+
+generateFiles();

demo/v-all/package.json.merge

@@ -3,16 +3,16 @@
   "private": true,
   "scripts": {
     "file-gen": "ts-node ./bin/file-gen.ts",
-    "latest": "yarn install --update-checksums; yarn cache clean ng-recaptcha; yarn upgrade ../../ng-recaptcha-latest.tgz --update-checksums",
+    "latest": "yarn remove ng-recaptcha; yarn install; yarn add ng-recaptcha@../../ng-recaptcha-latest.tgz --update-checksums",
     "clean:build": "rimraf src/**/*.{js,js.map,ngsummary.json,d.ts,metadata.json,auto-gen.ts} src/app/examples/**/*{-demo.main.ts,-demo.main.dev.ts,-demo.data.ts}",
     "clean:dist": "rimraf dist",
     "clean": "run-s clean:build clean:dist",
-    "ngc": "ngc",
+    "build:ngc": "ngc",
     "serve": "http-server ./dist -a localhost -p 9000 -c-1",
     "start": "run-s build-dev serve",
     "start-dev": "TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack-dev-server",
-    "build": "run-s latest clean file-gen ngc webpack:prod",
-    "build-dev": "run-s latest clean file-gen ngc webpack:dev",
+    "build": "run-s latest clean file-gen build:ngc webpack:prod",
+    "build-dev": "run-s latest clean file-gen build:ngc webpack:dev",
     "webpack:prod": "NODE_ENV=production TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack -p",
     "webpack:dev": "TS_NODE_PROJECT=\"tsconfig.webpack.json\" webpack"
   },

demo/v-all/src/app/demo-wrapper/demo-wrapper.component.ts.template.ts

@@ -96,4 +96,4 @@ export class DemoWrapperComponent implements OnInit, OnDestroy {
 
 export const v6 = generate({ webpackVersion: '3', outSubdirectory: 'v6' });
 export const v7 = generate({ webpackVersion: '4', outSubdirectory: 'v7' });
-export const v8 = generate({ webpackVersion: '4' });
+export const v8 = generate({ webpackVersion: '4', outSubdirectory: 'v8'  });

demo/v-all/webpack.config.ts.template.ts

@@ -103,4 +103,4 @@ export default {
 
 export const v6 = generate({ webpackVersion: '3', outSubdirectory: 'v6' });
 export const v7 = generate({ webpackVersion: '4', outSubdirectory: 'v7' });
-export const v8 = generate({ webpackVersion: '4' });
+export const v8 = generate({ webpackVersion: '4', outSubdirectory: 'v8' });

demo/v9-template/.gitignore.copy

@@ -0,0 +1,2 @@
+/*
+!yarn.lock

demo/v9-template/angular.json

@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "v9": {
+      "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": "v9"
+}

demo/v9-template/browserslist

@@ -0,0 +1,12 @@
+# 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
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11 # For IE 9-11 support, remove 'not'.

demo/v9-template/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "v9",
+  "version": "0.0.0",
+  "scripts": {
+    "file-gen": "ts-node ./bin/file-gen-v9.ts",
+    "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-v9.ts"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~9.1.12",
+    "@angular/cdk": "^9.0.0",
+    "@angular/common": "~9.1.12",
+    "@angular/compiler": "~9.1.12",
+    "@angular/core": "~9.1.12",
+    "@angular/forms": "~9.1.12",
+    "@angular/material": "^9.0.0",
+    "@angular/platform-browser": "~9.1.12",
+    "@angular/platform-browser-dynamic": "~9.1.12",
+    "@angular/router": "~9.1.12",
+    "ng-recaptcha": "../../ng-recaptcha-latest.tgz",
+    "rxjs": "~6.5.4",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.901.12",
+    "@angular/cli": "~9.1.12",
+    "@angular/compiler-cli": "~9.1.12",
+    "@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": "~3.8.3"
+  }
+}