feat(inspector): Allow including/excluding safelist in REPL (#1532)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
unocss · Sep 3, 2022 · 1600b51 · 1600b51
1 parent a1b3457
commit 1600b51
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/packages/inspector/client/components/ReplPlayground.vue b/packages/inspector/client/components/ReplPlayground.vue
@@ -10,7 +10,8 @@ const input = useLocalStorage(
   '<div class="text-sm hover:text-red">\nHello World\n</div>',
 )
 
-const { data: result } = fetchRepl(input)
+const isSafelistIncluded = useStorage('unocss-inspector-safelist', false)
+const { data: result } = fetchRepl(input, isSafelistIncluded)
 </script>
 
 <template>
@@ -23,6 +24,12 @@ const { data: result } = fetchRepl(input)
         Edit your code below to test and play UnoCSS's matching and generating.
       </div>
     </StatusBar>
+    <TitleBar border="b gray-400/20" title="">
+      <label>
+        <input v-model="isSafelistIncluded" type="checkbox">
+        Include safelist
+      </label>
+    </TitleBar>
     <div h-full of-hidden grid grid-cols-2>
       <CodeMirror
         v-model="input"

diff --git a/packages/inspector/client/composables/fetch.ts b/packages/inspector/client/composables/fetch.ts
@@ -32,9 +32,9 @@ export function fetchModule(id: string | Ref<string>) {
   return result
 }
 
-export function fetchRepl(input: Ref<string>) {
+export function fetchRepl(input: Ref<string>, includeSafelist: Ref<boolean>) {
   const debounced = useDebounce(input, 500)
-  return useFetch(computed(() => `${API_ROOT}/repl?token=${encodeURIComponent(debounced.value)}`), { refetch: true })
+  return useFetch(computed(() => `${API_ROOT}/repl?token=${encodeURIComponent(debounced.value)}&safelist=${includeSafelist.value}`), { refetch: true })
     .json<Result>()
 }
 

diff --git a/packages/inspector/node/index.ts b/packages/inspector/node/index.ts
@@ -65,8 +65,9 @@ export default function UnocssInspector(ctx: UnocssPluginContext): Plugin {
       if (req.url.startsWith('/repl')) {
         const query = new URLSearchParams(req.url.slice(5))
         const token = query.get('token') || ''
+        const includeSafelist = JSON.parse(query.get('safelist') ?? 'false')
 
-        const result = await ctx.uno.generate(token, { preflights: false })
+        const result = await ctx.uno.generate(token, { preflights: false, safelist: includeSafelist })
         const mod = {
           ...result,
           matched: Array.from(result.matched),