Skip to content

v3.0.1

Latest
Latest

Choose a tag to compare

View all tags
@simonguo simonguo released this 30 Dec 03:58
· 10 commits to main since this release
v3.0.1
8afae30

A patch release that refines example projects, improves documentation structure, and enhances developer experience.

🎯 Improvements

Example Projects Refactoring

All example projects (Vite, Webpack, Rollup, esbuild, Next.js) now feature a two-page structure for better clarity:

  • 📦 Unplugin Demo Page: Showcases the primary feature - importing markdown files directly as React components
  • ⚡ Basic Usage Page: Demonstrates traditional CodeView usage with inline code strings

This separation makes it easier for developers to understand both usage patterns and choose the right approach for their needs.

Simplified Configuration

  • Removed alias configurations: All examples now rely on pnpm workspace's automatic package linking
  • Cleaner configs: Minimal, production-ready configuration examples
  • No manual setup: Zero-config markdown imports work out of the box

Enhanced Documentation

  • Updated docs link: Now points to https://rcv-rsuite.vercel.app/
  • Consolidated installation: Merged InstallationPage into QuickStartPage for streamlined onboarding
  • Interactive demos: Rich markdown examples with multiple interactive components (Timer, Color Picker, Todo List)

TypeScript Support

  • Global type declarations: Centralized .md module types in @react-code-view/unplugin/markdown
  • No local declarations needed: Examples reference types via tsconfig.json
  • Better IDE support: Full autocomplete and type checking for markdown imports

Build & Compatibility Fixes

  • ESM/CJS interop: Improved module resolution for webpack plugin
  • Rollup support: Fixed resolveId hook to properly delegate to node-resolve plugin
  • Next.js compatibility: Removed unused imports and fixed ESLint errors

What's Changed

Example Structure

examples/
├── vite/
│   ├── src/
│   │   ├── App.tsx              # Navigation between pages
│   │   ├── pages/
│   │   │   ├── UnpluginPage.tsx # Markdown import demo
│   │   │   └── BasicPage.tsx    # Traditional usage
│   │   └── docs/
│   │       └── unplugin-demo.md # Interactive examples
├── webpack/                      # Same structure
├── rollup/                       # Same structure
├── esbuild/                      # Same structure
└── nextjs/
    └── app/
        ├── unplugin/            # Route: /unplugin
        ├── basic/               # Route: /basic
        └── layout.tsx           # Shared navigation

Configuration Simplification

Before (v3.0.0):

// Needed manual alias configuration
resolve: {
  alias: {
    '@react-code-view/react': path.resolve(__dirname, '../../packages/react/src'),
    '@react-code-view/core': path.resolve(__dirname, '../../packages/core/src')
  }
}

After (v3.0.1):

// Just add the plugin - pnpm workspace handles the rest
import reactCodeView from '@react-code-view/unplugin/vite';

export default defineConfig({
  plugins: [react(), reactCodeView()]
});

TypeScript Setup

Before:

// Each example needed local declaration file
declare module '*.md' {
  const Component: React.FC;
  export default Component;
}

After:

// Just reference the global types in tsconfig.json
{
  "compilerOptions": {
    "types": ["@react-code-view/unplugin/markdown"]
  }
}

Bug Fixes

  • Fixed Rollup example markdown import resolution
  • Removed unused React imports in Next.js example
  • Fixed ESLint arrow-parens errors in example code
  • Corrected documentation links throughout the project

Package Versions

  • react-code-view: 3.0.1
  • @react-code-view/react: 3.0.1
  • @react-code-view/core: 3.0.1
  • @react-code-view/unplugin: 3.0.1

Migration from v3.0.0

No breaking changes! This is a drop-in replacement. However, you may want to:

  1. Simplify your config: Remove manual alias configurations if using pnpm workspace
  2. Update tsconfig: Reference global markdown types instead of local declarations
  3. Check examples: Review the new two-page structure for inspiration

Links

Assets 2
Loading