Using AppSync in a dev environment

[manijak]

Not sure if this is normal behavior or not, but didn't notice it the first time I added app-sync. It came to my intention after upgrading tns-cli from 6.0.4 to 6.1.2 and xcode to 11.

Environment

• CLI: 6.1.2
• Cross-platform modules: 6.1.1
• iOS Runtime: Tested on 6.0.4 & 6.1.1
• Plugin(s): nativescript-app-sync (1.0.5)
• Xcode 11
• iOS 12/13 Simulator

Describe the bug
It seems that there are some issues with hmr & app-sync if the app crashes due to a coding mistake. hmr stops reloading the app & applying new changes, and it shows the app from the last app-sync patch. Any new changes are not applied, and one has to stop the app & nuke the platforms folder and run again.

Using just tns run ios does not work, it just shows the app from the last patch and not applying any new changes.

I did try stopping the app, doing first tns build ios and then tns run ios. That worked, but stopping the app, and running again, made the issue reappear.

If I disable app-sync, hmr works as expected.

EDIT: Also noticed both in iOS & Android, if I close the running app and re-open it. It just applies the latest patch, ignoring all local changes.

To Reproduce

1. Enable App-sync & run the app on iOS simulator.
   App-sync tells you the latest patch version, let's say: v5.

2. Do a change in app and save
   hmr refreshes app normally and the change is applied. *See Log nr 1 for details

3. Do another change in the app but that causes a crash, like invalid color value color="#white"
   App crashes and the log shows the error.

4. Fix the error in the app and save
   App loads but is showing the app in the v5-patch state, not showing any changes you made since then. *See Log nr 2 for details

5. Do another change and save
   App refreshes but still, showing only v5-patch version, change not applied.

6. Stop the app (CTRL+C) and do tns run build then tns run ios
   App runs and shows the latest changes.

7. Stop the app (CTRL+C) and do tns run ios
   App runs but showing the app from v5-patch state. No changes applied.

8. Stop the app (CTRL+C) and do rm -rf platforms then tns run ios
   App runs normally and hmr applies new changes

Expected behavior
That hmr & app-sync play nice together. Or perhaps a flag to disable app-sync when in dev mode.

Workaround
Disable App-sync in app.ts when developing. Enable it when ready for publish.

Additional context
Here are loggs related to the reproduce-steps above.

Log nr 1 (reproduce step 2)

File change detected. Starting incremental webpack compilation...
Hash: 7536a98cd09efedf58f7
Version: webpack 4.27.1
Time: 388ms
Built at: 09/22/2019 6:20:08 PM
                                            Asset       Size                                          Chunks             Chunk Names
             5ffc82675a2e078d2249.hot-update.json   48 bytes                                                  [emitted]
        bundle.5ffc82675a2e078d2249.hot-update.js   28.7 KiB                                          bundle  [emitted]  bundle
                                        bundle.js    851 KiB                                          bundle  [emitted]  bundle
                                       runtime.js   71.4 KiB                                         runtime  [emitted]  runtime
tns_modules/tns-core-modules/inspector_modules.js  955 bytes  tns_modules/tns-core-modules/inspector_modules  [emitted]  tns_modules/tns-core-modules/inspector_modules
 + 1 hidden asset
Entrypoint bundle = runtime.js vendor.js bundle.js bundle.5ffc82675a2e078d2249.hot-update.js
Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 2.78 KiB {bundle} [built]
[./views/fixtures/fixtures.xml] 2.21 KiB {bundle} [built]
[./views/main-view.xml] 8.61 KiB {bundle} [optional] [built]
    + 488 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Successfully transferred bundle.5ffc82675a2e078d2249.hot-update.js on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.
