feat: react renderer

.vscode/settings.json

@@ -8,7 +8,7 @@
 
   // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll": "explicit",
+    "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
 

build.config.ts

@@ -4,6 +4,7 @@ export default defineBuildConfig({
   entries: [
     'src/index',
     'src/vue',
+    'src/react',
     'src/core',
     'src/types',
     'src/renderer',

eslint.config.js

@@ -6,6 +6,7 @@ export default antfu(
     ignores: [
       // eslint ignore globs here
     ],
+    react: true,
   },
   {
     rules: {

package.json

@@ -34,6 +34,9 @@
     "./vue": {
       "import": "./dist/vue.mjs"
     },
+    "./react": {
+      "import": "./dist/react.mjs"
+    },
     "./style.css": "./dist/style.css",
     "./dist/*": "./dist/*"
   },
@@ -45,6 +48,9 @@
       "./vue": [
         "./dist/vue.d.ts"
       ],
+      "./react": [
+        "./dist/react.d.ts"
+      ],
       "./core": [
         "./dist/core.d.ts"
       ],
@@ -71,10 +77,14 @@
     "play:build": "nr -C playground build"
   },
   "peerDependencies": {
+    "react": "^18.2.0",
     "shiki": "^1.1.6",
     "vue": "^3.4.0"
   },
   "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
     "shiki": {
       "optional": true
     },
@@ -92,13 +102,20 @@
     "@antfu/utils": "^0.7.7",
     "@types/diff-match-patch": "^1.0.36",
     "@types/node": "^20.11.20",
+    "@types/react": "^18.2.56",
+    "@types/react-dom": "^18.2.19",
     "@unocss/reset": "^0.58.5",
     "@vueuse/core": "^10.9.0",
     "bumpp": "^9.3.0",
     "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
     "esno": "^4.0.0",
     "lint-staged": "^15.2.2",
     "pnpm": "^8.15.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "shiki": "^1.1.7",
     "simple-git-hooks": "^2.9.0",

playground/src/Playground.vue

@@ -6,8 +6,9 @@ import { bundledLanguagesInfo } from 'shiki/langs'
 import { ref, shallowRef, watch, watchEffect } from 'vue'
 import { toRefs, useLocalStorage } from '@vueuse/core'
 import { vueAfter, vueBefore } from './fixture'
-import type { RendererFactoryOptions, RendererFactoryResult, RendererType, RendererUpdatePayload } from './renderer/types'
 import { createRendererVue } from './renderer/vue'
+import { createRendererReact } from './renderer/react'
+import type { RendererFactoryOptions, RendererFactoryResult, RendererType, RendererUpdatePayload } from './renderer/types'
 
 const defaultOptions = {
   theme: 'vitesse-dark',
@@ -89,7 +90,9 @@ function rendererUpdate() {
   }
 
   if (!renderer) {
-    renderer = createRendererVue(rendererOptions)
+    renderer = rendererType.value === 'vue'
+      ? createRendererVue(rendererOptions)
+      : createRendererReact(rendererOptions)
     renderer.mount(rendererContainer.value, payload)
   }
   else {
@@ -281,6 +284,9 @@ watch(
             <option value="vue">
               Vue
             </option>
+            <option value="react">
+              React
+            </option>
           </select>
           <div v-if="isAnimating" class="animate-pulse text-green">
             Animating...

playground/src/renderer/react.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import React from 'react'
+import type { Root } from 'react-dom/client'
+import ReactDOM from 'react-dom/client'
+import { shallowReactive, watch } from 'vue'
+import { ShikiMagicMove } from '../../../src/react'
+import type { RendererFactory, RendererFactoryResult } from './types'
+
+export const createRendererReact: RendererFactory = (options): RendererFactoryResult => {
+  let app: Root | undefined
+
+  const props = shallowReactive<any>({
+    onStart: options.onStart,
+    onEnd: options.onEnd,
+  })
+
+  function App() {
+    // TODO: make React not render twice
+    const [count, setCounter] = React.useState(0)
+
+    React.useEffect(() => {
+      watch(props, () => {
+        // Force React to re-render
+        setCounter(c => c + 1)
+      })
+    }, [])
+
+    console.log('React rendering', count)
+
+    // eslint-disable-next-line react/prop-types
+    return <ShikiMagicMove {...props} className={props.class} />
+  }
+
+  return {
+    mount: (element, payload) => {
+      Object.assign(props, payload)
+      app = ReactDOM.createRoot(element)
+      app.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      )
+
+      console.log('React renderer mounted')
+    },
+
+    update: (payload) => {
+      Object.assign(props, payload)
+    },
+
+    dispose: () => {
+      app?.unmount()
+      app = undefined
+    },
+  }
+}

playground/src/renderer/types.ts

@@ -1,7 +1,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import type { MagicMoveRenderOptions } from '../../../src/core'
 
-export type RendererType = 'vue'
+export type RendererType = 'vue' | 'react'
 
 export interface RendererUpdatePayload {
   highlighter: HighlighterCore