wip move the addin in a dedicated babel project

src/addins/outlook-addin/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "office-addins"
+  ],
+  "extends": [
+    "plugin:office-addins/recommended"
+  ]
+}

src/addins/outlook-addin/babel.config.json

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "esmodules": false
+        }
+      }
+    ],
+  ]
+}

src/addins/outlook-addin/manifest.xml

@@ -6,10 +6,11 @@
   <DefaultLocale>en-US</DefaultLocale>
   <DisplayName DefaultValue="Visio"/>
   <Description DefaultValue="Ajoutez facilement un lien de réunion Visio à vos emails et événements Outlook."/>
-  <IconUrl DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/assets/icon-64.png"/>
-  <HighResolutionIconUrl DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/assets/icon-128.png"/>
+  <IconUrl DefaultValue="https://localhost:3000/assets/icon-64.png"/>
+  <HighResolutionIconUrl DefaultValue="https://localhost:3000/assets/icon-128.png"/>
   <SupportUrl DefaultValue="https://www.contoso.com/help"/>
   <AppDomains>
+    <AppDomain>https://localhost:3000</AppDomain>
     <AppDomain>https://meet.127.0.0.1.nip.io</AppDomain>
   </AppDomains>
   <Hosts>
@@ -23,13 +24,13 @@
   <FormSettings>
     <Form xsi:type="ItemRead">
       <DesktopSettings>
-        <SourceLocation DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/taskpane.html"/>
+        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
         <RequestedHeight>250</RequestedHeight>
       </DesktopSettings>
     </Form>
     <Form xsi:type="ItemEdit">
       <DesktopSettings>
-        <SourceLocation DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/taskpane.html"/>
+        <SourceLocation DefaultValue="https://localhost:3000/taskpane.html"/>
       </DesktopSettings>
     </Form>
   </FormSettings>
@@ -148,13 +149,13 @@
     </Hosts>
     <Resources>
       <bt:Images>
-        <bt:Image id="Icon.16x16" DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/assets/icon-16.png"/>
-        <bt:Image id="Icon.32x32" DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/assets/icon-32.png"/>
-        <bt:Image id="Icon.80x80" DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/assets/icon-80.png"/>
+        <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
+        <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
+        <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
       </bt:Images>
       <bt:Urls>
-        <bt:Url id="Commands.Url" DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/commands.html"/>
-        <bt:Url id="Taskpane.Url" DefaultValue="https://meet.127.0.0.1.nip.io/outlook-addin/taskpane.html"/>
+        <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
+        <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
       </bt:Urls>
       <bt:ShortStrings>
         <bt:String id="GroupLabel" DefaultValue="Visio"/>

src/addins/outlook-addin/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "office-addin-taskpane-js",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
+  },
+  "license": "MIT",
+  "config": {
+    "app_to_debug": "outlook",
+    "app_type_to_debug": "desktop",
+    "dev_server_port": 3000
+  },
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "dev-server": "webpack serve --mode development",
+    "lint": "office-addin-lint check",
+    "lint:fix": "office-addin-lint fix",
+    "prettier": "office-addin-lint prettier",
+    "signin": "office-addin-dev-settings m365-account login",
+    "signout": "office-addin-dev-settings m365-account logout",
+    "start": "office-addin-debugging start manifest.xml",
+    "stop": "office-addin-debugging stop manifest.xml",
+    "validate": "office-addin-manifest validate manifest.xml",
+    "watch": "webpack --mode development --watch"
+  },
+  "dependencies": {
+    "core-js": "^3.36.0",
+    "regenerator-runtime": "^0.14.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-env": "^7.25.4",
+    "@types/office-js": "^1.0.377",
+    "@types/office-runtime": "^1.0.35",
+    "acorn": "^8.11.3",
+    "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
+    "eslint-plugin-office-addins": "^4.0.3",
+    "file-loader": "^6.2.0",
+    "html-loader": "^5.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "office-addin-cli": "^2.0.3",
+    "office-addin-debugging": "^6.0.3",
+    "office-addin-dev-certs": "^2.0.3",
+    "office-addin-lint": "^3.0.3",
+    "office-addin-manifest": "^2.0.3",
+    "office-addin-prettier-config": "^2.0.1",
+    "os-browserify": "^0.3.0",
+    "process": "^0.11.10",
+    "source-map-loader": "^5.0.0",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "5.1.0"
+  },
+  "prettier": "office-addin-prettier-config",
+  "browserslist": [
+    "last 2 versions",
+    "ie 11"
+  ]
+}

