@lms-cms/renderer

Renderer component for the LMS CMS system, providing content display and presentation capabilities.

Overview

This package contains the renderer components that display educational content to end users. It transforms the structured data from the core system into beautifully rendered user interfaces, leveraging React Query for efficient data fetching and caching.

Installation

npm install @lms-cms/renderer

Dependencies

• @lms-cms/core: Core LMS CMS functionality
• @tanstack/react-query: Data fetching and state management
• React (peer dependency): >=18.0.0
• React DOM (peer dependency): >=18.0.0

Features

• Course Renderer: Display course information and structure
• Lesson Renderer: Render lesson content with interactive elements
• Block Renderer: Render individual content blocks
• Mathematical Rendering: KaTeX-powered equation display
• Progress Tracking: Track user learning progress
• Responsive Design: Mobile-friendly content display
• Accessibility: WCAG compliant components

Usage

Course Renderer

import { CourseRenderer } from '@lms-cms/renderer';

function CoursePage({ courseId }) {
  return (
    <CourseRenderer
      courseId={courseId}
      onLessonSelect={(lessonId) => console.log('Selected:', lessonId)}
    />
  );
}

Lesson Renderer

import { LessonRenderer } from '@lms-cms/renderer';

function LessonPage({ lessonId }) {
  return (
    <LessonRenderer
      lessonId={lessonId}
      onComplete={() => console.log('Lesson completed')}
      onNext={() => console.log('Next lesson')}
    />
  );
}

Block Renderer

import { BlockRenderer } from '@lms-cms/renderer';

function ContentBlock({ block }) {
  return (
    <BlockRenderer
      block={block}
      onInteraction={(data) => console.log('Interaction:', data)}
    />
  );
}

Renderer Components

CourseRenderer

Displays course overview and navigation:

• Course title and description
• Lesson listing with progress indicators
• Course metadata and instructor info
• Enrollment and completion status

LessonRenderer

Renders lesson content with navigation:

• Sequential block rendering
• Progress tracking
• Navigation controls
• Interactive elements and assessments

BlockRenderer

Renders individual content blocks:

• TextBlock: Formatted text content
• ImageBlock: Image display with captions
• VideoBlock: Video player with controls
• PDFBlock: PDF viewer and navigation
• QuizBlock: Interactive quiz interface
• AssignmentBlock: Assignment submission interface

ProgressIndicator

Shows learning progress:

• Course completion percentage
• Lesson progress bars
• Achievement badges
• Time tracking

Data Fetching

The renderer uses React Query for efficient data management:

import { useCourse, useLesson, useProgress } from '@lms-cms/renderer';

function CourseComponent({ courseId }) {
  const { data: course, isLoading, error } = useCourse(courseId);
  const { data: progress } = useProgress(courseId);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <CourseRenderer course={course} progress={progress} />;
}

Customization

Theming

The renderer supports custom theming through CSS variables:

.lms-renderer {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --warning-color: #ffc107;
  --error-color: #dc3545;
  --background-color: #ffffff;
  --text-color: #333333;
}

Custom Block Renderers

Create custom renderers for specific block types:

import { BlockRenderer } from '@lms-cms/renderer';

function CustomBlockRenderer({ block, ...props }) {
  switch (block.type) {
    case 'custom':
      return <MyCustomBlock block={block} {...props} />;
    default:
      return <DefaultBlockRenderer block={block} {...props} />;
  }
}

Layout Components

Use layout components for custom page structures:

import { CourseLayout, LessonLayout } from '@lms-cms/renderer';

function CustomCoursePage({ courseId }) {
  return (
    <CourseLayout courseId={courseId}>
      <div>Custom sidebar content</div>
      <div>Custom main content</div>
    </CourseLayout>
  );
}

Performance Optimization

Lazy Loading

The renderer supports lazy loading for better performance:

import { lazy } from "react";

const LazyLessonRenderer = lazy(() =>
  import("@lms-cms/renderer").then((mod) => ({
    default: mod.LessonRenderer,
  })),
);

Caching

React Query provides intelligent caching:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000, // 10 minutes
    },
  },
});

Development

# Install dependencies
npm install

# Run development build
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Type checking
npm run type-check

Scripts

• npm run build: Build the package for production
• npm run dev: Build in watch mode for development
• npm run test: Run tests with Vitest
• npm run type-check: Run TypeScript type checking without emitting files

Best Practices

• Use React Query for all data fetching operations
• Implement proper loading and error states
• Ensure accessibility compliance (WCAG 2.1 AA)
• Optimize for mobile devices and responsive design
• Test with various content types and sizes
• Implement proper error boundaries
• Use semantic HTML for better SEO and accessibility

Architecture

src/
  components/      # Renderer components
  hooks/          # Custom React hooks
  queries/        # React Query configurations
  utils/          # Rendering utilities
  types/          # Renderer-specific types
  styles/         # CSS and styling
  index.ts        # Main exports