@asyncapi/react-component 1.0.0-next.3 → 1.0.0-next.33

package/lib/esm/containers/Operations/Operations.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Operation } from './Operation';
-import { useSpec } from '../../contexts';
-import { PayloadType } from '../../types';
+import { useConfig, useSpec } from '../../contexts';
+import { CommonHelpers } from '../../helpers';
 import { OPERATIONS_TEXT } from '../../constants';
+import { PayloadType } from '../../types';
 export var Operations = function () {
     var channels = useSpec().channels();
+    var config = useConfig();
     if (!Object.keys(channels).length) {
         return null;
     }
@@ -12,15 +14,15 @@ export var Operations = function () {
     Object.entries(channels).forEach(function (_a) {
         var channelName = _a[0], channel = _a[1];
         if (channel.hasPublish()) {
-            operationsList.push(React.createElement("li", { className: "mb-12", key: "pub-" + channelName },
+            operationsList.push(React.createElement("li", { className: "mb-12", key: "pub-".concat(channelName), id: CommonHelpers.getIdentifier("operation-".concat(PayloadType.PUBLISH, "-").concat(channelName), config) },
                 React.createElement(Operation, { type: PayloadType.PUBLISH, operation: channel.publish(), channelName: channelName, channel: channel })));
         }
         if (channel.hasSubscribe()) {
-            operationsList.push(React.createElement("li", { className: "mb-12", key: "sub-" + channelName },
+            operationsList.push(React.createElement("li", { className: "mb-12", key: "sub-".concat(channelName), id: CommonHelpers.getIdentifier("operation-".concat(PayloadType.SUBSCRIBE, "-").concat(channelName), config) },
                 React.createElement(Operation, { type: PayloadType.SUBSCRIBE, operation: channel.subscribe(), channelName: channelName, channel: channel })));
         }
     });
-    return (React.createElement("section", { id: "operations", className: "mt-16" },
+    return (React.createElement("section", { id: "".concat(CommonHelpers.getIdentifier('operations', config)), className: "mt-16" },
         React.createElement("h2", { className: "2xl:w-7/12 text-3xl font-light mb-4 px-8" }, OPERATIONS_TEXT),
         React.createElement("ul", null, operationsList)));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Operations.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,CAAC,IAAM,UAAU,GAA4B;IACjD,IAAM,QAAQ,GAAG,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;IAEtC,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,4BAAI,SAAS,EAAC,OAAO,EAAC,GAAG,EAAE,SAAO,WAAa;gBAC7C,oBAAC,SAAS,IACR,IAAI,EAAE,WAAW,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,4BAAI,SAAS,EAAC,OAAO,EAAC,GAAG,EAAE,SAAO,WAAa;gBAC7C,oBAAC,SAAS,IACR,IAAI,EAAE,WAAW,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,iCAAS,EAAE,EAAC,YAAY,EAAC,SAAS,EAAC,OAAO;QACxC,4BAAI,SAAS,EAAC,0CAA0C,IACrD,eAAe,CACb;QACL,gCAAK,cAAc,CAAM,CACjB,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Operations.js","sourceRoot":"","sources":["../../../../src/containers/Operations/Operations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,CAAC,IAAM,UAAU,GAA4B;IACjD,IAAM,QAAQ,GAAG,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC;IACtC,IAAM,MAAM,GAAG,SAAS,EAAE,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,4BACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,WAAW,CAAE,EACzB,EAAE,EAAE,aAAa,CAAC,aAAa,CAC7B,oBAAa,WAAW,CAAC,OAAO,cAAI,WAAW,CAAE,EACjD,MAAM,CACP;gBAED,oBAAC,SAAS,IACR,IAAI,EAAE,WAAW,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,4BACE,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,cAAO,WAAW,CAAE,EACzB,EAAE,EAAE,aAAa,CAAC,aAAa,CAC7B,oBAAa,WAAW,CAAC,SAAS,cAAI,WAAW,CAAE,EACnD,MAAM,CACP;gBAED,oBAAC,SAAS,IACR,IAAI,EAAE,WAAW,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,iCACE,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAAC,YAAY,EAAE,MAAM,CAAC,CAAE,EAC1D,SAAS,EAAC,OAAO;QAEjB,4BAAI,SAAS,EAAC,0CAA0C,IACrD,eAAe,CACb;QACL,gCAAK,cAAc,CAAM,CACjB,CACX,CAAC;AACJ,CAAC,CAAC","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"]}

package/lib/esm/containers/Schemas/Schema.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Schema as SchemaComponent } from '../../components';
+export var Schema = function (_a) {
+    var schemaName = _a.schemaName, schema = _a.schema;
+    if (!schema) {
+        return null;
+    }
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "panel-item--center px-8" },
+            React.createElement("div", { className: "shadow rounded px-4 py-2 border bg-gray-200" },
+                React.createElement(SchemaComponent, { schemaName: schemaName, schema: schema }))),
+        React.createElement("div", { className: "w-full mt-4" })));
+};
+//# sourceMappingURL=Schema.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Schema.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schema.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAO7D,MAAM,CAAC,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,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,6CAA6C;gBAC1D,oBAAC,eAAe,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CACvD,CACF;QAEN,6BAAK,SAAS,EAAC,aAAa,GAAG,CAC3B,CACP,CAAC;AACJ,CAAC,CAAC","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"]}

package/lib/esm/containers/Schemas/Schemas.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Schema } from './Schema';
+import { useConfig, useSpec } from '../../contexts';
+import { CommonHelpers } from '../../helpers';
+import { SCHEMAS_TEXT } from '../../constants';
+export var Schemas = function () {
+    var asyncapi = useSpec();
+    var config = useConfig();
+    var schemas = asyncapi.hasComponents() && asyncapi.components().schemas();
+    if (!schemas || Object.keys(schemas).length === 0) {
+        return null;
+    }
+    return (React.createElement("section", { id: "".concat(CommonHelpers.getIdentifier('schemas', config)), className: "mt-16" },
+        React.createElement("h2", { className: "2xl:w-7/12 text-3xl font-light mb-4 px-8" }, SCHEMAS_TEXT),
+        React.createElement("ul", null, Object.entries(schemas).map(function (_a) {
+            var schemaName = _a[0], schema = _a[1];
+            return (React.createElement("li", { className: "mb-4", key: schemaName, id: CommonHelpers.getIdentifier("schema-".concat(schemaName), config) },
+                React.createElement(Schema, { schemaName: schemaName, schema: schema })));
+        }))));
+};
+//# sourceMappingURL=Schemas.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Schemas.js","sourceRoot":"","sources":["../../../../src/containers/Schemas/Schemas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,IAAM,OAAO,GAA4B;IAC9C,IAAM,QAAQ,GAAG,OAAO,EAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,SAAS,EAAE,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,iCACE,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAE,EACvD,SAAS,EAAC,OAAO;QAEjB,4BAAI,SAAS,EAAC,0CAA0C,IACrD,YAAY,CACV;QACL,gCACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAAnB,UAAU,QAAA,EAAE,MAAM,QAAA;YAAM,OAAA,CACrD,4BACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAU,UAAU,CAAE,EAAE,MAAM,CAAC;gBAE/D,oBAAC,MAAM,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAI,CAC/C,CACN;QARsD,CAQtD,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC","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"]}

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { ServerSecurity } from './ServerSecurity';
 import { Markdown, Schema, Bindings } from '../../components';
-import { SchemaHelpers } from '../../helpers';
+import { useConfig } from '../../contexts';
+import { CommonHelpers, SchemaHelpers } from '../../helpers';
 export var Server = function (_a) {
     var serverName = _a.serverName, server = _a.server;
+    var config = useConfig();
     if (!server) {
         return null;
     }
@@ -16,16 +18,17 @@ export var Server = function (_a) {
                 React.createElement("div", null,
                     React.createElement("span", { className: "font-mono text-base" }, server.url()),
                     React.createElement("span", { className: "bg-teal-500 font-bold no-underline text-white uppercase rounded mx-2 px-2 py-1 text-sm" }, protocolVersion
-                        ? server.protocol() + " " + protocolVersion
+                        ? "".concat(server.protocol(), " ").concat(protocolVersion)
                         : server.protocol()),
                     React.createElement("span", { className: "bg-blue-500 font-bold no-underline text-white uppercase rounded px-2 py-1 text-sm" }, serverName)),
                 server.hasDescription() && (React.createElement("div", { className: "mt-2" },
                     React.createElement(Markdown, null, server.description()))),
-                urlVariables && (React.createElement("div", { className: "mt-2" },
+                urlVariables && (React.createElement("div", { className: "mt-2", id: "".concat(CommonHelpers.getIdentifier("server-".concat(serverName, "-url-variables"), config)) },
                     React.createElement(Schema, { schemaName: "URL Variables", schema: urlVariables, expanded: true }))),
-                serverRequirements && (React.createElement(ServerSecurity, { serverRequirements: serverRequirements })),
+                React.createElement("div", { id: "".concat(CommonHelpers.getIdentifier("server-".concat(serverName, "-security"), config)) },
+                    React.createElement(ServerSecurity, { protocol: server.protocol(), serverRequirements: serverRequirements })),
                 server.hasBindings() && (React.createElement("div", { className: "mt-2" },
-                    React.createElement(Bindings, { bindings: server.bindings() }))))),
+                    React.createElement(Bindings, { name: "Server specific information", bindings: server.bindings() }))))),
         React.createElement("div", { className: "panel-item--right" })));
 };
 //# sourceMappingURL=Server.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Server.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,MAAM,CAAC,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG,aAAa,CAAC,uBAAuB,CACxD,MAAM,CAAC,SAAS,EAAE,CACnB,CAAC;IACF,IAAM,eAAe,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IACjD,IAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAE7C,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,mDAAmD;gBAChE;oBACE,8BAAM,SAAS,EAAC,qBAAqB,IAAE,MAAM,CAAC,GAAG,EAAE,CAAQ;oBAC3D,8BAAM,SAAS,EAAC,wFAAwF,IACrG,eAAe;wBACd,CAAC,CAAI,MAAM,CAAC,QAAQ,EAAE,SAAI,eAAiB;wBAC3C,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,CAChB;oBACP,8BAAM,SAAS,EAAC,mFAAmF,IAChG,UAAU,CACN,CACH;gBAEL,MAAM,CAAC,cAAc,EAAE,IAAI,CAC1B,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,QAAE,MAAM,CAAC,WAAW,EAAE,CAAY,CACvC,CACP;gBAEA,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,MAAM,IACL,UAAU,EAAC,eAAe,EAC1B,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,IAAI,GACd,CACE,CACP;gBAEA,kBAAkB,IAAI,CACrB,oBAAC,cAAc,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,CAC3D;gBAEA,MAAM,CAAC,WAAW,EAAE,IAAI,CACvB,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,GAAI,CACrC,CACP,CACG,CACF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Server.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO7D,MAAM,CAAC,IAAM,MAAM,GAAmC,UAAC,EAGtD;QAFC,UAAU,gBAAA,EACV,MAAM,YAAA;IAEN,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,IAAM,YAAY,GAAG,aAAa,CAAC,uBAAuB,CACxD,MAAM,CAAC,SAAS,EAAE,CACnB,CAAC;IACF,IAAM,eAAe,GAAG,MAAM,CAAC,eAAe,EAAE,CAAC;IACjD,IAAM,kBAAkB,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;IAE7C,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,mDAAmD;gBAChE;oBACE,8BAAM,SAAS,EAAC,qBAAqB,IAAE,MAAM,CAAC,GAAG,EAAE,CAAQ;oBAC3D,8BAAM,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,8BAAM,SAAS,EAAC,mFAAmF,IAChG,UAAU,CACN,CACH;gBAEL,MAAM,CAAC,cAAc,EAAE,IAAI,CAC1B,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,QAAE,MAAM,CAAC,WAAW,EAAE,CAAY,CACvC,CACP;gBAEA,YAAY,IAAI,CACf,6BACE,SAAS,EAAC,MAAM,EAChB,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,mBAAgB,EACpC,MAAM,CACP,CAAE;oBAEH,oBAAC,MAAM,IACL,UAAU,EAAC,eAAe,EAC1B,MAAM,EAAE,YAAY,EACpB,QAAQ,EAAE,IAAI,GACd,CACE,CACP;gBAGC,6BACE,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,cAAW,EAC/B,MAAM,CACP,CAAE;oBAEH,oBAAC,cAAc,IACb,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,EAC3B,kBAAkB,EAAE,kBAAkB,GACtC,CACE;gBAGP,MAAM,CAAC,WAAW,EAAE,IAAI,CACvB,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,IACP,IAAI,EAAC,6BAA6B,EAClC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,GAC3B,CACE,CACP,CACG,CACF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { Server as ServerType } from '@asyncapi/parser';\n\nimport { ServerSecurity } from './ServerSecurity';\nimport { Markdown, Schema, Bindings } 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 serverRequirements = 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              <ServerSecurity\n                protocol={server.protocol()}\n                serverRequirements={serverRequirements}\n              />\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        </div>\n      </div>\n\n      <div className=\"panel-item--right\" />\n    </div>\n  );\n};\n"]}

