React Code View Versions Save

What's Changed

• feat: add support for one-click copy code by @simonguo in https://github.com/simonguo/react-code-view/pull/53

Full Changelog: https://github.com/simonguo/react-code-view/compare/2.2.1...2.3.0

What's Changed

• fix(CodeEditor): fix Codemirror being initialized twice by @simonguo in https://github.com/simonguo/react-code-view/pull/40

Full Changelog: https://github.com/simonguo/react-code-view/compare/2.2.0...2.2.1

What's Changed

• improve(transform): use sucrase instead of @swc/wasm-web to improve t… by @simonguo in https://github.com/simonguo/react-code-view/pull/38
• fix(Renderer): fix timely re-renders by @simonguo in https://github.com/simonguo/react-code-view/pull/39

Full Changelog: https://github.com/simonguo/react-code-view/compare/2.1.0...2.2.0

What's Changed

• test: add test scripts by @simonguo in https://github.com/simonguo/react-code-view/pull/34
• feat: support for rendering multiple examples in markdown by @simonguo in https://github.com/simonguo/react-code-view/pull/35
• chore: branch master renamed to main by @simonguo in https://github.com/simonguo/react-code-view/pull/36
• Keep calm and commit by @simonguo in https://github.com/simonguo/react-code-view/pull/37

Full Changelog: https://github.com/simonguo/react-code-view/compare/2.0.0...2.1.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