Skip to content

enhance(office-addin): replace React runtime with plain TypeScript - #4643

Merged
rschlaefli merged 45 commits into
v3from
NewPPT
Jul 27, 2026
Merged

enhance(office-addin): replace React runtime with plain TypeScript#4643
rschlaefli merged 45 commits into
v3from
NewPPT

Conversation

@rschlaefli

@rschlaefli rschlaefli commented Apr 24, 2025

Copy link
Copy Markdown
Member

What

Replaces the React and Webpack Office Add-in with a small Rollup-built TypeScript content add-in. The new flow accepts only KlickerUZH evaluation links, embeds them in PowerPoint, and persists each content add-in instance's URL through Office document settings.

Changes

  • builds one runtime bundle with local CSS and removes the production Tailwind CDN
  • validates and reconstructs the exact current and legacy KlickerUZH evaluation URL contract, with URI-encoded dynamic values and focused Node tests
  • serializes each settings mutation with its saveAsync call, and persists rollback state after failed writes
  • keeps the iframe on the production Manage origin with no-referrer and the minimum required sandbox permissions
  • emits production URLs under /office-addin/ and verifies exact parity between Rollup output and all 13 deployed docs-static files
  • removes the obsolete React taskpane, debug launcher, live reload, wrapper scripts, bundle analyzer, and non-runtime artifacts
  • aligns the package with TypeScript 6 and the latest compatible Office tooling patches
  • excludes the generated deployment HTML copy from Sonar's duplication metric while retaining normal analysis
  • refreshes package docs, the engineering wiki, testing guidance, and the execution plan

Branch coverage

  • Base: v3 at c8de9c897
  • Head: d6f3afb82
  • 45 commits; 51 files; 2,542 insertions and 8,893 deletions
  • The long-lived history contains intermediate React, TypeScript, and Rollup iterations that no longer exist at head. Review the current plain-TypeScript runtime and build pipeline.

Review focus

  • Microsoft documents the settings bag as scoped to the content or task-pane add-in instance that created it and the document. The single embeddedUrl key therefore remains instance-scoped: https://learn.microsoft.com/en-us/office/dev/add-ins/develop/persisting-add-in-state-and-settings
  • evaluation-url.ts accepts only the production Manage host, optional en or de, current quizzes or legacy sessions, a UUID, evaluation, and the backend-compatible lowercase 64-character hexadecimal HMAC
  • settings-mutation-queue.ts keeps mutation and persistence atomic across handlers, then performs and saves a rollback before allowing the next mutation to begin
  • build:docs and verify:docs must continue to keep the production manifest, runtime files, styles, maps, and assets identical to the built output
  • PowerPoint 16.111.1 now proves the current live evaluation workflow, document persistence, instance-scoped settings, and Change URL reset behavior. Legacy migration remains unverified because no legacy deck was available.

Verification

Full repository checks after the final runtime fix:

  • pinned Node 24.16.0 and pnpm 11.5.0 frozen install: passed, including supply-chain policy validation for 3,796 lock entries
  • full production build: 22 of 22 tasks passed
  • full test build: 20 of 20 tasks passed
  • type checks: 24 of 24 tasks passed
  • lint, syncpack, AGENTS.md smoke check, Prisma schema sync, and Prisma namespace tests: passed
  • Prettier on every tracked branch file and git diff --check: passed
  • final security review: no high-confidence finding
  • final thermo-nuclear maintainability review: passed with no reportable finding
  • independent Agy review with Gemini 3.5 Flash High: "Clean. No reportable findings."
  • stubbed browser smoke at 1024x768 and 600x400: invalid and valid URLs, embed, fullscreen, Change URL, and zero page errors passed

Current head after the final security, review, and native-verification adjustments:

  • Office typecheck, ESLint, three URL tests, production build:docs, 13-file deployment parity, and Microsoft manifest validation under pinned Node 24.16.0 and pnpm 11.5.0: passed
  • isolated browser smoke of the reconstructed URL, including an encoded HTML-like query value, embed, iframe source, and zero page errors: passed
  • PowerPoint 16.111.1 at bc5d73313, before the final queue hardening, with the exact candidate bundle and a fresh tunnel-backed manifest:
    • D1 passed: a real evaluation URL validated and rendered its live evaluation chart
    • D2 passed: save, close, and reopen restored the evaluation without another action
    • D3 passed: two add-in instances on separate slides retained different live questions after reopen
    • D5 passed: Change URL cleared one instance and it stayed empty after reopen without affecting the other instance
    • D4 was not run because no legacy deck was available
  • exact-commit security and correctness review found one backend-compatibility edge case; the fix and regression test passed its focused follow-up review
  • final documentation review fixes pass Prettier and the repository AGENTS.md validation; all four CodeRabbit threads are resolved
  • the final persistence hardening passes six focused Office tests, TypeScript, ESLint, production build, Prettier, and 13-file deployment parity locally
  • the previous code head 4e81d8bd8 passed all GitHub CI checks, including all eight Playwright shards and the aggregate status gate; the first shard 6 attempt had an unrelated KPRIM assertion failure and its failed-job rerun passed
  • current-head GitHub CI passes, including all eight Playwright shards and the aggregate status gate

