Skip to content
This repository has been archived by the owner on Aug 7, 2021. It is now read-only.

feat(Angular): apply changes in application styles at runtime with HMR #748

Merged
merged 6 commits into from
Dec 27, 2018

Conversation

vchimev
Copy link
Contributor

@vchimev vchimev commented Dec 17, 2018

Update demo and template.

PR Checklist

What is the current behavior?

Currently, a style change in app.css or app.scss is not accepted and causes application to restart.

What is the new behavior?

The new behavior accepts changes in app.css or app.scss and uses the HMR context passed by nativescript-dev-webpack to determinate whether changes have been made to app.css or app.scss. If so, apply them at runtime and on back navigation.

Relates to NativeScript/NativeScript#6665.
Implements the rest of NativeScript/NativeScript#6645.

bundle-config-loader.js Outdated Show resolved Hide resolved
Copy link
Contributor

@vakrilov vakrilov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, looks like the logic is in place and everything works.
The code can be refactored to simplify and DRY things.

@vchimev vchimev force-pushed the vchimev/app-css-hmr-ng branch from bfa482a to 4b516cb Compare December 19, 2018 13:56
`global.__hmrInitialSync` is no more used
`global.__hmrNeedReload` is removed:
- on changes in multiple files (app.css, main-page.css, main-page.xml,
  main-page.ts) both *reapply styles* and *navigate* logic need to execute
- this is important for the bootstrap of Angular apps
Remove `hmrUpdate()` from `main.ts` as a duplication of `global.__onLiveSync()`.
`global.__onLiveSync()` ensures all patches get to the bundle.
@vchimev vchimev force-pushed the vchimev/app-css-hmr-ng branch from 4b516cb to bd57582 Compare December 20, 2018 16:06
@vchimev vchimev merged commit fe4abfb into master Dec 27, 2018
@vchimev vchimev deleted the vchimev/app-css-hmr-ng branch December 27, 2018 15:43
@sis0k0
Copy link
Contributor

sis0k0 commented Jan 2, 2019

Update the main.ts snippet here when this change is released - https://github.com/NativeScript/nativescript-angular/wiki/HMR.
Also, make sure to include migration instructions in the changelog.

@vchimev
Copy link
Contributor Author

vchimev commented Feb 8, 2019

Added NativeScript 5.2 HMR with Angular wiki page.
Added migration instructions in the changelog.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants