feat: 新增配置项

fewismuch · Nov 11, 2023 · 78ee294 · 78ee294
1 parent 64f8e38
commit 78ee294
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 19 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,11 @@
 
 [基础示例](https://fewismuch.github.io/react-playground)
 
-[ahooks示例](https://fewismuch.github.io/react-playground/#eNqNU8tu2zAQ/JUtL5IAm+zj0MB1i/R16MFokVwagBdCom0l4gMkFdgQ9O9ZUrJjOQ4QQBCWszuj3R2qI0rUmga/I4uOaKEkWTxDM9IIvWnFJqJhb6UvXW0D4o+iaSNYK2tcgBspygBrZxRkLsYZ16epX39Xp9l5ZRQrm1rqWHgs/W7tWEUZxil1oNMSmUHeGBPyypStQi7dyPC7kTH8sf9T5ZnDbFa8K6iTupIu5xpgmRTobXB1GVamkt8iinj8GkuHJbtQU3BN+hnBqrPtHJA3L6eD1suVwRf043xia8yDz77ECdetLkNtdBw/L6CLHZVG+wAqcb4e6XmRCABOhtZpSPNh+1X9OA6FB3sMAX6mFcMcdgvokhodtv6/n8H+DLvrjxrsWWSi9w+HnahZBKZaEXmD0i3aKfVEC9eH0FRtwC7pLdlhajQK81zLXdp2JdeibdJlGhwcXJgrYem9N/rEyfPMxNEROXiZbOEjxXOCLQ6NcJKudEQ42YZg/YIx6RX1W5Yy1x+u6Ef6npPZhHDyD7zOjUUv+cPtucgaUtef6Gd6xUkk4G7wIX3/BJ7TRj4=) 
+[ahooks示例](https://fewismuch.github.io/react-playground/#eNqNU8tu2zAQ/JUtL5IAm+zj0MB1i/R16MFokVwagBdCom0l4gMkFdgQ9O9ZUrJjOQ4QQBCWszuj3R2qI0rUmga/I4uOaKEkWTxDM9IIvWnFJqJhb6UvXW0D4o+iaSNYK2tcgBspygBrZxRkLsYZ16epX39Xp9l5ZRQrm1rqWHgs/W7tWEUZxil1oNMSmUHeGBPyypStQi7dyPC7kTH8sf9T5ZnDbFa8K6iTupIu5xpgmRTobXB1GVamkt8iinj8GkuHJbtQU3BN+hnBqrPtHJA3L6eD1suVwRf043xia8yDz77ECdetLkNtdBw/L6CLHZVG+wAqcb4e6XmRCABOhtZpSPNh+1X9OA6FB3sMAX6mFcMcdgvokhodtv6/n8H+DLvrjxrsWWSi9w+HnahZBKZaEXmD0i3aKfVEC9eH0FRtwC7pLdlhajQK81zLXdp2JdeibdJlGhwcXJgrYem9N/rEyfPMxNEROXiZbOEjxXOCLQ6NcJKudEQ42YZg/YIx6RX1W5Yy1x+u6Ef6npPZhHDyD7zOjUUv+cPtucgaUtef6Gd6xUkk4G7wIX3/BJ7TRj4=)
 
-[ant-design-charts示例](https://fewismuch.github.io/react-playground/#eNqllF1vmzAUhv+K5xsSKTWhbdomTats2iZNWjWpuxy7sMABT2Aj20zJEP99x8YE2tCr3iDznud8+NWBBpeUC2L0AW8aLGjJ8GaQFrigIqtpZlVzrJhOFK8M6H9pUVuRl5VUBj0zmhi0V7JEgbLnIBbj0OcfT+PoRSrLMCk4ExY8oR+rylMkhLML9ekkgUzDnqU0s1QmdQm5JGPmS8Hs8dPxWzoLFESD+Yc5UUykTM1igdDWVSA/jeKJeZIpe7Qq6LZb6F624QQzjwVuFxioV+70yjvMuT9duUHfuWCo9eEdFWAO0zwTYVVIoy0ai0QK3dnzgGZz9PCIGjt3J6fUUNB/dddq0JFRtUFBtF5HwQK5WTboCrWLc+ByAK4ngatRBbKKJpnrgVlNAqtRF7KeRG4G5GYSuB2A20ngbgCmW6wHIOrd+O3c7Y2E555nYKUzFzljfaGc8Sw3MP9y6ZXDV86KFErbDoEXj73oGvVqJbmAXF8VIc3/Wa98FN5zWoEQpJyWUqR9WjdiCyMipJiplUBbtywNIaSbtYUFhrhl2MHtU8r2tC7crtzb9e3W7KKkFfmjpRit8evIi3X2Sr/IbvTYp+gYny4TY7fQVolxbkylN2HIdEl0HrrILrojl2QZY38pnzD6Abyda6Hz/LNPZLLAGbWLoM4qxs5TsMx+3e1/UHKQHw==) 
+[ant-design-charts示例](https://fewismuch.github.io/react-playground/#eNqllF1vmzAUhv+K5xsSKTWhbdomTats2iZNWjWpuxy7sMABT2Aj20zJEP99x8YE2tCr3iDznud8+NWBBpeUC2L0AW8aLGjJ8GaQFrigIqtpZlVzrJhOFK8M6H9pUVuRl5VUBj0zmhi0V7JEgbLnIBbj0OcfT+PoRSrLMCk4ExY8oR+rylMkhLML9ekkgUzDnqU0s1QmdQm5JGPmS8Hs8dPxWzoLFESD+Yc5UUykTM1igdDWVSA/jeKJeZIpe7Qq6LZb6F624QQzjwVuFxioV+70yjvMuT9duUHfuWCo9eEdFWAO0zwTYVVIoy0ai0QK3dnzgGZz9PCIGjt3J6fUUNB/dddq0JFRtUFBtF5HwQK5WTboCrWLc+ByAK4ngatRBbKKJpnrgVlNAqtRF7KeRG4G5GYSuB2A20ngbgCmW6wHIOrd+O3c7Y2E555nYKUzFzljfaGc8Sw3MP9y6ZXDV86KFErbDoEXj73oGvVqJbmAXF8VIc3/Wa98FN5zWoEQpJyWUqR9WjdiCyMipJiplUBbtywNIaSbtYUFhrhl2MHtU8r2tC7crtzb9e3W7KKkFfmjpRit8evIi3X2Sr/IbvTYp+gYny4TY7fQVolxbkylN2HIdEl0HrrILrojl2QZY38pnzD6Abyda6Hz/LNPZLLAGbWLoM4qxs5TsMx+3e1/UHKQHw==)
 
-[antd示例](https://fewismuch.github.io/react-playground/#eNqtVV1r2zAU/SuaYCSBVE4Kg5E1pR/poA9doe3Yi180WU00bMlIcpMs+L/vSnKc2EmWrmuhIJ37oXPPuW5XOKNCEmsWeLTCkmYcjzZQH6dUTgs6dahd5twwLXIL+AtNCweKLFfaogdOmUXPWmWoo925E8vt0OT+bjt6kqgsYqng0iXWqZd5XmWRCM4+tC4nDCotf1DKdhPFigxqyZTbm5S749XyNul2NEQ7vQ89orlMuO7GEqEz34E8Wi2YvVMJP3co4O61yF/Ooj05vVjiso8hq6XOGnm1OCt0rbJ8iMp6OH/34zElTRh8jLo9ND5HK8dIc1toifwAwM/nB669L7Es4ZcvfO+EP9Mi9R0c2/DiSUZz8ssoucW6HWmwr5A1b08hrkpMjEeBlMO8fQ6J8cza3IyiiJuMmFnkIxfDz+SUDGLcbxRs+X241iXt1lNpk701LnDxiQwH5DTGLrsEYYJnXq6WaxvsP5YadK89vUy5tn10VVirZB895pTx2mJHzmXXPgWfPYlRaEy+Xteeh0UNLRKhObNCyXGMX+AJwWgaY2TsMuXj1QrNRWJnI9QZDgYfO6gs63V2fMIZoYwbAwNCi8eCMbigJ5GDk+u4GxuCJgQ3uJmp+S1wXd+Bp2NS2e/fCQMjI377DhlNHb2qoeULcLiiFH6+f5vcb5VHob5OAcvCgaXK0J8pD/ew7IfHutFaafTknztEPqmcDVqGiskGQ29CdjTkLmODvlqxBJaQ64ZUE26pSI+LdUycH1RLIacteSq+8xD8K2O/iQ1q6yEaPrdHms6UsY0ymEnJytIDMzmo+d4bV+JWPqvWyM0N8Anb5v47sKOmgITjUh74qPcqvP/DyrXIqF62ahC6hA84r8U4IPCRHdzvG4e/1+9r3SbZ/RPDZfkHDkymuw==) 
+[antd示例](https://fewismuch.github.io/react-playground/#eNqtVV1r2zAU/SuaYCSBVE4Kg5E1pR/poA9doe3Yi180WU00bMlIcpMs+L/vSnKc2EmWrmuhIJ37oXPPuW5XOKNCEmsWeLTCkmYcjzZQH6dUTgs6dahd5twwLXIL+AtNCweKLFfaogdOmUXPWmWoo925E8vt0OT+bjt6kqgsYqng0iXWqZd5XmWRCM4+tC4nDCotf1DKdhPFigxqyZTbm5S749XyNul2NEQ7vQ89orlMuO7GEqEz34E8Wi2YvVMJP3co4O61yF/Ooj05vVjiso8hq6XOGnm1OCt0rbJ8iMp6OH/34zElTRh8jLo9ND5HK8dIc1toifwAwM/nB669L7Es4ZcvfO+EP9Mi9R0c2/DiSUZz8ssoucW6HWmwr5A1b08hrkpMjEeBlMO8fQ6J8cza3IyiiJuMmFnkIxfDz+SUDGLcbxRs+X241iXt1lNpk701LnDxiQwH5DTGLrsEYYJnXq6WaxvsP5YadK89vUy5tn10VVirZB895pTx2mJHzmXXPgWfPYlRaEy+Xteeh0UNLRKhObNCyXGMX+AJwWgaY2TsMuXj1QrNRWJnI9QZDgYfO6gs63V2fMIZoYwbAwNCi8eCMbigJ5GDk+u4GxuCJgQ3uJmp+S1wXd+Bp2NS2e/fCQMjI377DhlNHb2qoeULcLiiFH6+f5vcb5VHob5OAcvCgaXK0J8pD/ew7IfHutFaafTknztEPqmcDVqGiskGQ29CdjTkLmODvlqxBJaQ64ZUE26pSI+LdUycH1RLIacteSq+8xD8K2O/iQ1q6yEaPrdHms6UsY0ymEnJytIDMzmo+d4bV+JWPqvWyM0N8Anb5v47sKOmgITjUh74qPcqvP/DyrXIqF62ahC6hA84r8U4IPCRHdzvG4e/1+9r3SbZ/RPDZfkHDkymuw==)
 
 # 特点
 
@@ -90,27 +90,31 @@ export default App
 | border               | boolean丨undefined                                                     | false            | 是否显示边框       |
 | showFileSelector     | boolean丨undefined                                                     | true             | 是否显示文件tab    |
 | fileSelectorReadOnly | boolean丨undefined                                                     | false            | 文件tab是否只读    |
-| onUrlChange          | (url: string) => void                                                 | undefined        |              |
+| onFilesChange        | (url: string) => void                                                 | undefined        |              |
 | showCompileOutput    | boolean丨undefined                                                     | true             | 是否显示编译后代码    |
 | defaultSizes         | number[]丨undefined                                                    | [100,100]        | 编辑器和预览区宽度比例  |
 | options              | { lineNumbers?: boolean;fontSize?: number;tabSize?: number}丨undefined | undefined        | 编辑器配置        |
 | files                | File                                                                  | Object           | 初始化代码        |
 | importMap            | { imports: Record<string, string> }                                   | defaultImportMap | 初始化importmap |
+| saveOnUrl            | boolean                                                               | true             | 代码是否存储到url上  |
 
 ### File
+
 ```ts
 interface File {
   [key: string]:
-| string
-  | {
+    | string
+    | {
     code: string
     active?: boolean
     hidden?: boolean
   }
 }
 
 ```
+
 ### defaultImportMap
+
 ```json
 {
   "imports": {

diff --git a/src/Playground/PlaygroundContext.tsx b/src/Playground/PlaygroundContext.tsx
@@ -1,9 +1,10 @@
 import React, { createContext, useEffect, useState } from 'react'
 
 import { initFiles, MAIN_FILE_NAME } from './files'
-import { IPlaygroundContext, ITheme } from './types'
 import { fileName2Language, getPlaygroundTheme, setPlaygroundTheme, utoa } from './utils'
 
+import type { IPlaygroundContext, ITheme } from './types'
+
 const initialContext: Partial<IPlaygroundContext> = {
   files: initFiles,
   selectedFileName: MAIN_FILE_NAME,
@@ -13,8 +14,11 @@ export const PlaygroundContext = createContext<IPlaygroundContext>(
   initialContext as IPlaygroundContext
 )
 
-export const PlaygroundProvider = (props: { children: React.ReactElement }) => {
-  const { children } = props
+export const PlaygroundProvider = (props: {
+  children: React.ReactElement
+  saveOnUrl?: boolean
+}) => {
+  const { children, saveOnUrl = true } = props
 
   const [files, setFiles] = useState(initialContext.files!)
   const [theme, setTheme] = useState(initialContext.theme!)
@@ -58,7 +62,8 @@ export const PlaygroundProvider = (props: { children: React.ReactElement }) => {
 
   useEffect(() => {
     const hash = utoa(JSON.stringify(files))
-    window.location.hash = hash
+    console.log(saveOnUrl)
+    if (saveOnUrl) window.location.hash = hash
     setFilesHash(hash)
   }, [files])
 

diff --git a/src/Playground/index.tsx b/src/Playground/index.tsx
@@ -15,6 +15,7 @@ import type { IPlayground } from './types'
 const defaultCodeSandboxOptions = {
   theme: 'dark',
   editorHeight: '100vh',
+  showUrlHash: true,
 }
 
 const ReactPlayground = (props: IPlayground) => {
@@ -30,7 +31,7 @@ const ReactPlayground = (props: IPlayground) => {
     fileSelectorReadOnly = false,
     border = false,
     defaultSizes,
-    onUrlChange,
+    onFilesChange,
   } = props
   const { filesHash, changeTheme, setFiles, setSelectedFileName } = useContext(PlaygroundContext)
   const options = Object.assign(defaultCodeSandboxOptions, props.options || {})
@@ -53,7 +54,7 @@ const ReactPlayground = (props: IPlayground) => {
   }, [theme])
 
   useEffect(() => {
-    onUrlChange?.(filesHash)
+    onFilesChange?.(filesHash)
   }, [filesHash])
 
   return (
@@ -78,7 +79,7 @@ const ReactPlayground = (props: IPlayground) => {
 
 export const Playground: React.FC<IPlayground> = (props) => {
   return (
-    <PlaygroundProvider>
+    <PlaygroundProvider saveOnUrl={props.saveOnUrl}>
       <ReactPlayground {...props} />
     </PlaygroundProvider>
   )

diff --git a/src/Playground/types.ts b/src/Playground/types.ts
@@ -57,7 +57,8 @@ export type IPlayground = {
   }
   showHeader?: boolean
   border?: boolean
-  onUrlChange?: (url: string) => void
+  onFilesChange?: (url: string) => void
+  saveOnUrl?: boolean
 } & Omit<IEditorContainer, 'options'> &
   IOutput &
   ISplitPane

diff --git a/src/Playground/utils.ts b/src/Playground/utils.ts
@@ -1,4 +1,4 @@
-import { zlibSync, unzlibSync, strToU8, strFromU8 } from 'fflate'
+import { strFromU8, strToU8, unzlibSync, zlibSync } from 'fflate'
 
 import { IMPORT_MAP_FILE_NAME, reactTemplateFiles } from './files'
 import { ICustomFiles, IImportMap, ITheme } from './types'
@@ -80,14 +80,13 @@ const transformCustomFiles = (files: ICustomFiles) => {
 // 获取用户自定义的选中文件
 export const getCustomActiveFile = (files?: ICustomFiles) => {
   if (!files) return null
-  const result = Object.keys(files).find((key) => {
+  return Object.keys(files).find((key) => {
     const tempFile = files[key]
     if (typeof tempFile !== 'string' && tempFile.active) {
       return key
     }
     return null
   })
-  return result
 }
 
 // 合并用户自定义files和importMap，files需要转换

diff --git a/tsconfig.json b/tsconfig.json
@@ -39,7 +39,6 @@
     }
   ],
   "include": [
-    "src/Playground",
-    "src/vite-env.d.ts"
+    "src/**/*",
   ]
 }