Successfully transferred 5ffc82675a2e078d2249.hot-update.json on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.
NativeScript debugger has opened inspector socket on port 18183 for com.myawesomeapp.
Refreshing application on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57...
CONSOLE LOG file:///node_modules/tns-core-modules/inspector_modules.js:1:0 Loading inspector modules...
CONSOLE LOG file:///node_modules/tns-core-modules/inspector_modules.js:6:0 Finished loading inspector modules.
NativeScript debugger attached.
CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0 HMR: Checking for updates to the bundle with hmr hash 5ffc82675a2e078d2249.
CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0 HMR: The following modules were updated:
CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0 HMR:          ↻ ./views/fixtures/fixtures.xml
CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0 HMR:          ↻ ./views/main-view.xml
CONSOLE INFO file:///node_modules/nativescript-dev-webpack/hot.js:3:0 HMR: Successfully applied update with hmr hash 5ffc82675a2e078d2249. App is up to date.
Successfully synced application com.myawesomeapp on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.

Log nr 2 (reproduce step 4)

File change detected. Starting incremental webpack compilation...
Hash: 167ac25931c761387b99
Version: webpack 4.27.1
Time: 434ms
Built at: 09/22/2019 6:36:20 PM
                                            Asset       Size                                          Chunks             Chunk Names
             7c9cca8fca3349af29ce.hot-update.json   48 bytes                                                  [emitted]
        bundle.7c9cca8fca3349af29ce.hot-update.js   28.7 KiB                                          bundle  [emitted]  bundle
                                        bundle.js    851 KiB                                          bundle  [emitted]  bundle
                                       runtime.js   71.4 KiB                                         runtime  [emitted]  runtime
tns_modules/tns-core-modules/inspector_modules.js  955 bytes  tns_modules/tns-core-modules/inspector_modules  [emitted]  tns_modules/tns-core-modules/inspector_modules
 + 1 hidden asset
Entrypoint bundle = runtime.js vendor.js bundle.js bundle.7c9cca8fca3349af29ce.hot-update.js
Entrypoint tns_modules/tns-core-modules/inspector_modules = runtime.js vendor.js tns_modules/tns-core-modules/inspector_modules.js
[./ sync ^\.\/app\.(css|scss|less|sass)$] . sync nonrecursive ^\.\/app\.(css|scss|less|sass)$ 174 bytes {bundle} [built]
[./ sync recursive (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] . sync (?<!\bApp_Resources\b.*)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 2.78 KiB {bundle} [built]
[./views/fixtures/fixtures.xml] 2.21 KiB {bundle} [built]
[./views/main-view.xml] 8.61 KiB {bundle} [optional] [built]
    + 488 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Successfully transferred bundle.7c9cca8fca3349af29ce.hot-update.js on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.
Successfully transferred 7c9cca8fca3349af29ce.hot-update.json on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.
Refreshing application on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57...
Successfully synced application com.myawesomeapp on device BE27BBD4-59BD-4382-B6AB-2535EC8E3C57.

[EddyVerbruggen]

Yeah this is not intended to run alongside livesync/hmr because any available appsync package will interfere with whatever hmr wants to sync. I did not anticipate anyone enabling appsync during development so didn't test that scenario either.

What should work though is having the plugin installed, but never calling AppSync.sync() while developing. Is that a correct assumption?

I'll add a note to the readme once that's confirmed, and figure out a way to detect running with hmr available so the plugin can at least log a warning. Ideas welcome of course!.

[manijak]

Totally agree, took me a while to understand & debug that there was a conflict here, and it does make sense, there is no need to sync anything as I am sitting with the latest code.

Correct, disabling AppSync.sync() does not interfere with hmr/livesync, the behavior was much better after turning it off.

The best way would be if it could detect a dev environment, but I read a bit about environment modes (dev/production) and could not find anything easy to use. Not without remembering to alter files/configs.

So I would guess a fast & easy way would be to just add a flag to the options that turns sync on or off. Similar to the sandbox mode on the firebase plugin. You still need to remember to turn it on before publishing, but perhaps give a warning in the console if you try to build with --release or when using the appsync-cli: Appsync is not enabled! Check your config something like that?

[EddyVerbruggen]

Thanks a bunch, this gives me something to think about!

[EddyVerbruggen]

I decided to detect "hmr" when running the app, and if it's the case AppSync.sync() will no longer update the app. This behavior can be overridden by passing in enabledWhenUsingHmr: true to that method.