@nullix/zod-mongoose-studio 2.0.0 → 2.2.0

package/app/components/ZodMongooseStudio.vue

@@ -20,6 +20,21 @@ export default UserSchema;`);
 
 const outputDef = ref("// Definition output...");
 const outputSchema = ref("// Mongoose Schema output...");
+const outputTree = ref("// Mongoose Schema tree output...");
+const outputPaths = ref("// Mongoose Schema paths output...");
+const activeSchemaView = ref<"obj" | "tree" | "paths">("obj");
+const activeSchemaViewOutput = computed(() => {
+  switch (activeSchemaView.value) {
+    case "obj":
+      return outputSchema;
+    case "tree":
+      return outputTree;
+    case "paths":
+      return outputPaths;
+  }
+});
+const isDefOpen = ref(true);
+const isSchemaOpen = ref(true);
 
 const isCompiling = ref(false);
 
@@ -32,24 +47,25 @@ const handleCompile = async () => {
     });
     outputDef.value = `// Result of extractMongooseDef()\nconst definition = ${response.definition};`;
     outputSchema.value = `// Result of toMongooseSchema().obj\nconst schemaObj = ${response.schemaObj};`;
+    outputTree.value = `// Result of toMongooseSchema().tree\nconst schemaTree = ${response.schemaTree};`;
+    outputPaths.value = `// Result of toMongooseSchema().paths\nconst schemaPaths = ${response.schemaPaths};`;
   } catch (error: any) {
     const errText = `// Error\n${error.data?.message || error.message}`;
     outputDef.value = errText;
     outputSchema.value = errText;
+    outputTree.value = errText;
+    outputPaths.value = errText;
   } finally {
     isCompiling.value = false;
   }
 };
 
 // Auto-compile with a slight delay as they type
