feat(vue-playground,vuepress-plugin-sandbox): add theme config supports

2214962083 · 2214962083 · commit 1cfa62d23876 · 2022-05-15T23:53:22.000+08:00
diff --git a/packages/vue-playground/src/playground/components/editor.vue b/packages/vue-playground/src/playground/components/editor.vue
@@ -34,7 +34,7 @@ const files = computed(() => Object.values(store.state.files))
 const activeFile = computed(() => store.state.activeFile)
 const themeName = computed(() => unref(theme)?.['--editor-theme-name'])
 
-const {getEditor, onChange, isDark, toggleDark, disposeEditor} = useMonaco(editorEl, {
+const {getEditor, onChange, disposeEditor} = useMonaco(editorEl, {
   themeName,
   lifeCycle,
   files,
@@ -52,8 +52,6 @@ const handleChange = debounce(({newCode, activeFile}: {newCode: string; activeFi
 
 defineExpose({
   getEditor,
-  isDark,
-  toggleDark,
   disposeEditor
 } as EditorExpose)
 
diff --git a/packages/vue-playground/src/playground/constants.ts b/packages/vue-playground/src/playground/constants.ts
@@ -1,7 +1,7 @@
-import {MaybeRef} from '@vueuse/core'
-import {InjectionKey} from 'vue'
-import {Store} from '../core'
-import {PlaygroundTheme} from './utils/types-helper'
+import type {MaybeRef} from '@vueuse/core'
+import type {InjectionKey} from 'vue'
+import type {Store} from '../core'
+import type {PlaygroundTheme} from './utils/types-helper'
 
 export const PLAYGROUND_COMPONENT_NAME = 'Playground' as const
 export const FILE_BASE_URL = 'file:///root/' as const
@@ -12,3 +12,68 @@ export const STORE_INJECT_KEY = '__store__' as unknown as InjectionKey<Store>
 export const CLEAR_CONSOLE_INJECT_KEY = '__clear_console__' as unknown as InjectionKey<MaybeRef<boolean>>
 export const SHOW_IMPORT_MAP_INJECT_KEY = '__show_import_map__' as unknown as InjectionKey<MaybeRef<boolean>>
 export const THEME_INJECT_KEY = '__theme__' as unknown as InjectionKey<MaybeRef<PlaygroundTheme>>
+export const SHOW_DARK_MODE_INJECT_KEY = '__show_dark_mode__' as unknown as InjectionKey<MaybeRef<boolean>>
+
+export const DEFAULT_THEME_COLOR = '#42b883'
+
+export const GET_LIGHT_THEME = (theme?: PlaygroundTheme) => {
+  const themeColor = theme?.['--theme-color'] || DEFAULT_THEME_COLOR
+  return {
+    '--editor-theme-name': 'vitesse-light',
+    '--theme-color': themeColor,
+    '--border-color': '#eaecef',
+    '--bg-color': '#fff',
+    '--toolbar-bg-color': '##eeeeee',
+    '--toolbar-text-color': '#2c3e50',
+    '--toolbar-icon-bg-color': '#fff',
+    '--toolbar-icon-color': '#999',
+    '--toolbar-icon-active-color': themeColor,
+    '--preview-bg-color': '#fff',
+    '--preview-text-color': '#2c3e50',
+    '--file-manager-bg-color': '#fff',
+    '--file-manager-text-color': '#94a3b8',
+    '--file-manager-active-bg-color': '#fff',
+    '--file-manager-active-text-color': themeColor,
+    '--file-manager-right-float-bg': 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%)',
+    '--message-warn-text-color': '#695f1b',
+    '--message-warn-bg-color': '#f7f0cd',
+    '--message-warn-border-color': '#695f1b',
+    '--message-error-text-color': '#f00',
+    '--message-error-bg-color': '#ffd7d7',
+    '--message-error-border-color': '#f00',
+    '--message-dismiss-text-color': '#fff',
+    '--message-dismiss-bg-color': '#f00',
+    ...theme
+  } as PlaygroundTheme
+}
+
+export const GET_DARK_THEME = (theme?: PlaygroundTheme) => {
+  const themeColor = theme?.['--theme-color'] || DEFAULT_THEME_COLOR
+  return {
+    '--editor-theme-name': 'vitesse-dark',
+    '--theme-color': themeColor,
+    '--border-color': '#3e4c5a',
+    '--bg-color': '#22272e',
+    '--toolbar-bg-color': '#262c34',
+    '--toolbar-text-color': '#adbac7',
+    '--toolbar-icon-bg-color': '#22272e',
+    '--toolbar-icon-color': '#adbac7',
+    '--toolbar-icon-active-color': themeColor,
+    '--preview-bg-color': '#22272e',
+    '--preview-text-color': '#fff',
+    '--file-manager-bg-color': '#22272e',
+    '--file-manager-text-color': '#94a3b8',
+    '--file-manager-active-bg-color': '#22272e',
+    '--file-manager-active-text-color': themeColor,
+    '--file-manager-right-float-bg': 'linear-gradient(90deg, rgba(34, 39, 46, 0) 0%, rgba(34, 39, 46, 1) 25%)',
+    '--message-warn-text-color': '#695f1b',
+    '--message-warn-bg-color': '#f7f0cd',
+    '--message-warn-border-color': '#695f1b',
+    '--message-error-text-color': '#f00',
+    '--message-error-bg-color': '#ffd7d7',
+    '--message-error-border-color': '#f00',
+    '--message-dismiss-text-color': '#fff',
+    '--message-dismiss-bg-color': '#f00',
+    ...theme
+  } as PlaygroundTheme
+}
diff --git a/packages/vue-playground/src/playground/hooks/index.ts b/packages/vue-playground/src/playground/hooks/index.ts
@@ -1,4 +1,8 @@
 import {useDark, useToggle} from '@vueuse/core'
 
-export const isDark = useDark()
+export const isDark = useDark({
+  // do not add .dark class name to html
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onChanged: () => {}
+})
 export const toggleDark = useToggle(isDark)
diff --git a/packages/vue-playground/src/playground/playground.type.ts b/packages/vue-playground/src/playground/playground.type.ts
@@ -0,0 +1,21 @@
+import type {PropType, ExtractPropTypes} from 'vue'
+import type {File} from '../core'
+import type {PlaygroundLifeCycle, PlaygroundThemes} from './utils/types-helper'
+
+export const playgroundProps = () =>
+  ({
+    files: {
+      type: Array as PropType<File[]>,
+      default: () => []
+    },
+    lifeCycle: {
+      type: Object as PropType<PlaygroundLifeCycle>,
+      default: () => ({})
+    },
+    themes: {
+      type: Object as PropType<PlaygroundThemes>,
+      default: () => ({})
+    }
+  } as const)
+
+export type PlaygroundProps = Readonly<ExtractPropTypes<ReturnType<typeof playgroundProps>>>
diff --git a/packages/vue-playground/src/playground/playground.vue b/packages/vue-playground/src/playground/playground.vue
@@ -4,37 +4,35 @@ export default defineComponent({
 })
 </script>
 <script lang="ts" setup>
-import {computed, CSSProperties, defineComponent, onMounted, PropType, provide, ref} from 'vue'
+import {computed, CSSProperties, defineComponent, inject, onMounted, provide, ref, unref, watch} from 'vue'
 import {ReplStore} from '../core'
 import Toolbar from './components/toolbar.vue'
 import Editor from './components/editor.vue'
 import Preview from './components/preview.vue'
 import Portal from './components/portal'
-import {PLAYGROUND_COMPONENT_NAME, SHOW_IMPORT_MAP_INJECT_KEY, STORE_INJECT_KEY, THEME_INJECT_KEY} from './constants'
 import {
-  EditorExpose,
-  LayoutDirection,
-  PlaygroundExpose,
-  PlaygroundOptions,
-  PlaygroundTheme,
-  PreviewExpose
-} from './utils/types-helper'
-import {isDark} from './hooks'
+  GET_DARK_THEME,
+  GET_LIGHT_THEME,
+  PLAYGROUND_COMPONENT_NAME,
+  SHOW_DARK_MODE_INJECT_KEY,
+  SHOW_IMPORT_MAP_INJECT_KEY,
+  STORE_INJECT_KEY,
+  THEME_INJECT_KEY
+} from './constants'
+import {EditorExpose, LayoutDirection, PlaygroundExpose, PlaygroundTheme, PreviewExpose} from './utils/types-helper'
+import {isDark, toggleDark} from './hooks'
+import {playgroundProps} from './playground.type'
 
-const props = defineProps({
-  options: {
-    type: Object as PropType<PlaygroundOptions>,
-    default: () => ({})
-  }
-})
+const props = defineProps(playgroundProps())
 
 const previewRef = ref<PreviewExpose>()
 const editorRef = ref<EditorExpose>()
 
 const store = new ReplStore({
-  initFiles: props.options.files
+  initFiles: props.files
 })
 
+const showDarkMode = inject(SHOW_DARK_MODE_INJECT_KEY, undefined)
 const showCode = ref(true)
 const fullScreen = ref(false)
 const layoutDirection = ref<LayoutDirection>('EditorBottomPreviewTop')
@@ -61,63 +59,30 @@ const contentStyle = computed<CSSProperties>(() => {
 })
 
 const theme = computed<CSSProperties>(() => {
-  const themeColor = '#42b883'
-  const lightTheme: PlaygroundTheme = {
-    '--editor-theme-name': 'vitesse-light',
-    '--theme-color': themeColor,
-    '--border-color': '#eaecef',
-    '--bg-color': '#fff',
-    '--toolbar-bg-color': '##eeeeee',
-    '--toolbar-text-color': '#2c3e50',
-    '--toolbar-icon-bg-color': '#fff',
-    '--toolbar-icon-color': '#999',
-    '--toolbar-icon-active-color': themeColor,
-    '--preview-bg-color': '#fff',
-    '--preview-text-color': '#2c3e50',
-    '--file-manager-bg-color': '#fff',
-    '--file-manager-text-color': '#94a3b8',
-    '--file-manager-active-bg-color': '#fff',
-    '--file-manager-active-text-color': themeColor,
-    '--file-manager-right-float-bg': 'linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%)',
-    '--message-warn-text-color': '#695f1b',
-    '--message-warn-bg-color': '#f7f0cd',
-    '--message-warn-border-color': '#695f1b',
-    '--message-error-text-color': '#f00',
-    '--message-error-bg-color': '#ffd7d7',
-    '--message-error-border-color': '#f00',
-    '--message-dismiss-text-color': '#fff',
-    '--message-dismiss-bg-color': '#f00'
-  }
+  const lightTheme: PlaygroundTheme = GET_LIGHT_THEME(props?.themes?.light)
+  const darkTheme: PlaygroundTheme = GET_DARK_THEME(props?.themes?.dark)
+  return isDark.value ? darkTheme : lightTheme
+})
 
-  const darkTheme: PlaygroundTheme = {
-    '--editor-theme-name': 'vitesse-dark',
-    '--theme-color': themeColor,
-    '--border-color': '#3e4c5a',
-    '--bg-color': '#22272e',
-    '--toolbar-bg-color': '#262c34',
-    '--toolbar-text-color': '#adbac7',
-    '--toolbar-icon-bg-color': '#22272e',
-    '--toolbar-icon-color': '#adbac7',
-    '--toolbar-icon-active-color': themeColor,
-    '--preview-bg-color': '#22272e',
-    '--preview-text-color': '#fff',
-    '--file-manager-bg-color': '#22272e',
-    '--file-manager-text-color': '#94a3b8',
-    '--file-manager-active-bg-color': '#22272e',
-    '--file-manager-active-text-color': themeColor,
-    '--file-manager-right-float-bg': 'linear-gradient(90deg, rgba(34, 39, 46, 0) 0%, rgba(34, 39, 46, 1) 25%)',
-    '--message-warn-text-color': '#695f1b',
-    '--message-warn-bg-color': '#f7f0cd',
-    '--message-warn-border-color': '#695f1b',
-    '--message-error-text-color': '#f00',
-    '--message-error-bg-color': '#ffd7d7',
-    '--message-error-border-color': '#f00',
-    '--message-dismiss-text-color': '#fff',
-    '--message-dismiss-bg-color': '#f00'
+watch(
+  isDark,
+  val => {
+    props?.lifeCycle?.onDarkModeChange?.(val)
+  },
+  {
+    immediate: true
   }
+)
 
-  return isDark.value ? darkTheme : lightTheme
-})
+watch(
+  () => unref(showDarkMode),
+  val => {
+    if (val !== null && val !== undefined) toggleDark(val)
+  },
+  {
+    immediate: true
+  }
+)
 
 provide(STORE_INJECT_KEY, store)
 provide(SHOW_IMPORT_MAP_INJECT_KEY, true)
@@ -129,7 +94,9 @@ onMounted(() => {
 defineExpose({
   store,
   preview: previewRef,
-  editor: editorRef
+  editor: editorRef,
+  isDark,
+  toggleDark
 } as PlaygroundExpose)
 </script>
 <template>
@@ -157,7 +124,7 @@ defineExpose({
         <Editor
           v-show="showCode"
           ref="EditorRef"
-          :life-cycle="options.lifeCycle"
+          :life-cycle="lifeCycle"
           :style="{
             borderTop: layoutDirection === 'EditorBottomPreviewTop' ? '1px solid var(--border-color)' : 'none',
             borderRight: layoutDirection === 'EditorLeftPreviewRight' ? '1px solid var(--border-color)' : 'none'
diff --git a/packages/vue-playground/src/playground/utils/types-helper.ts b/packages/vue-playground/src/playground/utils/types-helper.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type {CSSProperties, Ref} from 'vue'
 import type {File, ReplStore} from '../../core'
+import type {PlaygroundProps} from '../playground.type'
 
 export type {editor as MonacoEditor} from 'monaco-editor'
 
@@ -31,10 +32,7 @@ export interface TsLib {
   filePath?: string
 }
 
-export interface PlaygroundOptions {
-  files: File[]
-  lifeCycle?: PlaygroundLifeCycle
-}
+export type PlaygroundOptions = Partial<PlaygroundProps>
 
 export interface PlaygroundLifeCycle {
   beforeLoadMonaco?: () => MaybePromise<void>
@@ -49,13 +47,12 @@ export interface PlaygroundLifeCycle {
   onCodeChange?: (event: {activeFile: File; newCode: string}) => MaybePromise<void>
   beforeDestroyEditor?: (monaco: Monaco, editor: IStandaloneCodeEditor) => MaybePromise<void>
   afterDestroyEditor?: (monaco: Monaco) => MaybePromise<void>
+  onDarkModeChange?: (darkMode: boolean) => MaybePromise<void>
 }
 
 export interface EditorExpose {
   getEditor: () => IStandaloneCodeEditor
-  isDark: Ref<boolean>
   disposeEditor: Ref<() => void>
-  toggleDark: (preIsDark?: boolean | undefined) => void
 }
 
 export interface PreviewExpose {
@@ -67,6 +64,8 @@ export interface PlaygroundExpose {
   store: ReplStore
   preview: Ref<PreviewExpose>
   editor: Ref<EditorExpose>
+  isDark: Ref<boolean>
+  toggleDark: (preIsDark?: boolean | undefined) => void
 }
 
 export interface PlaygroundTheme extends CSSProperties {
@@ -96,3 +95,8 @@ export interface PlaygroundTheme extends CSSProperties {
   '--message-dismiss-text-color'?: string
   '--message-dismiss-bg-color'?: string
 }
+
+export interface PlaygroundThemes {
+  light?: PlaygroundTheme
+  dark?: PlaygroundTheme
+}
diff --git a/packages/vuepress-plugin-sandbox/src/enhanceAppFile.ts b/packages/vuepress-plugin-sandbox/src/enhanceAppFile.ts
@@ -26,12 +26,11 @@ export default defineClientAppEnhance(async ({app}) => {
   app.component(SANDBOX_COMPONENT_NAME, defaultProps => {
     if (!Playground) return null
     const ClientOnly = resolveComponent('ClientOnly')
-    const playgroundOptions = self?.loadSandbox?.(defaultProps?.options) || defaultProps?.options
+    const playgroundOptions = self?.loadSandbox?.(defaultProps) || defaultProps
 
     return h(ClientOnly, {}, () =>
       h(Playground as ConcreteComponent, {
-        ...defaultProps,
-        options: playgroundOptions
+        ...playgroundOptions
       })
     )
   })
diff --git a/packages/vuepress-plugin-sandbox/src/node/plugin.ts b/packages/vuepress-plugin-sandbox/src/node/plugin.ts
@@ -6,7 +6,7 @@ import markdownItContainer from 'markdown-it-container'
 import type {MarkdownEnv} from '@vuepress/markdown'
 import type * as Token from 'markdown-it/lib/token'
 import type * as Renderer from 'markdown-it/lib/renderer'
-import {File, PlaygroundLifeCycle} from 'vue-playground'
+import {File, PlaygroundLifeCycle, PlaygroundOptions, PlaygroundThemes} from 'vue-playground'
 import * as base64 from 'js-base64'
 
 const pathResolve = (..._path: string[]) => path.resolve(__dirname, ..._path)
@@ -23,12 +23,13 @@ export interface DemoPluginOptions {
   demoCodeMark?: string
   defaultDescription?: string
   lifeCycle?: PlaygroundLifeCycle
+  themes?: PlaygroundThemes
 }
 
 export type RenderPlaceFunction = (description: string, codeBlockTokens?: Token[]) => string
 
 export const sandboxPlugin = (options: DemoPluginOptions = {}): Plugin => {
-  const {demoCodeMark = 'demo', defaultDescription = '', lifeCycle} = options
+  const {demoCodeMark = 'demo', defaultDescription = '', lifeCycle, themes} = options
 
   const START_TYPE = `container_${demoCodeMark}_open`
   const END_TYPE = `container_${demoCodeMark}_close`
@@ -50,12 +51,12 @@ export const sandboxPlugin = (options: DemoPluginOptions = {}): Plugin => {
 
     console.log('files....', files)
 
-    const options = {files}
+    const options: PlaygroundOptions = {files, themes}
     const optionsBase64 = base64.encode(JSON.stringify(options))
 
     return `<div class="demo-container ${demoCodeMark}">${
       des ? `<p class="demo-container-title">${des}</p>` : ''
-    }<playground :options="JSON.parse(base64.decode('${optionsBase64}'))">\n`
+    }<playground v-bind="JSON.parse(base64.decode('${optionsBase64}'))">\n`
   }
 
   const renderAfter: RenderPlaceFunction = () => '</playground></div>\n'
diff --git a/packages/vuepress-plugin-sandbox/types/global.d.ts b/packages/vuepress-plugin-sandbox/types/global.d.ts
