Skip to content

v3.0.0

Choose a tag to compare

View all tags
@simonguo simonguo released this 29 Dec 11:12
· 20 commits to main since this release
v3.0.0
8a298f8

A major overhaul that migrates react-code-view into a PNPM/Turbo monorepo, unifies build integrations, adds native markdown parsing, and refreshes the API/docs. This release is breaking compared to 2.6.1.

🎉 Major Features

Native Markdown Parsing with parseHTML

CodeView now natively parses and renders markdown files with embedded code blocks at runtime - no build step required!

  • Zero-config markdown support: Import .md files and CodeView automatically detects and renders code blocks
  • Runtime parsing: Uses the new parseHTML utility for consistent behavior
  • Build-time optimization: @react-code-view/unplugin with useNativeParser: true (default) generates CodeView components
  • Type-safe imports: Global TypeScript declarations for .md files included in unplugin package
  • Consistent API: Same behavior whether using ?raw imports or unplugin
// Runtime parsing (Vite example)
import demoMarkdown from './demo.md?raw';

<CodeView dependencies={{ useState }}>
  {demoMarkdown}
</CodeView>

// Or use unplugin for build-time processing
import UnpluginDemo from './unplugin-demo.md';

<UnpluginDemo 
  theme="rcv-theme-default"
  dependencies={{ useState }}
/>

Unified Build Plugin Architecture

  • New @react-code-view/unplugin package supporting Vite, Webpack, Rollup, esbuild, and Rspack
  • Replaces legacy webpack-md-loader with modern, framework-agnostic solution
  • Native parser mode enabled by default for optimal bundle size

Monorepo Migration

  • PNPM + Turbo for efficient workspace management
  • Updated CI/CD with Node 18+, caching, and automated deployments
  • Changesets for versioning and release management

Highlights

  • Native markdown parsing: Import .md files as React components with zero config
  • Unified build plugin: @react-code-view/unplugin for all major bundlers
  • Simplified imports: CodeView is the default export from @react-code-view/react
  • CSS-only styles: import '@react-code-view/react/styles/index.css' (Less removed)
  • Stable hooks: useCodeExecution with stable execute ref and updateCode alias
  • Enhanced docs: Comprehensive examples, migration guides, and interactive demos

Breaking Changes

  • Tooling requirements: Node >= 18, PNPM >= 8 (dev workflow). Update CI to match.
  • Imports: Prefer import CodeView from 'react-code-view'; adjust named imports if you targeted old paths.
  • Styles: Switch to CSS entries: import 'react-code-view/styles' (or specific CSS files). Remove Less imports.
  • Build integration: Legacy webpack-md-loader removed. Use the unified unplugin instead.

Migration Guide (v2.6.1 → v3.0.0)

Use @react-code-view/react as the primary entry and the new unplugin across bundlers.

  1. Install

    pnpm add @react-code-view/react @react-code-view/unplugin

  2. Imports

    import CodeView from '@react-code-view/react';
import { Renderer, MarkdownRenderer } from '@react-code-view/react';
// (Optional) re-exported convenience:
// import CodeView from 'react-code-view';

  3. Styles (CSS)

    import '@react-code-view/react/styles/index.css';

  4. Build plugin (Vite example)

    // vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import reactCodeView from '@react-code-view/unplugin/vite';

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

    Webpack: @react-code-view/unplugin/webpack
    Rollup: @react-code-view/unplugin/rollup
    esbuild: @react-code-view/unplugin/esbuild
    Rspack: @react-code-view/unplugin/rspack

  5. Hook usage (useCodeExecution)

    import { useCodeExecution } from '@react-code-view/react';

const { element, error, code, updateCode, execute } = useCodeExecution(
  initialCode,
  {
    dependencies: { Button },
    transformOptions: { transforms: ['typescript', 'jsx'] },
    beforeCompile: (c) => c.trim(),
    afterCompile: (c) => c,
    onError: (e) => console.error('Execution error:', e)
  }
);

  6. Remove legacy webpack-md-loader

    • Replace with the unified unplugin (see entries above).

New Features

Core Package (@react-code-view/core)

  • parseHTML utility: Native markdown parser that detects <!--start-code--> and <!--end-code--> markers
  • Dynamic shiki import: Fixes ESM/CJS compatibility issues
  • Improved error handling: Better error messages for syntax highlighting failures

React Package (@react-code-view/react)

  • Enhanced CodeView component: Automatically detects and parses markdown content
  • Split internal architecture: CodeViewInternal for proper hooks usage
  • Backward compatible: Existing code continues to work without changes

Unplugin Package (@react-code-view/unplugin)

  • Native parser mode: useNativeParser: true (default) generates CodeView components
  • TypeScript declarations: Global .md module types included
  • Framework support: Vite, Webpack, Rollup, esbuild, Rspack
  • Explicit CJS exports: Fixed webpack plugin compatibility

Documentation & Examples

  • Two-page structure: All examples now have separate Unplugin Demo and Basic Usage pages
  • Interactive markdown demos: Live examples showing native parsing capabilities
  • Simplified configs: Examples rely on pnpm workspace linking (no manual aliases)
  • Next.js example: Full App Router support with markdown imports

Technical Improvements

  • ESM/CJS compatibility: Fixed module resolution across all bundlers
  • Type safety: Comprehensive TypeScript declarations for markdown imports
  • Smaller bundles: Native parser mode avoids pre-rendered HTML
  • Better DX: Zero-config markdown support out of the box

Package Versions

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

Links

Assets 2
Loading