From 15a6eb1c8bbee2148d07a22ca7b4fb0b17353ef6 Mon Sep 17 00:00:00 2001 From: Dhaya <154633+dhayab@users.noreply.github.com> Date: Mon, 25 Oct 2021 15:00:58 +0200 Subject: [PATCH 1/4] chore(Angular IS): upgrade query-suggestions example to angular 12 --- .../query-suggestions/.browserslistrc | 17 + .../query-suggestions/.editorconfig | 16 + .../query-suggestions/angular.json | 112 +- .../query-suggestions/e2e/protractor.conf.js | 28 - .../query-suggestions/e2e/src/app.e2e-spec.ts | 14 - .../query-suggestions/e2e/src/app.po.ts | 11 - .../query-suggestions/e2e/tsconfig.e2e.json | 13 - .../query-suggestions/{src => }/karma.conf.js | 27 +- .../query-suggestions/package.json | 78 +- .../src/app/app.component.css | 9 +- .../src/app/app.component.html | 4 +- .../src/app/app.component.spec.ts | 22 - .../src/app/app.component.ts | 58 +- .../query-suggestions/src/app/app.module.ts | 17 +- .../src/app/autocomplete.component.ts | 130 +- .../query-suggestions/src/browserslist | 9 - .../src/environments/environment.ts | 13 +- .../query-suggestions/src/favicon.ico | Bin 0 -> 948 bytes .../query-suggestions/src/favicon.png | Bin 2611 -> 0 bytes .../query-suggestions/src/index.html | 17 +- .../query-suggestions/src/main.ts | 4 +- .../query-suggestions/src/manifest.json | 15 - .../query-suggestions/src/polyfills.ts | 66 +- .../query-suggestions/src/test.ts | 13 +- .../query-suggestions/src/tsconfig.app.json | 12 - .../query-suggestions/src/tsconfig.spec.json | 19 - .../query-suggestions/src/tslint.json | 17 - .../query-suggestions/tsconfig.app.json | 15 + .../query-suggestions/tsconfig.json | 28 +- .../query-suggestions/tsconfig.spec.json | 18 + .../query-suggestions/tslint.json | 130 - .../query-suggestions/yarn.lock | 10479 ++++++++-------- 32 files changed, 5914 insertions(+), 5497 deletions(-) create mode 100644 Angular InstantSearch/query-suggestions/.browserslistrc create mode 100644 Angular InstantSearch/query-suggestions/.editorconfig delete mode 100644 Angular InstantSearch/query-suggestions/e2e/protractor.conf.js delete mode 100644 Angular InstantSearch/query-suggestions/e2e/src/app.e2e-spec.ts delete mode 100644 Angular InstantSearch/query-suggestions/e2e/src/app.po.ts delete mode 100644 Angular InstantSearch/query-suggestions/e2e/tsconfig.e2e.json rename Angular InstantSearch/query-suggestions/{src => }/karma.conf.js (50%) delete mode 100644 Angular InstantSearch/query-suggestions/src/app/app.component.spec.ts delete mode 100644 Angular InstantSearch/query-suggestions/src/browserslist create mode 100644 Angular InstantSearch/query-suggestions/src/favicon.ico delete mode 100644 Angular InstantSearch/query-suggestions/src/favicon.png delete mode 100644 Angular InstantSearch/query-suggestions/src/manifest.json delete mode 100644 Angular InstantSearch/query-suggestions/src/tsconfig.app.json delete mode 100644 Angular InstantSearch/query-suggestions/src/tsconfig.spec.json delete mode 100644 Angular InstantSearch/query-suggestions/src/tslint.json create mode 100644 Angular InstantSearch/query-suggestions/tsconfig.app.json create mode 100644 Angular InstantSearch/query-suggestions/tsconfig.spec.json delete mode 100644 Angular InstantSearch/query-suggestions/tslint.json diff --git a/Angular InstantSearch/query-suggestions/.browserslistrc b/Angular InstantSearch/query-suggestions/.browserslistrc new file mode 100644 index 0000000000..427441dc93 --- /dev/null +++ b/Angular InstantSearch/query-suggestions/.browserslistrc @@ -0,0 +1,17 @@ +# 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 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. diff --git a/Angular InstantSearch/query-suggestions/.editorconfig b/Angular InstantSearch/query-suggestions/.editorconfig new file mode 100644 index 0000000000..59d9a3a3e7 --- /dev/null +++ b/Angular InstantSearch/query-suggestions/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/Angular InstantSearch/query-suggestions/angular.json b/Angular InstantSearch/query-suggestions/angular.json index 0967997637..6a3c381f09 100644 --- a/Angular InstantSearch/query-suggestions/angular.json +++ b/Angular InstantSearch/query-suggestions/angular.json @@ -4,11 +4,15 @@ "newProjectRoot": "projects", "projects": { "query-suggestions": { + "projectType": "application", + "schematics": { + "@schematics/angular:application": { + "strict": true + } + }, "root": "", "sourceRoot": "src", - "projectType": "application", "prefix": "app", - "schematics": {}, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", @@ -17,50 +21,62 @@ "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.app.json", + "tsConfig": "tsconfig.app.json", "assets": [ - "src/favicon.png", - "src/manifest.json", + "src/favicon.ico", "src/assets" ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", - "node_modules/instantsearch.css/themes/reset.css", - "node_modules/instantsearch.css/themes/algolia.css", + "node_modules/instantsearch.css/themes/satellite.css", "src/styles.css" ], "scripts": [] }, "configurations": { "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], - "optimization": true, - "outputHashing": "all", - "sourceMap": false, - "extractCss": true, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "vendorChunk": false, - "buildOptimizer": true + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true } - } + }, + "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", - "options": { - "browserTarget": "query-suggestions:build" - }, "configurations": { "production": { "browserTarget": "query-suggestions:build:production" + }, + "development": { + "browserTarget": "query-suggestions:build:development" } - } + }, + "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", @@ -73,56 +89,18 @@ "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", - "tsConfig": "src/tsconfig.spec.json", - "karmaConfig": "src/karma.conf.js", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + "src/favicon.ico", + "src/assets" + ], "styles": [ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", + "node_modules/instantsearch.css/themes/satellite.css", "src/styles.css" ], - "scripts": [], - "assets": [ - "src/favicon.png", - "src/assets" - ] - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": [ - "src/tsconfig.app.json", - "src/tsconfig.spec.json" - ], - "exclude": [ - "**/node_modules/**" - ] - } - } - } - }, - "query-suggestions-e2e": { - "root": "e2e/", - "projectType": "application", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "e2e/protractor.conf.js", - "devServerTarget": "query-suggestions:serve" - }, - "configurations": { - "production": { - "devServerTarget": "query-suggestions:serve:production" - } - } - }, - "lint": { - "builder": "@angular-devkit/build-angular:tslint", - "options": { - "tsConfig": "e2e/tsconfig.e2e.json", - "exclude": [ - "**/node_modules/**" - ] + "scripts": [] } } } diff --git a/Angular InstantSearch/query-suggestions/e2e/protractor.conf.js b/Angular InstantSearch/query-suggestions/e2e/protractor.conf.js deleted file mode 100644 index 86776a391a..0000000000 --- a/Angular InstantSearch/query-suggestions/e2e/protractor.conf.js +++ /dev/null @@ -1,28 +0,0 @@ -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - 'browserName': 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.e2e.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file diff --git a/Angular InstantSearch/query-suggestions/e2e/src/app.e2e-spec.ts b/Angular InstantSearch/query-suggestions/e2e/src/app.e2e-spec.ts deleted file mode 100644 index a82cdc241f..0000000000 --- a/Angular InstantSearch/query-suggestions/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { AppPage } from './app.po'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getParagraphText()).toEqual('Welcome to angular-instantsearch!'); - }); -}); diff --git a/Angular InstantSearch/query-suggestions/e2e/src/app.po.ts b/Angular InstantSearch/query-suggestions/e2e/src/app.po.ts deleted file mode 100644 index 82ea75ba50..0000000000 --- a/Angular InstantSearch/query-suggestions/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get('/'); - } - - getParagraphText() { - return element(by.css('app-root h1')).getText(); - } -} diff --git a/Angular InstantSearch/query-suggestions/e2e/tsconfig.e2e.json b/Angular InstantSearch/query-suggestions/e2e/tsconfig.e2e.json deleted file mode 100644 index a6dd622028..0000000000 --- a/Angular InstantSearch/query-suggestions/e2e/tsconfig.e2e.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "outDir": "../out-tsc/app", - "module": "commonjs", - "target": "es5", - "types": [ - "jasmine", - "jasminewd2", - "node" - ] - } -} \ No newline at end of file diff --git a/Angular InstantSearch/query-suggestions/src/karma.conf.js b/Angular InstantSearch/query-suggestions/karma.conf.js similarity index 50% rename from Angular InstantSearch/query-suggestions/src/karma.conf.js rename to Angular InstantSearch/query-suggestions/karma.conf.js index b6e00421c9..a5f290879b 100644 --- a/Angular InstantSearch/query-suggestions/src/karma.conf.js +++ b/Angular InstantSearch/query-suggestions/karma.conf.js @@ -9,16 +9,28 @@ module.exports = function (config) { require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), - require('karma-coverage-istanbul-reporter'), + require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma') ], client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, clearContext: false // leave Jasmine Spec Runner output visible in browser }, - coverageIstanbulReporter: { - dir: require('path').join(__dirname, '../coverage'), - reports: ['html', 'lcovonly'], - fixWebpackSourcePaths: true + jasmineHtmlReporter: { + suppressAll: true // removes the duplicated traces + }, + coverageReporter: { + dir: require('path').join(__dirname, './coverage/query-suggestions'), + subdir: '.', + reporters: [ + { type: 'html' }, + { type: 'text-summary' } + ] }, reporters: ['progress', 'kjhtml'], port: 9876, @@ -26,6 +38,7 @@ module.exports = function (config) { logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], - singleRun: false + singleRun: false, + restartOnFileChange: true }); -}; \ No newline at end of file +}; diff --git a/Angular InstantSearch/query-suggestions/package.json b/Angular InstantSearch/query-suggestions/package.json index 2b6e237804..219d184f90 100644 --- a/Angular InstantSearch/query-suggestions/package.json +++ b/Angular InstantSearch/query-suggestions/package.json @@ -1,56 +1,44 @@ { "name": "query-suggestions", "version": "1.0.0", - "private": true, "scripts": { "ng": "ng", "start": "ng serve --port 3000", - "build": "ng build --prod --progress=false", - "test": "ng test", - "lint": "ng lint", - "e2e": "ng e2e" + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" }, + "private": true, "dependencies": { - "@angular/animations": "6.1.10", - "@angular/cdk": "7.3.7", - "@angular/common": "6.1.10", - "@angular/compiler": "6.1.10", - "@angular/core": "6.1.10", - "@angular/forms": "6.1.10", - "@angular/http": "6.1.10", - "@angular/material": "7.3.7", - "@angular/platform-browser": "6.1.10", - "@angular/platform-browser-dynamic": "6.1.10", - "@angular/router": "6.1.10", - "algoliasearch": "3.33.0", - "angular-instantsearch": "3.0.0-beta.2", - "core-js": "2.6.7", - "hammerjs": "2.0.8", - "instantsearch.js": "3.7.0", - "rxjs": "6.3.3", - "zone.js": "0.9.1" + "@angular/animations": "~12.2.0", + "@angular/cdk": "12.2.11", + "@angular/common": "~12.2.0", + "@angular/compiler": "~12.2.0", + "@angular/core": "~12.2.0", + "@angular/forms": "~12.2.0", + "@angular/material": "12.2.11", + "@angular/platform-browser": "~12.2.0", + "@angular/platform-browser-dynamic": "~12.2.0", + "@angular/router": "~12.2.0", + "algoliasearch": "^4.10.5", + "angular-instantsearch": "4.0.1", + "rxjs": "~6.6.0", + "tslib": "^2.3.0", + "zone.js": "~0.11.4" }, "devDependencies": { - "@angular-devkit/build-angular": "0.13.8", - "@angular/cli": "7.3.8", - "@angular/compiler-cli": "6.1.10", - "@angular/language-service": "6.1.10", - "@types/algoliasearch": "3.30.13", - "@types/jasmine": "3.3.12", - "@types/jasminewd2": "2.0.6", - "@types/node": "8.10.47", - "codelyzer": "5.1.0", - "jasmine-core": "2.99.1", - "jasmine-spec-reporter": "4.2.1", - "karma": "4.1.0", - "karma-chrome-launcher": "2.2.0", - "karma-coverage-istanbul-reporter": "2.0.5", - "karma-jasmine": "2.0.1", - "karma-jasmine-html-reporter": "0.2.2", - "prettier": "1.17.1", - "protractor": "6.0.0", - "ts-node": "8.1.0", - "tslint": "5.17.0", - "typescript": "2.8.4" + "@angular-devkit/build-angular": "~12.2.3", + "@angular/cli": "~12.2.3", + "@angular/compiler-cli": "~12.2.0", + "@types/algoliasearch": "^4.0.0", + "@types/jasmine": "~3.8.0", + "@types/node": "^12.11.1", + "jasmine-core": "~3.8.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.0.3", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "~1.7.0", + "typescript": "~4.3.5" } -} +} \ No newline at end of file diff --git a/Angular InstantSearch/query-suggestions/src/app/app.component.css b/Angular InstantSearch/query-suggestions/src/app/app.component.css index 4e70ecc506..dd0f64788b 100644 --- a/Angular InstantSearch/query-suggestions/src/app/app.component.css +++ b/Angular InstantSearch/query-suggestions/src/app/app.component.css @@ -45,11 +45,12 @@ flex: 3; } -.searchbox { +.search-box { margin-bottom: 2rem; } -.pagination { - margin: 2rem auto; - text-align: center; +.ais-Hits-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; } diff --git a/Angular InstantSearch/query-suggestions/src/app/app.component.html b/Angular InstantSearch/query-suggestions/src/app/app.component.html index 250dafeb94..f4d34fa709 100644 --- a/Angular InstantSearch/query-suggestions/src/app/app.component.html +++ b/Angular InstantSearch/query-suggestions/src/app/app.component.html @@ -12,7 +12,7 @@