@asyncapi/react-component 1.0.0-next.47 → 1.0.0-next.49

package/lib/cjs/containers/Messages/Message.js

@@ -33,7 +33,7 @@ var Message = function (_a) {
                         "#",
                         index)),
                     title && react_1.default.createElement("span", { className: "text-gray-700 mr-2" }, title),
-                    react_1.default.createElement("span", { className: "border text-orange-600 rounded text-xs py-0 px-2" }, message.uid())),
+                    react_1.default.createElement("span", { className: "border text-orange-600 rounded text-xs py-0 px-2" }, message.id())),
                 summary && react_1.default.createElement("p", { className: "text-gray-600 text-sm" }, summary),
                 showInfoList && (react_1.default.createElement("ul", { className: "leading-normal mt-2 mb-4 space-x-2 space-y-2" },
                     contentType && (react_1.default.createElement("li", { className: "inline-block" },
@@ -62,10 +62,10 @@ var Message = function (_a) {
                         ? helpers_1.CommonHelpers.getIdentifier("message-".concat(messageName, "-headers"), config)
                         : undefined },
                     react_1.default.createElement(components_1.Schema, { schemaName: "Headers", schema: headers }))),
-                message.hasBindings() && (react_1.default.createElement("div", { className: "mt-2" },
+                message.bindings().length > 0 && (react_1.default.createElement("div", { className: "mt-2" },
                     react_1.default.createElement(components_1.Bindings, { name: "Message specific information", bindings: message.bindings() }))),
                 react_1.default.createElement(components_1.Extensions, { item: message }),
-                message.hasTags() && (react_1.default.createElement("div", { className: "mt-2" },
+                message.tags().length > 0 && (react_1.default.createElement("div", { className: "mt-2" },
                     react_1.default.createElement(components_1.Tags, { tags: message.tags() }))))),
         showExamples && (react_1.default.createElement("div", { className: "panel-item--right px-8" },
             react_1.default.createElement(MessageExample_1.MessageExample, { message: message })))));

package/lib/cjs/containers/Messages/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Message as MessageType } from '@asyncapi/parser';\n\nimport { MessageExample } from './MessageExample';\nimport {\n  Href,\n  Markdown,\n  Schema,\n  Bindings,\n  Tags,\n  Extensions,\n} from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport {\n  CONTENT_TYPES_SITE,\n  EXTERAL_DOCUMENTATION_TEXT,\n} from '../../constants';\n\ninterface Props {\n  message: MessageType;\n  messageName?: string;\n  index?: number | string;\n  showExamples?: boolean;\n}\n\nexport const Message: React.FunctionComponent<Props> = ({\n  message,\n  messageName,\n  index,\n  showExamples = false,\n}) => {\n  const config = useConfig();\n\n  if (!message) {\n    return null;\n  }\n\n  // check typeof as fallback for older version than `2.4.0`\n  const messageId = typeof message.id === 'function' && message.id();\n  const title = message.title();\n  const summary = message.summary();\n  const payload = message.payload();\n  const headers = message.headers();\n  const correlationId = message.correlationId();\n\n  const contentType = message.contentType();\n  const externalDocs = message.externalDocs();\n  const showInfoList = contentType || externalDocs;\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded bg-gray-200 p-4 border\">\n          <div>\n            {index !== undefined && (\n              <span className=\"text-gray-700 font-bold mr-2\">#{index}</span>\n            )}\n            {title && <span className=\"text-gray-700 mr-2\">{title}</span>}\n            <span className=\"border text-orange-600 rounded text-xs py-0 px-2\">\n              {message.uid()}\n            </span>\n          </div>\n\n          {summary && <p className=\"text-gray-600 text-sm\">{summary}</p>}\n\n          {showInfoList && (\n            <ul className=\"leading-normal mt-2 mb-4 space-x-2 space-y-2\">\n              {contentType && (\n                <li className=\"inline-block\">\n                  <Href\n                    className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                    href={`${CONTENT_TYPES_SITE}/${contentType}`}\n                  >\n                    <span>{contentType}</span>\n                  </Href>\n                </li>\n              )}\n              {externalDocs && (\n                <li className=\"inline-block\">\n                  <Href\n                    className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                    href={externalDocs.url()}\n                  >\n                    <span>{EXTERAL_DOCUMENTATION_TEXT}</span>\n                  </Href>\n                </li>\n              )}\n            </ul>\n          )}\n\n          {messageId && (\n            <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n              <div className=\"text-sm text-gray-700\">\n                Message ID\n                <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n                  {messageId}\n                </span>\n              </div>\n            </div>\n          )}\n\n          {correlationId && (\n            <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n              <div className=\"text-sm text-gray-700\">\n                Correlation ID\n                <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n                  {correlationId.location()}\n                </span>\n              </div>\n\n              {correlationId.hasDescription() && (\n                <div className=\"mt-2\">\n                  <Markdown>{correlationId.description()}</Markdown>\n                </div>\n              )}\n            </div>\n          )}\n\n          {message.hasDescription() && (\n            <div className=\"mt-2\">\n              <Markdown>{message.description()}</Markdown>\n            </div>\n          )}\n\n          {payload && (\n            <div\n              className=\"mt-2\"\n              id={\n                messageName\n                  ? CommonHelpers.getIdentifier(\n                      `message-${messageName}-payload`,\n                      config,\n                    )\n                  : undefined\n              }\n            >\n              <Schema schemaName=\"Payload\" schema={payload} />\n            </div>\n          )}\n          {headers && (\n            <div\n              className=\"mt-2\"\n              id={\n                messageName\n                  ? CommonHelpers.getIdentifier(\n                      `message-${messageName}-headers`,\n                      config,\n                    )\n                  : undefined\n              }\n            >\n              <Schema schemaName=\"Headers\" schema={headers} />\n            </div>\n          )}\n\n          {message.hasBindings() && (\n            <div className=\"mt-2\">\n              <Bindings\n                name=\"Message specific information\"\n                bindings={message.bindings()}\n              />\n            </div>\n          )}\n\n          <Extensions item={message} />\n\n          {message.hasTags() && (\n            <div className=\"mt-2\">\n              <Tags tags={message.tags()} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {showExamples && (\n        <div className=\"panel-item--right px-8\">\n          <MessageExample message={message} />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Message.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MessageInterface } from '@asyncapi/parser';\n\nimport { MessageExample } from './MessageExample';\nimport {\n  Href,\n  Markdown,\n  Schema,\n  Bindings,\n  Tags,\n  Extensions,\n} from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport {\n  CONTENT_TYPES_SITE,\n  EXTERAL_DOCUMENTATION_TEXT,\n} from '../../constants';\n\ninterface Props {\n  message: MessageInterface;\n  messageName?: string;\n  index?: number | string;\n  showExamples?: boolean;\n}\n\nexport const Message: React.FunctionComponent<Props> = ({\n  message,\n  messageName,\n  index,\n  showExamples = false,\n}) => {\n  const config = useConfig();\n\n  if (!message) {\n    return null;\n  }\n\n  // check typeof as fallback for older version than `2.4.0`\n  const messageId = typeof message.id === 'function' && message.id();\n  const title = message.title();\n  const summary = message.summary();\n  const payload = message.payload();\n  const headers = message.headers();\n  const correlationId = message.correlationId();\n\n  const contentType = message.contentType();\n  const externalDocs = message.externalDocs();\n  const showInfoList = contentType || externalDocs;\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded bg-gray-200 p-4 border\">\n          <div>\n            {index !== undefined && (\n              <span className=\"text-gray-700 font-bold mr-2\">#{index}</span>\n            )}\n            {title && <span className=\"text-gray-700 mr-2\">{title}</span>}\n            <span className=\"border text-orange-600 rounded text-xs py-0 px-2\">\n              {message.id()}\n            </span>\n          </div>\n\n          {summary && <p className=\"text-gray-600 text-sm\">{summary}</p>}\n\n          {showInfoList && (\n            <ul className=\"leading-normal mt-2 mb-4 space-x-2 space-y-2\">\n              {contentType && (\n                <li className=\"inline-block\">\n                  <Href\n                    className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                    href={`${CONTENT_TYPES_SITE}/${contentType}`}\n                  >\n                    <span>{contentType}</span>\n                  </Href>\n                </li>\n              )}\n              {externalDocs && (\n                <li className=\"inline-block\">\n                  <Href\n                    className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                    href={externalDocs.url()}\n                  >\n                    <span>{EXTERAL_DOCUMENTATION_TEXT}</span>\n                  </Href>\n                </li>\n              )}\n            </ul>\n          )}\n\n          {messageId && (\n            <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n              <div className=\"text-sm text-gray-700\">\n                Message ID\n                <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n                  {messageId}\n                </span>\n              </div>\n            </div>\n          )}\n\n          {correlationId && (\n            <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n              <div className=\"text-sm text-gray-700\">\n                Correlation ID\n                <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n                  {correlationId.location()}\n                </span>\n              </div>\n\n              {correlationId.hasDescription() && (\n                <div className=\"mt-2\">\n                  <Markdown>{correlationId.description()}</Markdown>\n                </div>\n              )}\n            </div>\n          )}\n\n          {message.hasDescription() && (\n            <div className=\"mt-2\">\n              <Markdown>{message.description()}</Markdown>\n            </div>\n          )}\n\n          {payload && (\n            <div\n              className=\"mt-2\"\n              id={\n                messageName\n                  ? CommonHelpers.getIdentifier(\n                      `message-${messageName}-payload`,\n                      config,\n                    )\n                  : undefined\n              }\n            >\n              <Schema schemaName=\"Payload\" schema={payload} />\n            </div>\n          )}\n          {headers && (\n            <div\n              className=\"mt-2\"\n              id={\n                messageName\n                  ? CommonHelpers.getIdentifier(\n                      `message-${messageName}-headers`,\n                      config,\n                    )\n                  : undefined\n              }\n            >\n              <Schema schemaName=\"Headers\" schema={headers} />\n            </div>\n          )}\n\n          {message.bindings().length > 0 && (\n            <div className=\"mt-2\">\n              <Bindings\n                name=\"Message specific information\"\n                bindings={message.bindings()}\n              />\n            </div>\n          )}\n\n          <Extensions item={message} />\n\n          {message.tags().length > 0 && (\n            <div className=\"mt-2\">\n              <Tags tags={message.tags()} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      {showExamples && (\n        <div className=\"panel-item--right px-8\">\n          <MessageExample message={message} />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/lib/cjs/containers/Messages/MessageExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageExample.js","sourceRoot":"","sources":["../../../../src/containers/Messages/MessageExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { Message, Schema } from '@asyncapi/parser';\n\nimport { CollapseButton, JSONSnippet } from '../../components';\nimport { MessageHelpers } from '../../helpers/message';\nimport { MessageExample as MessageExampleType } from '../../types';\nimport { useConfig } from '../../contexts';\n\ninterface Props {\n  message: Message;\n}\n\nexport const MessageExample: React.FunctionComponent<Props> = ({ message }) => {\n  if (!message) {\n    return null;\n  }\n\n  const payload = message.payload();\n  const headers = message.headers();\n\n  return (\n    <div className=\"bg-gray-800 px-8 py-4 mt-4 -mx-8 2xl:mx-0 2xl:px-4 2xl:rounded examples\">\n      <h4 className=\"text-white text-lg\">Examples</h4>\n      {payload && (\n        <Example\n          type=\"Payload\"\n          schema={payload}\n          examples={MessageHelpers.getPayloadExamples(message)}\n        />\n      )}\n      {headers && (\n        <Example\n          type=\"Headers\"\n          schema={headers}\n          examples={MessageHelpers.getHeadersExamples(message)}\n        />\n      )}\n    </div>\n  );\n};\n\ninterface ExampleProps {\n  type: 'Payload' | 'Headers';\n  schema: Schema;\n  examples?: MessageExampleType[];\n}\n\nexport const Example: React.FunctionComponent<ExampleProps> = ({\n  type = 'Payload',\n  schema,\n  examples = [],\n}) => {\n  const config = useConfig();\n  const [expanded, setExpanded] = useState(\n    (config && config.expand && config.expand.messageExamples) || false,\n  );\n\n  useEffect(() => {\n    setExpanded(\n      (config && config.expand && config.expand.messageExamples) || false,\n    );\n  }, [config.expand]);\n\n  return (\n    <div className=\"mt-4\">\n      <div>\n        <CollapseButton\n          onClick={() => setExpanded(prev => !prev)}\n          expanded={expanded}\n          chevronProps={{\n            className: 'fill-current text-gray-200',\n          }}\n        >\n          <span className=\"inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-none\">\n            {type}\n          </span>\n        </CollapseButton>\n      </div>\n      <div className={expanded ? 'block' : 'hidden'}>\n        {examples && examples.length > 0 ? (\n          <ul>\n            {examples.map((example, idx) => (\n              <li className=\"mt-4\" key={idx}>\n                <h5 className=\"text-xs font-bold text-gray-500\">\n                  {example.name\n                    ? `#${idx + 1} Example - ${example.name}`\n                    : `#${idx + 1} Example`}\n                </h5>\n                {example.summary && (\n                  <p className=\"text-xs font-bold text-gray-500\">\n                    {example.summary}\n                  </p>\n                )}\n                <div className=\"mt-1\">\n                  <JSONSnippet\n                    snippet={MessageHelpers.sanitizeExample(example.example)}\n                  />\n                </div>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <div className=\"mt-4\">\n            <JSONSnippet\n              snippet={MessageHelpers.generateExample(schema.json())}\n            />\n            <h6 className=\"text-xs font-bold text-gray-600 italic mt-2\">\n              This example has been generated automatically.\n            </h6>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"MessageExample.js","sourceRoot":"","sources":["../../../../src/containers/Messages/MessageExample.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { MessageInterface, SchemaInterface } from '@asyncapi/parser';\n\nimport { CollapseButton, JSONSnippet } from '../../components';\nimport { MessageHelpers } from '../../helpers/message';\nimport { MessageExample as MessageExampleType } from '../../types';\nimport { useConfig } from '../../contexts';\n\ninterface Props {\n  message: MessageInterface;\n}\n\nexport const MessageExample: React.FunctionComponent<Props> = ({ message }) => {\n  if (!message) {\n    return null;\n  }\n\n  const payload = message.payload();\n  const headers = message.headers();\n\n  return (\n    <div className=\"bg-gray-800 px-8 py-4 mt-4 -mx-8 2xl:mx-0 2xl:px-4 2xl:rounded examples\">\n      <h4 className=\"text-white text-lg\">Examples</h4>\n      {payload && (\n        <Example\n          type=\"Payload\"\n          schema={payload}\n          examples={MessageHelpers.getPayloadExamples(message)}\n        />\n      )}\n      {headers && (\n        <Example\n          type=\"Headers\"\n          schema={headers}\n          examples={MessageHelpers.getHeadersExamples(message)}\n        />\n      )}\n    </div>\n  );\n};\n\ninterface ExampleProps {\n  type: 'Payload' | 'Headers';\n  schema: SchemaInterface;\n  examples?: MessageExampleType[];\n}\n\nexport const Example: React.FunctionComponent<ExampleProps> = ({\n  type = 'Payload',\n  schema,\n  examples = [],\n}) => {\n  const config = useConfig();\n  const [expanded, setExpanded] = useState(\n    (config && config.expand && config.expand.messageExamples) || false,\n  );\n\n  useEffect(() => {\n    setExpanded(\n      (config && config.expand && config.expand.messageExamples) || false,\n    );\n  }, [config.expand]);\n\n  return (\n    <div className=\"mt-4\">\n      <div>\n        <CollapseButton\n          onClick={() => setExpanded(prev => !prev)}\n          expanded={expanded}\n          chevronProps={{\n            className: 'fill-current text-gray-200',\n          }}\n        >\n          <span className=\"inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-none\">\n            {type}\n          </span>\n        </CollapseButton>\n      </div>\n      <div className={expanded ? 'block' : 'hidden'}>\n        {examples && examples.length > 0 ? (\n          <ul>\n            {examples.map((example, idx) => (\n              <li className=\"mt-4\" key={idx}>\n                <h5 className=\"text-xs font-bold text-gray-500\">\n                  {example.name\n                    ? `#${idx + 1} Example - ${example.name}`\n                    : `#${idx + 1} Example`}\n                </h5>\n                {example.summary && (\n                  <p className=\"text-xs font-bold text-gray-500\">\n                    {example.summary}\n                  </p>\n                )}\n                <div className=\"mt-1\">\n                  <JSONSnippet\n                    snippet={MessageHelpers.sanitizeExample(example.example)}\n                  />\n                </div>\n              </li>\n            ))}\n          </ul>\n        ) : (\n          <div className=\"mt-4\">\n            <JSONSnippet\n              snippet={MessageHelpers.generateExample(schema.json())}\n            />\n            <h6 className=\"text-xs font-bold text-gray-600 italic mt-2\">\n              This example has been generated automatically.\n            </h6>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"]}

package/lib/cjs/containers/Messages/Messages.js

@@ -12,7 +12,7 @@ var constants_1 = require("../../constants");
 var Messages = function () {
     var asyncapi = (0, contexts_1.useSpec)();
     var config = (0, contexts_1.useConfig)();
-    var messages = asyncapi.hasComponents() && asyncapi.components().messages();
+    var messages = !asyncapi.components().isEmpty() && asyncapi.components().messages();
     if (!messages || Object.keys(messages).length === 0) {
         return null;
     }

package/lib/cjs/containers/Messages/Messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Messages.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,qCAAoC;AAEpC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAAgD;AAEzC,IAAM,QAAQ,GAA4B;IAC/C,IAAM,QAAQ,GAAG,IAAA,kBAAO,GAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAC3B,IAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;IAE9E,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACnD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAE,EACxD,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,yBAAa,CACX;QACL,0CACG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,GAAG;gBAA1B,WAAW,QAAA,EAAE,OAAO,QAAA;YAAW,OAAA,CAC7D,sCACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAAC,kBAAW,WAAW,CAAE,EAAE,MAAM,CAAC;gBAEjE,8BAAC,iBAAO,IACN,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,GAAG,GAAG,CAAC,EACd,GAAG,EAAE,WAAW,GAChB,CACC,CACN;QAb8D,CAa9D,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,QAAQ,YAmCnB","sourcesContent":["import React from 'react';\n\nimport { Message } from './Message';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { MESSAGES_TEXT } from '../../constants';\n\nexport const Messages: React.FunctionComponent = () => {\n  const asyncapi = useSpec();\n  const config = useConfig();\n  const messages = asyncapi.hasComponents() && asyncapi.components().messages();\n\n  if (!messages || Object.keys(messages).length === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('messages', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {MESSAGES_TEXT}\n      </h2>\n      <ul>\n        {Object.entries(messages).map(([messageName, message], idx) => (\n          <li\n            className=\"mb-4\"\n            key={messageName}\n            id={CommonHelpers.getIdentifier(`message-${messageName}`, config)}\n          >\n            <Message\n              messageName={messageName}\n              message={message}\n              index={idx + 1}\n              key={messageName}\n            />\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n};\n"]}
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Messages.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,qCAAoC;AAEpC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAAgD;AAEzC,IAAM,QAAQ,GAA4B;IAC/C,IAAM,QAAQ,GAAG,IAAA,kBAAO,GAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAC3B,IAAM,QAAQ,GACZ,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC;IAEvE,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACnD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAE,EACxD,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,yBAAa,CACX;QACL,0CACG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,GAAG;gBAA1B,WAAW,QAAA,EAAE,OAAO,QAAA;YAAW,OAAA,CAC7D,sCACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAAC,kBAAW,WAAW,CAAE,EAAE,MAAM,CAAC;gBAEjE,8BAAC,iBAAO,IACN,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,GAAG,GAAG,CAAC,EACd,GAAG,EAAE,WAAW,GAChB,CACC,CACN;QAb8D,CAa9D,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,QAAQ,YAoCnB","sourcesContent":["import React from 'react';\n\nimport { Message } from './Message';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { MESSAGES_TEXT } from '../../constants';\n\nexport const Messages: React.FunctionComponent = () => {\n  const asyncapi = useSpec();\n  const config = useConfig();\n  const messages =\n    !asyncapi.components().isEmpty() && asyncapi.components().messages();\n\n  if (!messages || Object.keys(messages).length === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('messages', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {MESSAGES_TEXT}\n      </h2>\n      <ul>\n        {Object.entries(messages).map(([messageName, message], idx) => (\n          <li\n            className=\"mb-4\"\n            key={messageName}\n            id={CommonHelpers.getIdentifier(`message-${messageName}`, config)}\n          >\n            <Message\n              messageName={messageName}\n              message={message}\n              index={idx + 1}\n              key={messageName}\n            />\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n};\n"]}

package/lib/cjs/containers/Operations/Operation.js

@@ -31,28 +31,30 @@ var Operation = function (props) {
     }
     var servers = typeof channel.servers === 'function' && channel.servers();
     var security = typeof operation.security === 'function' && operation.security();
-    var parameters = helpers_1.SchemaHelpers.parametersToSchema(channel.parameters());
+    var parameters = channel.parameters() !== undefined
+        ? helpers_1.SchemaHelpers.parametersToSchema(channel.parameters())
+        : undefined;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "panel-item--center px-8" },
             react_1.default.createElement(exports.OperationInfo, __assign({}, props)),
             servers && servers.length > 0 ? (react_1.default.createElement("div", { className: "mt-2 text-sm" },
                 react_1.default.createElement("p", null, "Available only on servers:"),
-                react_1.default.createElement("ul", { className: "flex flex-wrap leading-normal" }, servers.map(function (server) { return (react_1.default.createElement("li", { className: "inline-block mt-2 mr-2", key: server },
+                react_1.default.createElement("ul", { className: "flex flex-wrap leading-normal" }, servers.map(function (server) { return (react_1.default.createElement("li", { className: "inline-block mt-2 mr-2", key: server.id() },
                     react_1.default.createElement("a", { href: "#".concat(helpers_1.CommonHelpers.getIdentifier('server-' + server, config)), className: "border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer" },
                         react_1.default.createElement("span", { className: "underline" }, server)))); })))) : null,
             parameters && (react_1.default.createElement("div", { className: "mt-2", id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(type, "-").concat(channelName, "-parameters"), config) },
                 react_1.default.createElement(components_1.Schema, { schemaName: "Parameters", schema: parameters, expanded: true }))),
             security && (react_1.default.createElement("div", { className: "mt-2", id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(type, "-").concat(channelName, "-security"), config) },
                 react_1.default.createElement(Security_1.Security, { security: security, header: "Additional security requirements" }))),
-            channel.hasBindings() && (react_1.default.createElement("div", { className: "mt-2" },
+            channel.bindings() && (react_1.default.createElement("div", { className: "mt-2" },
                 react_1.default.createElement(components_1.Bindings, { name: "Channel specific information", bindings: channel.bindings() }))),
             react_1.default.createElement(components_1.Extensions, { name: "Channel Extensions", item: channel }),
-            operation.hasBindings() && (react_1.default.createElement("div", { className: "mt-2" },
+            operation.bindings() && (react_1.default.createElement("div", { className: "mt-2" },
                 react_1.default.createElement(components_1.Bindings, { name: "Operation specific information", bindings: operation.bindings() }))),
             react_1.default.createElement(components_1.Extensions, { name: "Operation Extensions", item: operation }),
-            operation.hasTags() && (react_1.default.createElement("div", { className: "mt-2" },
+            operation.tags() && (react_1.default.createElement("div", { className: "mt-2" },
                 react_1.default.createElement(components_1.Tags, { tags: operation.tags() })))),
-        react_1.default.createElement("div", { className: "w-full mt-4", id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(type, "-").concat(channelName, "-message"), config) }, operation.hasMultipleMessages() ? (react_1.default.createElement("div", { className: "mt-2" },
+        react_1.default.createElement("div", { className: "w-full mt-4", id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(type, "-").concat(channelName, "-message"), config) }, operation.messages().length > 1 ? (react_1.default.createElement("div", { className: "mt-2" },
             react_1.default.createElement("p", { className: "px-8" },
                 "Accepts ",
                 react_1.default.createElement("strong", null, "one of"),
@@ -61,7 +63,7 @@ var Operation = function (props) {
                 react_1.default.createElement(Message_1.Message, { message: msg, index: idx, showExamples: true }))); })))) : (react_1.default.createElement("div", { className: "mt-2" },
             react_1.default.createElement("p", { className: "px-8" }, "Accepts the following message:"),
             react_1.default.createElement("div", { className: "mt-2" },
-                react_1.default.createElement(Message_1.Message, { message: operation.message(0), showExamples: true })))))));
+                react_1.default.createElement(Message_1.Message, { message: operation.messages()[0], showExamples: true })))))));
 };
 exports.Operation = Operation;
 var OperationInfo = function (_a) {

package/lib/cjs/containers/Operations/Operation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Operation.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operation.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,+CAA8C;AAC9C,gDAA+C;AAC/C,+CAO0B;AAE1B,2CAA2C;AAC3C,yCAA6D;AAC7D,6CAIyB;AACzB,qCAA0C;AASnC,IAAM,SAAS,GAAmC,UAAA,KAAK;IAC5D,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IACnB,IAAA,KAAgE,KAAK,KAA3C,EAA1B,IAAI,mBAAG,mBAAW,CAAC,OAAO,KAAA,EAAE,SAAS,GAA2B,KAAK,UAAhC,EAAE,WAAW,GAAc,KAAK,YAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAE9E,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE;QAC1B,OAAO,IAAI,CAAC;KACb;IAGD,IAAM,OAAO,GAAG,OAAO,OAAO,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;IAE3E,IAAM,QAAQ,GACZ,OAAO,SAAS,CAAC,QAAQ,KAAK,UAAU,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;IACnE,IAAM,UAAU,GAAG,uBAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAE1E,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,yBAAyB;YACtC,8BAAC,qBAAa,eAAK,KAAK,EAAI;YAE3B,OAAO,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/B,uCAAK,SAAS,EAAC,cAAc;gBAC3B,sEAAiC;gBACjC,sCAAI,SAAS,EAAC,+BAA+B,IAC1C,OAAO,CAAC,GAAG,CAAC,UAAA,MAAM,IAAI,OAAA,CACrB,sCAAI,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,MAAgB;oBAC1D,qCACE,IAAI,EAAE,WAAI,uBAAa,CAAC,aAAa,CACnC,SAAS,GAAG,MAAM,EAClB,MAAM,CACP,CAAE,EACH,SAAS,EAAC,yJAAyJ;wBAEnK,wCAAM,SAAS,EAAC,WAAW,IAAE,MAAM,CAAQ,CACzC,CACD,CACN,EAZsB,CAYtB,CAAC,CACC,CACD,CACP,CAAC,CAAC,CAAC,IAAI;YAEP,UAAU,IAAI,CACb,uCACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,IAAI,cAAI,WAAW,gBAAa,EAC7C,MAAM,CACP;gBAED,8BAAC,mBAAM,IACL,UAAU,EAAC,YAAY,EACvB,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,IAAI,GACd,CACE,CACP;YAEA,QAAQ,IAAI,CACX,uCACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,IAAI,cAAI,WAAW,cAAW,EAC3C,MAAM,CACP;gBAED,8BAAC,mBAAQ,IACP,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAC,kCAAkC,GACzC,CACE,CACP;YAEA,OAAO,CAAC,WAAW,EAAE,IAAI,CACxB,uCAAK,SAAS,EAAC,MAAM;gBACnB,8BAAC,qBAAQ,IACP,IAAI,EAAC,8BAA8B,EACnC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,GAC5B,CACE,CACP;YAED,8BAAC,uBAAU,IAAC,IAAI,EAAC,oBAAoB,EAAC,IAAI,EAAE,OAAO,GAAI;YAEtD,SAAS,CAAC,WAAW,EAAE,IAAI,CAC1B,uCAAK,SAAS,EAAC,MAAM;gBACnB,8BAAC,qBAAQ,IACP,IAAI,EAAC,gCAAgC,EACrC,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAAE,GAC9B,CACE,CACP;YAED,8BAAC,uBAAU,IAAC,IAAI,EAAC,sBAAsB,EAAC,IAAI,EAAE,SAAS,GAAI;YAE1D,SAAS,CAAC,OAAO,EAAE,IAAI,CACtB,uCAAK,SAAS,EAAC,MAAM;gBACnB,8BAAC,iBAAI,IAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,GAAI,CAC5B,CACP,CACG;QAEN,uCACE,SAAS,EAAC,aAAa,EACvB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,IAAI,cAAI,WAAW,aAAU,EAC1C,MAAM,CACP,IAEA,SAAS,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,CACjC,uCAAK,SAAS,EAAC,MAAM;YACnB,qCAAG,SAAS,EAAC,MAAM;;gBACT,uDAAuB;2CAC7B;YACJ,0CACG,SAAS,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,UAAC,GAAG,EAAE,GAAG,IAAK,OAAA,CACtC,sCAAI,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,GAAG;gBAC3B,8BAAC,iBAAO,IAAC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,GAAI,CACtD,CACN,EAJuC,CAIvC,CAAC,CACC,CACD,CACP,CAAC,CAAC,CAAC,CACF,uCAAK,SAAS,EAAC,MAAM;YACnB,qCAAG,SAAS,EAAC,MAAM,qCAAmC;YACtD,uCAAK,SAAS,EAAC,MAAM;gBACnB,8BAAC,iBAAO,IACN,OAAO,EAAG,SAAS,CAAC,OAAkC,CAAC,CAAC,CAAC,EACzD,YAAY,EAAE,IAAI,GAClB,CACE,CACF,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAvIW,QAAA,SAAS,aAuIpB;AAEK,IAAM,aAAa,GAAmC,UAAC,EAK7D;QAJC,YAA0B,EAA1B,IAAI,mBAAG,mBAAW,CAAC,OAAO,KAAA,EAC1B,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,OAAO,aAAA;IAEP,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAC3B,IAAM,gBAAgB,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC;IAC7C,IAAM,YAAY,GAAG,SAAS,CAAC,YAAY,EAAE,CAAC;IAC9C,IAAM,WAAW,GAAG,SAAS,CAAC,EAAE,EAAE,CAAC;IAEnC,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,MAAM;YACnB;gBACE,wCACE,SAAS,EAAE,sDACT,IAAI,KAAK,mBAAW,CAAC,OAAO;wBAC1B,CAAC,CAAC,+BAA+B;wBACjC,CAAC,CAAC,iCAAiC,CACrC,EACF,KAAK,EAAE,IAAI,IAEV,IAAI,KAAK,mBAAW,CAAC,OAAO;oBAC3B,CAAC,CAAC,MAAM,CAAC,YAAY,IAAI,sCAA0B;oBACnD,CAAC,CAAC,MAAM,CAAC,cAAc,IAAI,wCAA4B,CACpD;gBAAC,GAAG;gBACX,wCAAM,SAAS,EAAC,qBAAqB,IAAE,WAAW,CAAQ,CACvD,CACD;QAEL,OAAO,CAAC,cAAc,EAAE,IAAI,CAC3B,uCAAK,SAAS,EAAC,MAAM;YACnB,8BAAC,qBAAQ,QAAE,OAAO,CAAC,WAAW,EAAE,CAAY,CACxC,CACP;QACA,gBAAgB,IAAI,CACnB,qCAAG,SAAS,EAAC,4BAA4B,IAAE,gBAAgB,CAAK,CACjE;QACA,SAAS,CAAC,cAAc,EAAE,IAAI,CAC7B,uCAAK,SAAS,EAAC,MAAM;YACnB,8BAAC,qBAAQ,QAAE,SAAS,CAAC,WAAW,EAAE,CAAY,CAC1C,CACP;QAEA,YAAY,IAAI,CACf,sCAAI,SAAS,EAAC,8CAA8C,IACzD,YAAY,IAAI,CACf,sCAAI,SAAS,EAAC,cAAc;YAC1B,8BAAC,iBAAI,IACH,SAAS,EAAC,4JAA4J,EACtK,IAAI,EAAE,YAAY,CAAC,GAAG,EAAE;gBAExB,4CAAO,sCAA0B,CAAQ,CACpC,CACJ,CACN,CACE,CACN;QAEA,WAAW,IAAI,CACd,uCAAK,SAAS,EAAC,2CAA2C;YACxD,uCAAK,SAAS,EAAC,uBAAuB;;gBAEpC,wCAAM,SAAS,EAAC,uDAAuD,IACpE,WAAW,CACP,CACH,CACF,CACP,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAxEW,QAAA,aAAa,iBAwExB","sourcesContent":["import React from 'react';\nimport { Channel, Operation as OperationType } from '@asyncapi/parser';\n\nimport { Message } from '../Messages/Message';\nimport { Security } from '../Servers/Security';\nimport {\n  Href,\n  Markdown,\n  Schema,\n  Bindings,\n  Tags,\n  Extensions,\n} from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers, SchemaHelpers } from '../../helpers';\nimport {\n  EXTERAL_DOCUMENTATION_TEXT,\n  PUBLISH_LABEL_DEFAULT_TEXT,\n  SUBSCRIBE_LABEL_DEFAULT_TEXT,\n} from '../../constants';\nimport { PayloadType } from '../../types';\n\ninterface Props {\n  type: PayloadType;\n  operation: OperationType;\n  channelName: string;\n  channel: Channel;\n}\n\nexport const Operation: React.FunctionComponent<Props> = props => {\n  const config = useConfig();\n  const { type = PayloadType.PUBLISH, operation, channelName, channel } = props;\n\n  if (!operation || !channel) {\n    return null;\n  }\n\n  // check typeof as fallback for older version than `2.2.0`\n  const servers = typeof channel.servers === 'function' && channel.servers();\n  // check typeof as fallback for older version than `2.4.0`\n  const security =\n    typeof operation.security === 'function' && operation.security();\n  const parameters = SchemaHelpers.parametersToSchema(channel.parameters());\n\n  return (\n    <div>\n      <div className=\"panel-item--center px-8\">\n        <OperationInfo {...props} />\n\n        {servers && servers.length > 0 ? (\n          <div className=\"mt-2 text-sm\">\n            <p>Available only on servers:</p>\n            <ul className=\"flex flex-wrap leading-normal\">\n              {servers.map(server => (\n                <li className=\"inline-block mt-2 mr-2\" key={server as string}>\n                  <a\n                    href={`#${CommonHelpers.getIdentifier(\n                      'server-' + server,\n                      config,\n                    )}`}\n                    className=\"border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer\"\n                  >\n                    <span className=\"underline\">{server}</span>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n\n        {parameters && (\n          <div\n            className=\"mt-2\"\n            id={CommonHelpers.getIdentifier(\n              `operation-${type}-${channelName}-parameters`,\n              config,\n            )}\n          >\n            <Schema\n              schemaName=\"Parameters\"\n              schema={parameters}\n              expanded={true}\n            />\n          </div>\n        )}\n\n        {security && (\n          <div\n            className=\"mt-2\"\n            id={CommonHelpers.getIdentifier(\n              `operation-${type}-${channelName}-security`,\n              config,\n            )}\n          >\n            <Security\n              security={security}\n              header=\"Additional security requirements\"\n            />\n          </div>\n        )}\n\n        {channel.hasBindings() && (\n          <div className=\"mt-2\">\n            <Bindings\n              name=\"Channel specific information\"\n              bindings={channel.bindings()}\n            />\n          </div>\n        )}\n\n        <Extensions name=\"Channel Extensions\" item={channel} />\n\n        {operation.hasBindings() && (\n          <div className=\"mt-2\">\n            <Bindings\n              name=\"Operation specific information\"\n              bindings={operation.bindings()}\n            />\n          </div>\n        )}\n\n        <Extensions name=\"Operation Extensions\" item={operation} />\n\n        {operation.hasTags() && (\n          <div className=\"mt-2\">\n            <Tags tags={operation.tags()} />\n          </div>\n        )}\n      </div>\n\n      <div\n        className=\"w-full mt-4\"\n        id={CommonHelpers.getIdentifier(\n          `operation-${type}-${channelName}-message`,\n          config,\n        )}\n      >\n        {operation.hasMultipleMessages() ? (\n          <div className=\"mt-2\">\n            <p className=\"px-8\">\n              Accepts <strong>one of</strong> the following messages:\n            </p>\n            <ul>\n              {operation.messages().map((msg, idx) => (\n                <li className=\"mt-4\" key={idx}>\n                  <Message message={msg} index={idx} showExamples={true} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : (\n          <div className=\"mt-2\">\n            <p className=\"px-8\">Accepts the following message:</p>\n            <div className=\"mt-2\">\n              <Message\n                message={(operation.message as (index: number) => any)(0)}\n                showExamples={true}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const OperationInfo: React.FunctionComponent<Props> = ({\n  type = PayloadType.PUBLISH,\n  operation,\n  channelName,\n  channel,\n}) => {\n  const config = useConfig();\n  const operationSummary = operation.summary();\n  const externalDocs = operation.externalDocs();\n  const operationId = operation.id();\n\n  return (\n    <>\n      <div className=\"mb-4\">\n        <h3>\n          <span\n            className={`font-mono border uppercase p-1 rounded mr-2 ${\n              type === PayloadType.PUBLISH\n                ? 'border-blue-600 text-blue-500'\n                : 'border-green-600 text-green-600'\n            }`}\n            title={type}\n          >\n            {type === PayloadType.PUBLISH\n              ? config.publishLabel || PUBLISH_LABEL_DEFAULT_TEXT\n              : config.subscribeLabel || SUBSCRIBE_LABEL_DEFAULT_TEXT}\n          </span>{' '}\n          <span className=\"font-mono text-base\">{channelName}</span>\n        </h3>\n      </div>\n\n      {channel.hasDescription() && (\n        <div className=\"mt-2\">\n          <Markdown>{channel.description()}</Markdown>\n        </div>\n      )}\n      {operationSummary && (\n        <p className=\"text-gray-600 text-sm mt-2\">{operationSummary}</p>\n      )}\n      {operation.hasDescription() && (\n        <div className=\"mt-2\">\n          <Markdown>{operation.description()}</Markdown>\n        </div>\n      )}\n\n      {externalDocs && (\n        <ul className=\"leading-normal mt-2 mb-4 space-x-2 space-y-2\">\n          {externalDocs && (\n            <li className=\"inline-block\">\n              <Href\n                className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                href={externalDocs.url()}\n              >\n                <span>{EXTERAL_DOCUMENTATION_TEXT}</span>\n              </Href>\n            </li>\n          )}\n        </ul>\n      )}\n\n      {operationId && (\n        <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n          <div className=\"text-sm text-gray-700\">\n            Operation ID\n            <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n              {operationId}\n            </span>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Operation.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operation.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChannelInterface, OperationInterface } from '@asyncapi/parser';\n\nimport { Message } from '../Messages/Message';\nimport { Security } from '../Servers/Security';\nimport {\n  Href,\n  Markdown,\n  Schema,\n  Bindings,\n  Tags,\n  Extensions,\n} from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers, SchemaHelpers } from '../../helpers';\nimport {\n  EXTERAL_DOCUMENTATION_TEXT,\n  PUBLISH_LABEL_DEFAULT_TEXT,\n  SUBSCRIBE_LABEL_DEFAULT_TEXT,\n} from '../../constants';\nimport { PayloadType } from '../../types';\n\ninterface Props {\n  type: PayloadType;\n  operation: OperationInterface;\n  channelName: string;\n  channel: ChannelInterface;\n}\n\nexport const Operation: React.FunctionComponent<Props> = props => {\n  const config = useConfig();\n  const { type = PayloadType.PUBLISH, operation, channelName, channel } = props;\n\n  if (!operation || !channel) {\n    return null;\n  }\n\n  // check typeof as fallback for older version than `2.2.0`\n  const servers = typeof channel.servers === 'function' && channel.servers();\n  // check typeof as fallback for older version than `2.4.0`\n  const security =\n    typeof operation.security === 'function' && operation.security();\n  const parameters =\n    channel.parameters() !== undefined\n      ? SchemaHelpers.parametersToSchema(channel.parameters())\n      : undefined;\n\n  return (\n    <div>\n      <div className=\"panel-item--center px-8\">\n        <OperationInfo {...props} />\n\n        {servers && servers.length > 0 ? (\n          <div className=\"mt-2 text-sm\">\n            <p>Available only on servers:</p>\n            <ul className=\"flex flex-wrap leading-normal\">\n              {servers.map(server => (\n                <li className=\"inline-block mt-2 mr-2\" key={server.id()}>\n                  <a\n                    href={`#${CommonHelpers.getIdentifier(\n                      'server-' + server,\n                      config,\n                    )}`}\n                    className=\"border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs rounded px-3 py-1 cursor-pointer\"\n                  >\n                    <span className=\"underline\">{server}</span>\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : null}\n\n        {parameters && (\n          <div\n            className=\"mt-2\"\n            id={CommonHelpers.getIdentifier(\n              `operation-${type}-${channelName}-parameters`,\n              config,\n            )}\n          >\n            <Schema\n              schemaName=\"Parameters\"\n              schema={parameters}\n              expanded={true}\n            />\n          </div>\n        )}\n\n        {security && (\n          <div\n            className=\"mt-2\"\n            id={CommonHelpers.getIdentifier(\n              `operation-${type}-${channelName}-security`,\n              config,\n            )}\n          >\n            <Security\n              security={security}\n              header=\"Additional security requirements\"\n            />\n          </div>\n        )}\n\n        {channel.bindings() && (\n          <div className=\"mt-2\">\n            <Bindings\n              name=\"Channel specific information\"\n              bindings={channel.bindings()}\n            />\n          </div>\n        )}\n\n        <Extensions name=\"Channel Extensions\" item={channel} />\n\n        {operation.bindings() && (\n          <div className=\"mt-2\">\n            <Bindings\n              name=\"Operation specific information\"\n              bindings={operation.bindings()}\n            />\n          </div>\n        )}\n\n        <Extensions name=\"Operation Extensions\" item={operation} />\n\n        {operation.tags() && (\n          <div className=\"mt-2\">\n            <Tags tags={operation.tags()} />\n          </div>\n        )}\n      </div>\n\n      <div\n        className=\"w-full mt-4\"\n        id={CommonHelpers.getIdentifier(\n          `operation-${type}-${channelName}-message`,\n          config,\n        )}\n      >\n        {operation.messages().length > 1 ? (\n          <div className=\"mt-2\">\n            <p className=\"px-8\">\n              Accepts <strong>one of</strong> the following messages:\n            </p>\n            <ul>\n              {operation.messages().map((msg, idx) => (\n                <li className=\"mt-4\" key={idx}>\n                  <Message message={msg} index={idx} showExamples={true} />\n                </li>\n              ))}\n            </ul>\n          </div>\n        ) : (\n          <div className=\"mt-2\">\n            <p className=\"px-8\">Accepts the following message:</p>\n            <div className=\"mt-2\">\n              <Message message={operation.messages()[0]} showExamples={true} />\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport const OperationInfo: React.FunctionComponent<Props> = ({\n  type = PayloadType.PUBLISH,\n  operation,\n  channelName,\n  channel,\n}) => {\n  const config = useConfig();\n  const operationSummary = operation.summary();\n  const externalDocs = operation.externalDocs();\n  const operationId = operation.id();\n\n  return (\n    <>\n      <div className=\"mb-4\">\n        <h3>\n          <span\n            className={`font-mono border uppercase p-1 rounded mr-2 ${\n              type === PayloadType.PUBLISH\n                ? 'border-blue-600 text-blue-500'\n                : 'border-green-600 text-green-600'\n            }`}\n            title={type}\n          >\n            {type === PayloadType.PUBLISH\n              ? config.publishLabel || PUBLISH_LABEL_DEFAULT_TEXT\n              : config.subscribeLabel || SUBSCRIBE_LABEL_DEFAULT_TEXT}\n          </span>{' '}\n          <span className=\"font-mono text-base\">{channelName}</span>\n        </h3>\n      </div>\n\n      {channel.hasDescription() && (\n        <div className=\"mt-2\">\n          <Markdown>{channel.description()}</Markdown>\n        </div>\n      )}\n      {operationSummary && (\n        <p className=\"text-gray-600 text-sm mt-2\">{operationSummary}</p>\n      )}\n      {operation.hasDescription() && (\n        <div className=\"mt-2\">\n          <Markdown>{operation.description()}</Markdown>\n        </div>\n      )}\n\n      {externalDocs && (\n        <ul className=\"leading-normal mt-2 mb-4 space-x-2 space-y-2\">\n          {externalDocs && (\n            <li className=\"inline-block\">\n              <Href\n                className=\"border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 text-orange-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                href={externalDocs.url()}\n              >\n                <span>{EXTERAL_DOCUMENTATION_TEXT}</span>\n              </Href>\n            </li>\n          )}\n        </ul>\n      )}\n\n      {operationId && (\n        <div className=\"border bg-gray-100 rounded px-4 py-2 mt-2\">\n          <div className=\"text-sm text-gray-700\">\n            Operation ID\n            <span className=\"border text-orange-600 rounded text-xs ml-2 py-0 px-2\">\n              {operationId}\n            </span>\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"]}

package/lib/cjs/containers/Operations/Operations.js

@@ -11,21 +11,21 @@ var helpers_1 = require("../../helpers");
 var constants_1 = require("../../constants");
 var types_1 = require("../../types");
 var Operations = function () {
-    var channels = (0, contexts_1.useSpec)().channels();
+    var operations = (0, contexts_1.useSpec)().operations();
     var config = (0, contexts_1.useConfig)();
-    if (!Object.keys(channels).length) {
+    if (!Object.keys(operations).length) {
         return null;
     }
     var operationsList = [];
-    Object.entries(channels).forEach(function (_a) {
-        var channelName = _a[0], channel = _a[1];
-        if (channel.hasPublish()) {
-            operationsList.push(react_1.default.createElement("li", { className: "mb-12", key: "pub-".concat(channelName), id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(types_1.PayloadType.PUBLISH, "-").concat(channelName), config) },
-                react_1.default.createElement(Operation_1.Operation, { type: types_1.PayloadType.PUBLISH, operation: channel.publish(), channelName: channelName, channel: channel })));
+    Object.entries(operations).forEach(function (_a) {
+        var operationName = _a[0], operation = _a[1];
+        if (operation.isSend()) {
+            operationsList.push(react_1.default.createElement("li", { className: "mb-12", key: "pub-".concat(operationName), id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(types_1.PayloadType.PUBLISH, "-").concat(operationName), config) },
+                react_1.default.createElement(Operation_1.Operation, { type: types_1.PayloadType.PUBLISH, operation: operation, channelName: operationName, channel: operation.channels()[0] })));
         }
-        if (channel.hasSubscribe()) {
-            operationsList.push(react_1.default.createElement("li", { className: "mb-12", key: "sub-".concat(channelName), id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(types_1.PayloadType.SUBSCRIBE, "-").concat(channelName), config) },
-                react_1.default.createElement(Operation_1.Operation, { type: types_1.PayloadType.SUBSCRIBE, operation: channel.subscribe(), channelName: channelName, channel: channel })));
+        if (operation.isReceive()) {
+            operationsList.push(react_1.default.createElement("li", { className: "mb-12", key: "sub-".concat(operationName), id: helpers_1.CommonHelpers.getIdentifier("operation-".concat(types_1.PayloadType.SUBSCRIBE, "-").concat(operationName), config) },
+                react_1.default.createElement(Operation_1.Operation, { type: types_1.PayloadType.SUBSCRIBE, operation: operation, channelName: operationName, channel: operation.channels()[0] })));
         }
     });
     return (react_1.default.createElement("section", { id: "".concat(helpers_1.CommonHelpers.getIdentifier('operations', config)), className: "mt-16" },

package/lib/cjs/containers/Operations/Operations.js.map

@@ -1 +1 @@
-{"version":3,"file":"Operations.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operations.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,yCAAwC;AAExC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAAkD;AAClD,qCAA0C;AAEnC,IAAM,UAAU,GAA4B;IACjD,IAAM,QAAQ,GAAG,IAAA,kBAAO,GAAE,CAAC,QAAQ,EAAE,CAAC;IACtC,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,EAAE;QACjC,OAAO,IAAI,CAAC;KACb;IAED,IAAM,cAAc,GAAyB,EAAE,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,UAAC,EAAsB;YAArB,WAAW,QAAA,EAAE,OAAO,QAAA;QACrD,IAAI,OAAO,CAAC,UAAU,EAAE,EAAE;YACxB,cAAc,CAAC,IAAI,CACjB,sCACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,WAAW,CAAE,EACzB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,mBAAW,CAAC,OAAO,cAAI,WAAW,CAAE,EACjD,MAAM,CACP;gBAED,8BAAC,qBAAS,IACR,IAAI,EAAE,mBAAW,CAAC,OAAO,EACzB,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,EAC5B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACC,CACN,CAAC;SACH;QACD,IAAI,OAAO,CAAC,YAAY,EAAE,EAAE;YAC1B,cAAc,CAAC,IAAI,CACjB,sCACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,WAAW,CAAE,EACzB,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,mBAAW,CAAC,SAAS,cAAI,WAAW,CAAE,EACnD,MAAM,CACP;gBAED,8BAAC,qBAAS,IACR,IAAI,EAAE,mBAAW,CAAC,SAAS,EAC3B,SAAS,EAAE,OAAO,CAAC,SAAS,EAAE,EAC9B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACC,CACN,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAE,EAC1D,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,2BAAe,CACb;QACL,0CAAK,cAAc,CAAM,CACjB,CACX,CAAC;AACJ,CAAC,CAAC;AA7DW,QAAA,UAAU,cA6DrB","sourcesContent":["import React from 'react';\n\nimport { Operation } from './Operation';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { OPERATIONS_TEXT } from '../../constants';\nimport { PayloadType } from '../../types';\n\nexport const Operations: React.FunctionComponent = () => {\n  const channels = useSpec().channels();\n  const config = useConfig();\n\n  if (!Object.keys(channels).length) {\n    return null;\n  }\n\n  const operationsList: React.ReactNodeArray = [];\n  Object.entries(channels).forEach(([channelName, channel]) => {\n    if (channel.hasPublish()) {\n      operationsList.push(\n        <li\n          className=\"mb-12\"\n          key={`pub-${channelName}`}\n          id={CommonHelpers.getIdentifier(\n            `operation-${PayloadType.PUBLISH}-${channelName}`,\n            config,\n          )}\n        >\n          <Operation\n            type={PayloadType.PUBLISH}\n            operation={channel.publish()}\n            channelName={channelName}\n            channel={channel}\n          />\n        </li>,\n      );\n    }\n    if (channel.hasSubscribe()) {\n      operationsList.push(\n        <li\n          className=\"mb-12\"\n          key={`sub-${channelName}`}\n          id={CommonHelpers.getIdentifier(\n            `operation-${PayloadType.SUBSCRIBE}-${channelName}`,\n            config,\n          )}\n        >\n          <Operation\n            type={PayloadType.SUBSCRIBE}\n            operation={channel.subscribe()}\n            channelName={channelName}\n            channel={channel}\n          />\n        </li>,\n      );\n    }\n  });\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('operations', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {OPERATIONS_TEXT}\n      </h2>\n      <ul>{operationsList}</ul>\n    </section>\n  );\n};\n"]}
+{"version":3,"file":"Operations.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operations.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,yCAAwC;AACxC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAAkD;AAClD,qCAA0C;AAEnC,IAAM,UAAU,GAA4B;IACjD,IAAM,UAAU,GAAG,IAAA,kBAAO,GAAE,CAAC,UAAU,EAAE,CAAC;IAC1C,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,EAAE;QACnC,OAAO,IAAI,CAAC;KACb;IAED,IAAM,cAAc,GAAyB,EAAE,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,UAAC,EAA0B;YAAzB,aAAa,QAAA,EAAE,SAAS,QAAA;QAC3D,IAAI,SAAS,CAAC,MAAM,EAAE,EAAE;YACtB,cAAc,CAAC,IAAI,CACjB,sCACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,aAAa,CAAE,EAC3B,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,mBAAW,CAAC,OAAO,cAAI,aAAa,CAAE,EACnD,MAAM,CACP;gBAED,8BAAC,qBAAS,IACR,IAAI,EAAE,mBAAW,CAAC,OAAO,EACzB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,aAAa,EAC1B,OAAO,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAChC,CACC,CACN,CAAC;SACH;QACD,IAAI,SAAS,CAAC,SAAS,EAAE,EAAE;YACzB,cAAc,CAAC,IAAI,CACjB,sCACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,aAAa,CAAE,EAC3B,EAAE,EAAE,uBAAa,CAAC,aAAa,CAC7B,oBAAa,mBAAW,CAAC,SAAS,cAAI,aAAa,CAAE,EACrD,MAAM,CACP;gBAED,8BAAC,qBAAS,IACR,IAAI,EAAE,mBAAW,CAAC,SAAS,EAC3B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,aAAa,EAC1B,OAAO,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAChC,CACC,CACN,CAAC;SACH;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAE,EAC1D,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,2BAAe,CACb;QACL,0CAAK,cAAc,CAAM,CACjB,CACX,CAAC;AACJ,CAAC,CAAC;AA7DW,QAAA,UAAU,cA6DrB","sourcesContent":["import React from 'react';\n\nimport { Operation } from './Operation';\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { OPERATIONS_TEXT } from '../../constants';\nimport { PayloadType } from '../../types';\n\nexport const Operations: React.FunctionComponent = () => {\n  const operations = useSpec().operations();\n  const config = useConfig();\n\n  if (!Object.keys(operations).length) {\n    return null;\n  }\n\n  const operationsList: React.ReactNodeArray = [];\n  Object.entries(operations).forEach(([operationName, operation]) => {\n    if (operation.isSend()) {\n      operationsList.push(\n        <li\n          className=\"mb-12\"\n          key={`pub-${operationName}`}\n          id={CommonHelpers.getIdentifier(\n            `operation-${PayloadType.PUBLISH}-${operationName}`,\n            config,\n          )}\n        >\n          <Operation\n            type={PayloadType.PUBLISH}\n            operation={operation}\n            channelName={operationName}\n            channel={operation.channels()[0]}\n          />\n        </li>,\n      );\n    }\n    if (operation.isReceive()) {\n      operationsList.push(\n        <li\n          className=\"mb-12\"\n          key={`sub-${operationName}`}\n          id={CommonHelpers.getIdentifier(\n            `operation-${PayloadType.SUBSCRIBE}-${operationName}`,\n            config,\n          )}\n        >\n          <Operation\n            type={PayloadType.SUBSCRIBE}\n            operation={operation}\n            channelName={operationName}\n            channel={operation.channels()[0]}\n          />\n        </li>,\n      );\n    }\n  });\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('operations', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {OPERATIONS_TEXT}\n      </h2>\n      <ul>{operationsList}</ul>\n    </section>\n  );\n};\n"]}

package/lib/cjs/containers/Schemas/Schema.js.map

@@ -1 +1 @@
-{"version":3,"file":"Schema.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schema.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAG1B,+CAA6D;AAOtD,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,yBAAyB;YACtC,uCAAK,SAAS,EAAC,6CAA6C;gBAC1D,8BAAC,mBAAe,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACF;QAEN,uCAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,MAAM,UAmBjB","sourcesContent":["import React from 'react';\nimport { Schema as SchemaType } from '@asyncapi/parser';\n\nimport { Schema as SchemaComponent } from '../../components';\n\ninterface Props {\n  schemaName: string;\n  schema: SchemaType;\n}\n\nexport const Schema: React.FunctionComponent<Props> = ({\n  schemaName,\n  schema,\n}) => {\n  if (!schema) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded px-4 py-2 border bg-gray-200\">\n          <SchemaComponent schemaName={schemaName} schema={schema} />\n        </div>\n      </div>\n\n      <div className=\"w-full mt-4\" />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Schema.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schema.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAG1B,+CAA6D;AAOtD,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL;QACE,uCAAK,SAAS,EAAC,yBAAyB;YACtC,uCAAK,SAAS,EAAC,6CAA6C;gBAC1D,8BAAC,mBAAe,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACF;QAEN,uCAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC;AAnBW,QAAA,MAAM,UAmBjB","sourcesContent":["import React from 'react';\nimport { SchemaInterface } from '@asyncapi/parser';\n\nimport { Schema as SchemaComponent } from '../../components';\n\ninterface Props {\n  schemaName: string;\n  schema: SchemaInterface;\n}\n\nexport const Schema: React.FunctionComponent<Props> = ({\n  schemaName,\n  schema,\n}) => {\n  if (!schema) {\n    return null;\n  }\n\n  return (\n    <div>\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded px-4 py-2 border bg-gray-200\">\n          <SchemaComponent schemaName={schemaName} schema={schema} />\n        </div>\n      </div>\n\n      <div className=\"w-full mt-4\" />\n    </div>\n  );\n};\n"]}

package/lib/cjs/containers/Schemas/Schemas.js

@@ -12,7 +12,7 @@ var constants_1 = require("../../constants");
 var Schemas = function () {
     var asyncapi = (0, contexts_1.useSpec)();
     var config = (0, contexts_1.useConfig)();
-    var schemas = asyncapi.hasComponents() && asyncapi.components().schemas();
+    var schemas = !asyncapi.components().isEmpty() && asyncapi.components().schemas();
     if (!schemas || Object.keys(schemas).length === 0) {
         return null;
     }

package/lib/cjs/containers/Schemas/Schemas.js.map

@@ -1 +1 @@
-{"version":3,"file":"Schemas.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schemas.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,mCAAkC;AAElC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAA+C;AAExC,IAAM,OAAO,GAA4B;IAC9C,IAAM,QAAQ,GAAG,IAAA,kBAAO,GAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAC3B,IAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,EAAE,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC;IAE5E,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACjD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAE,EACvD,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,wBAAY,CACV;QACL,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAAnB,UAAU,QAAA,EAAE,MAAM,QAAA;YAAM,OAAA,CACrD,sCACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,uBAAa,CAAC,aAAa,CAAC,iBAAU,UAAU,CAAE,EAAE,MAAM,CAAC;gBAE/D,8BAAC,eAAM,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/C,CACN;QARsD,CAQtD,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC;AA9BW,QAAA,OAAO,WA8BlB","sourcesContent":["import React from 'react';\n\nimport { Schema } from './Schema';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { SCHEMAS_TEXT } from '../../constants';\n\nexport const Schemas: React.FunctionComponent = () => {\n  const asyncapi = useSpec();\n  const config = useConfig();\n  const schemas = asyncapi.hasComponents() && asyncapi.components().schemas();\n\n  if (!schemas || Object.keys(schemas).length === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('schemas', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {SCHEMAS_TEXT}\n      </h2>\n      <ul>\n        {Object.entries(schemas).map(([schemaName, schema]) => (\n          <li\n            className=\"mb-4\"\n            key={schemaName}\n            id={CommonHelpers.getIdentifier(`schema-${schemaName}`, config)}\n          >\n            <Schema schemaName={schemaName} schema={schema} />\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n};\n"]}
+{"version":3,"file":"Schemas.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schemas.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAE1B,mCAAkC;AAElC,2CAAoD;AACpD,yCAA8C;AAC9C,6CAA+C;AAExC,IAAM,OAAO,GAA4B;IAC9C,IAAM,QAAQ,GAAG,IAAA,kBAAO,GAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAC3B,IAAM,OAAO,GACX,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC;IAEtE,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACjD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,2CACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAE,EACvD,SAAS,EAAC,OAAO;QAEjB,sCAAI,SAAS,EAAC,0CAA0C,IACrD,wBAAY,CACV;QACL,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAAnB,UAAU,QAAA,EAAE,MAAM,QAAA;YAAM,OAAA,CACrD,sCACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,uBAAa,CAAC,aAAa,CAAC,iBAAU,UAAU,CAAE,EAAE,MAAM,CAAC;gBAE/D,8BAAC,eAAM,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/C,CACN;QARsD,CAQtD,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,OAAO,WA+BlB","sourcesContent":["import React from 'react';\n\nimport { Schema } from './Schema';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { SCHEMAS_TEXT } from '../../constants';\n\nexport const Schemas: React.FunctionComponent = () => {\n  const asyncapi = useSpec();\n  const config = useConfig();\n  const schemas =\n    !asyncapi.components().isEmpty() && asyncapi.components().schemas();\n\n  if (!schemas || Object.keys(schemas).length === 0) {\n    return null;\n  }\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('schemas', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {SCHEMAS_TEXT}\n      </h2>\n      <ul>\n        {Object.entries(schemas).map(([schemaName, schema]) => (\n          <li\n            className=\"mb-4\"\n            key={schemaName}\n            id={CommonHelpers.getIdentifier(`schema-${schemaName}`, config)}\n          >\n            <Schema schemaName={schemaName} schema={schema} />\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n};\n"]}

package/lib/cjs/containers/Servers/Security.js

@@ -11,7 +11,7 @@ var helpers_1 = require("../../helpers");
 var Security = function (_a) {
     var _b = _a.security, security = _b === void 0 ? [] : _b, _c = _a.protocol, protocol = _c === void 0 ? '' : _c, _d = _a.header, header = _d === void 0 ? 'Security' : _d;
     var asyncapi = (0, contexts_1.useSpec)();
-    var securitySchemes = asyncapi.hasComponents() && asyncapi.components().securitySchemes();
+    var securitySchemes = !asyncapi.components().isEmpty() && asyncapi.components().securitySchemes();
     var renderedSecurities;
     if (!security ||
         !security.length ||
@@ -22,9 +22,9 @@ var Security = function (_a) {
         }
     }
     else {
-        var securities = security
+        var securities = Object.values(security)
             .map(function (requirement) {
-            var requirements = requirement.json();
+            var requirements = requirement.all();
             var key = Object.keys(requirements)[0];
             var def = securitySchemes[String(key)];
             var requiredScopes = requirements[String(key)];
@@ -95,35 +95,47 @@ var SecurityItem = function (_a) {
                 react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "sasl.mechanism:"),
                 react_1.default.createElement("span", { className: "inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1" }, saslMechanism)))));
     }
-    var flows = securitySchema && securitySchema.flows();
-    var renderedFlows = flows &&
-        Object.entries(flows).map(function (_a) {
-            var flowName = _a[0], flow = _a[1];
-            var authorizationUrl = flow.authorizationUrl();
-            var tokenUrl = flow.tokenUrl();
-            var refreshUrl = flow.refreshUrl();
-            var scopes = flow.scopes();
-            return (react_1.default.createElement("div", { className: "px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded", key: flowName },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Flow:"),
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, helpers_1.ServerHelpers.flowName(flowName))),
-                authorizationUrl && (react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Auth URL:"),
-                    react_1.default.createElement(components_1.Href, { href: authorizationUrl, className: "underline" }, authorizationUrl))),
-                tokenUrl && (react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Token URL:"),
-                    react_1.default.createElement(components_1.Href, { href: tokenUrl, className: "underline" }, tokenUrl))),
-                refreshUrl && (react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Refresh URL:"),
-                    react_1.default.createElement(components_1.Href, { href: refreshUrl, className: "underline" }, refreshUrl))),
-                scopes && (react_1.default.createElement("div", { className: "mt-1" },
-                    react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Scopes:"),
-                    react_1.default.createElement("ul", { className: "inline-block" }, scopes &&
-                        Object.entries(scopes).map(function (_a) {
-                            var scopeName = _a[0], scopeDesc = _a[1];
-                            return (react_1.default.createElement("li", { className: "inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1", title: scopeDesc, key: scopeName }, scopeName));
-                        }))))));
-        });
+    var flows = securitySchema === null || securitySchema === void 0 ? void 0 : securitySchema.flows();
+    var unwrappedFlows = {};
+    if (flows === null || flows === void 0 ? void 0 : flows.hasImplicit()) {
+        unwrappedFlows.implicit = flows.implicit();
+    }
+    if (flows === null || flows === void 0 ? void 0 : flows.hasAuthorizationCode()) {
+        unwrappedFlows.authorizationCode = flows.authorizationCode();
+    }
+    if (flows === null || flows === void 0 ? void 0 : flows.hasClientCredentials()) {
+        unwrappedFlows.clientCredentials = flows.clientCredentials();
+    }
+    if (flows === null || flows === void 0 ? void 0 : flows.hasPassword()) {
+        unwrappedFlows.password = flows.implicit();
+    }
+    var renderedFlows = Object.entries(unwrappedFlows).map(function (_a) {
+        var flowName = _a[0], flow = _a[1];
+        var authorizationUrl = flow.authorizationUrl();
+        var tokenUrl = flow.tokenUrl();
+        var refreshUrl = flow.refreshUrl();
+        var scopes = flow.scopes();
+        return (react_1.default.createElement("div", { className: "px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded", key: flowName },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Flow:"),
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, helpers_1.ServerHelpers.flowName(flowName))),
+            authorizationUrl && (react_1.default.createElement("div", { className: "mt-1" },
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Auth URL:"),
+                react_1.default.createElement(components_1.Href, { href: authorizationUrl, className: "underline" }, authorizationUrl))),
+            tokenUrl && (react_1.default.createElement("div", { className: "mt-1" },
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Token URL:"),
+                react_1.default.createElement(components_1.Href, { href: tokenUrl, className: "underline" }, tokenUrl))),
+            refreshUrl && (react_1.default.createElement("div", { className: "mt-1" },
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Refresh URL:"),
+                react_1.default.createElement(components_1.Href, { href: refreshUrl, className: "underline" }, refreshUrl))),
+            scopes && (react_1.default.createElement("div", { className: "mt-1" },
+                react_1.default.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "Scopes:"),
+                react_1.default.createElement("ul", { className: "inline-block" }, scopes &&
+                    Object.entries(scopes).map(function (_a) {
+                        var scopeName = _a[0], scopeDesc = _a[1];
+                        return (react_1.default.createElement("li", { className: "inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1", title: scopeDesc, key: scopeName }, scopeName));
+                    }))))));
+    });
     return (react_1.default.createElement("div", null,
         securitySchema && schemas && (react_1.default.createElement("div", null,
             react_1.default.createElement("span", null,

package/lib/cjs/containers/Servers/Security.js.map

@@ -1 +1 @@
-{"version":3,"file":"Security.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Security.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ServerSecurityRequirement, SecurityScheme } from '@asyncapi/parser';\n\nimport { Href, Markdown } from '../../components';\n\nimport { useSpec } from '../../contexts';\nimport { ServerHelpers } from '../../helpers';\n\ninterface Props {\n  security: ServerSecurityRequirement[];\n  protocol?: string;\n  header?: string;\n}\n\nexport const Security: React.FunctionComponent<Props> = ({\n  security = [],\n  protocol = '',\n  header = 'Security',\n}) => {\n  const asyncapi = useSpec();\n  const securitySchemes =\n    asyncapi.hasComponents() && asyncapi.components().securitySchemes();\n\n  let renderedSecurities;\n  if (\n    !security ||\n    !security.length ||\n    !securitySchemes ||\n    !Object.keys(securitySchemes).length\n  ) {\n    if (protocol === 'kafka' || protocol === 'kafka-secure') {\n      renderedSecurities = (\n        <SecurityItem protocol={protocol} securitySchema={null} />\n      );\n    }\n  } else {\n    const securities: React.ReactNodeArray = security\n      .map(requirement => {\n        const requirements = requirement.json();\n        const key = Object.keys(requirements)[0];\n        const def = securitySchemes[String(key)];\n        const requiredScopes: string[] = requirements[String(key)];\n\n        if (!def) {\n          return null;\n        }\n        return (\n          <SecurityItem\n            protocol={protocol}\n            securitySchema={def}\n            requiredScopes={requiredScopes}\n            key={def.type()}\n          />\n        );\n      })\n      .filter(Boolean);\n\n    renderedSecurities = (\n      <ul>\n        {securities.map((s, idx) => (\n          <li className=\"mt-2\" key={idx}>\n            {s}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  if (!renderedSecurities) {\n    return null;\n  }\n\n  return (\n    <div className=\"text-sm mt-4\">\n      <h5 className=\"text-gray-800\">{header}:</h5>\n      {renderedSecurities}\n    </div>\n  );\n};\n\nfunction collectSecuritySchemas(\n  securitySchema: SecurityScheme | null,\n  requiredScopes: string[] = [],\n): React.ReactNodeArray {\n  const schemas: React.ReactNodeArray = [];\n  if (securitySchema) {\n    if (securitySchema.name()) {\n      schemas.push(<span>Name: {securitySchema.name()}</span>);\n    }\n    if (securitySchema.in()) {\n      schemas.push(<span>In: {securitySchema.in()}</span>);\n    }\n    if (securitySchema.scheme()) {\n      schemas.push(<span>Scheme: {securitySchema.scheme()}</span>);\n    }\n    if (securitySchema.bearerFormat()) {\n      schemas.push(<span>Bearer format: {securitySchema.bearerFormat()}</span>);\n    }\n    if (securitySchema.openIdConnectUrl()) {\n      schemas.push(\n        <Href href={securitySchema.openIdConnectUrl()} className=\"underline\">\n          Connect URL\n        </Href>,\n      );\n    }\n    if (requiredScopes.length) {\n      schemas.push(<span>Required scopes: {requiredScopes.join(', ')}</span>);\n    }\n  }\n  return schemas;\n}\n\ninterface SecurityItemProps {\n  securitySchema: SecurityScheme | null;\n  protocol: string;\n  requiredScopes?: string[];\n}\n\nconst SecurityItem: React.FunctionComponent<SecurityItemProps> = ({\n  securitySchema,\n  protocol,\n  requiredScopes,\n}) => {\n  const schemas: React.ReactNodeArray = collectSecuritySchemas(\n    securitySchema,\n    requiredScopes,\n  );\n\n  let renderedKafkaSecurity;\n  if (['kafka', 'kafka-secure'].includes(protocol)) {\n    const { securityProtocol, saslMechanism } = ServerHelpers.getKafkaSecurity(\n      protocol,\n      securitySchema,\n    );\n\n    renderedKafkaSecurity = (\n      <div className=\"px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded\">\n        {securityProtocol && (\n          <div className=\"mt-1\">\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              security.protocol:\n            </span>\n            <span className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\">\n              {securityProtocol}\n            </span>\n          </div>\n        )}\n        {saslMechanism && (\n          <div className=\"mt-1\">\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              sasl.mechanism:\n            </span>\n            <span className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\">\n              {saslMechanism}\n            </span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const flows = securitySchema && securitySchema.flows();\n  const renderedFlows =\n    flows &&\n    Object.entries(flows).map(([flowName, flow]) => {\n      const authorizationUrl = flow.authorizationUrl();\n      const tokenUrl = flow.tokenUrl();\n      const refreshUrl = flow.refreshUrl();\n      const scopes = flow.scopes();\n\n      return (\n        <div\n          className=\"px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded\"\n          key={flowName}\n        >\n          <div>\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              Flow:\n            </span>\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              {ServerHelpers.flowName(flowName)}\n            </span>\n          </div>\n\n          {authorizationUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Auth URL:\n              </span>\n              <Href href={authorizationUrl} className=\"underline\">\n                {authorizationUrl}\n              </Href>\n            </div>\n          )}\n          {tokenUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Token URL:\n              </span>\n              <Href href={tokenUrl} className=\"underline\">\n                {tokenUrl}\n              </Href>\n            </div>\n          )}\n          {refreshUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Refresh URL:\n              </span>\n              <Href href={refreshUrl} className=\"underline\">\n                {refreshUrl}\n              </Href>\n            </div>\n          )}\n          {scopes && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Scopes:\n              </span>\n              <ul className=\"inline-block\">\n                {scopes &&\n                  Object.entries(scopes).map(([scopeName, scopeDesc]) => (\n                    <li\n                      className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\"\n                      title={scopeDesc}\n                      key={scopeName}\n                    >\n                      {scopeName}\n                    </li>\n                  ))}\n              </ul>\n            </div>\n          )}\n        </div>\n      );\n    });\n\n  return (\n    <div>\n      {securitySchema && schemas && (\n        <div>\n          <span>\n            {ServerHelpers.securityType(securitySchema.type())}\n            {schemas.length > 0 && (\n              <ul className=\"inline-block ml-2\">\n                {schemas.map((schema, idx) => (\n                  <li\n                    className=\"inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1\"\n                    key={idx}\n                  >\n                    {schema}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </span>\n        </div>\n      )}\n\n      {securitySchema && securitySchema.hasDescription() && (\n        <div>\n          <Markdown>{securitySchema.description()}</Markdown>\n        </div>\n      )}\n\n      {renderedFlows && renderedFlows.length > 0 && (\n        <ul className=\"my-2\">\n          <li>{renderedFlows}</li>\n        </ul>\n      )}\n\n      {renderedKafkaSecurity && <div>{renderedKafkaSecurity}</div>}\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Security.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Security.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  OAuthFlowInterface,\n  SecurityRequirementsInterface,\n  SecuritySchemeInterface,\n} from '@asyncapi/parser';\n\nimport { Href, Markdown } from '../../components';\nimport { useSpec } from '../../contexts';\nimport { ServerHelpers } from '../../helpers';\n\ninterface Props {\n  security: SecurityRequirementsInterface[];\n  protocol?: string;\n  header?: string;\n}\n\nexport const Security: React.FunctionComponent<Props> = ({\n  security = [],\n  protocol = '',\n  header = 'Security',\n}) => {\n  const asyncapi = useSpec();\n  const securitySchemes =\n    !asyncapi.components().isEmpty() && asyncapi.components().securitySchemes();\n\n  let renderedSecurities;\n  if (\n    !security ||\n    !security.length ||\n    !securitySchemes ||\n    !Object.keys(securitySchemes).length\n  ) {\n    if (protocol === 'kafka' || protocol === 'kafka-secure') {\n      renderedSecurities = (\n        <SecurityItem protocol={protocol} securitySchema={null} />\n      );\n    }\n  } else {\n    const securities: React.ReactNodeArray = Object.values(security)\n      .map(requirement => {\n        const requirements = requirement.all();\n        const key = Object.keys(requirements)[0];\n        const def = securitySchemes[String(key)];\n        const requiredScopes: string[] = requirements[String(key)];\n\n        if (!def) {\n          return null;\n        }\n        return (\n          <SecurityItem\n            protocol={protocol}\n            securitySchema={def}\n            requiredScopes={requiredScopes}\n            key={def.type()}\n          />\n        );\n      })\n      .filter(Boolean);\n\n    renderedSecurities = (\n      <ul>\n        {securities.map((s, idx) => (\n          <li className=\"mt-2\" key={idx}>\n            {s}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  if (!renderedSecurities) {\n    return null;\n  }\n\n  return (\n    <div className=\"text-sm mt-4\">\n      <h5 className=\"text-gray-800\">{header}:</h5>\n      {renderedSecurities}\n    </div>\n  );\n};\n\nfunction collectSecuritySchemas(\n  securitySchema: SecuritySchemeInterface | null,\n  requiredScopes: string[] = [],\n): React.ReactNodeArray {\n  const schemas: React.ReactNodeArray = [];\n  if (securitySchema) {\n    if (securitySchema.name()) {\n      schemas.push(<span>Name: {securitySchema.name()}</span>);\n    }\n    if (securitySchema.in()) {\n      schemas.push(<span>In: {securitySchema.in()}</span>);\n    }\n    if (securitySchema.scheme()) {\n      schemas.push(<span>Scheme: {securitySchema.scheme()}</span>);\n    }\n    if (securitySchema.bearerFormat()) {\n      schemas.push(<span>Bearer format: {securitySchema.bearerFormat()}</span>);\n    }\n    if (securitySchema.openIdConnectUrl()) {\n      schemas.push(\n        <Href\n          href={securitySchema.openIdConnectUrl() as string}\n          className=\"underline\"\n        >\n          Connect URL\n        </Href>,\n      );\n    }\n    if (requiredScopes.length) {\n      schemas.push(<span>Required scopes: {requiredScopes.join(', ')}</span>);\n    }\n  }\n  return schemas;\n}\n\ninterface SecurityItemProps {\n  securitySchema: SecuritySchemeInterface | null;\n  protocol: string;\n  requiredScopes?: string[];\n}\n\nconst SecurityItem: React.FunctionComponent<SecurityItemProps> = ({\n  securitySchema,\n  protocol,\n  requiredScopes,\n}) => {\n  const schemas: React.ReactNodeArray = collectSecuritySchemas(\n    securitySchema,\n    requiredScopes,\n  );\n\n  let renderedKafkaSecurity;\n  if (['kafka', 'kafka-secure'].includes(protocol)) {\n    const { securityProtocol, saslMechanism } = ServerHelpers.getKafkaSecurity(\n      protocol,\n      securitySchema,\n    );\n\n    renderedKafkaSecurity = (\n      <div className=\"px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded\">\n        {securityProtocol && (\n          <div className=\"mt-1\">\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              security.protocol:\n            </span>\n            <span className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\">\n              {securityProtocol}\n            </span>\n          </div>\n        )}\n        {saslMechanism && (\n          <div className=\"mt-1\">\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              sasl.mechanism:\n            </span>\n            <span className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\">\n              {saslMechanism}\n            </span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const flows = securitySchema?.flows();\n  const unwrappedFlows: Record<string, OAuthFlowInterface> = {};\n  if (flows?.hasImplicit()) {\n    unwrappedFlows.implicit = flows.implicit() as OAuthFlowInterface;\n  }\n  if (flows?.hasAuthorizationCode()) {\n    unwrappedFlows.authorizationCode = flows.authorizationCode() as OAuthFlowInterface;\n  }\n  if (flows?.hasClientCredentials()) {\n    unwrappedFlows.clientCredentials = flows.clientCredentials() as OAuthFlowInterface;\n  }\n  if (flows?.hasPassword()) {\n    unwrappedFlows.password = flows.implicit() as OAuthFlowInterface;\n  }\n  const renderedFlows = Object.entries(unwrappedFlows).map(\n    ([flowName, flow]) => {\n      const authorizationUrl = flow.authorizationUrl();\n      const tokenUrl = flow.tokenUrl();\n      const refreshUrl = flow.refreshUrl();\n      const scopes = flow.scopes();\n\n      return (\n        <div\n          className=\"px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded\"\n          key={flowName}\n        >\n          <div>\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              Flow:\n            </span>\n            <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n              {ServerHelpers.flowName(flowName)}\n            </span>\n          </div>\n\n          {authorizationUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Auth URL:\n              </span>\n              <Href href={authorizationUrl} className=\"underline\">\n                {authorizationUrl}\n              </Href>\n            </div>\n          )}\n          {tokenUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Token URL:\n              </span>\n              <Href href={tokenUrl} className=\"underline\">\n                {tokenUrl}\n              </Href>\n            </div>\n          )}\n          {refreshUrl && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Refresh URL:\n              </span>\n              <Href href={refreshUrl} className=\"underline\">\n                {refreshUrl}\n              </Href>\n            </div>\n          )}\n          {scopes && (\n            <div className=\"mt-1\">\n              <span className=\"text-xs font-bold text-gray-600 mt-1 mr-1 uppercase\">\n                Scopes:\n              </span>\n              <ul className=\"inline-block\">\n                {scopes &&\n                  Object.entries(scopes).map(([scopeName, scopeDesc]) => (\n                    <li\n                      className=\"inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1\"\n                      title={scopeDesc}\n                      key={scopeName}\n                    >\n                      {scopeName}\n                    </li>\n                  ))}\n              </ul>\n            </div>\n          )}\n        </div>\n      );\n    },\n  );\n\n  return (\n    <div>\n      {securitySchema && schemas && (\n        <div>\n          <span>\n            {ServerHelpers.securityType(securitySchema.type())}\n            {schemas.length > 0 && (\n              <ul className=\"inline-block ml-2\">\n                {schemas.map((schema, idx) => (\n                  <li\n                    className=\"inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1\"\n                    key={idx}\n                  >\n                    {schema}\n                  </li>\n                ))}\n              </ul>\n            )}\n          </span>\n        </div>\n      )}\n\n      {securitySchema && securitySchema.hasDescription() && (\n        <div>\n          <Markdown>{securitySchema.description()}</Markdown>\n        </div>\n      )}\n\n      {renderedFlows && renderedFlows.length > 0 && (\n        <ul className=\"my-2\">\n          <li>{renderedFlows}</li>\n        </ul>\n      )}\n\n      {renderedKafkaSecurity && <div>{renderedKafkaSecurity}</div>}\n    </div>\n  );\n};\n"]}

package/lib/cjs/containers/Servers/Server.js

@@ -33,10 +33,10 @@ var Server = function (_a) {
                     react_1.default.createElement(components_1.Schema, { schemaName: "URL Variables", schema: urlVariables, expanded: true }))),
                 react_1.default.createElement("div", { id: "".concat(helpers_1.CommonHelpers.getIdentifier("server-".concat(serverName, "-security"), config)) },
                     react_1.default.createElement(Security_1.Security, { protocol: server.protocol(), security: security })),
-                server.hasBindings() && (react_1.default.createElement("div", { className: "mt-2" },
+                server.bindings() && (react_1.default.createElement("div", { className: "mt-2" },
                     react_1.default.createElement(components_1.Bindings, { name: "Server specific information", bindings: server.bindings() }))),
                 react_1.default.createElement(components_1.Extensions, { name: "Server Extensions", item: server }),
-                typeof server.hasTags === 'function' && server.hasTags() && (react_1.default.createElement("div", { className: "mt-2" },
+                server.tags().length > 0 && (react_1.default.createElement("div", { className: "mt-2" },
                     react_1.default.createElement(components_1.Tags, { tags: server.tags() }))))),
         react_1.default.createElement("div", { className: "panel-item--right" })));
 };

package/lib/cjs/containers/Servers/Server.js.map

@@ -1 +1 @@
-{"version":3,"file":"Server.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Server.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAG1B,uCAAsC;AACtC,+CAAgF;AAEhF,2CAA2C;AAC3C,yCAA6D;AAOtD,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG,uBAAa,CAAC,uBAAuB,CACxD,MAAM,CAAC,SAAS,EAAE,CACnB,CAAC;IACF,IAAM,eAAe,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IACjD,IAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAEnC,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,uCAAK,SAAS,EAAC,yBAAyB;YACtC,uCAAK,SAAS,EAAC,mDAAmD;gBAChE;oBACE,wCAAM,SAAS,EAAC,qBAAqB,IAAE,MAAM,CAAC,GAAG,EAAE,CAAQ;oBAC3D,wCAAM,SAAS,EAAC,wFAAwF,IACrG,eAAe;wBACd,CAAC,CAAC,UAAG,MAAM,CAAC,QAAQ,EAAE,cAAI,eAAe,CAAE;wBAC3C,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAChB;oBACP,wCAAM,SAAS,EAAC,mFAAmF,IAChG,UAAU,CACN,CACH;gBAEL,MAAM,CAAC,cAAc,EAAE,IAAI,CAC1B,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,qBAAQ,QAAE,MAAM,CAAC,WAAW,EAAE,CAAY,CACvC,CACP;gBAEA,YAAY,IAAI,CACf,uCACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,mBAAgB,EACpC,MAAM,CACP,CAAE;oBAEH,8BAAC,mBAAM,IACL,UAAU,EAAC,eAAe,EAC1B,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,IAAI,GACd,CACE,CACP;gBAGC,uCACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,cAAW,EAC/B,MAAM,CACP,CAAE;oBAEH,8BAAC,mBAAQ,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACzD;gBAGP,MAAM,CAAC,WAAW,EAAE,IAAI,CACvB,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,qBAAQ,IACP,IAAI,EAAC,6BAA6B,EAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,GAC3B,CACE,CACP;gBAED,8BAAC,uBAAU,IAAC,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAE,MAAM,GAAI;gBAEpD,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,IAAI,MAAM,CAAC,OAAO,EAAE,IAAI,CAC3D,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,iBAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,GAAI,CACzB,CACP,CACG,CACF;QAEN,uCAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC;AAvFW,QAAA,MAAM,UAuFjB","sourcesContent":["import React from 'react';\nimport { Server as ServerType } from '@asyncapi/parser';\n\nimport { Security } from './Security';\nimport { Markdown, Schema, Bindings, Tags, Extensions } from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers, SchemaHelpers } from '../../helpers';\n\ninterface Props {\n  serverName: string;\n  server: ServerType;\n}\n\nexport const Server: React.FunctionComponent<Props> = ({\n  serverName,\n  server,\n}) => {\n  const config = useConfig();\n\n  if (!server) {\n    return null;\n  }\n\n  const urlVariables = SchemaHelpers.serverVariablesToSchema(\n    server.variables(),\n  );\n  const protocolVersion = server.protocolVersion();\n  const security = server.security();\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded bg-gray-200 p-4 border bg-gray-100\">\n          <div>\n            <span className=\"font-mono text-base\">{server.url()}</span>\n            <span className=\"bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm\">\n              {protocolVersion\n                ? `${server.protocol()} ${protocolVersion}`\n                : server.protocol()}\n            </span>\n            <span className=\"bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm\">\n              {serverName}\n            </span>\n          </div>\n\n          {server.hasDescription() && (\n            <div className=\"mt-2\">\n              <Markdown>{server.description()}</Markdown>\n            </div>\n          )}\n\n          {urlVariables && (\n            <div\n              className=\"mt-2\"\n              id={`${CommonHelpers.getIdentifier(\n                `server-${serverName}-url-variables`,\n                config,\n              )}`}\n            >\n              <Schema\n                schemaName=\"URL Variables\"\n                schema={urlVariables}\n                expanded={true}\n              />\n            </div>\n          )}\n\n          {\n            <div\n              id={`${CommonHelpers.getIdentifier(\n                `server-${serverName}-security`,\n                config,\n              )}`}\n            >\n              <Security protocol={server.protocol()} security={security} />\n            </div>\n          }\n\n          {server.hasBindings() && (\n            <div className=\"mt-2\">\n              <Bindings\n                name=\"Server specific information\"\n                bindings={server.bindings()}\n              />\n            </div>\n          )}\n\n          <Extensions name=\"Server Extensions\" item={server} />\n\n          {typeof server.hasTags === 'function' && server.hasTags() && (\n            <div className=\"mt-2\">\n              <Tags tags={server.tags()} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"panel-item--right\" />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Server.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Server.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAG1B,uCAAsC;AACtC,+CAAgF;AAEhF,2CAA2C;AAC3C,yCAA6D;AAOtD,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAM,MAAM,GAAG,IAAA,oBAAS,GAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG,uBAAa,CAAC,uBAAuB,CACxD,MAAM,CAAC,SAAS,EAAE,CACnB,CAAC;IACF,IAAM,eAAe,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IACjD,IAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAEnC,OAAO,CACL,uCAAK,SAAS,EAAC,YAAY;QACzB,uCAAK,SAAS,EAAC,yBAAyB;YACtC,uCAAK,SAAS,EAAC,mDAAmD;gBAChE;oBACE,wCAAM,SAAS,EAAC,qBAAqB,IAAE,MAAM,CAAC,GAAG,EAAE,CAAQ;oBAC3D,wCAAM,SAAS,EAAC,wFAAwF,IACrG,eAAe;wBACd,CAAC,CAAC,UAAG,MAAM,CAAC,QAAQ,EAAE,cAAI,eAAe,CAAE;wBAC3C,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAChB;oBACP,wCAAM,SAAS,EAAC,mFAAmF,IAChG,UAAU,CACN,CACH;gBAEL,MAAM,CAAC,cAAc,EAAE,IAAI,CAC1B,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,qBAAQ,QAAE,MAAM,CAAC,WAAW,EAAE,CAAY,CACvC,CACP;gBAEA,YAAY,IAAI,CACf,uCACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,mBAAgB,EACpC,MAAM,CACP,CAAE;oBAEH,8BAAC,mBAAM,IACL,UAAU,EAAC,eAAe,EAC1B,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,IAAI,GACd,CACE,CACP;gBAGC,uCACE,EAAE,EAAE,UAAG,uBAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,cAAW,EAC/B,MAAM,CACP,CAAE;oBAEH,8BAAC,mBAAQ,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACzD;gBAGP,MAAM,CAAC,QAAQ,EAAE,IAAI,CACpB,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,qBAAQ,IACP,IAAI,EAAC,6BAA6B,EAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,GAC3B,CACE,CACP;gBAED,8BAAC,uBAAU,IAAC,IAAI,EAAC,mBAAmB,EAAC,IAAI,EAAE,MAAM,GAAI;gBAEpD,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,uCAAK,SAAS,EAAC,MAAM;oBACnB,8BAAC,iBAAI,IAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,GAAI,CACzB,CACP,CACG,CACF;QAEN,uCAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC;AAvFW,QAAA,MAAM,UAuFjB","sourcesContent":["import React from 'react';\nimport { ServerInterface } from '@asyncapi/parser';\n\nimport { Security } from './Security';\nimport { Markdown, Schema, Bindings, Tags, Extensions } from '../../components';\n\nimport { useConfig } from '../../contexts';\nimport { CommonHelpers, SchemaHelpers } from '../../helpers';\n\ninterface Props {\n  serverName: string;\n  server: ServerInterface;\n}\n\nexport const Server: React.FunctionComponent<Props> = ({\n  serverName,\n  server,\n}) => {\n  const config = useConfig();\n\n  if (!server) {\n    return null;\n  }\n\n  const urlVariables = SchemaHelpers.serverVariablesToSchema(\n    server.variables(),\n  );\n  const protocolVersion = server.protocolVersion();\n  const security = server.security();\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center px-8\">\n        <div className=\"shadow rounded bg-gray-200 p-4 border bg-gray-100\">\n          <div>\n            <span className=\"font-mono text-base\">{server.url()}</span>\n            <span className=\"bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm\">\n              {protocolVersion\n                ? `${server.protocol()} ${protocolVersion}`\n                : server.protocol()}\n            </span>\n            <span className=\"bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm\">\n              {serverName}\n            </span>\n          </div>\n\n          {server.hasDescription() && (\n            <div className=\"mt-2\">\n              <Markdown>{server.description()}</Markdown>\n            </div>\n          )}\n\n          {urlVariables && (\n            <div\n              className=\"mt-2\"\n              id={`${CommonHelpers.getIdentifier(\n                `server-${serverName}-url-variables`,\n                config,\n              )}`}\n            >\n              <Schema\n                schemaName=\"URL Variables\"\n                schema={urlVariables}\n                expanded={true}\n              />\n            </div>\n          )}\n\n          {\n            <div\n              id={`${CommonHelpers.getIdentifier(\n                `server-${serverName}-security`,\n                config,\n              )}`}\n            >\n              <Security protocol={server.protocol()} security={security} />\n            </div>\n          }\n\n          {server.bindings() && (\n            <div className=\"mt-2\">\n              <Bindings\n                name=\"Server specific information\"\n                bindings={server.bindings()}\n              />\n            </div>\n          )}\n\n          <Extensions name=\"Server Extensions\" item={server} />\n\n          {server.tags().length > 0 && (\n            <div className=\"mt-2\">\n              <Tags tags={server.tags()} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      <div className=\"panel-item--right\" />\n    </div>\n  );\n};\n"]}