src/addins/outlook-addin/src/commands/commands.html

@@ -4,8 +4,6 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
-    <script src="common.js" defer></script>
-    <script src="commands.js" defer></script>
 </head>
 <body></body>
 </html>

src/addins/outlook-addin/src/commands/commands.js

@@ -1,4 +1,5 @@
 /* global Office */
+const { loadSession, buildMeetingMessage, BASE_URL } = require("../common");
 
 Office.onReady(() => {});
 

src/addins/outlook-addin/src/common.js

@@ -95,3 +95,5 @@ Code : ${formattedPin}
 
   return { url, message };
 }
+
+module.exports = { BASE_URL, saveSession, loadSession, clearSession, buildMeetingMessage };

src/addins/outlook-addin/src/taskpane/taskpane.html

@@ -7,8 +7,6 @@
     <title>Visio</title>
     <link rel="stylesheet" href="taskpane.css" />
     <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
-    <script src="common.js" defer></script>
-    <script src="taskpane.js" defer></script>
 </head>
 <body>
 <div id="sideload-msg">Veuillez charger le complément.</div>

src/addins/outlook-addin/src/taskpane/taskpane.js

@@ -1,3 +1,6 @@
+
+const { BASE_URL, loadSession, saveSession, clearSession, buildMeetingMessage } = require("../common");
+
 // ─── Views ────────────────────────────────────────────────────────────────
 
 function showView(name) {

src/addins/outlook-addin/webpack.config.js

@@ -0,0 +1,97 @@
+/* eslint-disable no-undef */
+
+const devCerts = require("office-addin-dev-certs");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+const urlDev = "https://localhost:3000/";
+const urlProd = "https://meet.127.0.0.1.nip.io/outlook-addin/";
+
+async function getHttpsOptions() {
+  const httpsOptions = await devCerts.getHttpsServerOptions();
+  return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
+}
+
+module.exports = async (env, options) => {
+  const dev = options.mode === "development";
+  const config = {
+    devtool: "source-map",
+    entry: {
+      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
+      taskpane: ["./src/taskpane/taskpane.js", "./src/taskpane/taskpane.html"],
+      commands: "./src/commands/commands.js",
+    },
+    output: {
+      clean: true,
+    },
+    resolve: {
+      extensions: [".html", ".js"],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.js$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+          },
+        },
+        {
+          test: /\.html$/,
+          exclude: /node_modules/,
+          use: "html-loader",
+        },
+        {
+          test: /\.(png|jpg|jpeg|gif|ico)$/,
+          type: "asset/resource",
+          generator: {
+            filename: "assets/[name][ext][query]",
+          },
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        filename: "taskpane.html",
+        template: "./src/taskpane/taskpane.html",
+        chunks: ["polyfill", "taskpane"],
+      }),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: "assets/*",
+            to: "assets/[name][ext][query]",
+          },
+          {
+            from: "manifest*.xml",
+            to: "[name]" + "[ext]",
+            transform(content) {
+              if (dev) {
+                return content;
+              } else {
+                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
+              }
+            },
+          },
+        ],
+      }),
+      new HtmlWebpackPlugin({
+        filename: "commands.html",
+        template: "./src/commands/commands.html",
+        chunks: ["polyfill", "commands"],
+      }),
+    ],
+    devServer: {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+      },
+      server: {
+        type: "https",
+        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
+      },
+      port: process.env.npm_package_config_dev_server_port || 3000,
+    },
+  };
+
+  return config;
+};