Warnings and limits:

  • host hooks used Node 26 and could not reuse the pinned Node 24 Docker module tree, so the final commits and push bypassed those hooks after the equivalent pinned-Node gates passed
  • existing workspace build warnings include Next.js i18n, page-size, Browserslist, and QR-message warnings; none originate in the Office Add-in diff
  • the Office-only audit retains two development-tool findings: adm-zip in Microsoft's latest manifest validator and brace-expansion in the lint tree. Neither package ships in the add-in runtime or processes user-controlled production input. The earlier uuid finding is fixed by office-addin-manifest 2.1.6.

Security and privacy

  • Office.js remains the only externally loaded runtime script, as required by Microsoft
  • the embedded source URL is restricted to the exact validated production origin, and the frame sends no referrer
  • no secrets, participant data, exports, evaluation URLs, or private evidence are included
  • native screenshots are retained locally rather than uploaded because they show live evaluation content

Blocking before merge

  • current-head GitHub CI passes
  • candidate manifest is sideloaded in real PowerPoint; empty state, invalid URL validation, and insertion of two content add-in objects pass
  • D1, D2, D3, and D5 pass with a real evaluation URL
  • required maintainer approval

Follow-up after merge

  • validate D4 legacy settings migration when a suitable legacy deck is available
  • validate the deployed production manifest and evaluation embed once more in PowerPoint
  • toolbar integration and executable packaging remain separate product work

@aviator-app

aviator-app Bot commented Apr 24, 2025

Copy link
Copy Markdown

Current Aviator status

Aviator will automatically update this comment as the status of the PR changes.
Comment /aviator refresh to force Aviator to re-examine your PR (or learn about other /aviator commands).

This pull request is currently open (not queued).

How to merge

To merge this PR, comment /aviator merge or add the mergequeue label.


See the real-time status of this PR on the Aviator webapp.
Use the Aviator Chrome Extension to see the status of your PR within GitHub.

@coderabbitai

coderabbitai Bot commented Apr 24, 2025

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

The Office Add-in is rewritten from React to vanilla TypeScript. It adds strict evaluation URL validation, Office settings migration and serialization, a static embedded-evaluation UI, a simplified Rollup build, docs parity verification, and updated testing and release documentation.

Changes

Office Add-in rewrite

