Unify dev server for Google Docs add-on under Vite (module loading instead of bundle)

[kcarnold]

Background

After the Webpack→Vite migration (PR #483), the Google Docs add-on bundle is produced only as a one-shot production artifact via npm run build:google-docs → dist/google-docs.bundle.js (a single self-contained IIFE, built by vite.google-docs.config.ts). There is no dev/watch server for it.

The Word add-in dev server (npm run dev-server, vite.config.ts) can't serve the gdocs bundle, because Vite's dev server serves on-the-fly native ESM modules rather than a single bundled .js file — and the sidebar currently loads a classic pre-bundled script:

// google-docs-addon/sidebar.html (dev path)
var s = document.createElement('script');
s.src = base + '/google-docs.bundle.js';   // base = http://localhost:3001

So today, restoring the gdocs dev workflow under Vite would mean a second process (vite build --config vite.google-docs.config.ts --watch + a static server over dist/), with full rebuilds and no HMR.

Proposal

Change the sidebar's dev loader to pull the entry as an ES module straight from the main Vite dev server, instead of a built bundle:

var s = document.createElement('script');
s.type = 'module';
s.src = 'https://localhost:3000/src/index-gdocs.tsx';

Vite intercepts that URL, transpiles the .tsx on the fly, and serves it + its import graph as ESM. This lets npm run dev-server serve both the Word add-in and the gdocs entry from a single server — no second process, no watch-rebuild. The IIFE config (vite.google-docs.config.ts) drops back to production-only.

Why it's viable:

• CORS already satisfied — vite.config.ts sets cors: true + Access-Control-Allow-Origin: *, which is what cross-origin module loading needs. The sidebar already loads an external script cross-origin today.
• No mixed content — Vite dev is HTTPS on :3000 (vs the old plaintext :3001), matching the HTTPS sidebar iframe. Browser just needs to trust the dev cert (already trusted for the Word add-in).

Work items

• Update the dev branch of google-docs-addon/sidebar.html to inject a type="module" script pointing at https://localhost:3000/src/index-gdocs.tsx (keep the production path loading the built bundle).
• Move the gdocs-specific defines (process.env.GDOCS_BACKEND_URL, NODE_ENV) from vite.google-docs.config.ts into vite.config.ts (or switch index-gdocs.tsx / googleDocsEditorAPI.ts to import.meta.env) so the entry works when served by the main dev server. Optionally factor the shared bits (@ alias, react(), AUTH0 defines) into a small vite.shared.ts.
• Verify the sidebar loads and runs against npm run dev-server.

Caveats / open questions

• HMR over websocket may be blocked by the Apps Script sandboxed-iframe CSP. If so, module loading/execution still works — you just lose hot reload and refresh manually. May need server.hmr config or to disable HMR for that case. Worth confirming during implementation.

Context

Follow-up from PR #483 (Webpack→Vite migration). Out of scope for that PR, which intentionally leaves the deployed gdocs wiring broken.