v3.0.1

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

• Documentation: https://rcv-rsuite.vercel.app/
• npm: https://www.npmjs.com/package/react-code-view/v/3.0.1
• GitHub Release: https://github.com/simonguo/react-code-view/releases/tag/v3.0.1
• Previous version (v3.0.0): https://www.npmjs.com/package/react-code-view/v/3.0.0

v3.0.0

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

• Documentation: https://rcv-rsuite.vercel.app/
• PR #61: #61 (Native markdown parsing)
• PR #59: #59 (Monorepo migration)
• npm: https://www.npmjs.com/package/react-code-view/v/3.0.0
• Previous version (v2.6.1): https://www.npmjs.com/package/react-code-view/v/2.6.1

2.4.0

What's Changed

• feat: add support for renderExtraFooter by @simonguo in #55

Full Changelog: 2.3.1...2.4.0

2.3.0

What's Changed

• feat: add support for one-click copy code by @simonguo in #53

Full Changelog: 2.2.1...2.3.0

2.2.1

What's Changed

• fix(CodeEditor): fix Codemirror being initialized twice by @simonguo in #40

Full Changelog: 2.2.0...2.2.1

2.2.0

What's Changed

• improve(transform): use sucrase instead of @swc/wasm-web to improve t… by @simonguo in #38
• fix(Renderer): fix timely re-renders by @simonguo in #39

Full Changelog: 2.1.0...2.2.0

2.1.0

What's Changed

• test: add test scripts by @simonguo in #34
• feat: support for rendering multiple examples in markdown by @simonguo in #35
• chore: branch master renamed to main by @simonguo in #36
• Keep calm and commit by @simonguo in #37

Full Changelog: 2.0.0...2.1.0

v2.0.0

Features

Use @swc/wasm-web instead of babel to compile code in the browser.

Importing babel.min.js on the page will no longer be required. How it is used in v1 (legacy)

Refactored webpack loader for markdown.

Webpack Configuration Guide https://github.com/simonguo/react-code-view#configure-webpack

// v1

export default {
  module: {
     rules: [
      {
        test: /\.md$/,
        use: [{
          loader: 'html-loader'
        }, {
          loader: 'markdown-loader',
          options: {
            renderer: markdownRenderer()
          }
        }]
      }
    ]

  }
};

// v2
export default {
  module: {
    rules: [
      {
        test: /\.md$/,
        use:[
          loader: 'react-code-view/webpack-md-loader',
          options:{
            parseLanguages: ['typescript','rust']
          }
        ]
      }
    ]
  }
};

Props redefined

v1

Name	Type	Default value	Description
babelTransformOptions	Object	{ presets: ['stage-0', 'react', 'es2015'] }	Babel configuration parameters [options][babeljs]
dependencies	Object		Dependent components.
renderToolbar	Function		Custom toolbar.
showCode	boolean	true	Display code.
theme	string	'light'	Theme, options light and dark.

v2

Name	Type	Default value	Description
afterCompile	(code: string) => string		Executed after compiling the code
beforeCompile	(code: string) => string		Executed before compiling the code
children	any		The code to be rendered is executed. Usually imported via markdown-loader
compiler	(code: string) => string		A compiler that transforms the code. Use swc.transformSync by default
dependencies	object		Dependent objects required by the executed code
editable	boolean	false	Renders a code editor that can modify the source code
editor	object		Editor properties
onChange	(code?: string) => void		Callback triggered after code change
renderToolbar	(buttons: ReactNode) => ReactNode		Customize the rendering toolbar
sourceCode	string		The code to be rendered is executed
theme	'light' , 'dark'	'light'	Code editor theme, applied to CodeMirror
compileOptions	object	defaultTransformOptions	swc configuration https://swc.rs/docs/configuration/compilation