package/lib/esm/containers/Servers/ServerSecurity.js

@@ -3,57 +3,81 @@ import { Href, Markdown } from '../../components';
 import { useSpec } from '../../contexts';
 import { ServerHelpers } from '../../helpers';
 export var ServerSecurity = function (_a) {
-    var _b = _a.serverRequirements, serverRequirements = _b === void 0 ? [] : _b;
+    var _b = _a.serverRequirements, serverRequirements = _b === void 0 ? [] : _b, _c = _a.protocol, protocol = _c === void 0 ? '' : _c;
     var asyncapi = useSpec();
     var securitySchemes = asyncapi.hasComponents() && asyncapi.components().securitySchemes();
-    if (!serverRequirements.length ||
+    var renderedServerSecurities;
+    if (!serverRequirements ||
+        !serverRequirements.length ||
         !securitySchemes ||
         !Object.keys(securitySchemes).length) {
-        return null;
-    }
-    var serverSecurities = serverRequirements
-        .map(function (requirement) {
-        var def = securitySchemes[Object.keys(requirement.json())[0]];
-        if (!def) {
-            return null;
+        if (protocol === 'kafka' || protocol === 'kafka-secure') {
+            renderedServerSecurities = (React.createElement(ServerSecurityItem, { protocol: protocol, securitySchema: null }));
         }
-        return React.createElement(ServerSecurityItem, { securitySchema: def, key: def.type() });
-    })
-        .filter(Boolean);
-    if (!serverSecurities.length) {
+    }
+    else {
+        var serverSecurities = serverRequirements
+            .map(function (requirement) {
+            var def = securitySchemes[Object.keys(requirement.json())[0]];
+            if (!def) {
+                return null;
+            }
+            return (React.createElement(ServerSecurityItem, { protocol: protocol, securitySchema: def, key: def.type() }));
+        })
+            .filter(Boolean);
+        renderedServerSecurities = (React.createElement("ul", null, serverSecurities.map(function (security, idx) { return (React.createElement("li", { className: "mt-2", key: idx }, security)); })));
+    }
+    if (!renderedServerSecurities) {
         return null;
     }
     return (React.createElement("div", { className: "text-sm mt-4" },
         React.createElement("h5", { className: "text-gray-700 text-base" }, "Security:"),
-        React.createElement("ul", null, serverSecurities.map(function (security, idx) { return (React.createElement("li", { className: "mt-2", key: idx }, security)); }))));
+        renderedServerSecurities));
 };
