@edclub/vite-plugins

@edclub/vite-plugins

Vite plugins for EDClub experiences that handle manifest processing and app configuration.

Overview

This package provides three plugins that transform manifest.json files into app-specific configurations served as app-manifest.json:

• PlayerPlugin: For player apps (generates sampleLessons)
• EditorPlugin: For editor apps (generates lessonTypes)
• ReplayPlugin: For replay apps (generates sampleAttempts)

Features

Auto-Discovery Mode (Recommended)

The plugins now support automatic discovery of configuration files from subdirectories:

configs/
├── sample-lessons/   # For PlayerPlugin (sampleLessons)
├── template-lessons/ # For EditorPlugin (lessonTypes)
└── sample-attempts/  # For ReplayPlugin (sampleAttempts)

Each JSON file in these directories should contain complete metadata:

Example lesson file (configs/sample-lessons/green-version.json):

{
  "name": "Green Version",
  "activity": {
    "text": "green mode",
    "rgb": [50, 150, 50]
  }
}

Example lesson type file (configs/template-lessons/spelling.json):

{
  "name": "Spelling Definitions",
  "description": "Learn new words with audio",
  "image": "/lesson-type-imgs/spelling_cards.png",
  "template": {
    "type": "spelling",
    "settings": {}
  }
}

Example attempt file (configs/sample-attempts/attempt-1.json):

{
  "name": "Attempt 1",
  "attempt": {
    "progress": 100,
    "value": "done"
  },
  "lesson": {
    "name": "Green Version",
    "activity": {
      "text": "green mode",
      "rgb": [50, 150, 50]
    }
  }
}

Example attempt with lesson reference (configs/sample-attempts/attempt-2.json):

{
  "name": "Attempt 2",
  "attempt": {
    "progress": 30,
    "value": "done - attempt 2"
  },
  "lesson": "green-version.json"
}

When using lesson references, the plugin will automatically resolve the file from the configs/sample-lessons/ directory.

Legacy Mode (Backward Compatible)

If the auto-discovery directories don't exist, the plugins fall back to reading from manifest.json:

{
  "app": "edclub.testapp",
  "name": "Test App",
  "version": "1",
  "sampleLessons": [
    {
      "name": "Lesson 1",
      "src": "configs/lesson1.json"
    }
  ]
}

Usage

In your Vite config:

import { PlayerPlugin } from "@edclub/vite-plugins";

export default defineConfig({
  plugins: [
    react(),
    PlayerPlugin(), // Uses manifest.json from parent directory
  ],
});

The plugin will:

• Generate an app-manifest.json file in the build output
• Serve the manifest at /app-manifest.json during development

Development

# Build the plugin
pnpm build

# Run tests
pnpm test

# Watch mode
pnpm dev

Testing

The package includes comprehensive tests for all plugins:

# Run tests once
pnpm test:once

# Run tests in watch mode
pnpm test