From 56b6f351ee180c45f3b963ff55193f1c621323b2 Mon Sep 17 00:00:00 2001
From: JD Solanki <jdsolanki0001@gmail.com>
Date: Sat, 3 Sep 2022 09:52:11 +0530
Subject: [PATCH 1/2] feat(inspector): Allow including/excluding safelist in
 REPL

---
 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..7b55e1a8af 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 = ref(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..458f23b2c5 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)}&include-safelist=${includeSafelist.value}`), { refetch: true })
     .json<Result>()
 }
 
diff --git a/packages/inspector/node/index.ts b/packages/inspector/node/index.ts
index 0a728aaf82..7ec376d1b0 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('include-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),

From 17a5d9e95e332fdb5de3278b1a4e00d99ca46dc6 Mon Sep 17 00:00:00 2001
From: JD Solanki <47495003+jd-solanki@users.noreply.github.com>
Date: Sat, 3 Sep 2022 11:00:38 +0530
Subject: [PATCH 2/2] refactor: Applied suggestions

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

diff --git a/packages/inspector/client/components/ReplPlayground.vue b/packages/inspector/client/components/ReplPlayground.vue
index 7b55e1a8af..e661e7ea93 100644
--- a/packages/inspector/client/components/ReplPlayground.vue
+++ b/packages/inspector/client/components/ReplPlayground.vue
@@ -10,7 +10,7 @@ const input = useLocalStorage(
   '<div class="text-sm hover:text-red">\nHello World\n</div>',
 )
 
-const isSafelistIncluded = ref(false)
+const isSafelistIncluded = useStorage('unocss-inspector-safelist', false)
 const { data: result } = fetchRepl(input, isSafelistIncluded)
 </script>
 
diff --git a/packages/inspector/client/composables/fetch.ts b/packages/inspector/client/composables/fetch.ts
index 458f23b2c5..7260ea5a63 100644
--- a/packages/inspector/client/composables/fetch.ts
+++ b/packages/inspector/client/composables/fetch.ts
@@ -34,7 +34,7 @@ export function fetchModule(id: string | 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)}&include-safelist=${includeSafelist.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 7ec376d1b0..5de92475f1 100644
--- a/packages/inspector/node/index.ts
+++ b/packages/inspector/node/index.ts
@@ -65,7 +65,7 @@ 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('include-safelist') ?? 'false')
+        const includeSafelist = JSON.parse(query.get('safelist') ?? 'false')
 
         const result = await ctx.uno.generate(token, { preflights: false, safelist: includeSafelist })
         const mod = {