Add support for the optional SchemaFragment#objectRefType property (#1)

Author: marcelstoer

.gitignore

@@ -27,6 +27,7 @@
 .cache-loader
 .cache
 .rpt2_cache
+.publish
 
 # logs
 *.log*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/json-schema-viewer",
-  "version": "0.0.0",
+  "version": "4.16.401",
   "description": "A beautiful React component for viewing JSON Schema",
   "keywords": [],
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "commit": "git-cz",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint.fix": "yarn lint --fix",
-    "release": "sl-scripts release",
+    "release": "rm -rf .publish && mkdir .publish && cp package.json README.md LICENSE .publish/ && cp -r dist/* .publish/ && cd .publish && yarn pack && yarn publish ./stoplight-json-schema-viewer* --registry https://bin.ti8m.ch/artifactory/api/npm/channelsuite-npm-release/",
     "release.docs": "sl-scripts release:docs",
     "release.dryRun": "sl-scripts release --dry-run --debug",
     "storybook": "start-storybook -p 6006",

src/__tests__/index.spec.tsx

@@ -2298,7 +2298,8 @@ describe('$ref resolving', () => {
     `);
   });
 
-  it('should render caret for top-level array with $ref items', () => {
+  // skipped as we want '#/foo' to be resolved to "foo" rather than "$ref(#/foo)[]"
+  it.skip('should render caret for top-level array with $ref items', () => {
     const schema: JSONSchema4 = {
       type: 'array',
       items: {

src/components/shared/Types.tsx

@@ -1,3 +1,4 @@
+import { getLastPathSegment } from '@stoplight/json';
 import {
   isBooleanishNode,
   isReferenceNode,
@@ -71,6 +72,35 @@ export const Types: React.FunctionComponent<{ schemaNode: SchemaNode }> = ({ sch
 
     printedName ??= type + (formats === null || formats[0] !== type ? '' : `<${formats[1]}>`);
 
+    // It addresses https://github.com/stoplightio/elements/issues/2762.
+    // Abstract: instead of displaying "object" or "array[object]" we want to display the actual type of 'object'.
+    //
+    // The optional 'objectRefType' property is what ti&m Stoplight Elements core supplies for $ref types.
+    // In some cases (which ones?), the type information is available in the standard '$ref' property (evaluate both).
+    //
+    // We cannot redefine the SchemaFragment type as it's defined outside the scope of this project.
+    // -> sprinkle with '@ts-ignore'
+    //
+    if (type === SchemaNodeKind.Array) {
+      // @ts-ignore
+      if (schemaNode.fragment?.items?.objectRefType) {
+        // @ts-ignore
+        printedName = `array[${schemaNode.fragment.items.objectRefType}]`;
+        // @ts-ignore
+      } else if (schemaNode.fragment?.items?.$ref) {
+        // @ts-ignore
+        printedName = getLastPathSegment(schemaNode.fragment.items.$ref as string);
+      }
+    } else if (type === SchemaNodeKind.Object) {
+      // @ts-ignore
+      if (schemaNode.fragment?.objectRefType) {
+        // @ts-ignore
+        printedName = schemaNode.fragment.objectRefType;
+      } else if (schemaNode.fragment?.$ref) {
+        printedName = getLastPathSegment(schemaNode.fragment.$ref as string);
+      }
+    }
+
     return (
       <React.Fragment key={type}>
         <Box as="span" textOverflow="truncate" color="muted" data-test="property-type">