search

OfficeDev / Office-Addin-TaskPane

Template to get started writing a TaskPane Office Add-in.
Other
72 stars 43 forks source link

Hot reloading forces a complete reload of the whole add-in #204

Open Rick-Kirkham opened 1 year ago

Rick-Kirkham commented 1 year ago

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

Expected behavior

When a code source file is changed while debugging in VSC, hot reloading should make the change but leave the app in the same place where it was, so the developer doesn't have to go through the all the steps in the UI to get back to where they were.

Current behavior

The change in the source file cause the entire app to reload and returns the app to its default starting state. There is also an error in the VSC debugging console: "Cannot apply update. Need to do a full reload." image

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

  1. Sideload an add-in in VSC
  2. Run the add-in.
  3. Make a change in a code source file.

Context

Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.

Failure Logs

Please include any relevant log snippets, screenshots or code samples here.

millerds commented 1 year ago

When I was trying this out I saw the error in VS code's debug pane, but my changes to the taskpane code (ts and html) were updated in the host (Excel in my case) without having to do anything.

The VS code error indicates something is going on that could be wrong, but it looks like something a little more specific that needs to be discovered.

Rick-Kirkham commented 1 year ago

Was your add-in in the same state after the change or did it revert to its starting state? In my case, the add-in is supposed to display the subject line of the email in the task pane just below the Run link after I lick the Run link. If hot loading is working as it should this subject should still be on the screen in the task pane. But when I make a change, it disappears and the task pane is back in it's starting state.

millerds commented 1 year ago

Since the taskpane.html is part of the entry point for code it seems that reloading the html on a code change is actually correct. Seems to me like the automatic reloading of the taskpane is an indication that hot reloading is working.

Rick-Kirkham commented 1 year ago

What you're describing is "Live Reloading". The term "Hot Reloading" means that only the file that's changed is reloaded. When I watch the NodeJS window where the webpack devserver is running, I see that only the taskpane.js is reloaded, so the webpack part of the system is working. For some reason, Outlook (or the embeded WebView2) is reloading the HTML file too. It shouldn't be doing that. Do you have a Mac so we can see if it happens on a Mac too?

millerds commented 1 year ago

So I'm not much of an expert on hot reloading so I had to do some digging. It looks like in order for the module replacement to happen as you say then there needs to be some acceptance code (see https://webpack.js.org/guides/hot-module-replacement/) added to the module (taskpane.ts) that you what to be hot swappable. HMR will start at the point of the change and walk up the tree looking for that code and if it's not found by the time it gets to the entry point then it fails. By default, when that happens webpack dev server does reload of the whole thing (which you referred to as live reloading).

From what I can see this extra acceptance code (and typescript types pacakge in some cases) was never part of our template and so it was always doing a live reload instead of a module replacement. This is something we would have to change in our templates in order to work with HMR.

Rick-Kirkham commented 1 year ago

OK. In the meantime, we should be sure our documentation says that we support live reloading, but not hot reloading. This applies to the add-in part of a merged Teams/Outlook app as well.

@preethikakiru for visibility.

suuunly commented 4 months ago

Is there any updates on the hot reload feature? 😁 Currently trying to create an Excel Addin, and with Live reload, it runs extremely slowly - so any suggestions would be much appreciated 😅

AndrueAnderson commented 4 months ago

We're trying to build a Word add-in and we're running into the same problem. Would love an update on hot reload feature

suuunly commented 4 months ago

We're trying to build a Word add-in and we're running into the same problem. Would love an update on hot reload feature

Hey, I found an ok solution to the problem. You can read about it on this issue: https://github.com/OfficeDev/Office-Addin-TaskPane-React/issues/158

Hope this helps 😁