refactor JS config

.pre-commit-config.yaml

@@ -39,5 +39,5 @@ repos:
         types_or: [html, javascript, css, markdown]
         args: [--write]
         additional_dependencies:
-          - prettier@3.1.0
-          - prettier-plugin-jinja-template@v1.4.1
+          - prettier@3.3.3
+          - prettier-plugin-jinja-template@v2.0.0

app/config.py

@@ -1,6 +1,6 @@
 import os
 from pathlib import Path
-from typing import List, Literal, Optional
+from typing import Dict, List, Literal, Optional
 
 import xlwings as xw
 from pydantic import UUID4, computed_field
@@ -57,6 +57,15 @@ class Settings(BaseSettings):
     def static_dir(self) -> Path:
         return self.base_dir / "static"
 
+    @computed_field
+    @property
+    def jsconfig(self) -> Dict:
+        return {
+            "authProviders": self.auth_providers,
+            "appPath": self.app_path,
+            "xlwingsVersion": self.xlwings_version,
+        }
+
 
 settings = Settings()
 

app/static/js/auth.js

@@ -1,8 +1,5 @@
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html
-const authData = JSON.parse(document.getElementById("auth").text);
-
 globalThis.getAuth = async function () {
-  if (authData.auth.includes("entraid")) {
+  if (config.authProviders.includes("entraid")) {
     return await xlwings.getAccessToken();
   }
   return "";

app/static/js/config.js

@@ -0,0 +1,4 @@
+// Config
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#embedding_data_in_html
+const configElement = document.getElementById("config");
+const config = configElement ? JSON.parse(configElement.textContent) : null;

app/static/js/core/sheet-buttons.js

@@ -5,12 +5,8 @@ Office.onReady(async (info) => {
   }
 });
 
-async function registerCellToButton(hyperlinkCellRef, scriptName, config) {
+async function registerCellToButton(hyperlinkCellRef, scriptName, xwConfig) {
   // hyperlinkCellRef is in the form [ShapeName]Sheet1!A1, where [ShapeName] is optional
-  const appPathElement = document.getElementById("app-path");
-  const appPath = appPathElement
-    ? JSON.parse(appPathElement.textContent)
-    : null;
   await Excel.run(async (context) => {
     let shapeName = null;
     let sheetName, cellRef;
@@ -50,9 +46,9 @@ async function registerCellToButton(hyperlinkCellRef, scriptName, config) {
               : "";
           await xlwings.runPython(
             window.location.origin +
-              (appPath && appPath.appPath !== "" ? `${appPath.appPath}` : "") +
+              config.appPath +
               `/xlwings/custom-scripts-call/${scriptName}`,
-            { ...config, auth: token },
+            { ...xwConfig, auth: token },
           );
         } finally {
           sheet.getRange(selectedRangeAddress).getOffsetRange(1, 0).select();

app/static/js/core/socketio-handlers.js

@@ -1,13 +1,7 @@
-// XLWINGS_APP_PATH setting
-const appPathElement = document.getElementById("app-path");
-const appPath = appPathElement ? JSON.parse(appPathElement.textContent) : null;
-
 // Socket.io
 try {
   globalThis.socket = io({
-    path:
-      (appPath && appPath.appPath !== "" ? `${appPath.appPath}` : "") +
-      "/socket.io/",
+    path: `${config.appPath}/socket.io/`,
     auth: async (callback) => {
       let token = await globalThis.getAuth();
       callback({
@@ -21,14 +15,10 @@ try {
 }
 
 globalThis.socket.on("xlwings:trigger-script", async (data) => {
-  const appPathElement = document.getElementById("app-path");
-  const appPath = appPathElement
-    ? JSON.parse(appPathElement.textContent)
-    : null;
   let token = await globalThis.getAuth();
   xlwings.runPython(
     window.location.origin +
-      (appPath && appPath.appPath !== "" ? `${appPath.appPath}` : "") +
+      config.appPath +
       "/xlwings/custom-scripts-call/" +
       data.script_name,
     { ...data.config, auth: token },

app/static/js/core/xlwingsjs/alert.js

@@ -68,17 +68,13 @@ export async function xlAlert(prompt, title, buttons, mode, callback) {
   }
 
   // See xlwings-server repo for how app-path is provided
-  const appPathElement = document.getElementById("app-path");
-  const appPath = appPathElement
-    ? JSON.parse(appPathElement.textContent)
-    : null;
   if (dialog) {
     dialog.close();
     console.log("Closed perviously open dialog to prevent error 12007.");
   }
   Office.context.ui.displayDialogAsync(
     window.location.origin +
-      (appPath && appPath.appPath !== "" ? `${appPath.appPath}` : "") +
+      config.appPath +
       `/xlwings/alert?prompt=` +
       encodeURIComponent(`${prompt}`) +
       `&title=` +

app/static/js/core/xlwingsjs/xlwings.js

@@ -42,28 +42,27 @@ export function init() {
         typeof globalThis.getAuth === "function"
           ? await globalThis.getAuth()
           : "";
-      let config = element.getAttribute("xw-config")
+      let xwConfig = element.getAttribute("xw-config")
         ? JSON.parse(element.getAttribute("xw-config"))
         : {};
-
-      await runPython(
+      const url =
         window.location.origin +
-          (appPath && appPath.appPath !== "" ? `${appPath.appPath}` : "") +
-          "/xlwings/custom-scripts-call/" +
-          element.getAttribute("xw-click"),
-        { ...config, auth: token, errorDisplayMode: "taskpane" },
-      );
+        config.appPath +
+        "/xlwings/custom-scripts-call/" +
+        element.getAttribute("xw-click");
+      await runPython(url, {
+        ...xwConfig,
+        auth: token,
+        errorDisplayMode: "taskpane",
+      });
 
       element.removeChild(spinner);
       element.removeAttribute("disabled");
     });
   });
 }
 
-const xlwingsVersion = JSON.parse(
-  document.getElementById("xlwings-version").text,
-);
-const version = xlwingsVersion.xlwingsVersion;
+const version = config.xlwingsVersion;
 
 globalThis.callbacks = {};
 export async function runPython(

app/templates/base.html

@@ -6,6 +6,8 @@
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>Task pane</title>
       <link rel="icon" type="image/png" href="{{ url_for('static', path='/images/favicon.png') }}" />
+      {# Config #}
+      <script src="{{ url_for('static', path='/js/config.js') }}" defer></script>
       {# htmx #}
       {% if settings.enable_htmx %}
         <script src="{{ url_for('static', path='/vendor/htmx.org/dist/htmx.min.js') }}"></script>
@@ -38,17 +40,11 @@
         <script src="{{ url_for('static', path='/js/core/alpinejs-csp-boilerplate.js') }}"></script>
       {% endif %}
       {# JS Config #}
-      <!-- prettier-ignore-start -->
-      <script id="auth" type="application/json">
-        { "auth": {{ settings.auth_providers|tojson }} }
+      {# prettier-ignore-start #}
+      <script id="config" type="application/json">
+        {{ settings.jsconfig|tojson }}
       </script>
-      <script id="app-path" type="application/json">
-        { "appPath": {{ settings.app_path|tojson }} }
-      </script>
-      <script id="xlwings-version" type="application/json">
-        { "xlwingsVersion": {{ settings.xlwings_version|tojson }} }
-      </script>
-      <!-- prettier-ignore-end -->
+      {# prettier-ignore-end #}
       <script src="{{ url_for('static', path='/js/auth.js') }}"></script>
       {# Load Custom Functions #}
       {% block custom_functions_code %}