Show description before the type

[slinkydeveloper]

Hi,

I was wondering whether it's possible to show the description above the type, which is particularly useful for objects with a lot of fields.

[slinkydeveloper]

Perhaps at least for objects and arrays

[slinkydeveloper]

I tried to swizzle the component CreateObject but it didn't work, not sure why :(

[jy95]

@slinkydeveloper Welcome ;)

As you might have seen in the documentation, some customizations to fit everyone needs were done :

• qualifierMessagesOrder for customization of qualifier message (e.g. you want "const" before "pattern")
• DescriptionComponent for customization of the rendering of the description itself (e.g. you use Markdown in your description)

Do you have an idea on how you would like to specify the control you want ? It could be interesting to deep the idea a bit more ...

at least for objects and arrays

[jy95]

DescriptionComponent : Side note about this: It would be cool to have some docs on how to render descriptions as markdown. I found it somewhere in the tests around this repo :)

Nothing prevents someone to add an example in the docs ;)

for some reason swizzling only CreateObject is not enough

Technically speaking, I followed what Docusaurus said in my index.ts

So I'm curious : which commands did you use for swizzling ? Something similar to the documentation ?

npm run swizzle docusaurus-json-schema-plugin JSONSchemaViewer -- --typescript

Why I ask is because Docusaurus actually recommend this :

More info on https://docusaurus.io/docs/swizzling#wrapping

You can ask on Docusaurus discord / Github what goes wrong (unlikely that this lib is the only one with nested components people would like to swizzle). If I have to update something, it will be with pleasure.

[slinkydeveloper]

I think wrapping won't solve my case anyway, as i need to change the order of the components, right?

I tried the following command:

yarn swizzle docusaurus-json-schema-plugin JSONSchemaViewer/JSONSchemaElements/object/CreateObject --typescript --eject

This copied only the single file CreateObject.tsx. You can see the list of components that i can swizzle here:

yarn swizzle docusaurus-json-schema-plugin --list

I have only one hypothesis in mind: looking at the various swizzle examples I see there are no relative imports. Perhaps that's the trick that allows swizzling, some magical import resolution swapping?

(BTW sorry if I ask noob questions, it's my first time with docusaurus and typescript/mdx/etc 😄)

You can ask on Docusaurus discord / Github what goes wrong (unlikely that this lib is the only one with nested components people would like to swizzle). If I have to update something, it will be with pleasure.

Will try to do that!

[jy95]

@slinkydeveloper I think that in Docusaurus documentation , there is something missing on how to make one theme / plugin perfect for swizzle ...

What I would love to have in the current implementation is what you said : Path aliases in Typescrript.

From :

import { User } from '../../user/model';
import { Article } from '../../article/model';

import { Cache } from '../../../../cache';
import { MongoDB } from '../../../../mongodb';

To :

import { User } from '@modules/user/model';
import { Article } from '@modules/article/model';

import { Cache } from '@services/cache';
import { MongoDB } from '@services/mongodb';

Unless I am wrong, with current Docusaurus V2 implementation, I cannot do that otherwise that an annoying long paths in my imports

import { User } from 'docusaurus-json-schema-plugin/JSONSchemaViewer/JSONSchemaElements/object/CreateObject;
import { Article } from 'docusaurus-json-schema-plugin/.../nestedPath/Component';

[jy95]

@slinkydeveloper Good news - one hellish refactoring of imports / tests later, swizzling of components (like CreateObject / CreateArray) should work as expected - without any breaking changes for current users of the lib.
docusaurus-json-schema-plugin 1.6.1 is out with that 🎉

import React from "react"

import Items from "@theme/JSONSchemaViewer/JSONSchemaElements/array/Items"
import Contains from "@theme/JSONSchemaViewer/JSONSchemaElements/array/Contains"
import PrefixItems from "@theme/JSONSchemaViewer/JSONSchemaElements/array/PrefixItems"
import AdditionalItems from "@theme/JSONSchemaViewer/JSONSchemaElements/array/AdditionalItems"
import UnevaluatedItems from "@theme/JSONSchemaViewer/JSONSchemaElements/array/UnevaluatedItems"

import { QualifierMessages } from "@theme/JSONSchemaViewer/utils"

import { useJSVOptionsContext } from "@theme/JSONSchemaViewer/contexts"

import { ArrayLabel, TypeLabel } from "@theme/JSONSchemaViewer/labels"

import { CreateDescription } from "@theme/JSONSchemaViewer/JSONSchemaElements"

import type { JSONSchemaNS } from "@theme/JSONSchemaViewer/types"

type Props = {
  schema: JSONSchemaNS.Array
  nullable?: boolean
  description?: string
  [x: string]: any
}

export default function CreateArray(props: Props): JSX.Element {
  const { schema, nullable, description } = props
  const options = useJSVOptionsContext()

  return (
    <>
      <TypeLabel />
      &nbsp;&#58;&nbsp;
      <ArrayLabel />
      {description !== undefined && (
        <CreateDescription description={description} />
      )}
      <PrefixItems schema={schema} />
      <Items schema={schema} />
      <AdditionalItems schema={schema} />
      <UnevaluatedItems schema={schema} />
      <Contains schema={schema} />
      <div style={{ marginTop: "var(--ifm-table-cell-padding)" }}>
        <QualifierMessages
          schema={schema}
          options={options}
          nullable={nullable}
        />
      </div>
    </>
  )
}

Your IDE might complain but it works ... Maybe later I can add something in https://github.com/jy95/docusaurus-json-schema-plugin/blob/main/src/theme-json-schema.d.ts for that ...

[slinkydeveloper]

This is great, it works like a charm! Thanks for that!