Layer / File(s) Summary
Build and deployment pipeline
apps/office-addin/package.json, apps/office-addin/rollup.config.js, apps/office-addin/tsconfig.json, apps/office-addin/scripts/sync-docs.mjs, apps/office-addin/manifest.xml, apps/docs/static/office-addin/manifest.xml
The package now builds a single IIFE content bundle, emits static assets and manifests, uses type-check-only TypeScript settings, and verifies deployed docs output byte-for-byte against dist/.
Evaluation validation and Office settings flow
apps/office-addin/src/content/content.ts, apps/office-addin/src/content/evaluation-url.ts, apps/office-addin/src/content/settings-mutation-queue.ts, apps/docs/static/office-addin/content.js
The add-in validates supported evaluation URLs, migrates legacy settings to embeddedUrl, serializes Office settings mutations with rollback, retries slide selection, and manages embedding and URL changes.
Static add-in interface and responsive styling
apps/office-addin/src/content/content.html, apps/office-addin/src/styles.css, apps/docs/static/office-addin/content.html, apps/docs/static/office-addin/styles.css
The add-in gains explicit instructions, URL validation controls, sandboxed iframe embedding, status messaging, fullscreen behavior, and responsive styling.
Tests and verification documentation
apps/office-addin/tests/*, apps/office-addin/README.md, docs/testing.md, project/2026-07-07-pr4643-office-addin-review.md
URL and settings-queue behavior are tested, while package checks, docs parity, manifest validation, browser limits, and PowerPoint sideload verification are documented.

Estimated code review effort: 4 (Complex) | ~60 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PowerPoint
  participant ContentController
  participant OfficeSettings
  participant EvaluationPage
  PowerPoint->>ContentController: initialize add-in
  ContentController->>OfficeSettings: read embeddedUrl or migrate legacy setting
  ContentController->>ContentController: validate evaluation URL
  ContentController->>OfficeSettings: serialize and save embeddedUrl
  ContentController->>EvaluationPage: load URL in sandboxed iframe
Loading

Possibly related PRs

  • uzh-bf/klicker-uzh#5145: Both modify .agents/skills/klicker-testing-verification/SKILL.md with Office Add-in verification guidance.

Suggested labels: feature

Suggested reviewers: sjschlapbach, copilot

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title matches the main change: replacing the React runtime with plain TypeScript in the Office add-in.
Description check ✅ Passed The description covers the summary, proposed changes, and verification evidence, but it omits the template's ClickUp Task link and checklist-style sections.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@rschlaefli rschlaefli changed the title add initial new version of new ppt addin enhance: improve office-addin Jul 13, 2025
@rschlaefli rschlaefli changed the title enhance: improve office-addin enhance: replace office-addin with vanilla TS version Jul 13, 2025
@rschlaefli rschlaefli changed the title enhance: replace office-addin with vanilla TS version enhance: replace office-addin with vanilla TS version, add data validation Jul 14, 2025
@rschlaefli rschlaefli self-assigned this Jul 20, 2025
Copilot AI review requested due to automatic review settings July 22, 2026 16:30

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.agents/skills/klicker-testing-verification/SKILL.md:
- Around line 12-18: Update the Office Add-in row in the test-routing table to
include pnpm --filter `@klicker-uzh/office-addin` test alongside its existing
check, lint, documentation, and validation commands, preserving the current
stubbed Office API and sideloading guidance.

In `@apps/office-addin/README.md`:
- Around line 81-83: Update the manifest validator advisory warning in the
README to remove the obsolete uuid advisory, while retaining the adm-zip warning
and the existing restriction against untrusted manifest or archive input.

In `@docs/getting-started.md`:
- Line 19: Update the TypeScript baseline statement in the getting-started
documentation to explicitly exclude the legacy Cypress setup documented in
docs/testing.md, which remains on TypeScript 5 with its non-strict contract.
Preserve the existing TypeScript 6 baseline for all other packages, including
apps/office-addin, and clarify that no syncpack exception is needed beyond this
documented Cypress exception.

In `@project/2026-07-07-pr4643-office-addin-review.md`:
- Around line 58-66: Update both fenced manifest examples in the documentation
section around the SourceLocation and IconUrl snippets to use the xml language
tag, including the opening fences while preserving their contents and closing
fences.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 69496de5-9d8f-481e-9692-11669a1d4dcb

📥 Commits

Reviewing files that changed from the base of the PR and between c8de9c8 and 86c7fcc.

⛔ Files ignored due to path filters (5)
  • apps/docs/static/office-addin/content.js.map is excluded by !**/*.map
  • apps/docs/static/office-addin/polyfill.js.map is excluded by !**/*.map
  • apps/docs/static/office-addin/taskpane.js.map is excluded by !**/*.map
  • apps/docs/static/office-addin/vendor.js.map is excluded by !**/*.map
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (42)
  • .agents/skills/klicker-testing-verification/SKILL.md
  • .syncpackrc.mjs
  • apps/docs/static/office-addin/3564e456b2d9d6c8b74b.css
  • apps/docs/static/office-addin/content.html
  • apps/docs/static/office-addin/content.js
  • apps/docs/static/office-addin/content.js.LICENSE.txt
  • apps/docs/static/office-addin/manifest-taskpane.xml
  • apps/docs/static/office-addin/manifest.xml
  • apps/docs/static/office-addin/polyfill.js
  • apps/docs/static/office-addin/polyfill.js.LICENSE.txt
  • apps/docs/static/office-addin/styles.css
  • apps/docs/static/office-addin/taskpane.html
  • apps/docs/static/office-addin/taskpane.js
  • apps/docs/static/office-addin/vendor.js
  • apps/docs/static/office-addin/vendor.js.LICENSE.txt
  • apps/office-addin/.gitignore
  • apps/office-addin/CLAUDE.md
  • apps/office-addin/README.md
  • apps/office-addin/eslint.config.mjs
  • apps/office-addin/manifest.xml
  • apps/office-addin/package.json
  • apps/office-addin/postcss.config.cjs
  • apps/office-addin/rollup.config.js
  • apps/office-addin/scripts/clean-cache.js
  • apps/office-addin/scripts/sync-docs.mjs
  • apps/office-addin/src/content/components/App.tsx
  • apps/office-addin/src/content/components/URLForm.tsx
  • apps/office-addin/src/content/content.html
  • apps/office-addin/src/content/content.ts
  • apps/office-addin/src/content/evaluation-url.ts
  • apps/office-addin/src/content/index.tsx
  • apps/office-addin/src/content/office-utils/powerPointAPI.ts
  • apps/office-addin/src/manifest-taskpane.xml
  • apps/office-addin/src/styles.css
  • apps/office-addin/src/taskpane/index.tsx
  • apps/office-addin/src/taskpane/taskpane.html
  • apps/office-addin/tests/evaluation-url.test.mjs
  • apps/office-addin/tsconfig.json
  • docs/getting-started.md
  • docs/log.md
  • docs/testing.md
  • project/2026-07-07-pr4643-office-addin-review.md
💤 Files with no reviewable changes (15)
  • apps/office-addin/src/taskpane/index.tsx
  • apps/docs/static/office-addin/taskpane.html
  • apps/docs/static/office-addin/vendor.js.LICENSE.txt
  • apps/office-addin/src/manifest-taskpane.xml
  • apps/office-addin/src/taskpane/taskpane.html
  • apps/docs/static/office-addin/polyfill.js.LICENSE.txt
  • apps/docs/static/office-addin/content.js.LICENSE.txt
  • apps/office-addin/src/content/index.tsx
  • apps/office-addin/postcss.config.cjs
  • apps/office-addin/src/content/components/App.tsx
  • apps/office-addin/src/content/components/URLForm.tsx
  • apps/docs/static/office-addin/taskpane.js
  • apps/office-addin/src/content/office-utils/powerPointAPI.ts
  • apps/docs/static/office-addin/manifest-taskpane.xml
  • apps/office-addin/scripts/clean-cache.js

Comment thread .agents/skills/klicker-testing-verification/SKILL.md Outdated
Comment thread apps/office-addin/README.md Outdated
Comment thread docs/getting-started.md Outdated
Comment thread project/2026-07-07-pr4643-office-addin-review.md Outdated
Copilot AI review requested due to automatic review settings July 22, 2026 16:50

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot AI review requested due to automatic review settings July 22, 2026 17:04

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot AI review requested due to automatic review settings July 26, 2026 08:58

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/docs/static/office-addin/content.js`:
- Line 1: Update the source implementation behind the Office add-in settings
helpers so all settings set/remove mutations and their subsequent saveAsync
calls are serialized through a shared promise queue, preserving mutation order
across embed, migration, and change-URL flows. Ensure UI state updates only
after the queued persistence operation completes, then regenerate
apps/docs/static/office-addin using the documented docs build.
- Line 1: Update the legacy settings migration and Clear Saved URL flows to
persist rollback changes after an initial saveAsync failure: after restoring or
removing settings, invoke saveAsync again and report if that rollback save also
fails. Anchor the changes in the migration logic inside the Office.onReady
handler and the changeUrlButton click handler, preserving their existing
user-facing failure messages while adding rollback-specific reporting.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: af21b043-101a-40de-a8eb-086cc7922179

📥 Commits

Reviewing files that changed from the base of the PR and between 86c7fcc and bc5d733.

⛔ Files ignored due to path filters (1)
  • apps/docs/static/office-addin/content.js.map is excluded by !**/*.map
