Skip to content

[FR] Hmr assets special handling #4576

Open

Description

@farfromrefug

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.

Thanks

Activity

  1. vchimev commented on May 3, 2019

    @vchimev

    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 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.

  2. farfromrefug commented on May 3, 2019

    @farfromrefug
    ContributorAuthor

    @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:

    Successfully transferred labels.mss on device emulator-5554.
    JS: __onLiveSync undefined
    

    However as you can see the context parameter is undefined.
    What i need is the path to labels.mss. Is that possible?

  3. vchimev commented on May 4, 2019

    @vchimev

    Hey @farfromrefug,

    Currently, for the Vue flavor, the nativescript-dev-webpack plugin passes context only for changes in style files through the style-hot-loader.

    What is labels.mss?

  4. farfromrefug commented on May 4, 2019

    @farfromrefug
    ContributorAuthor

    @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?

  5. vchimev commented on May 6, 2019

    @vchimev

    Hey @farfromrefug,

    Thank you for the details.

    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?

    Let me know how it goes.

  6. farfromrefug commented on May 6, 2019

    @farfromrefug
    ContributorAuthor

    @vchimev Yes i think it will work. Need to test this.
    The mss are 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

  7. farfromrefug commented on May 6, 2019

    @farfromrefug
    ContributorAuthor

    @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?

  8. vchimev commented on May 7, 2019

    @vchimev

    Hey @farfromrefug,

    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?

    Thank you!

  9. farfromrefug commented on May 7, 2019

    @farfromrefug
    ContributorAuthor

    @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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions