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

Answer 2

This is possible to create office addin using Svelte.

1. Create svelte app using

npm init vite

2. Enter project name, framework (select Svelte) and variant (JavaScript, TypeScript)

3. Now create two files The content can be taken from following project or generator-office

   (1) taskpane.html (2) commands.html

4. Install these dependencies

npm install @microsoft/office-js @types/office-js office-addin-debugging vite-plugin-html --dev

5. Note: It needs to include following in the two html pages.

  <!-- Office JavaScript API -->
  <script
    type="text/javascript"
    src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"> 
  </script>

  <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
  <link
    rel="stylesheet"
    href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css"
  />

6. Add this to App.svelte, so that the page will load after office is ready.

<script>
  let isOfficeInitialized = false;
  window.onload = function () {
    const Office = window.Office;
    Office.onReady(() => {
      console.log("Office Ready");
      isOfficeInitialized = true;
    });
  };

  const click = async () => {
    return Word.run(async (context) => {
      /**
       * Insert your Word code here
       */

      // insert a paragraph at the end of the document.
      const paragraph = context.document.body.insertParagraph(
        "Hello World",
        Word.InsertLocation.end
      );

      // change the paragraph color to blue.
      paragraph.font.color = "blue";

      await context.sync();
    });
  };
</script>

{#if isOfficeInitialized}
  <main>
    <div style="margin-top: 20px; font-size: 18px;">
      <div>
        Modify the source files, then click <b>Run</b>.
      </div>
    </div>

    <div class="run-button">
      <button onclick={click}>Run</button>
    </div>
  </main>
{/if}

7. Create commands.ts to src/ for commands.html

8. Edit vite.config.ts to build the two pages for Office Addin

import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte(),
    createHtmlPlugin({
      minify: true,
      pages: [
        {
          entry: 'src/main.ts',
          filename: 'taskpane.html',
          template: 'taskpane.html',
          injectOptions: {
            data: {
              injectScript: `<script src="./main.js"></script>`,
            },
          },
        },
        {
          entry: 'src/commands.ts',
          filename: 'commands.html',
          template: 'commands.html',
          injectOptions: {
            data: {
              injectScript: `<script src="./commands.js"></script>`,
            },
          },
        }
      ]
    })
  ],
})

9. Add manifest.xml file to project

10. Now add run script to package.json

scripts: {
    "start": "office-addin-debugging start manifest.xml",
    "start:desktop": "office-addin-debugging start manifest.xml desktop",
    "start:web": "office-addin-debugging start manifest.xml web",
    "stop": "office-addin-debugging stop manifest.xml",
    "validate": "office-addin-manifest validate manifest.xml"
}

I have also created a project for creating office addin. It can also be used. https://github.com/krmanik/Office-Addin-TaskPane-Svelte