📒 Files selected for processing (10)
  • .agents/skills/klicker-testing-verification/SKILL.md
  • apps/docs/static/office-addin/content.js
  • apps/office-addin/README.md
  • apps/office-addin/src/content/content.ts
  • apps/office-addin/src/content/evaluation-url.ts
  • apps/office-addin/tests/evaluation-url.test.mjs
  • docs/getting-started.md
  • docs/testing.md
  • project/2026-07-07-pr4643-office-addin-review.md
  • sonar-project.properties
🚧 Files skipped from review as they are similar to previous changes (5)
  • docs/testing.md
  • apps/office-addin/README.md
  • docs/getting-started.md
  • project/2026-07-07-pr4643-office-addin-review.md
  • apps/office-addin/src/content/content.ts

Comment thread apps/docs/static/office-addin/content.js Outdated
Copilot AI review requested due to automatic review settings July 26, 2026 09:32

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@rschlaefli
rschlaefli requested a review from sjschlapbach July 26, 2026 18:43
Copilot AI review requested due to automatic review settings July 26, 2026 18:57

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot AI review requested due to automatic review settings July 26, 2026 19:13

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@sonarqubecloud

Copy link
Copy Markdown

@rschlaefli
rschlaefli requested review from sjschlapbach and removed request for sjschlapbach July 26, 2026 19:19
@rschlaefli
rschlaefli merged commit 7ed533e into v3 Jul 27, 2026
34 checks passed
@rschlaefli
rschlaefli deleted the NewPPT branch July 27, 2026 19:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement size:XXL This PR changes 1000+ lines, ignoring generated files.

Development

Successfully merging this pull request may close these issues.

4 participants