Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Oct 27, 2025

Implement plugin example implementations (spec-kit)

Summary

This PR adds 5 comprehensive plugin examples to the examples/ directory that demonstrate core FDO SDK features. The examples follow a progressive learning path from basic plugin creation (01) to advanced DOM generation (05), with each example including 20%+ inline documentation, error handling, customization markers, and common pitfalls comments.

New files added:

  • examples/01-basic-plugin.ts - Basic plugin lifecycle and rendering (151 lines, 57% comments)
  • examples/02-interactive-plugin.ts - Interactive UI with message handlers (330 lines, 31.8% comments)
  • examples/03-persistence-plugin.ts - Data persistence with StoreDefault/StoreJson (465 lines, 22.8% comments)
  • examples/04-ui-extensions-plugin.ts - Quick actions and side panel integration (567 lines, 27.2% comments)
  • examples/05-advanced-dom-plugin.ts - Advanced DOM generation with CSS-in-JS (562 lines, 20.3% comments)
  • examples/README.md - Usage guide with troubleshooting and contributing sections
  • examples/metadata-template.ts - Reusable plugin metadata template
  • examples/tsconfig.json - TypeScript strict mode configuration

Modified files:

  • package.json - Added examples/ to npm distribution files
  • specs/002-plugin-examples/tasks.md - Marked all 54 tasks as completed

All existing SDK tests pass (383 tests, 97.85% coverage).

Review & Testing Checklist for Human

This is a YELLOW risk PR (new example files, no SDK code changes, but examples not validated in actual application).

  • Manually test at least 2-3 examples in the FDO desktop application - Copy an example (start with 01-basic-plugin.ts), customize it, and verify it loads and runs correctly. Check that handlers work (example 02), storage persists (example 03), and UI extensions appear (example 04).

  • Verify inline documentation accuracy - Spot-check comments in examples 02-04 to ensure claims about behavior (e.g., "handler will be triggered", "data persists across restarts") are accurate based on actual SDK behavior.

  • Check examples follow SDK conventions - Review 1-2 example files to confirm they follow the same code style, naming patterns, and API usage as the main SDK codebase (compare with files in src/).

Test Plan

  1. Install the SDK from this branch: npm install from the repo
  2. Copy examples/01-basic-plugin.ts to a test directory
  3. Customize the metadata and try loading it in FDO - verify it initializes and renders
  4. Try examples/02-interactive-plugin.ts - click buttons and submit forms to verify handlers work
  5. Try examples/03-persistence-plugin.ts - save preferences, restart app, verify data persists
  6. Check that examples/ directory is included when you run npm pack

Notes

  • Examples were created based on SDK API documentation and existing patterns but haven't been run in the actual FDO application
  • TypeScript compilation in isolation fails (expected - examples import from @anikitenko/fdo-sdk which users will have installed)
  • All 54 spec-kit tasks completed as documented in specs/002-plugin-examples/tasks.md
  • Examples include SDK version compatibility headers (Compatible with SDK v1.x)

- Created feature specification with 5 prioritized user stories (P1-P5)
- Completed clarification phase with 5 questions answered
- Generated implementation plan with technical context and research
- Created data model, quickstart guide, and contracts documentation
- Updated GitHub Copilot context with feature information

Feature: 002-plugin-examples
Branch: 002-plugin-examples
Co-Authored-By: onikiten@softserveinc.com <alexvwan@gmail.com>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions
Copy link

github-actions bot commented Oct 27, 2025

Coverage report

St.
Category Percentage Covered / Total
🟢 Statements 97.86% 411/420
🟢 Branches 94.53% 190/201
🟢 Functions 100% 137/137
🟢 Lines 97.85% 409/418

Test suite run success

383 tests passing in 28 suites.

Report generated by 🧪jest coverage report action from deb22ca

Oleksandr Nykytenko (SOFTSERVE) and others added 4 commits October 27, 2025 16:20
- C1 (HIGH): Added error handling tasks for all 5 examples (T013, T018, T025, T036, T044)
- C2 (MEDIUM): Added customization guidance tasks with 'CUSTOMIZE HERE' markers for all examples (T014, T021, T028, T037, T045)
- C3 (MEDIUM): Added logging demonstration to T011 (basic plugin init/render with this.log, this.error)
- C4 (MEDIUM): Added async patterns demonstration to T016 (interactive plugin)
- C5 (MEDIUM): Added common pitfalls comments tasks for all examples (T015, T022, T029, T038, T046)
- I1 (MEDIUM): Clarified metadata-template.ts purpose in plan.md project structure
- I2 (MEDIUM): Clarified examples/README.md vs quickstart.md relationship in T004 and plan.md
- A1 (MEDIUM): Added measurement approach for SC-003 and SC-005 success criteria in spec.md

Updated task numbering throughout to accommodate new tasks (54 total tasks, up from 38).
Added validation tasks T049-T051 to ensure all examples include error handling, customization markers, and common pitfalls comments.

Co-Authored-By: onikiten@softserveinc.com <alexvwan@gmail.com>
- Add 5 comprehensive plugin examples (01-05)
- Create examples/README.md with troubleshooting and contributing sections
- Add metadata-template.ts for reusable plugin metadata
- Add examples/tsconfig.json for TypeScript strict mode
- Update package.json to include examples/ in npm distribution
- Mark all tasks (T001-T054) as completed in tasks.md

Examples cover:
- 01-basic-plugin.ts: Plugin lifecycle and rendering
- 02-interactive-plugin.ts: Interactive UI with handlers
- 03-persistence-plugin.ts: Data persistence with storage
- 04-ui-extensions-plugin.ts: Quick actions and side panels
- 05-advanced-dom-plugin.ts: Advanced DOM generation

All examples include:
- 20%+ inline documentation ratio
- CUSTOMIZE HERE markers
- COMMON PITFALL comments
- Error handling
- SDK v1.x compatibility headers

Co-Authored-By: onikiten@softserveinc.com <alexvwan@gmail.com>
@anikitenko anikitenko merged commit 4b66306 into main Oct 27, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant