feat: add initial HMR support for plain JS/TS apps #645

sis0k0 · 2018-09-07T14:57:00Z

No description provided.

failing

….js)

shiv19 · 2018-09-10T22:59:12Z

@sis0k0 Hey I just tried HMR with {N} + JS.
Works totally fine with the first page. But when I try to navigate to a second page, the
app crashes with this =>

System.err: Calling js method onClick failed
System.err:
System.err: TypeError: Cannot read property 'onNavigatingTo' of undefined
System.err: File: "file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js, line: 20010, column: 36
System.err:
System.err: StackTrace:
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._onNavigatingTo', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 20010, column: 37
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.performNavigation', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 19982, column: 14
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._processNextNavigationEntry', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 19975, column: 22
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.Frame._processNextNavigationEntry', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 20419, column: 58
System.err:     Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 19879, column: 14
System.err:     Frame: function:'viewModel.onTap', file:'file:///data/data/org.nativescript.hmrDemo/files/app/bundle.js', line: 1058, column: 25
System.err:     Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 3485, column: 32
System.err:     Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable._emit', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 3505, column: 18
System.err:     Frame: function:'ClickListenerImpl.onClick', file:'file:///data/data/org.nativescript.hmrDemo/files/app/vendor.js', line: 13224, column: 23
System.err:
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err:     at com.tns.gen.java.lang.Object_vendor_13217_32_ClickListenerImpl.onClick(Object_vendor_13217_32_ClickListenerImpl.java:17)
System.err:     at android.view.View.performClick(View.java:6205)
System.err:     at android.widget.TextView.performClick(TextView.java:11103)
System.err:     at android.view.View$PerformClick.run(View.java:23653)
System.err:     at android.os.Handler.handleCallback(Handler.java:751)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:95)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6682)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1520)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1410)

shiv19 · 2018-09-10T23:01:13Z

Archive.zip
Here is the project

bradmartin · 2018-09-10T23:03:08Z

File change detected. Starting incremental webpack compilation...
Hash: 729d53ea7a6be0c9c297
Version: webpack 4.6.0
Time: 523ms
Built at: 09/10/2018 6:01:25 PM
                                    Asset       Size  Chunks             Chunk Names
                                bundle.js     39 KiB  bundle  [emitted]  bundle
bundle.f5f9e0f902bb105191cb.hot-update.js  995 bytes  bundle  [emitted]  bundle
     f5f9e0f902bb105191cb.hot-update.json   48 bytes          [emitted]
 + 1 hidden asset
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (root|page)\.(xml|css|js|ts|scss)$] . sync (root|page)\.(xml|css|js|ts|scss)$ 218 bytes {bundle} [built]
[./main-view-model.js] 769 bytes {bundle} [built]
    + 162 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Executing before-shouldPrepare hook from /Users/bradmartin/test-js/hooks/before-shouldPrepare/nativescript-dev-webpack.js
Preparing project...
Executing before-prepareJSApp hook from /Users/bradmartin/test-js/hooks/before-prepareJSApp/nativescript-dev-webpack.js
Project successfully prepared (Android)
Executing after-prepare hook from /Users/bradmartin/test-js/hooks/after-prepare/nativescript-dev-webpack.js
Successfully transferred bundle.js.
Successfully transferred bundle.f5f9e0f902bb105191cb.hot-update.js.
Successfully transferred f5f9e0f902bb105191cb.hot-update.json.
JS: LiveSyncing...
JS: Checking for updates to the bundle.
JS: Hashes don't match. Ignoring second update...
JS: The following modules were updated:
JS:          ↻ ./main-view-model.js
JS:          ↻ ./main-page.js
Refreshing application...
Successfully synced application org.nativescript.testjs on device emulator-5554.
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.callJSMethodNative(Native Method)
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:983)
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:967)
09-10 18:01:27.446  4034  4034 E AndroidRuntime: 	at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: com.tns.NativeScriptException:
System.err: Calling js method onClick failed
System.err:
System.err: TypeError: Cannot read property 'onNavigatingTo' of undefined
System.err: File: "file:///data/data/org.nativescript.testjs/files/app/vendor.js, line: 20084, column: 36
System.err:
System.err: StackTrace:
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._onNavigatingTo', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 20084, column: 37
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.performNavigation', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 20056, column: 14
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase._processNextNavigationEntry', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 20049, column: 22
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame.js.Frame._processNextNavigationEntry', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 20496, column: 58
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/ui/frame/frame-common.js.FrameBase.navigate', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 19953, column: 14
System.err: 	Frame: function:'viewModel.onTap', file:'file:///data/data/org.nativescript.testjs/files/app/bundle.f5f9e0f902bb105191cb.hot-update.js', line: 23, column: 19
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable.notify', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 3485, column: 32
System.err: 	Frame: function:'push.../node_modules/tns-core-modules/data/observable/observable.js.Observable._emit', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 3505, column: 18
System.err: 	Frame: function:'ClickListenerImpl.onClick', file:'file:///data/data/org.nativescript.testjs/files/app/vendor.js', line: 13223, column: 23
System.err:
System.err: 	at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: 	at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
System.err: 	at com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:983)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:967)
System.err: 	at com.tns.Runtime.callJSMethod(Runtime.java:959)
System.err: 	at com.tns.gen.java.lang.Object_vendor_13216_32_ClickListenerImpl.onClick(Object_vendor_13216_32_ClickListenerImpl.java:17)
System.err: 	at android.view.View.performClick(View.java:6294)
System.err: 	at android.view.View$PerformClick.run(View.java:24770)
System.err: 	at android.os.Handler.handleCallback(Handler.java:790)
System.err: 	at android.os.Handler.dispatchMessage(Handler.java:99)
System.err: 	at android.os.Looper.loop(Looper.java:164)
System.err: 	at android.app.ActivityThread.main(ActivityThread.java:6494)
System.err: 	at java.lang.reflect.Method.invoke(Native Method)
System.err: 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:438)
System.err: 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:807)

