@mongoosejs/studio 0.1.19 → 0.1.20

package/backend/actions/Model/getDocument.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const Archetype = require('archetype');
+const getRefFromSchemaType = require('../../helpers/getRefFromSchemaType');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
 const authorize = require('../../authorize');
 
@@ -37,7 +38,7 @@ module.exports = ({ db }) => async function getDocument(params) {
     schemaPaths[path] = {
       instance: Model.schema.paths[path].instance,
       path,
-      ref: Model.schema.paths[path].options?.ref,
+      ref: getRefFromSchemaType(Model.schema.paths[path]),
       required: Model.schema.paths[path].options?.required,
       enum: Model.schema.paths[path].options?.enum
     };

package/backend/actions/Model/getDocuments.js

@@ -3,6 +3,7 @@
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
 const evaluateFilter = require('../../helpers/evaluateFilter');
+const getRefFromSchemaType = require('../../helpers/getRefFromSchemaType');
 const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
@@ -77,7 +78,7 @@ module.exports = ({ db }) => async function getDocuments(params) {
     schemaPaths[path] = {
       instance: schemaType.instance,
       path,
-      ref: schemaType.options?.ref,
+      ref: getRefFromSchemaType(schemaType),
       required: schemaType.options?.required,
       enum: schemaType.options?.enum
     };
@@ -87,7 +88,7 @@ module.exports = ({ db }) => async function getDocuments(params) {
         schemaPaths[path].schema[subpath] = {
           instance: schemaType.schema.paths[subpath].instance,
           path: subpath,
-          ref: schemaType.schema.paths[subpath].options?.ref,
+          ref: getRefFromSchemaType(schemaType.schema.paths[subpath]),
           required: schemaType.schema.paths[subpath].options?.required,
           enum: schemaType.schema.paths[subpath].options?.enum
         };

package/backend/actions/Model/getDocumentsStream.js

@@ -3,6 +3,7 @@
 const Archetype = require('archetype');
 const removeSpecifiedPaths = require('../../helpers/removeSpecifiedPaths');
 const evaluateFilter = require('../../helpers/evaluateFilter');
+const getRefFromSchemaType = require('../../helpers/getRefFromSchemaType');
 const authorize = require('../../authorize');
 
 const GetDocumentsParams = new Archetype({
@@ -67,7 +68,7 @@ module.exports = ({ db }) => async function* getDocumentsStream(params) {
     schemaPaths[path] = {
       instance: schemaType.instance,
       path,
-      ref: schemaType.options?.ref,
+      ref: getRefFromSchemaType(schemaType),
       required: schemaType.options?.required,
       enum: schemaType.options?.enum
     };
@@ -77,7 +78,7 @@ module.exports = ({ db }) => async function* getDocumentsStream(params) {
         schemaPaths[path].schema[subpath] = {
           instance: schemaType.schema.paths[subpath].instance,
           path: subpath,
-          ref: schemaType.schema.paths[subpath].options?.ref,
+          ref: getRefFromSchemaType(schemaType.schema.paths[subpath]),
           required: schemaType.schema.paths[subpath].options?.required,
           enum: schemaType.schema.paths[subpath].options?.enum
         };

package/backend/helpers/getRefFromSchemaType.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function getRefFromSchemaType(schemaType) {
+  return schemaType?.options?.ref ?? schemaType?.embeddedSchemaType?.options?.ref ?? schemaType?.caster?.options?.ref;
+};

package/frontend/public/app.js

@@ -4349,7 +4349,7 @@ module.exports = app => app.component('list-default', {
 (module) {
 
 "use strict";
-module.exports = "<div>\n  <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n    <button\n      v-if=\"showToggle\"\n      type=\"button\"\n      class=\"w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer\"\n      @click.stop=\"handleToggle\"\n    >\n      {{ isCollapsedNode ? '+' : '-' }}\n    </button>\n    <span v-else class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0\"></span>\n    <template v-if=\"hasKey\">\n      <span class=\"text-blue-600\">\"{{ nodeKey }}\"</span><span>: </span>\n    </template>\n    <template v-if=\"isComplex\">\n      <template v-if=\"hasChildren\">\n        <span>{{ openingBracket }}</span>\n        <span v-if=\"isCollapsedNode\" class=\"mx-1\">…</span>\n        <span v-if=\"isCollapsedNode\">{{ closingBracket }}{{ comma }}</span>\n      </template>\n      <template v-else>\n        <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>\n      </template>\n    </template>\n    <template v-else>\n      <!--\n        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.\n        This is done via CSS ellipsis strategy.\n      -->\n      <span\n        v-if=\"shouldShowReferenceLink\"\n        class=\"inline-flex items-baseline group\"\n      >\n        <span\n          :class=\"[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']\"\n          :style=\"typeof value === 'string'\n            ? {\n                display: 'inline-block',\n                maxWidth: '100%',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n                verticalAlign: 'bottom'\n              }\n            : {}\"\n          :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n        >\n          {{ formattedValue }}\n        </span>\n        <span>\n          {{ comma }}\n        </span>\n        <a\n          href=\"#\"\n          class=\"ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity\"\n          @click.stop.prevent=\"goToReference(value)\"\n        >\n          View Document\n        </a>\n      </span>\n      <span\n        v-else\n        :class=\"valueClasses\"\n        :style=\"typeof value === 'string'\n          ? {\n              display: 'inline-block',\n              maxWidth: '100%',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              verticalAlign: 'bottom'\n            }\n          : {}\"\n        :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n      >\n        {{ formattedValue }}{{ comma }}\n      </span>\n    </template>\n  </div>\n  <template v-if=\"isComplex && hasChildren && !isCollapsedNode\">\n    <json-node\n      v-for=\"child in children\"\n      :key=\"child.path\"\n      :node-key=\"child.displayKey\"\n      :value=\"child.value\"\n      :level=\"level + 1\"\n      :is-last=\"child.isLast\"\n      :path=\"child.path\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n      :references=\"references\"\n    ></json-node>\n    <div\n      v-if=\"hasHiddenRootChildren\"\n      class=\"flex items-baseline whitespace-pre\"\n      :style=\"indentStyle\"\n    >\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <button\n        type=\"button\"\n        class=\"text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400\"\n        :title=\"hiddenChildrenTooltip\"\n        @click.stop=\"handleExpandTopLevel\"\n      >\n        <span aria-hidden=\"true\">{{hiddenChildrenLabel}}…</span>\n      </button>\n    </div>\n    <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <span>{{ closingBracket }}{{ comma }}</span>\n    </div>\n  </template>\n</div>\n";
+module.exports = "<div>\n  <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n    <button\n      v-if=\"showToggle\"\n      type=\"button\"\n      class=\"w-4 h-4 mr-1 inline-flex items-center justify-center leading-none text-gray-500 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400 cursor-pointer\"\n      @click.stop=\"handleToggle\"\n    >\n      {{ isCollapsedNode ? '+' : '-' }}\n    </button>\n    <span v-else class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible flex-shrink-0\"></span>\n    <template v-if=\"hasKey\">\n      <span class=\"text-blue-600\">\"{{ nodeKey }}\"</span><span>: </span>\n    </template>\n    <template v-if=\"isComplex\">\n      <template v-if=\"hasChildren\">\n        <span>{{ openingBracket }}</span>\n        <span v-if=\"isCollapsedNode\" class=\"mx-1\">…</span>\n        <span v-if=\"isCollapsedNode\">{{ closingBracket }}{{ comma }}</span>\n      </template>\n      <template v-else>\n        <span>{{ openingBracket }}{{ closingBracket }}{{ comma }}</span>\n      </template>\n    </template>\n    <template v-else>\n      <!--\n        If value is a string and overflows its container (i.e. goes over one line), show an ellipsis.\n        This is done via CSS ellipsis strategy.\n      -->\n      <span\n        v-if=\"shouldShowReferenceLink\"\n        class=\"inline-flex items-baseline group\"\n      >\n        <span\n          :class=\"[...valueClasses, 'underline', 'decoration-dotted', 'underline-offset-2']\"\n          :style=\"typeof value === 'string'\n            ? {\n                display: 'inline-block',\n                maxWidth: '100%',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n                verticalAlign: 'bottom'\n              }\n            : {}\"\n          :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n        >\n          {{ formattedValue }}\n        </span>\n        <span>\n          {{ comma }}\n        </span>\n        <a\n          href=\"#\"\n          class=\"ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity\"\n          @click.stop.prevent=\"goToReference()\"\n        >\n          View Document\n        </a>\n      </span>\n      <span\n        v-else\n        :class=\"valueClasses\"\n        :style=\"typeof value === 'string'\n          ? {\n              display: 'inline-block',\n              maxWidth: '100%',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n              whiteSpace: 'nowrap',\n              verticalAlign: 'bottom'\n            }\n          : {}\"\n        :title=\"typeof value === 'string' && $el && $el.scrollWidth > $el.clientWidth ? value : undefined\"\n      >\n        {{ formattedValue }}{{ comma }}\n      </span>\n    </template>\n  </div>\n  <template v-if=\"isComplex && hasChildren && !isCollapsedNode\">\n    <json-node\n      v-for=\"child in children\"\n      :key=\"child.path\"\n      :node-key=\"child.displayKey\"\n      :value=\"child.value\"\n      :level=\"level + 1\"\n      :is-last=\"child.isLast\"\n      :path=\"child.path\"\n      :toggle-collapse=\"toggleCollapse\"\n      :is-collapsed=\"isCollapsed\"\n      :create-child-path=\"createChildPath\"\n      :indent-size=\"indentSize\"\n      :max-top-level-fields=\"maxTopLevelFields\"\n      :top-level-expanded=\"topLevelExpanded\"\n      :expand-top-level=\"expandTopLevel\"\n      :references=\"references\"\n    ></json-node>\n    <div\n      v-if=\"hasHiddenRootChildren\"\n      class=\"flex items-baseline whitespace-pre\"\n      :style=\"indentStyle\"\n    >\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <button\n        type=\"button\"\n        class=\"text-xs inline-flex items-center gap-1 ml-4 text-slate-500 hover:text-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-slate-400\"\n        :title=\"hiddenChildrenTooltip\"\n        @click.stop=\"handleExpandTopLevel\"\n      >\n        <span aria-hidden=\"true\">{{hiddenChildrenLabel}}…</span>\n      </button>\n    </div>\n    <div class=\"flex items-baseline whitespace-pre\" :style=\"indentStyle\">\n      <span class=\"w-4 h-4 mr-1 inline-flex items-center justify-center invisible\"></span>\n      <span>{{ closingBracket }}{{ comma }}</span>\n    </div>\n  </template>\n</div>\n";
 
 /***/ },
 
@@ -4650,7 +4650,31 @@ module.exports = app => app.component('list-json', {
           return this.references[this.normalizedPath] || null;
         },
         shouldShowReferenceLink() {
-          return Boolean(this.referenceModel) && typeof this.value === 'string';
+          return this.referenceId != null;
+        },
+        referenceId() {
+          if (!this.referenceModel) {
+            return null;
+          }
+          if (this.value == null) {
+            return null;
+          }
+          const type = typeof this.value;
+          if (type === 'string' || type === 'number' || type === 'bigint') {
+            return String(this.value);
+          }
+          if (type === 'object') {
+            if (this.value._id != null) {
+              return String(this.value._id);
+            }
+            if (typeof this.value.toString === 'function') {
+              const stringified = this.value.toString();
+              if (typeof stringified === 'string' && stringified !== '[object Object]') {
+                return stringified;
+              }
+            }
+          }
+          return null;
         }
       },
       methods: {
@@ -4676,8 +4700,9 @@ module.exports = app => app.component('list-json', {
             this.expandTopLevel();
           }
         },
-        goToReference(id) {
-          if (!this.referenceModel) {
+        goToReference() {
+          const id = this.referenceId;
+          if (!this.referenceModel || id == null) {
             return;
           }
           this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });
@@ -5298,7 +5323,7 @@ module.exports = app => app.component('models', {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
     }
-  
+
     await this.initSearchFromUrl();
   },
   computed: {
@@ -31935,7 +31960,7 @@ const compile = () => {
 (module) {
 
 "use strict";
-module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.19","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://studio.mongoosejs.io/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
+module.exports = /*#__PURE__*/JSON.parse('{"name":"@mongoosejs/studio","version":"0.1.20","description":"A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.","homepage":"https://mongoosestudio.app/","repository":{"type":"git","url":"https://github.com/mongoosejs/studio"},"license":"Apache-2.0","dependencies":{"@ai-sdk/anthropic":"2.x","@ai-sdk/google":"2.x","@ai-sdk/openai":"2.x","ai":"5.x","archetype":"0.13.1","csv-stringify":"6.3.0","ejson":"^2.2.3","extrovert":"^0.2.0","marked":"15.0.12","node-inspect-extracted":"3.x","tailwindcss":"3.4.0","vue":"3.x","vue-toastification":"^2.0.0-rc.5","webpack":"5.x"},"peerDependencies":{"mongoose":"7.x || 8.x || ^9.0.0"},"devDependencies":{"@masteringjs/eslint-config":"0.1.1","axios":"1.2.2","dedent":"^1.6.0","eslint":"9.30.0","express":"4.x","mocha":"10.2.0","mongoose":"9.x"},"scripts":{"lint":"eslint .","tailwind":"tailwindcss -o ./frontend/public/tw.css","tailwind:watch":"tailwindcss -o ./frontend/public/tw.css --watch","test":"mocha test/*.test.js"}}');
 
 /***/ }
 

package/frontend/src/list-json/json-node.html

@@ -53,7 +53,7 @@
         <a
           href="#"
           class="ml-1 text-sm text-sky-700 opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
-          @click.stop.prevent="goToReference(value)"
+          @click.stop.prevent="goToReference()"
         >
           View Document
         </a>

package/frontend/src/list-json/list-json.js

@@ -277,7 +277,31 @@ module.exports = app => app.component('list-json', {
           return this.references[this.normalizedPath] || null;
         },
         shouldShowReferenceLink() {
-          return Boolean(this.referenceModel) && typeof this.value === 'string';
+          return this.referenceId != null;
+        },
+        referenceId() {
+          if (!this.referenceModel) {
+            return null;
+          }
+          if (this.value == null) {
+            return null;
+          }
+          const type = typeof this.value;
+          if (type === 'string' || type === 'number' || type === 'bigint') {
+            return String(this.value);
+          }
+          if (type === 'object') {
+            if (this.value._id != null) {
+              return String(this.value._id);
+            }
+            if (typeof this.value.toString === 'function') {
+              const stringified = this.value.toString();
+              if (typeof stringified === 'string' && stringified !== '[object Object]') {
+                return stringified;
+              }
+            }
+          }
+          return null;
         }
       },
       methods: {
@@ -303,8 +327,9 @@ module.exports = app => app.component('list-json', {
             this.expandTopLevel();
           }
         },
-        goToReference(id) {
-          if (!this.referenceModel) {
+        goToReference() {
+          const id = this.referenceId;
+          if (!this.referenceModel || id == null) {
             return;
           }
           this.$router.push({ path: `/model/${this.referenceModel}/document/${id}` });

package/frontend/src/models/models.js

@@ -85,7 +85,7 @@ module.exports = app => app.component('models', {
         this.error = 'No models found and Mongoose is not connected. Check our documentation for more information.';
       }
     }
-  
+
     await this.initSearchFromUrl();
   },
   computed: {

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@mongoosejs/studio",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "A sleek, powerful MongoDB UI with built-in dashboarding and auth, seamlessly integrated with your Express, Vercel, or Netlify app.",
-  "homepage": "https://studio.mongoosejs.io/",
+  "homepage": "https://mongoosestudio.app/",
   "repository": {
     "type": "git",
     "url": "https://github.com/mongoosejs/studio"