feat: inspector (#77)

Co-authored-by: hanlee <me@hanlee.co>

Author: antfu

README.md

@@ -438,6 +438,12 @@ import './my-custom.css'
 import 'uno:utilities.css'
 ```
 
+### Inspector
+
+From v0.7.0, our Vite plugin now ships with a inspector for you to inspect and degbug your setup. Visit `http://localhost:3000/__unocss` in your Vite dev server to see the inspector.
+
+<img src="https://user-images.githubusercontent.com/11247099/140885990-1827f5ce-f12a-4ed4-9d63-e5145a65fb4a.png">
+
 ### CSS Scoping
 
 > 🚧 This part is still under experiment. You might want to read the code to see how it works currently.

package.json

@@ -10,8 +10,8 @@
     "lint:fix": "nr lint -- --fix",
     "play": "npm -C playground run dev",
     "play:build": "pnpm run build && npm -C playground run build",
-    "size": "esmo scripts/size.ts",
     "release": "bumpp package.json packages/*/package.json --commit --push --tag",
+    "size": "esmo scripts/size.ts",
     "test": "jest",
     "test:update": "jest -u"
   },
@@ -26,7 +26,9 @@
     "@iconify-json/tabler": "^1.0.1",
     "@iconify-json/twemoji": "^1.0.2",
     "@iconify-json/uim": "^1.0.2",
+    "@types/codemirror": "^5.60.5",
     "@types/jest": "^27.0.2",
+    "@types/lz-string": "^1.3.34",
     "@types/node": "^16.11.6",
     "@types/ws": "^8.2.0",
     "@unocss/core": "workspace:*",
@@ -35,20 +37,32 @@
     "@unocss/preset-uno": "workspace:*",
     "@unocss/reset": "workspace:*",
     "@unocss/vite": "workspace:*",
+    "@vitejs/plugin-vue": "^1.9.4",
     "@vueuse/core": "^6.7.4",
     "brotli-size": "^4.0.0",
     "bumpp": "^7.1.1",
+    "codemirror": "^5.63.3",
+    "codemirror-theme-vars": "^0.1.1",
     "eslint": "^8.1.0",
     "eslint-plugin-jest": "^25.2.2",
     "esno": "^0.10.1",
     "fast-glob": "^3.2.7",
     "gzip-size": "^6.0.0",
     "jest": "^27.3.1",
+    "lz-string": "^1.4.4",
+    "prettier": "^2.4.1",
+    "splitpanes": "^3.0.6",
     "terser": "^5.9.0",
     "ts-jest": "^27.0.7",
     "tsup": "^5.5.0",
     "typescript": "^4.4.4",
     "unocss": "workspace:*",
-    "ws": "^8.2.3"
+    "unplugin-auto-import": "^0.4.13",
+    "unplugin-vue-components": "^0.17.2",
+    "vite": "^2.6.13",
+    "vite-plugin-inspect": "^0.3.9",
+    "vite-plugin-pages": "^0.18.2",
+    "vue": "^3.2.21",
+    "vue-router": "^4.0.12"
   }
 }

packages/core/src/config.ts

