feat: quicktype

packages/devtools-ui-kit/src/components/NCodeBlock.vue

@@ -7,7 +7,7 @@ import { devToolsClient } from '../runtime/client'
 const props = withDefaults(
   defineProps<{
     code: string
-    lang?: Lang
+    lang?: Lang | 'text'
     lines?: boolean
     transformRendered?: (code: string) => string
   }>(), {
@@ -18,7 +18,9 @@ const props = withDefaults(
 const emit = defineEmits(['loaded'])
 
 const rendered = computed(() => {
-  const result = devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false }
+  const result = props.lang === 'text'
+    ? { code: props.code, supported: false }
+    : devToolsClient.value?.devtools.renderCodeHighlight(props.code, props.lang) || { code: props.code, supported: false }
   if (result.supported && props.transformRendered)
     result.code = props.transformRendered(result.code)
   if (result.supported)
@@ -51,7 +53,7 @@ const rendered = computed(() => {
 .n-code-block-lines .shiki code .line::before {
   content: counter(step);
   counter-increment: step;
-  width: 2rem;
+  width: 2.5rem;
   padding-right: 0.5rem;
   margin-right: 0.5rem;
   display: inline-block;

packages/devtools/client/app.vue

@@ -52,6 +52,7 @@ addEventListener('keydown', (e) => {
 })
 
 const { scale } = useDevToolsUIOptions()
+const dataSchema = useSchemaInput()
 
 onMounted(() => {
   const injectClient = useInjectionClient()
@@ -107,5 +108,8 @@ registerCommands(() =>
     </div>
     <DisconnectIndicator />
     <RestartDialogs />
+    <div v-lazy-show="dataSchema">
+      <LazyDataSchemaDrawer />
+    </div>
   </div>
 </template>

packages/devtools/client/components/DataSchemaButton.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  getter: () => { name?: string; input: string }
+}>()
+
+const input = useSchemaInput()
+</script>
+
+<template>
+  <NIconButton
+    v-tooltip="'Generate Data Schema'"
+    title="Generate Data Schema"
+    icon="carbon:container-services"
+    @click="input = getter()"
+  />
+</template>

packages/devtools/client/components/DataSchemaDrawer.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { InputData, jsonInputForTargetLanguage, quicktype } from 'quicktype-core'
+import { all as languages } from 'quicktype-core/dist/language/All'
+import type { Lang } from 'shiki-es'
+
+const input = useSchemaInput()
+
+const counter = ref(0)
+
+// TODO: use localStorage
+const selectedLang = ref('TypeScript')
+const language = computed(() => languages.find(l => l.displayName === selectedLang.value))
+// TODO: use localStorage
+const options = ref(language.value?.optionDefinitions.filter(o => typeof o.defaultValue === 'boolean'))
+
+const generatedJson = computedAsync(async () => {
+  // eslint-disable-next-line no-unused-expressions
+  counter.value
+
+  if (!input.value)
+    return ''
+
+  const jsonInput = jsonInputForTargetLanguage(selectedLang.value)
+
+  await jsonInput.addSource({
+    // TODO: input for custom name
+    name: input.value.name ?? 'Data',
+    samples: [input.value.input],
+  })
+
+  const inputData = new InputData()
+  inputData.addInput(jsonInput)
+
+  const result = await quicktype({
+    inputData,
+    lang: selectedLang.value,
+    rendererOptions: options.value?.reduce((acc: any, cur: any) => {
+      acc[cur.name] = cur.defaultValue
+      return acc
+    }, {} as any),
+  })
+
+  return result.lines.join('\n')
+})
+
+const shikiLanguage = computed<Lang>(() => {
+  const lang = selectedLang.value.toLocaleLowerCase()
+  if (lang.startsWith('javascript'))
+    return 'javascript'
+  else if (lang.startsWith('json'))
+    return 'json'
+  else if (lang.startsWith('typescript'))
+    return 'typescript'
+  else
+    return lang as Lang
+})
+
+watch(options, () => {
+  counter.value++
+}, { deep: true })
+
+watch(selectedLang, () => {
+  options.value = language.value?.optionDefinitions.filter(o => typeof o.defaultValue === 'boolean')
+})
+
+const copy = useCopy()
+
+function copyToClipboard() {
+  copy(generatedJson.value)
+}
+</script>
+
+<template>
+  <Teleport v-if="language" to="body">
+    <DrawerRight :model-value="!!input?.input" auto-close max-w-screen w-2xl n-code-block @close="input = null">
+      <div border="b base" flex="~ items-center gap-2" sticky left-0 right-0 top-0 z-1 p3 bg-base>
+        <p mr-2>
+          Schema
+        </p>
+        <NSelect v-model="selectedLang" n="xs primary">
+          <option v-for="lang of languages" :key="lang.displayName">
+            {{ lang.displayName }}
+          </option>
+        </NSelect>
+        <NDropdown v-if="options?.length" n="sm lime">
+          <template #trigger="{ click }">
+            <NIconButton icon="carbon-settings" p3.1 border="~ base" @click="click()" />
+            <span v-if="options" flex="~ items-center justify-center" absolute bottom--1 right--2 h-4 w-4 rounded-full bg-lime:30 text-8px>
+              {{ options.length }}
+            </span>
+          </template>
+          <div flex="~ col" w-100 of-auto py2>
+            <NSwitch
+              v-for="item, index of options"
+              :key="item.name"
+              v-model="options[index].defaultValue"
+              flex="~ gap-2" rounded px2 py2
+            >
+              <span text-xs capitalize op75>
+                {{ item.description }}
+              </span>
+            </NSwitch>
+          </div>
+        </NDropdown>
+        <div flex-auto />
+        <NIconButton icon="carbon-copy" border="~ base" mr-6 p3.1 @click="copyToClipboard()" />
+      </div>
+      <NCodeBlock v-if="generatedJson" :lang="shikiLanguage" :code="generatedJson" />
+    </DrawerRight>
+  </Teleport>
+</template>

packages/devtools/client/components/ServerRouteDetails.vue

@@ -473,6 +473,10 @@ watchEffect(() => {
         <code v-if="response.contentType" text-xs op50>
           {{ response.contentType }}
         </code>
+        <DataSchemaButton
+          v-if="response.contentType === 'application/json'"
+          :getter="() => ({ input: responseContent })"
+        />
         <div flex-auto />
         <div op50>
           Request finished in

packages/devtools/client/components/StateEditor.vue

@@ -73,6 +73,10 @@ async function refresh() {
       <slot name="actions" v-bind="{ isOpen, name, state }" />
       <template v-if="isOpen">
         <NIconButton v-tooltip.bottom="'Refresh View'" title="Refresh View" icon="carbon-renew" @click="refresh" />
+        <DataSchemaButton
+          v-if="proxy"
+          :getter="() => ({ name, input: JSON.stringify(proxy) })"
+        />
       </template>
     </div>
     <template v-if="isOpen || !name">

packages/devtools/client/composables/state-schema.ts

@@ -0,0 +1,6 @@
+export function useSchemaInput() {
+  return useSessionState<{
+    name?: string
+    input: string
+  } | null>('schema:input', null)
+}

packages/devtools/package.json

@@ -105,6 +105,7 @@
     "nuxt-vitest": "^0.10.2",
     "ofetch": "^1.1.1",
     "ohash": "^1.1.2",
+    "quicktype-core": "^23.0.63",
     "shiki": "^0.14.3",
     "shiki-es": "^0.14.0",
     "simple-git": "^3.19.1",