feat: export repl store

Author: zhangmo8

README copy.md

@@ -1,17 +1,28 @@
 # repl-react
 
-WIP
-
 A online playground for react, inspired by [vue/repl](https://github.com/vuejs/repl) and [unocss/playground](https://github.com/unocss/unocss/tree/main/packages/playground).
 
 Thanks to the open source of [vue/repl](https://github.com/vuejs/repl) and its maintainers, this project is built to provide a similar experience for react.
 
-## Features
+# @zhangmo8/repl-react
+
+React REPL as a React component.
+
+## Basic Usage
 
-- Code editor with syntax highlighting
-- Realtime preview of react components
-- Code snippet support
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ['@zhangmo8/repl-react'],
+  },
+  // ...
+})
+```
 
-## How to use
+```javascript
+import { Repl } from '@zhangmo8/repl-react'
 
-1. Include the script in your HTML page
+<Repl />
+```

README.md

@@ -1,10 +1,9 @@
-import { ReplContext } from "@/store"
-import { useContext } from "react"
+import { useReplStore } from "@/store"
 
 import CodeMirror from "./CodeMirror"
 
 const EditorContainer = () => {
-  const { state, onChangeCode } = useContext(ReplContext)
+  const { state, onChangeCode } = useReplStore()
   const { code = "" } = state
 
   return (

src/components/Editor/index.tsx

@@ -1,8 +1,8 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 import CodeMirror from "@/components/Editor/CodeMirror"
 import { type OutputCode, transformCode } from "@/hooks/swc"
-import { ReplContext } from "@/store"
+import { useReplStore } from "@/store"
 
 import Preview from "./Preview"
 import "./styles.css"
@@ -14,7 +14,7 @@ const outputTabs = [
 ]
 
 const Output = () => {
-  const { state } = useContext(ReplContext)
+  const { state } = useReplStore()
   const { code = "", showAST, showCompile } = state
   const [activeTab, setActiveTab] =
     useState<(typeof outputTabs)[number]["value"]>("preview")

src/components/Output/index.tsx

@@ -1 +1,2 @@
-export * from './Repl'
+export * from "./Repl"
+export { useReplStore } from "./store"