You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now that HMR is out of beta, i would like to use to it to its fullest.
In my app i want to 'catch" HMR sync events for some files (files in a specific dir) and do a custom reloading from within the app.
To be more precise so that you understand the request. I want to implement HMR for map style files reloading:
run the app with HMR
modify the styles files in your favorite text editor
livesync triggered
reload map by reloading style
I see there are some way to know that a live sync has been triggered. CAn it be used to do something like this? If so is there any doc/example showing a bit how to do it.
In particular with applying changes in styles at runtime, this has been supported since the latest version for JavaScript and TypeScript projects.
Otherwise, you could try to overwrite global.__onLiveSync as again, for JavaScript and TypeScript projects it will receive a ModuleContext during HMR which contains the changed module's type and path.
@vchimev you might not have understand what i want to do. When i talked about map "style" i was not talking about css files. I use Carto Mobile SDK for maps. That map framework uses CartoCSS to define map style. labels.mss is just a CartoCSS style file.
So that file is the one i am modifying locally on my computer and which gets synced to the {N} app with HMR.
Now the step that i miss i a way of knowing, from the {N} side, that that file just got updated/synced so that i can tell the map to reload its style through that file.
I get the __onLiveSync call but from there i cant know what file actually was transfered.
You are telling me that nativescript-dev-webpack pass the context arg through that line?
So i could just create a similar thing for .mss files?
If I got you right - yes, you could implement your own *-hot-loader.js similar to style-hot-loader.js and use it to for the .mss files by adding it to the webpack config.
Basically, the goals of this loader are to accept the change and pass a context for the type and the path of the changed module to the application. Later, you could attach to the __onLiveSync event and process the changes based on this context.
Do these *.mss files currently get to the application's bundle when built with webpack? If so - how do they get there?
@vchimev Just tested it and sadly it does not work. I think the reason is that my mss files are just assets like pngs and thus not required. Consequently the special loader is not even used.
One question though, which is more related to nativescript-cli than nativescript-dev-webpack, in the log i see
Successfully transferred labels.mss on device emulator-5554
Isn't there anything on the other side that could be catched from within the app?
How is the file transfered? Is it just a adb shell command?
BTW thinking about this is the same thing as with png. How is that handled when a png is changed when using hmr? Does the image gets updated within the app?
Well, yeah, if the .mss flies are application assets, the approach suggested won't work.
AFAIK, when changing application resources, the CLI rebuilds natively the application in order to get the new resources to the .apk/.ipa. Perhaps, we could research if there is a possibility to live-patch the .apk for such cases. Currently, it is rebuilt and reinstalled on the device, so no way to handle such changes in a custom manner.
I remember we have applications live-patching into our roadmap. @rosen-vladimirov, could you please confirm this and my statement above?
@vchimev my app is not rebuild on assets update. That why i see
Successfully transferred labels.mss on device emulator-5554
Now i know the assets is actually already updated on the phone. If i manually trigger the update from the app, i can see the file is good. Now the only issue is how to get notified of this.
Maybe @rosen-vladimirov can help us on that
Activity
vchimev commentedon May 3, 2019
Hey @farfromrefug,
What NativeScript flavors are you interested in?
In particular with applying changes in styles at runtime, this has been supported since the latest version for
JavaScriptandTypeScriptprojects.Otherwise, you could try to overwrite
global.__onLiveSyncas again, forJavaScriptandTypeScriptprojects it will receive aModuleContextduring HMR which contains the changed module'stypeandpath.farfromrefug commentedon May 3, 2019
@vchimev right i am working on Typescript / Vue apps.
I did not know about
global.__onLiveSync!!!Just tried it on android and it is called:
However as you can see the
contextparameter isundefined.What i need is the path to
labels.mss. Is that possible?vchimev commentedon May 4, 2019
Hey @farfromrefug,
Currently, for the
Vueflavor, thenativescript-dev-webpackplugin passescontextonly for changes in style files through thestyle-hot-loader.What is
labels.mss?farfromrefug commentedon May 4, 2019
@vchimev you might not have understand what i want to do. When i talked about map "style" i was not talking about css files. I use Carto Mobile SDK for maps. That map framework uses CartoCSS to define map style.
labels.mssis just a CartoCSS style file.So that file is the one i am modifying locally on my computer and which gets synced to the {N} app with HMR.
Now the step that i miss i a way of knowing, from the {N} side, that that file just got updated/synced so that i can tell the map to reload its style through that file.
I get the
__onLiveSynccall but from there i cant know what file actually was transfered.You are telling me that
nativescript-dev-webpackpass the context arg through that line?So i could just create a similar thing for
.mssfiles?vchimev commentedon May 6, 2019
Hey @farfromrefug,
Thank you for the details.
If I got you right - yes, you could implement your own
*-hot-loader.jssimilar tostyle-hot-loader.jsand use it to for the.mssfiles by adding it to the webpack config.Basically, the goals of this loader are to accept the change and pass a context for the type and the path of the changed module to the application. Later, you could attach to the
__onLiveSyncevent and process the changes based on this context.Do these
*.mssfiles currently get to the application's bundle when built with webpack? If so - how do they get there?Let me know how it goes.
farfromrefug commentedon May 6, 2019
@vchimev Yes i think it will work. Need to test this.
The
mssare app assets like pngs. Need to see if adding a rule for them will work.Will report here about the success. Might get useful to document this somewhere
farfromrefug commentedon May 6, 2019
@vchimev Just tested it and sadly it does not work. I think the reason is that my
mssfiles are just assets like pngs and thus notrequired. Consequently the special loader is not even used.One question though, which is more related to
nativescript-clithannativescript-dev-webpack, in the log i seeIsn't there anything on the other side that could be catched from within the app?
How is the file transfered? Is it just a
adb shellcommand?BTW thinking about this is the same thing as with png. How is that handled when a png is changed when using hmr? Does the image gets updated within the app?
vchimev commentedon May 7, 2019
Hey @farfromrefug,
Well, yeah, if the
.mssflies are application assets, the approach suggested won't work.AFAIK, when changing application resources, the CLI rebuilds natively the application in order to get the new resources to the
.apk/.ipa. Perhaps, we could research if there is a possibility to live-patch the.apkfor such cases. Currently, it is rebuilt and reinstalled on the device, so no way to handle such changes in a custom manner.I remember we have applications live-patching into our roadmap. @rosen-vladimirov, could you please confirm this and my statement above?
Thank you!
farfromrefug commentedon May 7, 2019
@vchimev my app is not rebuild on assets update. That why i see
Now i know the assets is actually already updated on the phone. If i manually trigger the update from the app, i can see the file is good. Now the only issue is how to get notified of this.
Maybe @rosen-vladimirov can help us on that