same to just confirm, adding a second 'page' (module) called navigate to it and crashed ^^^.

Awesome stuff BTW everyone at NS ❤️ can't describe how happy I am to see this moving.

vtrifonov · 2018-09-11T08:15:49Z

@shiv19 and @bradmartin the attached project won't work with tns run android/ios --bundle as well. The problem is that you need to name the page to end with root or page as stated in the following post Upgrading to NativeScript Webpack 0.12.0. Naming the page second-page.xml should work.

shiv19 · 2018-09-11T08:29:45Z

@vtrifonov please check the Archive I sent, I have tried to navigate to ~~second-page.xml~~.
Also the command used was tns run android --hmr using next version of nativescript and tns-core-modules.

sis0k0 · 2018-09-11T10:09:17Z

Hey @shiv19, we've used the app that you sent and changing the name of page-2.xml to second-page.xml resolves the issue.

shiv19 · 2018-09-11T10:10:33Z

Oops, sorry about that!

Edit: Yes indeed! changing it to second-page.xml resolved the issue

sis0k0 added 8 commits September 7, 2018 10:57

refactor: add --env.hmr options to templates

4c3be66

refactor: pass hmr option from hooks to templates

fa6158d

refactor: accept hot modules from xml loader

9896d76

fix-next: properly instantiate HMR plugin

46dfb2b

fix: rewrite errored hot update chunk to prevent the HMR process from

e6b96bb

failing

refactor(bundle-config-loader): register HMR logic in entry file (app…

7432bb9

….js)

refactor: insert HMR logic in all app pages

e78a688

refactor: extract hmr accept/dispose logic in a helper

b254d61

sis0k0 requested review from vakrilov and vtrifonov September 7, 2018 14:57

vtrifonov approved these changes Sep 7, 2018

View reviewed changes

vtrifonov added 2 commits September 7, 2018 18:43

Added hot loaders for markup and style

6104262

Update the chunk rewrite to remove only the modules with errors

4ddb2c6

sis0k0 merged commit 0069177 into master Sep 10, 2018

sis0k0 deleted the sis0k0/hot-update branch September 15, 2018 15:02

sis0k0 added a commit that referenced this pull request Sep 27, 2018

feat: add initial HMR support for plain JS/TS apps (#645)

fe43c90

sis0k0 added a commit that referenced this pull request Sep 28, 2018

feat: add initial HMR support for plain JS/TS apps (#645)

a4ac32b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add initial HMR support for plain JS/TS apps #645

feat: add initial HMR support for plain JS/TS apps #645

sis0k0 commented Sep 7, 2018

shiv19 commented Sep 10, 2018 •

edited

Loading

shiv19 commented Sep 10, 2018

bradmartin commented Sep 10, 2018

vtrifonov commented Sep 11, 2018

shiv19 commented Sep 11, 2018 •

edited

Loading

sis0k0 commented Sep 11, 2018

shiv19 commented Sep 11, 2018 •

edited

Loading

feat: add initial HMR support for plain JS/TS apps #645

feat: add initial HMR support for plain JS/TS apps #645

Conversation

sis0k0 commented Sep 7, 2018

shiv19 commented Sep 10, 2018 • edited Loading

shiv19 commented Sep 10, 2018

bradmartin commented Sep 10, 2018

vtrifonov commented Sep 11, 2018

shiv19 commented Sep 11, 2018 • edited Loading

sis0k0 commented Sep 11, 2018

shiv19 commented Sep 11, 2018 • edited Loading

shiv19 commented Sep 10, 2018 •

edited

Loading

shiv19 commented Sep 11, 2018 •

edited

Loading

shiv19 commented Sep 11, 2018 •

edited

Loading