From 1600b51299d3f3d46fb3128090ba8aece797cc91 Mon Sep 17 00:00:00 2001
From: JD Solanki <47495003+jd-solanki@users.noreply.github.com>
Date: Sat, 3 Sep 2022 12:56:33 +0530
Subject: [PATCH] feat(inspector): Allow including/excluding safelist in REPL
 (#1532)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 packages/inspector/client/components/ReplPlayground.vue | 9 ++++++++-
 packages/inspector/client/composables/fetch.ts          | 4 ++--
 packages/inspector/node/index.ts                        | 3 ++-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/inspector/client/components/ReplPlayground.vue b/packages/inspector/client/components/ReplPlayground.vue
index 74bf8b0f9a..e661e7ea93 100644
--- 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
index 8b9341744d..7260ea5a63 100644
--- 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
index 0a728aaf82..5de92475f1 100644
--- 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),