@@ -65,6 +65,7 @@ export function resolveConfig(
     mergeSelectors: true,
     warnExcluded: true,
     excluded: [],
+    presets: [],
     sortLayers: layers => layers,
     ...config,
     envMode: config.envMode || 'build',

packages/core/src/types.ts

@@ -213,7 +213,7 @@ export interface UserOnlyOptions<Theme extends {} = {}> {
 export interface UserConfig<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme>, GeneratorOptions {}
 export interface UserConfigDefaults<Theme extends {} = {}> extends ConfigBase<Theme>, UserOnlyOptions<Theme> {}
 
-export interface ResolvedConfig extends Omit<Required<UserConfig>, 'presets' | 'rules' | 'shortcuts'> {
+export interface ResolvedConfig extends Omit<Required<UserConfig>, 'rules' | 'shortcuts'> {
   shortcuts: Shortcut[]
   variants: VariantObject[]
   rulesSize: number

packages/inspector/README.md

@@ -0,0 +1,27 @@
+# @unocss/inspector
+
+The inspector UI for UnoCSS. Ships with `unocss` and `@unocss/vite`.
+
+Visit `http://localhost:3000/__unocss` in your Vite dev server to see the inspector.
+
+<img src="https://user-images.githubusercontent.com/11247099/140885990-1827f5ce-f12a-4ed4-9d63-e5145a65fb4a.png">
+<img src="https://user-images.githubusercontent.com/11247099/140886020-7014f412-f020-4aed-a169-d025cc1bbcd3.png">
+
+## TODO
+
+- [x] Basic Overview
+- [x] Basic REPL
+- [x] Basic file view
+- [ ] Data caches (move the fetches to shared modules instead of in components)
+- [ ] Manual refresh button
+- [ ] Resizeable sidebar (use `splitpanes`, refer to playground)
+- [ ] Auto reload on file changes (reuse Vite's hmr if possible)
+- [ ] Config view
+- [ ] Edit files directly
+- [ ] CSS Prettify
+
+> 🙌 Contribution welcome!
+
+## License
+
+MIT License © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

packages/inspector/client/App.vue

@@ -0,0 +1,8 @@
+<template>
+  <div h-full grid="~ cols-[1fr,4fr]">
+    <Sidebar />
+    <div h-full of-hidden>
+      <RouterView />
+    </div>
+  </div>
+</template>

packages/inspector/client/auto-imports.d.ts

@@ -0,0 +1,180 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const biSyncRef: typeof import('@vueuse/core')['biSyncRef']
+  const computed: typeof import('vue')['computed']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+export {}

packages/inspector/client/components.d.ts

@@ -0,0 +1,25 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CodeMirror: typeof import('./components/CodeMirror.vue')['default']
+    FileIcon: typeof import('./components/FileIcon.vue')['default']
+    ModuleId: typeof import('./components/ModuleId.vue')['default']
+    ModuleInfo: typeof import('./components/ModuleInfo.vue')['default']
+    ModuleList: typeof import('./components/ModuleList.vue')['default']
+    ModuleTree: typeof import('./components/ModuleTree.vue')['default']
+    ModuleTreeNode: typeof import('./components/ModuleTreeNode.vue')['default']
+    NarBar: typeof import('./components/NarBar.vue')['default']
+    Overview: typeof import('./components/Overview.vue')['default']
+    Repl: typeof import('./components/Repl.vue')['default']
+    REPL: typeof import('./components/REPL.vue')['default']
+    ReplPlayground: typeof import('./components/ReplPlayground.vue')['default']
+    Sidebar: typeof import('./components/Sidebar.vue')['default']
+    StatusBar: typeof import('./components/StatusBar.vue')['default']
+    TitleBar: typeof import('./components/TitleBar.vue')['default']
+  }
+}
+
+export { }

playground/src/components/CodeMirror.vue …spector/client/components/CodeMirror.vueplayground/src/components/CodeMirror.vue renamed to packages/inspector/client/components/CodeMirror.vue playground/src/components/CodeMirror.vue renamed to packages/inspector/client/components/CodeMirror.vue

@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import { getMatchedPositions } from '../logics/pos'
-import { useCodeMirror } from '../logics/codemirror'
+import { getMatchedPositions } from '../composables/pos'
+import { useCodeMirror } from '../composables/codemirror'
 
+const emit = defineEmits<{ (input: any): void }>()
 const props = defineProps<{
   modelValue: string
   mode?: string
   readOnly?: boolean
-  matched?: Set<string>
-}>()
-const emit = defineEmits<{
-  (input: any): void
+  matched?: Set<string> | string[]
 }>()
 
+const modeMap: Record<string, string> = {
+  html: 'htmlmixed',
+  vue: 'htmlmixed',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  ts: 'typescript',
+  mts: 'typescript',
+}
+
 const el = ref<HTMLTextAreaElement>()
 const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 onMounted(async() => {
-  const cm = useCodeMirror(el, input, props)
+  const cm = useCodeMirror(el, input, {
+    ...props,
+    mode: modeMap[props.mode || ''] || props.mode,
+  })
   cm.setSize('100%', '100%')
   setTimeout(() => cm.refresh(), 100)
   const decorations: CodeMirror.TextMarker<CodeMirror.MarkerRange>[] = []
@@ -32,15 +43,15 @@ onMounted(async() => {
   function highlight() {
     // clear previous
     decorations.forEach(i => i.clear())
-
-    getMatchedPositions(input.value, props.matched || new Set())
+    getMatchedPositions(props.modelValue, Array.from(props.matched || []))
       .forEach(i => mark(...i))
   }
 
-  watchEffect(() => {
+  watch(() => [props.modelValue, props.matched], async() => {
+    await nextTick()
     if (props.matched)
       highlight()
-  })
+  }, { immediate: true })
 })
 </script>
 
@@ -114,4 +125,8 @@ html.dark {
   --cm-line-highlight-background: #444444;
   --cm-selection-background: #44444450;
 }
+
+.highlighted {
+  border-bottom: 1px dashed currentColor;
+}
 </style>