diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 000000000..29db3494f --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,16 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', 'dev-dist', '.eslintrc.cjs'], + parser: '@typescript-eslint/parser', + plugins: ['react-refresh'], + rules: { + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], + '@typescript-eslint/no-explicit-any': 'off', + }, +}; diff --git a/.gitignore b/.gitignore index f4f46a5fe..4a312b287 100644 --- a/.gitignore +++ b/.gitignore @@ -2,10 +2,9 @@ # compiled output /dist +/dev-dist /tmp /out-tsc -# Only exists if Bazel was run -/bazel-out # dependencies /node_modules diff --git a/README.md b/README.md index 67cef9e61..5a750f01e 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@
- A progressive Hacker News client built with Angular + A progressive Hacker News client built with React, TypeScript and Vite
@@ -43,7 +43,7 @@
## Offline Support
-This app uses [Workbox](https://workboxjs.org/) to generate a service worker as part of the build step to load quickly and work offline.
+This app uses [Workbox](https://workboxjs.org/) (via [`vite-plugin-pwa`](https://vite-pwa-org.netlify.app/)) to generate a service worker as part of the build step to load quickly and work offline.
## Manifest
@@ -73,16 +73,17 @@ Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [fil
## Build process
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+This project is a React single-page app built with [Vite](https://vitejs.dev/) and TypeScript.
- Clone or download the repo
- `npm install`
- - `npm start` to run the application with webpack-dev-server or `npm build` to kick off a fresh build and update the output directory (`dist/`)
+ - `npm start` (alias for `npm run dev`) to run the application with the Vite dev server
+ - `npm run build` to type-check and produce a production build in the output directory (`dist/`)
+ - `npm run lint` to run ESLint
-Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
- - `npm build`
- - `npm run precache` to generate the service worker file
- - `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
+Note: The service worker is only generated in a production build. To test the PWA / service worker locally:
+ - `npm run build`
+ - `npm run preview` to serve the production build (including the generated service worker) locally
## Contributors
diff --git a/angular.json b/angular.json
deleted file mode 100644
index bae858c47..000000000
--- a/angular.json
+++ /dev/null
@@ -1,134 +0,0 @@
-{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "version": 1,
- "newProjectRoot": "projects",
- "projects": {
- "angular-hnpwa": {
- "projectType": "application",
- "schematics": {
- "@schematics/angular:component": {
- "style": "scss"
- }
- },
- "root": "",
- "sourceRoot": "src",
- "prefix": "app",
- "architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "aot": true,
- "outputPath": "dist/angular-hnpwa",
- "index": "src/index.html",
- "main": "src/main.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "tsconfig.app.json",
- "assets": [
- "src/favicon.ico",
- "src/assets",
- "src/manifest.json",
- "src/manifest.webmanifest"
- ],
- "styles": [
- "src/styles.scss"
- ],
- "scripts": []
- },
- "configurations": {
- "production": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
- }
- ],
- "optimization": true,
- "outputHashing": "all",
- "sourceMap": true,
- "extractCss": true,
- "namedChunks": true,
- "aot": true,
- "extractLicenses": true,
- "vendorChunk": false,
- "buildOptimizer": true,
- "budgets": [
- {
- "type": "initial",
- "maximumWarning": "2mb",
- "maximumError": "5mb"
- },
- {
- "type": "anyComponentStyle",
- "maximumWarning": "6kb"
- }
- ],
- "serviceWorker": true,
- "ngswConfigPath": "ngsw-config.json"
- }
- }
- },
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "angular-hnpwa:build"
- },
- "configurations": {
- "production": {
- "browserTarget": "angular-hnpwa:build:production"
- }
- }
- },
- "extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "browserTarget": "angular-hnpwa:build"
- }
- },
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "main": "src/test.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "tsconfig.spec.json",
- "karmaConfig": "karma.conf.js",
- "assets": [
- "src/favicon.ico",
- "src/assets",
- "src/manifest.webmanifest"
- ],
- "styles": [
- "src/styles.scss"
- ],
- "scripts": []
- }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "tsconfig.app.json",
- "tsconfig.spec.json",
- "e2e/tsconfig.json"
- ],
- "exclude": [
- "**/node_modules/**"
- ]
- }
- },
- "e2e": {
- "builder": "@angular-devkit/build-angular:protractor",
- "options": {
- "protractorConfig": "e2e/protractor.conf.js",
- "devServerTarget": "angular-hnpwa:serve"
- },
- "configurations": {
- "production": {
- "devServerTarget": "angular-hnpwa:serve:production"
- }
- }
- }
- }
- }
- },
- "defaultProject": "angular-hnpwa"
-}
diff --git a/browserslist b/browserslist
deleted file mode 100644
index 80848532e..000000000
--- a/browserslist
+++ /dev/null
@@ -1,12 +0,0 @@
-# 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'.
\ No newline at end of file
diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
deleted file mode 100644
index 73e4e6806..000000000
--- a/e2e/protractor.conf.js
+++ /dev/null
@@ -1,32 +0,0 @@
-// @ts-check
-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-/**
- * @type { import("protractor").Config }
- */
-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.json')
- });
- jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
- }
-};
\ No newline at end of file
diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
deleted file mode 100644
index 0897abab0..000000000
--- a/e2e/src/app.e2e-spec.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { AppPage } from './app.po';
-import { browser, logging } from 'protractor';
-
-describe('workspace-project App', () => {
- let page: AppPage;
-
- beforeEach(() => {
- page = new AppPage();
- });
-
- it('should display welcome message', () => {
- page.navigateTo();
- expect(page.getTitleText()).toEqual('Welcome to angular-hnpwa!');
- });
-
- afterEach(async () => {
- // Assert that there are no errors emitted from the browser
- const logs = await browser.manage().logs().get(logging.Type.BROWSER);
- expect(logs).not.toContain(jasmine.objectContaining({
- level: logging.Level.SEVERE,
- } as logging.Entry));
- });
-});
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
deleted file mode 100644
index 5776aa9eb..000000000
--- a/e2e/src/app.po.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AppPage {
- navigateTo() {
- return browser.get(browser.baseUrl) as Promise
+
-
-