Can you build an Excel task pane add-in with Svelte?

Question

I'm thinking about developing an Excel add-in as described here.

Would that be possible with Svelte - and do you know of any guides/help if yes?

I have looked through the video here, and I'm about worried about the usage of webpack.

Answer 1

Well... let's break it down

Is it possible?

Short answer: yes

Long answer: the documentation clearly states that Excel add-in still uses jQuery for logic manipulations. If your question was about Angular or react it would probably be a hard NO since those frameworks use an engine that should be included as part of solution. This kind of dependencies when dealing with plugins development are pretty hard to implement and maintain as a function of time so it's better to use very lightweight, non-core dependencies instead. Since you are asking about svelte - it is "compiled" into a bundle that contains pure code (based on your app logic). So - as long as your app rely on the load event sequence described in the docs - you are good to go.

Do you really need Webpack?

Short answer: no

Long answer: svelte can be deployed using rollup instead - which is more suitable for micro-applications (such as yours). So, if you feel that webpack (somehow) is blocking your work pipeline - just use svelete default configuration with rollup and you are ready to go

Your workflow

1. Create a very simple svelte app (my suggestion - try to take the example in the docs and implement it using svelte)

2. Test it locally (just verify it works)

3. Build it (you should ended up with 3 files - 1 html file in public directory and 2 other files in public/build directory - 1 js file and 1 css file (both called bundle)

4. Here's the tricky part - the html file does nothing - just loading the css and js files. In your case - you don't really need it

5. Change the bundle.css file to Home.css file

6. Change the bundle.js file to Home.js file and put your app inside the add-in main function

    'use strict';
   
    (function () {
   
      Office.onReady(function() {
        // Office is ready
        YOUR SVELTE APP CODE SHOULD BE PLACED HERE
      });
   
    })();
   

7. Pack your add-in and test it

Technical notes

• If Excel blocks the creation of new elements (using dynamic injection) - this approach will NOT work (since your entire app is generated by your js file)
• Please refer to this article for more information about packing your app
• Try to make your app as lightweight and small-size as possible just to avoid the risk of exceeding the limits allowed for add-ins