From e80564e58888eed3252b7c9480b6fcc9e664ec4d Mon Sep 17 00:00:00 2001 From: simonguo Date: Mon, 29 Dec 2025 13:12:40 +0800 Subject: [PATCH 1/9] refactor!: v3.0.0 major overhaul - Hook: stabilize useCodeExecution (refs, stable execute, updateCode alias) - Tests: fix TypeScript matchers and marked renderer signature; remove unused vars - Docs: README requirements, hook example, CI/CD notes - CI: Node 18 + PNPM, cache; turbo scripts; gh-pages publish docs/dist - Publish: Changesets + npm provenance (OIDC), remove NODE_AUTH_TOKEN - Misc: align workspace configs --- .eslintrc.json | 37 + .github/workflows/gh-pages.yml | 14 +- .github/workflows/nodejs-ci.yml | 32 +- .github/workflows/nodejs-publish.yml | 38 +- .gitignore | 49 +- .prettierrc | 8 + README.md | 322 +- __tests__/CodeEditor-test.js | 54 - __tests__/CodeView-test.js | 53 - __tests__/ErrorBoundary-test.js | 14 - __tests__/MarkdownRenderer-test.js | 152 - __tests__/Preview-test.js | 22 - __tests__/Renderer-test.js | 35 - __tests__/parseHTML-test.js | 64 - babel.config.js | 24 - docs/README.md | 194 + docs/components/CodeBlock.tsx | 58 + docs/components/FeatureCard.tsx | 17 + docs/components/Header.tsx | 56 + docs/components/Section.tsx | 19 + docs/components/Sidebar.tsx | 74 + docs/example.md | 64 - docs/gh-pages.js | 6 - docs/index.html | 21 +- docs/index.tsx | 127 +- docs/index.tsx.backup | 484 + docs/pages/BuildToolsPage.tsx | 283 + docs/pages/ComponentsPage.tsx | 433 + docs/pages/InstallationPage.tsx | 98 + docs/pages/OverviewPage.tsx | 159 + docs/pages/QuickStartPage.tsx | 85 + docs/pages/examples/ComponentsExample.tsx | 91 + docs/pages/examples/CounterExample.tsx | 46 + docs/pages/examples/ThemeExample.tsx | 95 + docs/pages/examples/TodoExample.tsx | 85 + docs/pages/examples/TypeScriptExample.tsx | 78 + docs/styles/index.css | 819 ++ docs/styles/index.css.backup | 679 + docs/styles/index.less | 18 - docs/styles/markdown.less | 71 - docs/tsconfig.json | 24 + docs/webpack.config.js | 73 - examples/esbuild/README.md | 75 + examples/esbuild/build.js | 73 + examples/esbuild/package.json | 23 + examples/esbuild/public/bundle.css | 1 + examples/esbuild/public/bundle.css.map | 7 + examples/esbuild/public/bundle.js | 480 + examples/esbuild/public/bundle.js.map | 7 + examples/esbuild/public/index.html | 30 + examples/esbuild/src/App.tsx | 324 + examples/esbuild/src/index.tsx | 13 + examples/esbuild/tsconfig.json | 19 + examples/rollup/README.md | 66 + examples/rollup/package.json | 32 + examples/rollup/public/index.html | 12 + examples/rollup/rollup.config.js | 52 + examples/rollup/src/App.tsx | 315 + examples/rollup/src/index.css | 15 + examples/rollup/src/index.tsx | 14 + examples/rollup/tsconfig.json | 19 + examples/vite/README.md | 59 + examples/vite/index.html | 12 + examples/vite/package.json | 23 + examples/vite/src/App.tsx | 255 + examples/vite/src/index.css | 15 + examples/vite/src/main.tsx | 14 + examples/vite/tsconfig.json | 24 + examples/vite/vite.config.ts | 12 + examples/webpack/README.md | 57 + examples/webpack/package.json | 26 + examples/webpack/public/index.html | 11 + examples/webpack/src/App.tsx | 260 + examples/webpack/src/index.css | 15 + examples/webpack/src/index.tsx | 14 + examples/webpack/tsconfig.json | 19 + examples/webpack/webpack.config.js | 38 + gulpfile.js | 57 - jest.config.js | 12 - package.json | 144 +- packages/core/README.md | 72 + packages/core/package.json | 56 + .../core/src/__tests__/highlighter.test.ts | 118 + packages/core/src/__tests__/renderer.test.ts | 66 + packages/core/src/__tests__/transform.test.ts | 72 + packages/core/src/highlighter.ts | 116 + packages/core/src/index.ts | 14 + packages/core/src/renderer.ts | 29 + packages/core/src/transform.ts | 60 + packages/core/src/types.ts | 67 + packages/core/tsconfig.json | 8 + packages/core/tsup.config.ts | 12 + packages/core/vitest.config.ts | 19 + packages/react-code-view/README.md | 192 + packages/react-code-view/package.json | 56 + packages/react-code-view/src/index.ts | 66 + .../react-code-view/styles/highlight.css | 29 +- packages/react-code-view/styles/index.css | 396 + packages/react-code-view/tsconfig.json | 8 + packages/react-code-view/tsup.config.ts | 13 + packages/react/README.md | 211 + packages/react/package.json | 93 + .../src/__tests__/ErrorBoundary.test.tsx | 71 + .../useCodeExecution.advanced.test.tsx | 57 + .../__tests__/useCodeExecution.basic.test.tsx | 30 + .../src/__tests__/useCodeExecution.test.tsx | 117 + packages/react/src/__tests__/utils.test.ts | 72 + packages/react/src/components/CodeEditor.tsx | 194 + packages/react/src/components/CodeView.tsx | 199 + .../react/src/components/CopyCodeButton.tsx | 71 + .../react/src/components/ErrorBoundary.tsx | 59 + .../react/src/components/MarkdownRenderer.tsx | 62 + packages/react/src/components/Preview.tsx | 49 + packages/react/src/components/Renderer.tsx | 70 + packages/react/src/components/index.ts | 10 + packages/react/src/hooks/index.ts | 1 + packages/react/src/hooks/useCodeExecution.ts | 131 + packages/react/src/icons/Check.tsx | 21 + packages/react/src/icons/Code.tsx | 22 + packages/react/src/icons/Copy.tsx | 22 + packages/react/src/icons/index.ts | 7 + packages/react/src/index.ts | 37 + .../react/src}/utils/canUseDOM.ts | 7 +- {src => packages/react/src}/utils/evalCode.ts | 9 +- packages/react/src/utils/index.ts | 9 + packages/react/src/utils/mergeRefs.ts | 18 + packages/react/src/utils/parseDom.ts | 14 + packages/react/src/utils/parseHTML.ts | 33 + packages/react/styles/index.css | 497 + packages/react/tsconfig.json | 9 + packages/react/tsup.config.ts | 18 + packages/react/vitest.config.ts | 23 + packages/react/vitest.setup.ts | 1 + packages/unplugin/README.md | 169 + packages/unplugin/package.json | 130 + packages/unplugin/src/core.ts | 63 + packages/unplugin/src/esbuild.ts | 23 + packages/unplugin/src/index.ts | 11 + packages/unplugin/src/rollup.ts | 22 + packages/unplugin/src/rspack.ts | 22 + packages/unplugin/src/transform.ts | 85 + packages/unplugin/src/types.ts | 62 + packages/unplugin/src/utils.ts | 63 + packages/unplugin/src/vite.ts | 23 + packages/unplugin/src/webpack.ts | 22 + packages/unplugin/tsconfig.json | 8 + packages/unplugin/tsup.config.ts | 24 + pnpm-lock.yaml | 12157 ++++++++-------- pnpm-workspace.yaml | 3 + postcss.config.js | 17 - setup-jest.js | 16 - src/CodeEditor.tsx | 82 - src/CodeView.tsx | 74 - src/CopyCodeButton.tsx | 36 - src/ErrorBoundary.tsx | 24 - src/MarkdownRenderer.tsx | 108 - src/Preview.tsx | 12 - src/Renderer.tsx | 231 - src/icons/Check.tsx | 23 - src/icons/Code.tsx | 20 - src/icons/Copy.tsx | 26 - src/index.ts | 6 - src/less/index.less | 2 - src/less/styles.less | 85 - src/less/vendors.less | 4 - src/utils/mergeRefs.ts | 23 - src/utils/parseDom.ts | 5 - src/utils/parseHTML.ts | 21 - tsconfig.base.json | 22 + tsconfig.json | 25 +- turbo.json | 26 + vite.config.ts | 24 + webpack-md-loader/html-loader.js | 46 - webpack-md-loader/index.js | 3 - webpack-md-loader/loader.js | 26 - webpack-md-loader/options.json | 44 - webpack-md-loader/renderer.js | 26 - 177 files changed, 17728 insertions(+), 7748 deletions(-) create mode 100644 .eslintrc.json create mode 100644 .prettierrc delete mode 100644 __tests__/CodeEditor-test.js delete mode 100644 __tests__/CodeView-test.js delete mode 100644 __tests__/ErrorBoundary-test.js delete mode 100644 __tests__/MarkdownRenderer-test.js delete mode 100644 __tests__/Preview-test.js delete mode 100644 __tests__/Renderer-test.js delete mode 100644 __tests__/parseHTML-test.js delete mode 100755 babel.config.js create mode 100644 docs/README.md create mode 100644 docs/components/CodeBlock.tsx create mode 100644 docs/components/FeatureCard.tsx create mode 100644 docs/components/Header.tsx create mode 100644 docs/components/Section.tsx create mode 100644 docs/components/Sidebar.tsx delete mode 100644 docs/example.md delete mode 100644 docs/gh-pages.js create mode 100644 docs/index.tsx.backup create mode 100644 docs/pages/BuildToolsPage.tsx create mode 100644 docs/pages/ComponentsPage.tsx create mode 100644 docs/pages/InstallationPage.tsx create mode 100644 docs/pages/OverviewPage.tsx create mode 100644 docs/pages/QuickStartPage.tsx create mode 100644 docs/pages/examples/ComponentsExample.tsx create mode 100644 docs/pages/examples/CounterExample.tsx create mode 100644 docs/pages/examples/ThemeExample.tsx create mode 100644 docs/pages/examples/TodoExample.tsx create mode 100644 docs/pages/examples/TypeScriptExample.tsx create mode 100644 docs/styles/index.css create mode 100644 docs/styles/index.css.backup delete mode 100644 docs/styles/index.less delete mode 100755 docs/styles/markdown.less create mode 100644 docs/tsconfig.json delete mode 100644 docs/webpack.config.js create mode 100644 examples/esbuild/README.md create mode 100644 examples/esbuild/build.js create mode 100644 examples/esbuild/package.json create mode 100644 examples/esbuild/public/bundle.css create mode 100644 examples/esbuild/public/bundle.css.map create mode 100644 examples/esbuild/public/bundle.js create mode 100644 examples/esbuild/public/bundle.js.map create mode 100644 examples/esbuild/public/index.html create mode 100644 examples/esbuild/src/App.tsx create mode 100644 examples/esbuild/src/index.tsx create mode 100644 examples/esbuild/tsconfig.json create mode 100644 examples/rollup/README.md create mode 100644 examples/rollup/package.json create mode 100644 examples/rollup/public/index.html create mode 100644 examples/rollup/rollup.config.js create mode 100644 examples/rollup/src/App.tsx create mode 100644 examples/rollup/src/index.css create mode 100644 examples/rollup/src/index.tsx create mode 100644 examples/rollup/tsconfig.json create mode 100644 examples/vite/README.md create mode 100644 examples/vite/index.html create mode 100644 examples/vite/package.json create mode 100644 examples/vite/src/App.tsx create mode 100644 examples/vite/src/index.css create mode 100644 examples/vite/src/main.tsx create mode 100644 examples/vite/tsconfig.json create mode 100644 examples/vite/vite.config.ts create mode 100644 examples/webpack/README.md create mode 100644 examples/webpack/package.json create mode 100644 examples/webpack/public/index.html create mode 100644 examples/webpack/src/App.tsx create mode 100644 examples/webpack/src/index.css create mode 100644 examples/webpack/src/index.tsx create mode 100644 examples/webpack/tsconfig.json create mode 100644 examples/webpack/webpack.config.js delete mode 100755 gulpfile.js delete mode 100644 jest.config.js create mode 100644 packages/core/README.md create mode 100644 packages/core/package.json create mode 100644 packages/core/src/__tests__/highlighter.test.ts create mode 100644 packages/core/src/__tests__/renderer.test.ts create mode 100644 packages/core/src/__tests__/transform.test.ts create mode 100644 packages/core/src/highlighter.ts create mode 100644 packages/core/src/index.ts create mode 100644 packages/core/src/renderer.ts create mode 100644 packages/core/src/transform.ts create mode 100644 packages/core/src/types.ts create mode 100644 packages/core/tsconfig.json create mode 100644 packages/core/tsup.config.ts create mode 100644 packages/core/vitest.config.ts create mode 100644 packages/react-code-view/README.md create mode 100644 packages/react-code-view/package.json create mode 100644 packages/react-code-view/src/index.ts rename src/less/themes/hljs-atom-one-dark-syntax.less => packages/react-code-view/styles/highlight.css (74%) create mode 100644 packages/react-code-view/styles/index.css create mode 100644 packages/react-code-view/tsconfig.json create mode 100644 packages/react-code-view/tsup.config.ts create mode 100644 packages/react/README.md create mode 100644 packages/react/package.json create mode 100644 packages/react/src/__tests__/ErrorBoundary.test.tsx create mode 100644 packages/react/src/__tests__/useCodeExecution.advanced.test.tsx create mode 100644 packages/react/src/__tests__/useCodeExecution.basic.test.tsx create mode 100644 packages/react/src/__tests__/useCodeExecution.test.tsx create mode 100644 packages/react/src/__tests__/utils.test.ts create mode 100644 packages/react/src/components/CodeEditor.tsx create mode 100644 packages/react/src/components/CodeView.tsx create mode 100644 packages/react/src/components/CopyCodeButton.tsx create mode 100644 packages/react/src/components/ErrorBoundary.tsx create mode 100644 packages/react/src/components/MarkdownRenderer.tsx create mode 100644 packages/react/src/components/Preview.tsx create mode 100644 packages/react/src/components/Renderer.tsx create mode 100644 packages/react/src/components/index.ts create mode 100644 packages/react/src/hooks/index.ts create mode 100644 packages/react/src/hooks/useCodeExecution.ts create mode 100644 packages/react/src/icons/Check.tsx create mode 100644 packages/react/src/icons/Code.tsx create mode 100644 packages/react/src/icons/Copy.tsx create mode 100644 packages/react/src/icons/index.ts create mode 100644 packages/react/src/index.ts rename {src => packages/react/src}/utils/canUseDOM.ts (55%) rename {src => packages/react/src}/utils/evalCode.ts (53%) create mode 100644 packages/react/src/utils/index.ts create mode 100644 packages/react/src/utils/mergeRefs.ts create mode 100644 packages/react/src/utils/parseDom.ts create mode 100644 packages/react/src/utils/parseHTML.ts create mode 100644 packages/react/styles/index.css create mode 100644 packages/react/tsconfig.json create mode 100644 packages/react/tsup.config.ts create mode 100644 packages/react/vitest.config.ts create mode 100644 packages/react/vitest.setup.ts create mode 100644 packages/unplugin/README.md create mode 100644 packages/unplugin/package.json create mode 100644 packages/unplugin/src/core.ts create mode 100644 packages/unplugin/src/esbuild.ts create mode 100644 packages/unplugin/src/index.ts create mode 100644 packages/unplugin/src/rollup.ts create mode 100644 packages/unplugin/src/rspack.ts create mode 100644 packages/unplugin/src/transform.ts create mode 100644 packages/unplugin/src/types.ts create mode 100644 packages/unplugin/src/utils.ts create mode 100644 packages/unplugin/src/vite.ts create mode 100644 packages/unplugin/src/webpack.ts create mode 100644 packages/unplugin/tsconfig.json create mode 100644 packages/unplugin/tsup.config.ts create mode 100644 pnpm-workspace.yaml delete mode 100755 postcss.config.js delete mode 100644 setup-jest.js delete mode 100644 src/CodeEditor.tsx delete mode 100644 src/CodeView.tsx delete mode 100644 src/CopyCodeButton.tsx delete mode 100644 src/ErrorBoundary.tsx delete mode 100644 src/MarkdownRenderer.tsx delete mode 100644 src/Preview.tsx delete mode 100644 src/Renderer.tsx delete mode 100644 src/icons/Check.tsx delete mode 100644 src/icons/Code.tsx delete mode 100644 src/icons/Copy.tsx delete mode 100644 src/index.ts delete mode 100644 src/less/index.less delete mode 100644 src/less/styles.less delete mode 100644 src/less/vendors.less delete mode 100644 src/utils/mergeRefs.ts delete mode 100644 src/utils/parseDom.ts delete mode 100644 src/utils/parseHTML.ts create mode 100644 tsconfig.base.json create mode 100644 turbo.json create mode 100644 vite.config.ts delete mode 100644 webpack-md-loader/html-loader.js delete mode 100644 webpack-md-loader/index.js delete mode 100644 webpack-md-loader/loader.js delete mode 100644 webpack-md-loader/options.json delete mode 100644 webpack-md-loader/renderer.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..bdbbeea --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,37 @@ +{ + "$schema": "https://json.schemastore.org/eslintrc.json", + "root": true, + "env": { + "browser": true, + "es2021": true, + "node": true + }, + "extends": [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:react/recommended", + "plugin:react-hooks/recommended", + "prettier" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["@typescript-eslint", "react", "react-hooks"], + "settings": { + "react": { + "version": "detect" + } + }, + "rules": { + "react/react-in-jsx-scope": "off", + "react/prop-types": "off", + "@typescript-eslint/no-explicit-any": "warn", + "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }] + }, + "ignorePatterns": ["dist", "node_modules", "*.js", "*.cjs"] +} diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index c297935..3e18beb 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -18,20 +18,26 @@ jobs: steps: - uses: actions/checkout@v4 + - name: Setup PNPM + uses: pnpm/action-setup@v4 + with: + version: 9 + - name: Setup node uses: actions/setup-node@v4 with: - node-version: 'lts/*' + node-version: '18.x' + cache: 'pnpm' - name: Install - run: npm install + run: pnpm install --frozen-lockfile - name: Build - run: npm run build:docs + run: pnpm docs:build - name: Deploy uses: peaceiris/actions-gh-pages@v3 if: github.ref == 'refs/heads/main' with: github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./docs/assets + publish_dir: ./docs/dist diff --git a/.github/workflows/nodejs-ci.yml b/.github/workflows/nodejs-ci.yml index 8a5f1d4..8981e6b 100644 --- a/.github/workflows/nodejs-ci.yml +++ b/.github/workflows/nodejs-ci.yml @@ -12,13 +12,33 @@ on: - main jobs: test: - name: 'Test' + name: 'Build & Test' runs-on: ubuntu-latest - container: node:16 steps: - - uses: actions/checkout@v2 - - env: + - uses: actions/checkout@v4 + + - name: Setup PNPM + uses: pnpm/action-setup@v4 + with: + version: 9 + + - name: Setup Node + uses: actions/setup-node@v4 + with: + node-version: '18.x' + cache: 'pnpm' + + - name: Install dependencies + run: pnpm install --frozen-lockfile + env: HUSKY: 0 - run: npm install - - run: npm test + + - name: Typecheck + run: pnpm -w typecheck + + - name: Build + run: pnpm -w build + + - name: Test + run: pnpm -w test --reporter verbose diff --git a/.github/workflows/nodejs-publish.yml b/.github/workflows/nodejs-publish.yml index a75087f..39ca176 100644 --- a/.github/workflows/nodejs-publish.yml +++ b/.github/workflows/nodejs-publish.yml @@ -1,30 +1,44 @@ # see https://help.github.com/cn/actions/language-and-framework-guides/publishing-nodejs-packages -name: Node.js Package +name: Release Packages on: + workflow_dispatch: {} push: - tags: ['*'] + tags: + - 'v*' jobs: publish: - name: 'Publish' + name: 'Publish to npm' runs-on: ubuntu-latest + permissions: + contents: read + id-token: write steps: - - uses: actions/checkout@v2 - # Setup .npmrc file to publish to npm - - uses: actions/setup-node@v1 + - uses: actions/checkout@v4 + + - name: Setup PNPM + uses: pnpm/action-setup@v4 + with: + version: 9 + + - name: Setup Node + uses: actions/setup-node@v4 with: - node-version: '14.x' + node-version: '18.x' registry-url: 'https://registry.npmjs.org' + cache: 'pnpm' - name: Install dependencies - run: npm install + run: pnpm install --frozen-lockfile + env: + HUSKY: 0 - name: Build - run: npm run build + run: pnpm -w build - - name: Npm Publish - run: npm publish dist + - name: Publish with Changesets + run: pnpm release env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + NPM_CONFIG_PROVENANCE: true diff --git a/.gitignore b/.gitignore index 9a7638e..f8fbc3b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,33 +1,36 @@ -# Logs -logs -*.log -npm-debug.log* -karma-* - -# Runtime data -pids -*.pid -*.seed +# Dependencies +node_modules/ +.pnpm-store/ -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov +# Build outputs +dist/ +*.tsbuildinfo -# Coverage directory used by tools like istanbul -coverage +# IDE +.idea/ +.vscode/ +*.swp +*.swo -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt +# OS +.DS_Store +Thumbs.db -# node-waf configuration -.lock-wscript +# Logs +*.log +npm-debug.log* +pnpm-debug.log* -# Compiled binary addons (http://nodejs.org/api/addons.html) -build/Release +# Test coverage +coverage/ -# Dependency directory -node_modules +# Turbo +.turbo/ -# Optional npm cache directory +# Environment +.env +.env.local +.env.*.local .npm # Optional REPL history diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..193bb08 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "singleQuote": true, + "tabWidth": 2, + "trailingComma": "none", + "printWidth": 100, + "arrowParens": "avoid" +} diff --git a/README.md b/README.md index ccda280..5bd345c 100644 --- a/README.md +++ b/README.md @@ -1,112 +1,268 @@ # React Code View -**React Code View** can render source code in markdown documents. And brings you the ability to render React components with editable source code and live preview. +[![npm](https://img.shields.io/npm/v/react-code-view.svg)](https://www.npmjs.com/package/react-code-view) +[![npm](https://img.shields.io/npm/dm/react-code-view.svg)](https://www.npmjs.com/package/react-code-view) +[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE) + +A React component library for rendering code with **live preview** and syntax highlighting. ![React Code View](https://user-images.githubusercontent.com/1203827/178659124-f4a8658f-1087-4c55-b89b-04dcfc5568cb.gif) -## Install +## ✨ Features -``` +- 🎨 **Live Preview** - Execute and preview React code in real-time +- ✏️ **Editable Code** - Built-in code editor with syntax highlighting +- 📝 **Markdown Support** - Render markdown content with code blocks +- 🔌 **Universal Plugin** - Works with Webpack, Vite, Rollup, esbuild, and Rspack +- 🎯 **TypeScript** - Full TypeScript support out of the box +- 📦 **Tree-shakeable** - Import only what you need + +## ✅ Requirements + +- Node.js >= 18 +- PNPM >= 8 (monorepo managed via PNPM + Turbo) + +## 📦 Installation + +```bash +# npm npm install react-code-view + +# pnpm +pnpm add react-code-view + +# yarn +yarn add react-code-view +``` + +## 🚀 Quick Start + +```tsx +import CodeView from 'react-code-view'; +import 'react-code-view/styles'; + +function App() { + const code = ` + + `.trim(); + + return ( + + {code} + + ); +} +``` + +## 📚 Packages + +This monorepo contains the following packages: + +| Package | Version | Description | +|---------|---------|-------------| +| [`react-code-view`](./packages/react-code-view) | [![npm](https://img.shields.io/npm/v/react-code-view.svg)](https://www.npmjs.com/package/react-code-view) | Main package (re-exports all) | +| [`@react-code-view/react`](./packages/react) | [![npm](https://img.shields.io/npm/v/@react-code-view/react.svg)](https://www.npmjs.com/package/@react-code-view/react) | React components | +| [`@react-code-view/core`](./packages/core) | [![npm](https://img.shields.io/npm/v/@react-code-view/core.svg)](https://www.npmjs.com/package/@react-code-view/core) | Core transformation utilities | +| [`@react-code-view/unplugin`](./packages/unplugin) | [![npm](https://img.shields.io/npm/v/@react-code-view/unplugin.svg)](https://www.npmjs.com/package/@react-code-view/unplugin) | Build tool plugins | + +## 🔧 Build Tool Integration + +React Code View supports all major build tools through [unplugin](https://github.com/unjs/unplugin): + +### Vite + +```js +// 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() + ] +}); ``` -### Configure Webpack +### Webpack ```js // webpack.config.js +const ReactCodeViewPlugin = require('@react-code-view/unplugin/webpack'); + +module.exports = { + plugins: [ + ReactCodeViewPlugin() + ] +}; +``` + +### Rollup + +```js +// rollup.config.js +import reactCodeView from '@react-code-view/unplugin/rollup'; + export default { - module: { - rules: [ - { - test: /\.md$/, - loader: 'react-code-view/webpack-md-loader' - } - ] - } + plugins: [ + reactCodeView() + ] }; ``` -#### Options +### esbuild ```js -{ - "parseLanguages": [ - // Supported languages for highlight.js - // default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript" - // See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md - ], - "htmlOptions": { - // HTML Loader options - // See https://github.com/webpack-contrib/html-loader#options - }, - "markedOptions": { - // Pass options to marked - // See https://marked.js.org/using_advanced#options - } -} +import * as esbuild from 'esbuild'; +import reactCodeView from '@react-code-view/unplugin/esbuild'; + +await esbuild.build({ + plugins: [ + reactCodeView() + ] +}); ``` -**webpack.config.js** +### Rspack ```js +// rspack.config.js +const ReactCodeViewPlugin = require('@react-code-view/unplugin/rspack'); -export default { - module: { - rules: [ - { - test: /\.md$/, - use:[ - loader: 'react-code-view/webpack-md-loader', - options:{ - parseLanguages: ['typescript','rust'] - } - ] - } - ] - } +module.exports = { + plugins: [ + ReactCodeViewPlugin() + ] }; ``` -## Usage +## 📖 API Reference -```js -import CodeView from 'react-code-view'; -import { Button } from 'rsuite'; - -import 'react-code-view/styles/react-code-view.css'; - -return ( - - {require('./example.md')} - -); +### CodeView Props + +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| `children` | `string` | - | Source code to display | +| `dependencies` | `object` | `{}` | Dependencies for code execution | +| `language` | `string` | `'jsx'` | Syntax highlighting language | +| `editable` | `boolean` | `true` | Enable code editing | +| `renderPreview` | `boolean` | `true` | Show live preview | +| `showLineNumbers` | `boolean` | `true` | Show line numbers | +| `showCopyButton` | `boolean` | `true` | Show copy button | +| `theme` | `string` | `'rcv-theme-default'` | Theme class name | +| `beforeCompile` | `function` | - | Transform code before compile | +| `afterCompile` | `function` | - | Transform code after compile | +| `onChange` | `function` | - | Callback when code changes | +| `onError` | `function` | - | Callback when error occurs | + +### Other Components + +- **`Renderer`** - Syntax-highlighted code display +- **`MarkdownRenderer`** - Render markdown with syntax highlighting +- **`CodeEditor`** - Editable code component +- **`Preview`** - Display executed code output +- **`CopyCodeButton`** - Copy code to clipboard button +- **`ErrorBoundary`** - Error boundary for code execution + +### Hooks + +- **`useCodeExecution`** - Execute code and capture a rendered element + + Example: + + ```tsx + import { useCodeExecution } from '@react-code-view/react'; + + export function LivePreview({ source }: { source: string }) { + const { element, error, code, updateCode } = useCodeExecution(source, { + // Optional: inject deps into runtime scope + dependencies: { alert }, + // Optional: configure transforms (e.g. TS + JSX) + transformOptions: { transforms: ['typescript', 'jsx'] }, + beforeCompile: (c) => c.trim(), + afterCompile: (c) => c, + onError: (e) => console.error('Execution error:', e) + }); + + return ( +
+