feat: migrate Angular 9 PWA to React 18 + TypeScript + Vite#366
Open
vibhaseshadri-cognition wants to merge 1 commit into
Open
feat: migrate Angular 9 PWA to React 18 + TypeScript + Vite#366vibhaseshadri-cognition wants to merge 1 commit into
vibhaseshadri-cognition wants to merge 1 commit into
Conversation
- Replace Angular 9 with React 18, TypeScript 5, Vite 5, react-router-dom 6 - Port all models as TypeScript interfaces (Story, Comment, User, PollResult, Settings, FeedType) - Create async API service replacing Angular/RxJS HackerNewsAPIService - Implement SettingsContext with useReducer for theme/font/spacing/link preferences - Port all components: Header, Footer, Settings, Loader, ErrorMessage, Item, CommentItem - Create Feed, ItemDetails, UserProfile pages with code splitting via React.lazy - Copy SCSS themes verbatim (default/night/amoledblack), port all component styles - Configure vite-plugin-pwa for service worker with prefetch + lazy caching strategies - Preserve GA tracking, PWA manifest, all meta tags, skip-nav accessibility - Update firebase.json, .travis.yml for Vite build output - Remove all Angular dependencies and config files Co-Authored-By: Vibha Seshadri <vibha.seshadri@cognition.ai>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full migration of the Hacker News PWA from Angular 9 to React 18 + TypeScript 5 + Vite 5 with complete feature parity.
Architecture change:
Key design decisions:
State management: Angular's
SettingsService(singleton mutated class) →SettingsContextwithuseReducer, persisting to localStorage on each action dispatch.prefers-color-scheme: darkmedia query listener auto-sets theme when no saved preference exists.API layer: RxJS
Observable+unfetch→ plainasync/awaitwith nativefetch. Poll handling now usesPromise.allinstead of nestedsubscribe()calls, fixing the race condition wherepoll_votes_countwas read before all poll items resolved.Code splitting: Angular's
loadChildrenlazy modules →React.lazy()+<Suspense>for/item/:idand/user/:idroutes.Routing: Angular's
data: { feedType }on parent routes with child:page→ single/:feedType/:pagepattern, feed type validated against allowlist inFeed.tsx.PWA:
ngsw-config.json(Angular service worker) →vite-plugin-pwawith Workbox. Prefetch for app shell assets,CacheFirstruntime caching for/assets/**and font/image file extensions.SCSS: All theme files (
_themes.scss,_theme_variables.scss,_media.scss) copied verbatim. Component styles ported with wrapper classes (e.g..feed-content,.item-wrapper) to scope styles without Angular's view encapsulation.Removed: All
@angular/*packages,rxjs,zone.js,unfetch,protractor,karma,tslint,codelyzer, and associated config files (angular.json,ngsw-config.json,tsconfig.app.json,tsconfig.spec.json,tslint.json,karma.conf.js,e2e/).Updated:
.travis.yml(node 18, removed@angular/cli),firebase.json(public →dist),package.json(Vite scripts).Link to Devin session: https://app.devin.ai/sessions/e6be67580e3747c38b7931ded3dd5f99
Requested by: @vibhaseshadri-cognition
Devin Review