-watch(
-  sourceCode,
-  () => {
-    if (isDocsMode.value) return;
-    clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(handleCompile, 600);
-  }
-);
+watch(sourceCode, () => {
+  if (isDocsMode.value) return;
+  clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(handleCompile, 600);
+});
 
 // Initial compile for Docs Mode
 if (isDocsMode.value) {
@@ -58,9 +74,16 @@ if (isDocsMode.value) {
 </script>
 
 <template>
-  <div class="h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
+  <div
+    class="flex flex-col bg-gray-50 dark:bg-gray-950 overflow-hidden relative"
+    :class="[
+      isDocsMode
+        ? 'h-[calc(100vh-var(--ui-header-height,64px))] sticky top-[var(--ui-header-height,64px)]'
+        : 'h-screen',
+    ]"
+  >
     <header
-      class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 py-3 px-4 flex justify-between items-center shrink-0"
+      class="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 py-3 px-4 flex justify-between items-center shrink-0 z-20"
     >
       <div class="flex items-center gap-4">
         <h1 class="text-xl font-bold text-primary">
@@ -87,50 +110,116 @@ if (isDocsMode.value) {
       </div>
     </header>
 
-    <div
-      class="flex-1 grid grid-cols-2 gap-px bg-gray-200 dark:bg-gray-800 min-h-0"
+    <UDashboardGroup
+      class="flex-1 min-h-0 !relative !inset-auto"
+      storage-key="studio-layout"
     >
       <!-- Left: Editor -->
-      <div class="bg-white dark:bg-gray-950 h-full relative">
-        <ClientOnly>
-          <StudioEditor v-model="sourceCode" />
-        </ClientOnly>
-      </div>
+      <UDashboardPanel id="editor" collapsible resizable :min-size="20">
+        <div class="h-full relative bg-white dark:bg-gray-950">
+          <ClientOnly>
+            <StudioEditor v-model="sourceCode" />
+          </ClientOnly>
+        </div>
+      </UDashboardPanel>
 
       <!-- Right: Split Outputs -->
-      <div class="flex flex-col h-full gap-px bg-gray-200 dark:bg-gray-800">
+      <UDashboardPanel
+        id="outputs"
+        resizable
+        :min-size="20"
+        class="flex flex-col h-full bg-gray-200 dark:bg-gray-800 overflow-hidden"
+      >
         <!-- Top Right: Definition -->
-        <div
-          class="flex-1 bg-white dark:bg-gray-950 relative flex flex-col min-h-0"
+        <UCollapsible
+          v-model:open="isDefOpen"
+          :class="[isDefOpen ? 'flex-1' : 'flex-none']"
+          :ui="{ content: 'flex-1 flex flex-col min-h-0' }"
+          class="bg-white dark:bg-gray-950 flex flex-col min-h-0"
         >
-          <div
-            class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10"
-          >
-            extractMongooseDef()
-          </div>
-          <div class="flex-1 relative">
-            <ClientOnly>
-              <StudioOutput :model-value="outputDef" />
-            </ClientOnly>
-          </div>
-        </div>
+          <template #default="{ open }">
+            <div
+              class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10 flex justify-between items-center cursor-pointer select-none"
+            >
+              <span>extractMongooseDef()</span>
+              <UIcon
+                :name="
+                  open
+                    ? 'i-heroicons-chevron-down'
+                    : 'i-heroicons-chevron-right'
+                "
+              />
+            </div>
+          </template>
+          <template #content>
+            <div class="flex-1 relative">
+              <ClientOnly>
+                <StudioOutput :model-value="outputDef" />
+              </ClientOnly>
+            </div>
+          </template>
+        </UCollapsible>
 
         <!-- Bottom Right: Schema -->
-        <div
-          class="flex-1 bg-white dark:bg-gray-950 relative flex flex-col min-h-0"
+        <UCollapsible
+          v-model:open="isSchemaOpen"
+          :class="[isSchemaOpen ? 'flex-1' : 'flex-none']"
+          :ui="{ content: 'flex-1 flex flex-col min-h-0' }"
+          class="bg-white dark:bg-gray-950 flex flex-col min-h-0"
         >
-          <div
-            class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10"
-          >
-            toMongooseSchema()
-          </div>
-          <div class="flex-1 relative">
-            <ClientOnly>
-              <StudioOutput :model-value="outputSchema" />
-            </ClientOnly>
-          </div>
-        </div>
-      </div>
-    </div>
+          <template #default="{ open }">
+            <div
+              class="px-3 py-1 bg-gray-100 dark:bg-gray-900 text-xs font-semibold text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-800 z-10 flex justify-between items-center cursor-pointer select-none"
+            >
+              <div class="flex items-center gap-2">
+                <span>toMongooseSchema()</span>
+                <div class="flex gap-1" @click.stop>
+                  <UButton
+                    size="xs"
+                    variant="ghost"
+                    :color="activeSchemaView === 'obj' ? 'primary' : 'neutral'"
+                    @click="activeSchemaView = 'obj'"
+                  >
+                    .obj
+                  </UButton>
+                  <UButton
+                    size="xs"
+                    variant="ghost"
+                    :color="activeSchemaView === 'tree' ? 'primary' : 'neutral'"
+                    @click="activeSchemaView = 'tree'"
+                  >
+                    .tree
+                  </UButton>
+                  <UButton
+                    size="xs"
+                    variant="ghost"
+                    :color="
+                      activeSchemaView === 'paths' ? 'primary' : 'neutral'
+                    "
+                    @click="activeSchemaView = 'paths'"
+                  >
+                    .paths
+                  </UButton>
+                </div>
+              </div>
+              <UIcon
+                :name="
+                  open
+                    ? 'i-heroicons-chevron-down'
+                    : 'i-heroicons-chevron-right'
+                "
+              />
+            </div>
+          </template>
+          <template #content>
+            <div class="flex-1 relative">
+              <ClientOnly>
+                <StudioOutput :model-value="activeSchemaViewOutput.value" />
+              </ClientOnly>
+            </div>
+          </template>
+        </UCollapsible>
+      </UDashboardPanel>
+    </UDashboardGroup>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nullix/zod-mongoose-studio",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Monaco-powered TypeScript playground for @nullix/zod-mongoose",
   "main": "./nuxt.config.ts",
   "bin": {
@@ -44,7 +44,7 @@
     "mongoose": "9.6.3",
     "open": "11.0.0",
     "zod": "4.3.6",
-    "@nullix/zod-mongoose": "2.0.0"
+    "@nullix/zod-mongoose": "2.2.0"
   },
   "devDependencies": {
     "@nuxt/ui": "4.6.0",

package/server/api/parse.post.ts

@@ -135,10 +135,16 @@ export default defineEventHandler(async (event) => {
     const formattedDef = formatValue(extractedDef);
     // schemaObj is a Mongoose Schema instance, we only care about its .obj for display
     const formattedSchema = formatValue(mongooseSchema.obj);
+    // @ts-ignore
+    const formattedTree = formatValue(mongooseSchema.tree);
+    // @ts-ignore
+    const formattedPaths = formatValue(mongooseSchema.paths);
 
     return {
       definition: util.inspect(formattedDef, formatOpts),
       schemaObj: util.inspect(formattedSchema, formatOpts),
+      schemaTree: util.inspect(formattedTree, formatOpts),
+      schemaPaths: util.inspect(formattedPaths, formatOpts),
     };
   } catch (err: any) {
     throw createError({