-var ServerSecurityItem = function (_a) {
-    var securitySchema = _a.securitySchema;
+function collectSecuritySchemas(securitySchema) {
     var schemas = [];
-    if (securitySchema.name()) {
-        schemas.push(React.createElement("span", null,
-            "Name: ",
-            securitySchema.name()));
-    }
-    if (securitySchema.in()) {
-        schemas.push(React.createElement("span", null,
-            "In: ",
-            securitySchema.in()));
-    }
-    if (securitySchema.scheme()) {
-        schemas.push(React.createElement("span", null,
-            "Scheme: ",
-            securitySchema.scheme()));
-    }
-    if (securitySchema.bearerFormat()) {
-        schemas.push(React.createElement("span", null,
-            "Bearer format: ",
-            securitySchema.bearerFormat()));
+    if (securitySchema) {
+        if (securitySchema.name()) {
+            schemas.push(React.createElement("span", null,
+                "Name: ",
+                securitySchema.name()));
+        }
+        if (securitySchema.in()) {
+            schemas.push(React.createElement("span", null,
+                "In: ",
+                securitySchema.in()));
+        }
+        if (securitySchema.scheme()) {
+            schemas.push(React.createElement("span", null,
+                "Scheme: ",
+                securitySchema.scheme()));
+        }
+        if (securitySchema.bearerFormat()) {
+            schemas.push(React.createElement("span", null,
+                "Bearer format: ",
+                securitySchema.bearerFormat()));
+        }
+        if (securitySchema.openIdConnectUrl()) {
+            schemas.push(React.createElement(Href, { href: securitySchema.openIdConnectUrl(), className: "underline" }, "Connect URL"));
+        }
     }
-    if (securitySchema.openIdConnectUrl()) {
-        schemas.push(React.createElement(Href, { href: securitySchema.openIdConnectUrl(), className: "underline" }, "Connect URL"));
+    return schemas;
+}
+var ServerSecurityItem = function (_a) {
+    var securitySchema = _a.securitySchema, protocol = _a.protocol;
+    var schemas = collectSecuritySchemas(securitySchema);
+    var renderedKafkaSecurity;
+    if (['kafka', 'kafka-secure'].includes(protocol)) {
+        var _b = ServerHelpers.getKafkaSecurity(protocol, securitySchema), securityProtocol = _b.securityProtocol, saslMechanism = _b.saslMechanism;
+        renderedKafkaSecurity = (React.createElement("div", { className: "px-4 py-2 ml-2 mb-2 border border-gray-400 bg-gray-100 rounded" },
+            securityProtocol && (React.createElement("div", { className: "mt-1" },
+                React.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "security.protocol:"),
+                React.createElement("span", { className: "inline-block font-bold no-underline bg-indigo-400 text-white text-xs rounded py-0 px-1 ml-1" }, securityProtocol))),
+            saslMechanism && (React.createElement("div", { className: "mt-1" },
+                React.createElement("span", { className: "text-xs font-bold text-gray-600 mt-1 mr-1 uppercase" }, "sasl.mechanism:"),
+                React.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.flows();
+    var flows = securitySchema && securitySchema.flows();
     var renderedFlows = flows &&
         Object.entries(flows).map(function (_a) {
             var flowName = _a[0], flow = _a[1];
@@ -82,14 +106,15 @@ var ServerSecurityItem = function (_a) {
                             return (React.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.createElement("div", { className: "ai-security__security__security-schema" },
-        React.createElement("div", null,
+    return (React.createElement("div", null,
+        securitySchema && schemas && (React.createElement("div", null,
             React.createElement("span", null,
                 ServerHelpers.securityType(securitySchema.type()),
-                schemas.length > 0 && (React.createElement("ul", { className: "inline-block ml-2" }, schemas.map(function (schema, idx) { return (React.createElement("li", { className: "inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1", key: idx }, schema)); }))))),
-        securitySchema.hasDescription() && (React.createElement("div", null,
+                schemas.length > 0 && (React.createElement("ul", { className: "inline-block ml-2" }, schemas.map(function (schema, idx) { return (React.createElement("li", { className: "inline-block font-bold no-underline bg-blue-400 text-white text-xs uppercase rounded px-2 py-0 ml-1", key: idx }, schema)); })))))),
+        securitySchema && securitySchema.hasDescription() && (React.createElement("div", null,
             React.createElement(Markdown, null, securitySchema.description()))),
         renderedFlows && renderedFlows.length > 0 && (React.createElement("ul", { className: "my-2" },
-            React.createElement("li", null, renderedFlows)))));
+            React.createElement("li", null, renderedFlows))),
+        renderedKafkaSecurity && React.createElement("div", null, renderedKafkaSecurity)));
 };
 //# sourceMappingURL=ServerSecurity.js.map

package/lib/esm/containers/Servers/ServerSecurity.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerSecurity.js","sourceRoot":"","sources":["../../../../src/containers/Servers/ServerSecurity.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ServerSecurity.js","sourceRoot":"","sources":["../../../../src/containers/Servers/ServerSecurity.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  serverRequirements: ServerSecurityRequirement[];\n  protocol: string;\n}\n\nexport const ServerSecurity: React.FunctionComponent<Props> = ({\n  serverRequirements = [],\n  protocol = '',\n}) => {\n  const asyncapi = useSpec();\n  const securitySchemes =\n    asyncapi.hasComponents() && asyncapi.components().securitySchemes();\n\n  let renderedServerSecurities;\n  if (\n    !serverRequirements ||\n    !serverRequirements.length ||\n    !securitySchemes ||\n    !Object.keys(securitySchemes).length\n  ) {\n    if (protocol === 'kafka' || protocol === 'kafka-secure') {\n      renderedServerSecurities = (\n        <ServerSecurityItem protocol={protocol} securitySchema={null} />\n      );\n    }\n  } else {\n    const serverSecurities: React.ReactNodeArray = serverRequirements\n      .map(requirement => {\n        const def: SecurityScheme =\n          securitySchemes[Object.keys(requirement.json())[0]];\n\n        if (!def) {\n          return null;\n        }\n        return (\n          <ServerSecurityItem\n            protocol={protocol}\n            securitySchema={def}\n            key={def.type()}\n          />\n        );\n      })\n      .filter(Boolean);\n    renderedServerSecurities = (\n      <ul>\n        {serverSecurities.map((security, idx) => (\n          <li className=\"mt-2\" key={idx}>\n            {security}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n\n  if (!renderedServerSecurities) {\n    return null;\n  }\n\n  return (\n    <div className=\"text-sm mt-4\">\n      <h5 className=\"text-gray-700 text-base\">Security:</h5>\n      {renderedServerSecurities}\n    </div>\n  );\n};\n\nfunction collectSecuritySchemas(\n  securitySchema: SecurityScheme | null,\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  }\n  return schemas;\n}\n\ninterface ServerSecurityItemProps {\n  securitySchema: SecurityScheme | null;\n  protocol: string;\n}\n\nconst ServerSecurityItem: React.FunctionComponent<ServerSecurityItemProps> = ({\n  securitySchema,\n  protocol,\n}) => {\n  const schemas: React.ReactNodeArray = collectSecuritySchemas(securitySchema);\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"]}

package/lib/esm/containers/Servers/Servers.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import { Server } from './Server';
-import { useSpec } from '../../contexts';
+import { useConfig, useSpec } from '../../contexts';
+import { CommonHelpers } from '../../helpers';
 import { SERVERS_TEXT } from '../../constants';
 export var Servers = function () {
     var servers = useSpec().servers();
+    var config = useConfig();
     if (!Object.keys(servers).length) {
         return null;
     }
-    return (React.createElement("section", { id: "servers", className: "mt-16" },
+    return (React.createElement("section", { id: "".concat(CommonHelpers.getIdentifier('servers', config)), className: "mt-16" },
         React.createElement("h2", { className: "2xl:w-7/12 text-3xl font-light mb-4 px-8" }, SERVERS_TEXT),
         React.createElement("ul", null, Object.entries(servers).map(function (_a) {
             var serverName = _a[0], server = _a[1];
-            return (React.createElement("li", { className: "mb-4", key: serverName },
+            return (React.createElement("li", { className: "mb-4", key: serverName, id: "".concat(CommonHelpers.getIdentifier("server-".concat(serverName), config)) },
                 React.createElement(Server, { serverName: serverName, server: server, key: serverName })));
         }))));
 };

package/lib/esm/containers/Servers/Servers.js.map

@@ -1 +1 @@
-{"version":3,"file":"Servers.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Servers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,IAAM,OAAO,GAA4B;IAC9C,IAAM,OAAO,GAAG,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC;IAEpC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,iCAAS,EAAE,EAAC,SAAS,EAAC,SAAS,EAAC,OAAO;QACrC,4BAAI,SAAS,EAAC,0CAA0C,IACrD,YAAY,CACV;QACL,gCACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAAnB,UAAU,QAAA,EAAE,MAAM,QAAA;YAAM,OAAA,CACrD,4BAAI,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,UAAU;gBAClC,oBAAC,MAAM,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,GAAI,CAChE,CACN;QAJsD,CAItD,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Servers.js","sourceRoot":"","sources":["../../../../src/containers/Servers/Servers.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,CAAC,IAAM,OAAO,GAA4B;IAC9C,IAAM,OAAO,GAAG,OAAO,EAAE,CAAC,OAAO,EAAE,CAAC;IACpC,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE;QAChC,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,iCACE,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAE,EACvD,SAAS,EAAC,OAAO;QAEjB,4BAAI,SAAS,EAAC,0CAA0C,IACrD,YAAY,CACV;QACL,gCACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,EAAoB;gBAAnB,UAAU,QAAA,EAAE,MAAM,QAAA;YAAM,OAAA,CACrD,4BACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAChC,iBAAU,UAAU,CAAE,EACtB,MAAM,CACP,CAAE;gBAEH,oBAAC,MAAM,IAAC,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,GAAI,CAChE,CACN;QAXsD,CAWtD,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Server } from './Server';\n\nimport { useConfig, useSpec } from '../../contexts';\nimport { CommonHelpers } from '../../helpers';\nimport { SERVERS_TEXT } from '../../constants';\n\nexport const Servers: React.FunctionComponent = () => {\n  const servers = useSpec().servers();\n  const config = useConfig();\n\n  if (!Object.keys(servers).length) {\n    return null;\n  }\n\n  return (\n    <section\n      id={`${CommonHelpers.getIdentifier('servers', config)}`}\n      className=\"mt-16\"\n    >\n      <h2 className=\"2xl:w-7/12 text-3xl font-light mb-4 px-8\">\n        {SERVERS_TEXT}\n      </h2>\n      <ul>\n        {Object.entries(servers).map(([serverName, server]) => (\n          <li\n            className=\"mb-4\"\n            key={serverName}\n            id={`${CommonHelpers.getIdentifier(\n              `server-${serverName}`,\n              config,\n            )}`}\n          >\n            <Server serverName={serverName} server={server} key={serverName} />\n          </li>\n        ))}\n      </ul>\n    </section>\n  );\n};\n"]}

package/lib/esm/containers/Sidebar/Sidebar.js

@@ -12,7 +12,9 @@ export var Sidebar = function (_a) {
     var asyncapi = useSpec();
     var info = asyncapi.info();
     var logo = info.ext('x-logo');
-    var allMessages = asyncapi.allMessages();
+    var components = asyncapi.hasComponents() && asyncapi.components();
+    var messages = components && components.messages();
+    var schemas = components && components.schemas();
     var Operations = OperationsList;
     if (showOperations === 'bySpecTags') {
         Operations = OperationsByRootTags;
@@ -20,16 +22,29 @@ export var Sidebar = function (_a) {
     else if (showOperations === 'byOperationsTags') {
         Operations = OperationsByOperationsTags;
     }
+    var messagesList = messages && Object.keys(messages).length > 0 && (React.createElement("li", { className: "mb-3 mt-9" },
+        React.createElement("a", { className: "text-xs uppercase text-gray-700 mt-10 mb-4 font-thin hover:text-gray-900", href: "#messages", onClick: function () { return setShowSidebar(false); } }, "Messages"),
+        React.createElement("ul", { className: "text-sm mt-2" }, Object.entries(messages).map(function (_a) {
+            var messageName = _a[0], message = _a[1];
+            return (React.createElement("li", { key: messageName },
+                React.createElement("a", { className: "flex break-words no-underline text-gray-700 mt-2 hover:text-gray-900", href: "#message-".concat(messageName), onClick: function () { return setShowSidebar(false); } },
+                    React.createElement("div", { className: "break-all inline-block" }, message.uid()))));
+        }))));
+    var schemasList = schemas && Object.keys(schemas).length > 0 && (React.createElement("li", { className: "mb-3 mt-9" },
+        React.createElement("a", { className: "text-xs uppercase text-gray-700 mt-10 mb-4 font-thin hover:text-gray-900", href: "#schemas", onClick: function () { return setShowSidebar(false); } }, "Schemas"),
+        React.createElement("ul", { className: "text-sm mt-2" }, Object.keys(schemas).map(function (schemaName) { return (React.createElement("li", { key: schemaName },
+            React.createElement("a", { className: "flex break-words no-underline text-gray-700 mt-2 hover:text-gray-900", href: "#schema-".concat(schemaName), onClick: function () { return setShowSidebar(false); } },
+                React.createElement("div", { className: "break-all inline-block" }, schemaName)))); }))));
     return (React.createElement(SidebarContext.Provider, { value: { setShowSidebar: setShowSidebar } },
         React.createElement("div", { className: "burger-menu rounded-full h-16 w-16 bg-white fixed bottom-16 right-8 flex items-center justify-center z-30 cursor-pointer shadow-md bg-teal-500", onClick: function () { return setShowSidebar(function (prev) { return !prev; }); }, "data-lol": showSidebar },
             React.createElement("svg", { viewBox: "0 0 100 70", width: "40", height: "30", className: "fill-current text-gray-200" },
                 React.createElement("rect", { width: "100", height: "10" }),
                 React.createElement("rect", { y: "30", width: "100", height: "10" }),
                 React.createElement("rect", { y: "60", width: "100", height: "10" }))),
-        React.createElement("div", { className: (showSidebar ? 'block fixed w-full' : 'hidden') + " sidebar relative w-64 max-h-screen h-full bg-gray-200 shadow z-20" },
-            React.createElement("div", { className: (showSidebar ? 'w-full' : '') + " block fixed max-h-screen h-full font-sans px-4 pt-8 pb-16 overflow-y-auto bg-gray-200" },
+        React.createElement("div", { className: "".concat(showSidebar ? 'block fixed w-full' : 'hidden', " sidebar relative w-64 max-h-screen h-full bg-gray-200 shadow z-20") },
+            React.createElement("div", { className: "".concat(showSidebar ? 'w-full' : '', " block fixed max-h-screen h-full font-sans px-4 pt-8 pb-16 overflow-y-auto bg-gray-200") },
                 React.createElement("div", { className: "sidebar--content" },
-                    React.createElement("div", null, logo ? (React.createElement("img", { src: logo, alt: info.title() + " logo, " + info.version() + " version" })) : (React.createElement("h1", { className: "text-2xl font-light" },
+                    React.createElement("div", null, logo ? (React.createElement("img", { src: logo, alt: "".concat(info.title(), " logo, ").concat(info.version(), " version") })) : (React.createElement("h1", { className: "text-2xl font-light" },
                         info.title(),
                         " ",
                         info.version()))),
@@ -42,11 +57,8 @@ export var Sidebar = function (_a) {
                             React.createElement("li", { className: "mb-3 mt-9" },
                                 React.createElement("a", { className: "text-xs uppercase text-gray-700 mt-10 mb-4 font-thin hover:text-gray-900", href: "#operations", onClick: function () { return setShowSidebar(false); } }, "Operations"),
                                 React.createElement(Operations, null)),
-                            allMessages.size > 0 && (React.createElement("li", { className: "mb-3 mt-9" },
-                                React.createElement("a", { className: "text-xs uppercase text-gray-700 mt-10 mb-4 font-thin hover:text-gray-900", href: "#messages", onClick: function () { return setShowSidebar(false); } }, "Messages"),
-                                React.createElement("ul", { className: "text-sm mt-2" }, Array.from(allMessages.keys()).map(function (messageName) { return (React.createElement("li", { key: messageName },
-                                    React.createElement("a", { className: "flex break-words no-underline text-gray-700 mt-2 hover:text-gray-900", href: "#message-" + messageName, onClick: function () { return setShowSidebar(false); } },
-                                        React.createElement("div", { className: "break-all inline-block" }, messageName)))); }))))))))))));
+                            messagesList,
+                            schemasList))))))));
 };
 export var OperationsList = function () {
     var asyncapi = useSpec();
@@ -55,10 +67,10 @@ export var OperationsList = function () {
     Object.entries(channels).forEach(function (_a) {
         var channelName = _a[0], channel = _a[1];
         if (channel.hasPublish()) {
-            operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-" + channelName }));
+            operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-".concat(channelName) }));
         }
         if (channel.hasSubscribe()) {
-            operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-" + channelName }));
+            operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-".concat(channelName) }));
         }
     });
     return React.createElement("ul", { className: "text-sm mt-2" }, operationsList);
@@ -73,11 +85,11 @@ export var OperationsByRootTags = function () {
             var channelName = _a[0], channel = _a[1];
             if (channel.hasPublish() &&
                 SpecificationHelpers.containTags(channel.publish(), tag)) {
-                operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-" + channelName }));
+                operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-".concat(channelName) }));
             }
             if (channel.hasSubscribe() &&
                 SpecificationHelpers.containTags(channel.subscribe(), tag)) {
-                operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-" + channelName }));
+                operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-".concat(channelName) }));
             }
         });
         return operationsList;
@@ -88,12 +100,12 @@ export var OperationsByRootTags = function () {
         if (channel.hasPublish() &&
             (!channel.publish().hasTags() ||
                 !SpecificationHelpers.containTags(channel.publish(), tags))) {
-            untaggedOperations.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-" + channelName }));
+            untaggedOperations.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-".concat(channelName) }));
         }
         if (channel.hasSubscribe() &&
             (!channel.subscribe().hasTags() ||
                 !SpecificationHelpers.containTags(channel.subscribe(), tags))) {
-            untaggedOperations.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-" + channelName }));
+            untaggedOperations.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-".concat(channelName) }));
         }
     });
     return (React.createElement("div", null,
@@ -117,11 +129,11 @@ export var OperationsByOperationsTags = function () {
             var channelName = _a[0], channel = _a[1];
             if (channel.hasPublish() &&
                 SpecificationHelpers.containTags(channel.publish(), tag)) {
-                operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-" + channelName }));
+                operationsList.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-".concat(channelName) }));
             }
             if (channel.hasSubscribe() &&
                 SpecificationHelpers.containTags(channel.subscribe(), tag)) {
-                operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-" + channelName }));
+                operationsList.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-".concat(channelName) }));
             }
         });
         return operationsList;
@@ -132,12 +144,12 @@ export var OperationsByOperationsTags = function () {
         if (channel.hasPublish() &&
             (!channel.publish().hasTags() ||
                 !SpecificationHelpers.containTags(channel.publish(), operationsTags))) {
-            untaggedOperations.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-" + channelName }));
+            untaggedOperations.push(React.createElement(OperationsPubItem, { channelName: channelName, key: "pub-".concat(channelName) }));
         }
         if (channel.hasSubscribe() &&
             (!channel.subscribe().hasTags() ||
                 !SpecificationHelpers.containTags(channel.subscribe(), operationsTags))) {
-            untaggedOperations.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-" + channelName }));
+            untaggedOperations.push(React.createElement(OperationsSubItem, { channelName: channelName, key: "sub-".concat(channelName) }));
         }
     });
     return (React.createElement("div", null,
@@ -159,13 +171,13 @@ var OperationsByTagItem = function (_a) {
                 className: expand ? '-rotate-180' : '-rotate-90',
             } },
             React.createElement("span", { className: "text-sm inline-block mt-1 font-extralight" }, tagName)),
-        React.createElement("ul", { className: (expand ? 'block' : 'hidden') + " text-sm mt-2 font-light" }, children)));
+        React.createElement("ul", { className: "".concat(expand ? 'block' : 'hidden', " text-sm mt-2 font-light") }, children)));
 };
 var OperationsPubItem = function (_a) {
     var channelName = _a.channelName;
     var setShowSidebar = useContext(SidebarContext).setShowSidebar;
     return (React.createElement("li", null,
-        React.createElement("a", { className: "flex no-underline text-gray-700 mb-2 hover:text-gray-900", href: "#operation-publish-" + channelName, onClick: function () { return setShowSidebar(false); } },
+        React.createElement("a", { className: "flex no-underline text-gray-700 mb-2 hover:text-gray-900", href: "#operation-publish-".concat(channelName), onClick: function () { return setShowSidebar(false); } },
             React.createElement("span", { className: "bg-blue-600 font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs", title: "Publish" }, "Pub"),
             React.createElement("span", { className: "break-all inline-block" }, channelName))));
 };
@@ -173,7 +185,7 @@ var OperationsSubItem = function (_a) {
     var channelName = _a.channelName;
     var setShowSidebar = useContext(SidebarContext).setShowSidebar;
     return (React.createElement("li", null,
-        React.createElement("a", { className: "flex no-underline text-gray-700 mb-2 hover:text-gray-900", href: "#operation-subscribe-" + channelName, onClick: function () { return setShowSidebar(false); } },
+        React.createElement("a", { className: "flex no-underline text-gray-700 mb-2 hover:text-gray-900", href: "#operation-subscribe-".concat(channelName), onClick: function () { return setShowSidebar(false); } },
             React.createElement("span", { className: "bg-green-600 font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded text-xs", title: "Subscribe" }, "SUB"),
             React.createElement("span", { className: "break-all inline-block" }, channelName))));
 };