@asyncapi/react-component 1.0.0-next.5 → 1.0.0-next.51

package/lib/esm/containers/AsyncApi/Layout.js

@@ -5,33 +5,41 @@ import { Info } from '../Info/Info';
 import { Servers } from '../Servers/Servers';
 import { Operations } from '../Operations/Operations';
 import { Messages } from '../Messages/Messages';
+import { Schemas } from '../Schemas/Schemas';
 import { Error } from '../Error/Error';
-import { bemClasses } from '../../helpers';
-import { SpecificationContext } from '../../contexts';
+import { SpecificationContext, ConfigContext } from '../../contexts';
 var AsyncApiLayout = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var asyncapi = _a.asyncapi, config = _a.config, _h = _a.error, error = _h === void 0 ? null : _h;
-    var _j = useState(1281), divWidth = _j[0], setDivWidth = _j[1];
+    var asyncapi = _a.asyncapi, config = _a.config, _b = _a.error, error = _b === void 0 ? null : _b;
+    var _c = useState('container:xl'), observerClassName = _c[0], setObserverClassName = _c[1];
     var ref = useResizeObserver({
         onResize: function (_a) {
             var width = _a.width;
-            if (divWidth !== width) {
-                width && setDivWidth(width);
-            }
+            requestAnimationFrame(function () {
+                if (width === undefined) {
+                    return;
+                }
+                var possibleClassName = width <= 1280 ? 'container:xl' : 'container:base';
+                if (possibleClassName !== observerClassName) {
+                    setObserverClassName(possibleClassName);
+                }
+            });
         },
     }).ref;
-    bemClasses.setSchemaID(config.schemaID);
-    return (React.createElement(SpecificationContext.Provider, { value: { asyncapi: asyncapi } },
-        React.createElement("section", { className: (divWidth <= 1280 ? 'container:xl' : 'container:base') + " relative md:flex bg-white", id: bemClasses.getSchemaID(), ref: ref },
-            ((_b = config.show) === null || _b === void 0 ? void 0 : _b.sidebar) && React.createElement(Sidebar, { config: config.sidebar }),
-            React.createElement("div", { className: "panel--center relative py-8 flex-1" },
-                React.createElement("div", { className: "relative z-10" },
-                    ((_c = config.show) === null || _c === void 0 ? void 0 : _c.errors) && error && React.createElement(Error, { error: error }),
-                    ((_d = config.show) === null || _d === void 0 ? void 0 : _d.info) && React.createElement(Info, null),
-                    ((_e = config.show) === null || _e === void 0 ? void 0 : _e.servers) && React.createElement(Servers, null),
-                    ((_f = config.show) === null || _f === void 0 ? void 0 : _f.operations) && React.createElement(Operations, null),
-                    ((_g = config.show) === null || _g === void 0 ? void 0 : _g.messages) && React.createElement(Messages, null)),
-                React.createElement("div", { className: "panel--right absolute top-0 right-0 h-full bg-gray-800" })))));
+    var configShow = config.show || {};
+    return (React.createElement(ConfigContext.Provider, { value: config },
+        React.createElement(SpecificationContext.Provider, { value: asyncapi },
+            React.createElement("section", { className: "aui-root" },
+                React.createElement("div", { className: "".concat(observerClassName, " relative md:flex bg-white leading-normal"), id: config.schemaID || undefined, ref: ref },
+                    configShow.sidebar && React.createElement(Sidebar, null),
+                    React.createElement("div", { className: "panel--center relative py-8 flex-1" },
+                        React.createElement("div", { className: "relative z-10" },
+                            configShow.errors && error && React.createElement(Error, { error: error }),
+                            configShow.info && React.createElement(Info, null),
+                            configShow.servers && React.createElement(Servers, null),
+                            configShow.operations && React.createElement(Operations, null),
+                            configShow.messages && React.createElement(Messages, null),
+                            configShow.schemas && React.createElement(Schemas, null)),
+                        React.createElement("div", { className: "panel--right absolute top-0 right-0 h-full bg-gray-800" })))))));
 };
 export default AsyncApiLayout;
 //# sourceMappingURL=Layout.js.map

package/lib/esm/containers/AsyncApi/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../src/containers/AsyncApi/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAStD,IAAM,cAAc,GAAmC,UAAC,EAIvD;;QAHC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA;IAEN,IAAA,KAA0B,QAAQ,CAAC,IAAI,CAAC,EAAvC,QAAQ,QAAA,EAAE,WAAW,QAAkB,CAAC;IAEvC,IAAA,GAAG,GAAK,iBAAiB,CAAiB;QAChD,QAAQ,EAAE,UAAC,EAAS;gBAAP,KAAK,WAAA;YAChB,IAAI,QAAQ,KAAK,KAAK,EAAE;gBACtB,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;aAC7B;QACH,CAAC;KACF,CAAC,IANS,CAMR;IACH,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAExC,OAAO,CACL,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,UAAA,EAAE;QAChD,iCACE,SAAS,EAAE,CACT,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,gCAC1B,EAC5B,EAAE,EAAE,UAAU,CAAC,WAAW,EAAE,EAC5B,GAAG,EAAE,GAAG;YAEP,OAAA,MAAM,CAAC,IAAI,0CAAE,OAAO,KAAI,oBAAC,OAAO,IAAC,MAAM,EAAE,MAAM,CAAC,OAAO,GAAI;YAC5D,6BAAK,SAAS,EAAC,oCAAoC;gBACjD,6BAAK,SAAS,EAAC,eAAe;oBAC3B,OAAA,MAAM,CAAC,IAAI,0CAAE,MAAM,KAAI,KAAK,IAAI,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI;oBACvD,OAAA,MAAM,CAAC,IAAI,0CAAE,IAAI,KAAI,oBAAC,IAAI,OAAG;oBAC7B,OAAA,MAAM,CAAC,IAAI,0CAAE,OAAO,KAAI,oBAAC,OAAO,OAAG;oBACnC,OAAA,MAAM,CAAC,IAAI,0CAAE,UAAU,KAAI,oBAAC,UAAU,OAAG;oBACzC,OAAA,MAAM,CAAC,IAAI,0CAAE,QAAQ,KAAI,oBAAC,QAAQ,OAAG,CAClC;gBACN,6BAAK,SAAS,EAAC,wDAAwD,GAAG,CACtE,CACE,CACoB,CACjC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"Layout.js","sourceRoot":"","sources":["../../../../src/containers/AsyncApi/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AASrE,IAAM,cAAc,GAAmC,UAAC,EAIvD;QAHC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA;IAEN,IAAA,KAA4C,QAAQ,CAAC,cAAc,CAAC,EAAnE,iBAAiB,QAAA,EAAE,oBAAoB,QAA4B,CAAC;IAEnE,IAAA,GAAG,GAAK,iBAAiB,CAAiB;QAChD,QAAQ,EAAE,UAAC,EAAS;gBAAP,KAAK,WAAA;YAChB,qBAAqB,CAAC;gBACpB,IAAI,KAAK,KAAK,SAAS,EAAE;oBACvB,OAAO;iBACR;gBAED,IAAM,iBAAiB,GACrB,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC;gBACpD,IAAI,iBAAiB,KAAK,iBAAiB,EAAE;oBAC3C,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;iBACzC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;KACF,CAAC,IAdS,CAcR;IAEH,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;IACrC,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM;QACnC,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ;YAC5C,iCAAS,SAAS,EAAC,UAAU;gBAC3B,6BACE,SAAS,EAAE,UAAG,iBAAiB,8CAA2C,EAC1E,EAAE,EAAE,MAAM,CAAC,QAAQ,IAAI,SAAS,EAChC,GAAG,EAAE,GAAG;oBAEP,UAAU,CAAC,OAAO,IAAI,oBAAC,OAAO,OAAG;oBAClC,6BAAK,SAAS,EAAC,oCAAoC;wBACjD,6BAAK,SAAS,EAAC,eAAe;4BAC3B,UAAU,CAAC,MAAM,IAAI,KAAK,IAAI,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI;4BACrD,UAAU,CAAC,IAAI,IAAI,oBAAC,IAAI,OAAG;4BAC3B,UAAU,CAAC,OAAO,IAAI,oBAAC,OAAO,OAAG;4BACjC,UAAU,CAAC,UAAU,IAAI,oBAAC,UAAU,OAAG;4BACvC,UAAU,CAAC,QAAQ,IAAI,oBAAC,QAAQ,OAAG;4BACnC,UAAU,CAAC,OAAO,IAAI,oBAAC,OAAO,OAAG,CAC9B;wBACN,6BAAK,SAAS,EAAC,wDAAwD,GAAG,CACtE,CACF,CACE,CACoB,CACT,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport { AsyncAPIDocumentInterface } from '@asyncapi/parser';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { Sidebar } from '../Sidebar/Sidebar';\nimport { Info } from '../Info/Info';\nimport { Servers } from '../Servers/Servers';\nimport { Operations } from '../Operations/Operations';\nimport { Messages } from '../Messages/Messages';\nimport { Schemas } from '../Schemas/Schemas';\nimport { Error } from '../Error/Error';\n\nimport { ConfigInterface } from '../../config';\nimport { SpecificationContext, ConfigContext } from '../../contexts';\nimport { ErrorObject } from '../../types';\n\ninterface Props {\n  asyncapi: AsyncAPIDocumentInterface;\n  config: ConfigInterface;\n  error?: ErrorObject;\n}\n\nconst AsyncApiLayout: React.FunctionComponent<Props> = ({\n  asyncapi,\n  config,\n  error = null,\n}) => {\n  const [observerClassName, setObserverClassName] = useState('container:xl');\n\n  const { ref } = useResizeObserver<HTMLDivElement>({\n    onResize: ({ width }) => {\n      requestAnimationFrame(() => {\n        if (width === undefined) {\n          return;\n        }\n\n        const possibleClassName =\n          width <= 1280 ? 'container:xl' : 'container:base';\n        if (possibleClassName !== observerClassName) {\n          setObserverClassName(possibleClassName);\n        }\n      });\n    },\n  });\n\n  const configShow = config.show || {};\n  return (\n    <ConfigContext.Provider value={config}>\n      <SpecificationContext.Provider value={asyncapi}>\n        <section className=\"aui-root\">\n          <div\n            className={`${observerClassName} relative md:flex bg-white leading-normal`}\n            id={config.schemaID || undefined}\n            ref={ref}\n          >\n            {configShow.sidebar && <Sidebar />}\n            <div className=\"panel--center relative py-8 flex-1\">\n              <div className=\"relative z-10\">\n                {configShow.errors && error && <Error error={error} />}\n                {configShow.info && <Info />}\n                {configShow.servers && <Servers />}\n                {configShow.operations && <Operations />}\n                {configShow.messages && <Messages />}\n                {configShow.schemas && <Schemas />}\n              </div>\n              <div className=\"panel--right absolute top-0 right-0 h-full bg-gray-800\" />\n            </div>\n          </div>\n        </section>\n      </SpecificationContext.Provider>\n    </ConfigContext.Provider>\n  );\n};\n\nexport default AsyncApiLayout;\n"]}

package/lib/esm/containers/AsyncApi/Standalone.js

@@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -37,7 +39,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -105,7 +107,7 @@ var AsyncApiComponent = (function (_super) {
         var _b = this.props, config = _b.config, propError = _b.error;
         var _c = this.state, asyncapi = _c.asyncapi, stateError = _c.error;
         var error = propError || stateError;
-        var concatenatedConfig = __assign(__assign(__assign({}, defaultConfig), config), { show: __assign(__assign({}, defaultConfig.show), (!!config && config.show)), sidebar: __assign(__assign({}, defaultConfig.sidebar), (!!config && config.sidebar)) });
+        var concatenatedConfig = __assign(__assign(__assign({}, defaultConfig), config), { show: __assign(__assign({}, defaultConfig.show), (!!config && config.show)), expand: __assign(__assign({}, defaultConfig.expand), (!!config && config.expand)), sidebar: __assign(__assign({}, defaultConfig.sidebar), (!!config && config.sidebar)) });
         if (!asyncapi) {
             if (!error) {
                 return null;

package/lib/esm/containers/AsyncApi/Standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"Standalone.js","sourceRoot":"","sources":["../../../../src/containers/AsyncApi/Standalone.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAmB,aAAa,EAAE,MAAM,cAAc,CAAC;AAE9D,OAAO,cAAc,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAavC;IAAgC,qCAAuC;IAMrE,2BAAY,KAAoB;QAAhC,YACE,kBAAM,KAAK,CAAC,SAOb;QAbD,WAAK,GAAkB;YACrB,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,SAAS;SACjB,CAAC;QAKA,IAAM,UAAU,GAAG,oBAAoB,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACzE,IAAI,UAAU,EAAE;YACd,KAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;SACvC;;IAEH,CAAC;IAEK,6CAAiB,GAAvB;;;gBACE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;oBACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;iBACrC;;;;KACF;IAEK,8CAAkB,GAAxB,UAAyB,SAAwB;;;;gBACzC,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;gBAC7B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;gBAEpC,IAAI,SAAS,KAAK,SAAS,EAAE;oBAC3B,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;iBAC7B;;;;KACF;IAED,kCAAM,GAAN;;QACQ,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAvC,MAAM,YAAA,EAAS,SAAS,WAAe,CAAC;QAC1C,IAAA,KAAkC,IAAI,CAAC,KAAK,EAA1C,QAAQ,cAAA,EAAS,UAAU,WAAe,CAAC;QAEnD,IAAM,KAAK,GAAG,SAAS,IAAI,UAAU,CAAC;QACtC,IAAM,kBAAkB,kCACnB,aAAa,GACb,MAAM,KACT,IAAI,wBACC,aAAa,CAAC,IAAI,GAClB,CAAC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC,GAE9B,OAAO,wBACF,aAAa,CAAC,OAAO,GACrB,CAAC,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,OAAO,CAAC,IAElC,CAAC;QAEF,IAAI,CAAC,QAAQ,EAAE;YACb,IAAI,CAAC,KAAK,EAAE;gBACV,OAAO,IAAI,CAAC;aACb;YACD,OAAO,OAAA,kBAAkB,CAAC,IAAI,0CAAE,MAAM,KAAI,oBAAC,KAAK,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC;SACnE;QAED,OAAO,CACL,oBAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,kBAAkB,EAC1B,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;IACJ,CAAC;IAEO,uCAAW,GAAnB,UAAoB,MAAmB;QACrC,IAAM,UAAU,GAAG,oBAAoB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC;QACnE,IAAI,CAAC,UAAU,EAAE;YACf,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,CAAC;YACvC,OAAO;SACR;QACD,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1C,CAAC;IACH,wBAAC;AAAD,CAAC,AAzED,CAAgC,SAAS,GAyExC;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"Standalone.js","sourceRoot":"","sources":["../../../../src/containers/AsyncApi/Standalone.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport { AsyncAPIDocumentInterface } from '@asyncapi/parser';\n\nimport { SpecificationHelpers } from '../../helpers';\nimport { ErrorObject, PropsSchema } from '../../types';\nimport { ConfigInterface, defaultConfig } from '../../config';\n\nimport AsyncApiLayout from './Layout';\nimport { Error } from '../Error/Error';\n\nexport interface AsyncApiProps {\n  schema: PropsSchema;\n  config?: Partial<ConfigInterface>;\n  error?: ErrorObject;\n}\n\ninterface AsyncAPIState {\n  asyncapi?: AsyncAPIDocumentInterface;\n  error?: ErrorObject;\n}\n\nclass AsyncApiComponent extends Component<AsyncApiProps, AsyncAPIState> {\n  state: AsyncAPIState = {\n    asyncapi: undefined,\n    error: undefined,\n  };\n\n  constructor(props: AsyncApiProps) {\n    super(props);\n\n    const parsedSpec = SpecificationHelpers.retrieveParsedSpec(props.schema);\n    if (parsedSpec) {\n      this.state = { asyncapi: parsedSpec };\n    }\n    return;\n  }\n\n  async componentDidMount() {\n    if (!this.state.asyncapi) {\n      this.updateState(this.props.schema);\n    }\n  }\n\n  async componentDidUpdate(prevProps: AsyncApiProps) {\n    const oldSchema = prevProps.schema;\n    const newSchema = this.props.schema;\n\n    if (oldSchema !== newSchema) {\n      this.updateState(newSchema);\n    }\n  }\n\n  render() {\n    const { config, error: propError } = this.props;\n    const { asyncapi, error: stateError } = this.state;\n\n    const error = propError || stateError;\n    const concatenatedConfig: ConfigInterface = {\n      ...defaultConfig,\n      ...config,\n      show: {\n        ...defaultConfig.show,\n        ...(!!config && config.show),\n      },\n      expand: {\n        ...defaultConfig.expand,\n        ...(!!config && config.expand),\n      },\n      sidebar: {\n        ...defaultConfig.sidebar,\n        ...(!!config && config.sidebar),\n      },\n    };\n\n    if (!asyncapi) {\n      if (!error) {\n        return null;\n      }\n      return concatenatedConfig.show?.errors && <Error error={error} />;\n    }\n\n    return (\n      <AsyncApiLayout\n        asyncapi={asyncapi}\n        config={concatenatedConfig}\n        error={error}\n      />\n    );\n  }\n\n  private updateState(schema: PropsSchema) {\n    const parsedSpec = SpecificationHelpers.retrieveParsedSpec(schema);\n    if (!parsedSpec) {\n      this.setState({ asyncapi: undefined });\n      return;\n    }\n    this.setState({ asyncapi: parsedSpec });\n  }\n}\n\nexport default AsyncApiComponent;\n"]}

package/lib/esm/containers/Error/Error.js

@@ -10,7 +10,7 @@ var renderErrors = function (errors) {
             return null;
         }
         return (React.createElement("div", { key: index, className: "flex" },
-            React.createElement("span", null, singleError.location.startLine + "."),
+            React.createElement("span", null, "".concat(singleError.location.startLine, ".")),
             React.createElement("code", { className: "whitespace-pre-wrap break-all ml-2" }, singleError.title)));
     })
         .filter(Boolean);
@@ -24,7 +24,7 @@ export var Error = function (_a) {
     return (React.createElement("div", { className: "panel-item" },
         React.createElement("div", { className: "panel-item--center p-8" },
             React.createElement("section", { className: "shadow rounded bg-gray-200 border-red-500 border-l-8" },
-                React.createElement("h2", { className: "p-2" }, title ? ERROR_TEXT + ": " + title : ERROR_TEXT),
+                React.createElement("h2", { className: "p-2" }, title ? "".concat(ERROR_TEXT, ": ").concat(title) : ERROR_TEXT),
                 validationErrors && validationErrors.length ? (React.createElement("div", { className: "bg-gray-800 text-white text-xs p-2" },
                     React.createElement("pre", null, renderErrors(validationErrors)))) : null)),
         React.createElement("div", { className: "panel-item--right" })));

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

@@ -1 +1 @@
-{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../src/containers/Error/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,IAAM,YAAY,GAAG,UAAC,MAAyB;IAC7C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,MAAM;SACV,GAAG,CAAC,UAAC,WAA4B,EAAE,KAAa;QAC/C,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAC/D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM;YAC/B,kCAAU,WAAW,CAAC,QAAQ,CAAC,SAAS,MAAG,CAAQ;YACnD,8BAAM,SAAS,EAAC,oCAAoC,IACjD,WAAW,CAAC,KAAK,CACb,CACH,CACP,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC,CAAC;AAMF,MAAM,CAAC,IAAM,KAAK,GAAmC,UAAC,EAAS;QAAP,KAAK,WAAA;IAC3D,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IACO,IAAA,KAAK,GAAuB,KAAK,MAA5B,EAAE,gBAAgB,GAAK,KAAK,iBAAV,CAAW;IAE1C,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,wBAAwB;YACrC,iCAAS,SAAS,EAAC,sDAAsD;gBACvE,4BAAI,SAAS,EAAC,KAAK,IAChB,KAAK,CAAC,CAAC,CAAI,UAAU,UAAK,KAAO,CAAC,CAAC,CAAC,UAAU,CAC5C;gBACJ,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAC7C,6BAAK,SAAS,EAAC,oCAAoC;oBACjD,iCAAM,YAAY,CAAC,gBAAgB,CAAC,CAAO,CACvC,CACP,CAAC,CAAC,CAAC,IAAI,CACA,CACN;QACN,6BAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../src/containers/Error/Error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7C,IAAM,YAAY,GAAG,UAAC,MAAyB;IAC7C,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,IAAI,CAAC;KACb;IAED,OAAO,MAAM;SACV,GAAG,CAAC,UAAC,WAA4B,EAAE,KAAa;QAC/C,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAC/D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM;YAC/B,kCAAO,UAAG,WAAW,CAAC,QAAQ,CAAC,SAAS,MAAG,CAAQ;YACnD,8BAAM,SAAS,EAAC,oCAAoC,IACjD,WAAW,CAAC,KAAK,CACb,CACH,CACP,CAAC;IACJ,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC,CAAC;AAMF,MAAM,CAAC,IAAM,KAAK,GAAmC,UAAC,EAAS;QAAP,KAAK,WAAA;IAC3D,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,IAAI,CAAC;KACb;IACO,IAAA,KAAK,GAAuB,KAAK,MAA5B,EAAE,gBAAgB,GAAK,KAAK,iBAAV,CAAW;IAE1C,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,wBAAwB;YACrC,iCAAS,SAAS,EAAC,sDAAsD;gBACvE,4BAAI,SAAS,EAAC,KAAK,IAChB,KAAK,CAAC,CAAC,CAAC,UAAG,UAAU,eAAK,KAAK,CAAE,CAAC,CAAC,CAAC,UAAU,CAC5C;gBACJ,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAC7C,6BAAK,SAAS,EAAC,oCAAoC;oBACjD,iCAAM,YAAY,CAAC,gBAAgB,CAAC,CAAO,CACvC,CACP,CAAC,CAAC,CAAC,IAAI,CACA,CACN;QACN,6BAAK,SAAS,EAAC,mBAAmB,GAAG,CACjC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { ERROR_TEXT } from '../../constants';\nimport { ErrorObject, ValidationError } from '../../types';\n\nconst renderErrors = (errors: ValidationError[]): React.ReactNode => {\n  if (!errors) {\n    return null;\n  }\n\n  return errors\n    .map((singleError: ValidationError, index: number) => {\n      if (!singleError || !singleError.title || !singleError.location) {\n        return null;\n      }\n      return (\n        <div key={index} className=\"flex\">\n          <span>{`${singleError.location.startLine}.`}</span>\n          <code className=\"whitespace-pre-wrap break-all ml-2\">\n            {singleError.title}\n          </code>\n        </div>\n      );\n    })\n    .filter(Boolean);\n};\n\ninterface Props {\n  error: ErrorObject;\n}\n\nexport const Error: React.FunctionComponent<Props> = ({ error }) => {\n  if (!error) {\n    return null;\n  }\n  const { title, validationErrors } = error;\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center p-8\">\n        <section className=\"shadow rounded bg-gray-200 border-red-500 border-l-8\">\n          <h2 className=\"p-2\">\n            {title ? `${ERROR_TEXT}: ${title}` : ERROR_TEXT}\n          </h2>\n          {validationErrors && validationErrors.length ? (\n            <div className=\"bg-gray-800 text-white text-xs p-2\">\n              <pre>{renderErrors(validationErrors)}</pre>\n            </div>\n          ) : null}\n        </section>\n      </div>\n      <div className=\"panel-item--right\" />\n    </div>\n  );\n};\n"]}

package/lib/esm/containers/Info/Info.js

@@ -8,8 +8,8 @@ export var Info = function () {
     if (!info) {
         return null;
     }
-    var specId = asyncapi.id();
-    var externalDocs = asyncapi.externalDocs();
+    var specId = asyncapi.info().id();
+    var externalDocs = asyncapi.info().externalDocs();
     var license = info.license();
     var termsOfService = info.termsOfService();
     var defaultContentType = asyncapi.defaultContentType();
@@ -22,23 +22,23 @@ export var Info = function () {
                 "\u00A0",
                 info.version()),
             showInfoList && (React.createElement("ul", { className: "flex flex-wrap mt-2 leading-normal" },
-                license && (React.createElement("li", { className: "inline-block mt-2 mr-2" }, license.url() ? (React.createElement(Href, { 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", href: license.url() },
+                license && (React.createElement("li", { className: "inline-block mt-2 mr-2" }, license.url() ? (React.createElement(Href, { 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", href: license.url() || '' },
                     React.createElement("span", null, license.name()))) : (React.createElement("span", { 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" }, license.name())))),
                 termsOfService && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
                     React.createElement(Href, { 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", href: termsOfService },
                         React.createElement("span", null, TERMS_OF_SERVICE_TEXT)))),
                 defaultContentType && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
-                    React.createElement(Href, { 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", href: CONTENT_TYPES_SITE + "/" + defaultContentType },
+                    React.createElement(Href, { 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", href: "".concat(CONTENT_TYPES_SITE, "/").concat(defaultContentType) },
                         React.createElement("span", null, defaultContentType)))),
                 externalDocs && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
                     React.createElement(Href, { 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", href: externalDocs.url() },
                         React.createElement("span", null, EXTERAL_DOCUMENTATION_TEXT)))),
                 contact && (React.createElement(React.Fragment, null,
                     contact.url() && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
-                        React.createElement(Href, { className: "border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1", href: contact.url() },
+                        React.createElement(Href, { className: "border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1", href: contact.url() || '' },
                             React.createElement("span", null, contact.name() || URL_SUPPORT_TEXT)))),
                     contact.email() && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
-                        React.createElement(Href, { className: "border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1", href: "mailto:" + contact.email() },
+                        React.createElement(Href, { className: "border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1", href: "mailto:".concat(contact.email()) },
                             React.createElement("span", null, contact.email())))))),
                 specId && (React.createElement("li", { className: "inline-block mt-2 mr-2" },
                     React.createElement("span", { className: "border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs uppercase rounded px-3 py-1" },
@@ -46,8 +46,8 @@ export var Info = function () {
                         specId))))),
             info.hasDescription() && (React.createElement("div", { className: "mt-4" },
                 React.createElement(Markdown, null, info.description()))),
-            asyncapi.hasTags() && (React.createElement("div", { className: "mt-4" },
-                React.createElement(Tags, { tags: asyncapi.tags() })))),
+            asyncapi.info().tags().length > 0 && (React.createElement("div", { className: "mt-4" },
+                React.createElement(Tags, { tags: asyncapi.info().tags() })))),
         React.createElement("div", { className: "panel-item--right" })));
 };
 //# sourceMappingURL=Info.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../../../src/containers/Info/Info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../../../src/containers/Info/Info.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Href, Markdown, Tags } from '../../components';\nimport { useSpec } from '../../contexts';\nimport {\n  TERMS_OF_SERVICE_TEXT,\n  CONTENT_TYPES_SITE,\n  URL_SUPPORT_TEXT,\n  EXTERAL_DOCUMENTATION_TEXT,\n} from '../../constants';\n\nexport const Info: React.FunctionComponent = () => {\n  const asyncapi = useSpec();\n\n  const info = asyncapi.info();\n  if (!info) {\n    return null;\n  }\n\n  const specId = asyncapi.info().id();\n  const externalDocs = asyncapi.info().externalDocs();\n  const license = info.license();\n  const termsOfService = info.termsOfService();\n  const defaultContentType = asyncapi.defaultContentType();\n  const contact = info.contact();\n\n  const showInfoList =\n    license || termsOfService || defaultContentType || contact || externalDocs;\n\n  return (\n    <div className=\"panel-item\">\n      <div className=\"panel-item--center px-8 text-left\" id=\"introduction\">\n        <div className=\"text-4xl\">\n          {info.title()}&nbsp;{info.version()}\n        </div>\n\n        {showInfoList && (\n          <ul className=\"flex flex-wrap mt-2 leading-normal\">\n            {license && (\n              <li className=\"inline-block mt-2 mr-2\">\n                {license.url() ? (\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={license.url() || ''}\n                  >\n                    <span>{license.name()}</span>\n                  </Href>\n                ) : (\n                  <span 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                    {license.name()}\n                  </span>\n                )}\n              </li>\n            )}\n            {termsOfService && (\n              <li className=\"inline-block mt-2 mr-2\">\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={termsOfService}\n                >\n                  <span>{TERMS_OF_SERVICE_TEXT}</span>\n                </Href>\n              </li>\n            )}\n            {defaultContentType && (\n              <li className=\"inline-block mt-2 mr-2\">\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}/${defaultContentType}`}\n                >\n                  <span>{defaultContentType}</span>\n                </Href>\n              </li>\n            )}\n            {externalDocs && (\n              <li className=\"inline-block mt-2 mr-2\">\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            {contact && (\n              <>\n                {contact.url() && (\n                  <li className=\"inline-block mt-2 mr-2\">\n                    <Href\n                      className=\"border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                      href={contact.url() || ''}\n                    >\n                      <span>{contact.name() || URL_SUPPORT_TEXT}</span>\n                    </Href>\n                  </li>\n                )}\n                {contact.email() && (\n                  <li className=\"inline-block mt-2 mr-2\">\n                    <Href\n                      className=\"border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 text-purple-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\"\n                      href={`mailto:${contact.email()}`}\n                    >\n                      <span>{contact.email()}</span>\n                    </Href>\n                  </li>\n                )}\n              </>\n            )}\n            {specId && (\n              <li className=\"inline-block mt-2 mr-2\">\n                <span className=\"border border-solid border-blue-300 hover:bg-blue-300 hover:text-blue-600 text-blue-500 font-bold no-underline text-xs uppercase rounded px-3 py-1\">\n                  ID: {specId}\n                </span>\n              </li>\n            )}\n          </ul>\n        )}\n\n        {info.hasDescription() && (\n          <div className=\"mt-4\">\n            <Markdown>{info.description()}</Markdown>\n          </div>\n        )}\n\n        {asyncapi.info().tags().length > 0 && (\n          <div className=\"mt-4\">\n            <Tags tags={asyncapi.info().tags()} />\n          </div>\n        )}\n      </div>\n\n      <div className=\"panel-item--right\" />\n    </div>\n  );\n};\n"]}

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

@@ -1,12 +1,16 @@
 import React from 'react';
 import { MessageExample } from './MessageExample';
 import { Href, Markdown, Schema, Bindings, Tags, Extensions, } from '../../components';
+import { useConfig } from '../../contexts';
+import { CommonHelpers } from '../../helpers';
 import { CONTENT_TYPES_SITE, EXTERAL_DOCUMENTATION_TEXT, } from '../../constants';
 export var Message = function (_a) {
-    var message = _a.message, index = _a.index, _b = _a.showExamples, showExamples = _b === void 0 ? false : _b;
+    var message = _a.message, messageName = _a.messageName, index = _a.index, _b = _a.showExamples, showExamples = _b === void 0 ? false : _b;
+    var config = useConfig();
     if (!message) {
         return null;
     }
+    var messageId = typeof message.id === 'function' && message.id();
     var title = message.title();
     var summary = message.summary();
     var payload = message.payload();
@@ -17,21 +21,25 @@ export var Message = function (_a) {
     var showInfoList = contentType || externalDocs;
     return (React.createElement("div", { className: "panel-item" },
         React.createElement("div", { className: "panel-item--center px-8" },
-            React.createElement("div", { className: "shadow rounded bg-gray-200 p-4 border bg-gray-100" },
+            React.createElement("div", { className: "shadow rounded bg-gray-200 p-4 border" },
                 React.createElement("div", null,
                     index !== undefined && (React.createElement("span", { className: "text-gray-700 font-bold mr-2" },
                         "#",
                         index)),
                     title && React.createElement("span", { className: "text-gray-700 mr-2" }, title),
-                    React.createElement("span", { className: "border text-orange-600 rounded text-xs py-0 px-2" }, message.uid())),
+                    React.createElement("span", { className: "border text-orange-600 rounded text-xs py-0 px-2" }, message.id())),
                 summary && React.createElement("p", { className: "text-gray-600 text-sm" }, summary),
                 showInfoList && (React.createElement("ul", { className: "leading-normal mt-2 mb-4 space-x-2 space-y-2" },
                     contentType && (React.createElement("li", { className: "inline-block" },
-                        React.createElement(Href, { 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", href: CONTENT_TYPES_SITE + "/" + contentType },
+                        React.createElement(Href, { 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", href: "".concat(CONTENT_TYPES_SITE, "/").concat(contentType) },
                             React.createElement("span", null, contentType)))),
                     externalDocs && (React.createElement("li", { className: "inline-block" },
                         React.createElement(Href, { 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", href: externalDocs.url() },
                             React.createElement("span", null, EXTERAL_DOCUMENTATION_TEXT)))))),
+                messageId && (React.createElement("div", { className: "border bg-gray-100 rounded px-4 py-2 mt-2" },
+                    React.createElement("div", { className: "text-sm text-gray-700" },
+                        "Message ID",
+                        React.createElement("span", { className: "border text-orange-600 rounded text-xs ml-2 py-0 px-2" }, messageId)))),
                 correlationId && (React.createElement("div", { className: "border bg-gray-100 rounded px-4 py-2 mt-2" },
                     React.createElement("div", { className: "text-sm text-gray-700" },
                         "Correlation ID",
@@ -40,14 +48,18 @@ export var Message = function (_a) {
                         React.createElement(Markdown, null, correlationId.description()))))),
                 message.hasDescription() && (React.createElement("div", { className: "mt-2" },
                     React.createElement(Markdown, null, message.description()))),
-                payload && (React.createElement("div", { className: "mt-2" },
+                payload && (React.createElement("div", { className: "mt-2", id: messageName
+                        ? CommonHelpers.getIdentifier("message-".concat(messageName, "-payload"), config)
+                        : undefined },
                     React.createElement(Schema, { schemaName: "Payload", schema: payload }))),
-                headers && (React.createElement("div", { className: "mt-2" },
+                headers && (React.createElement("div", { className: "mt-2", id: messageName
+                        ? CommonHelpers.getIdentifier("message-".concat(messageName, "-headers"), config)
+                        : undefined },
                     React.createElement(Schema, { schemaName: "Headers", schema: headers }))),
-                message.hasBindings() && (React.createElement("div", { className: "mt-2" },
-                    React.createElement(Bindings, { bindings: message.bindings() }))),
+                message.bindings().length > 0 && (React.createElement("div", { className: "mt-2" },
+                    React.createElement(Bindings, { name: "Message specific information", bindings: message.bindings() }))),
                 React.createElement(Extensions, { item: message }),
-                message.hasTags() && (React.createElement("div", { className: "mt-2" },
+                message.tags().length > 0 && (React.createElement("div", { className: "mt-2" },
                     React.createElement(Tags, { tags: message.tags() }))))),
         showExamples && (React.createElement("div", { className: "panel-item--right px-8" },
             React.createElement(MessageExample, { message: message })))));

package/lib/esm/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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"}
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Message.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,UAAU,GACX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,0BAA0B,GAC3B,MAAM,iBAAiB,CAAC;AASzB,MAAM,CAAC,IAAM,OAAO,GAAmC,UAAC,EAKvD;QAJC,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA;IAEpB,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAGD,IAAM,SAAS,GAAG,OAAO,OAAO,CAAC,EAAE,KAAK,UAAU,IAAI,OAAO,CAAC,EAAE,EAAE,CAAC;IACnE,IAAM,KAAK,GAAG,OAAO,CAAC,KAAK,EAAE,CAAC;IAC9B,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAClC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAClC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAClC,IAAM,aAAa,GAAG,OAAO,CAAC,aAAa,EAAE,CAAC;IAE9C,IAAM,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IAC1C,IAAM,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC;IAC5C,IAAM,YAAY,GAAG,WAAW,IAAI,YAAY,CAAC;IAEjD,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,uCAAuC;gBACpD;oBACG,KAAK,KAAK,SAAS,IAAI,CACtB,8BAAM,SAAS,EAAC,8BAA8B;;wBAAG,KAAK,CAAQ,CAC/D;oBACA,KAAK,IAAI,8BAAM,SAAS,EAAC,oBAAoB,IAAE,KAAK,CAAQ;oBAC7D,8BAAM,SAAS,EAAC,kDAAkD,IAC/D,OAAO,CAAC,EAAE,EAAE,CACR,CACH;gBAEL,OAAO,IAAI,2BAAG,SAAS,EAAC,uBAAuB,IAAE,OAAO,CAAK;gBAE7D,YAAY,IAAI,CACf,4BAAI,SAAS,EAAC,8CAA8C;oBACzD,WAAW,IAAI,CACd,4BAAI,SAAS,EAAC,cAAc;wBAC1B,oBAAC,IAAI,IACH,SAAS,EAAC,4JAA4J,EACtK,IAAI,EAAE,UAAG,kBAAkB,cAAI,WAAW,CAAE;4BAE5C,kCAAO,WAAW,CAAQ,CACrB,CACJ,CACN;oBACA,YAAY,IAAI,CACf,4BAAI,SAAS,EAAC,cAAc;wBAC1B,oBAAC,IAAI,IACH,SAAS,EAAC,4JAA4J,EACtK,IAAI,EAAE,YAAY,CAAC,GAAG,EAAE;4BAExB,kCAAO,0BAA0B,CAAQ,CACpC,CACJ,CACN,CACE,CACN;gBAEA,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,2CAA2C;oBACxD,6BAAK,SAAS,EAAC,uBAAuB;;wBAEpC,8BAAM,SAAS,EAAC,uDAAuD,IACpE,SAAS,CACL,CACH,CACF,CACP;gBAEA,aAAa,IAAI,CAChB,6BAAK,SAAS,EAAC,2CAA2C;oBACxD,6BAAK,SAAS,EAAC,uBAAuB;;wBAEpC,8BAAM,SAAS,EAAC,uDAAuD,IACpE,aAAa,CAAC,QAAQ,EAAE,CACpB,CACH;oBAEL,aAAa,CAAC,cAAc,EAAE,IAAI,CACjC,6BAAK,SAAS,EAAC,MAAM;wBACnB,oBAAC,QAAQ,QAAE,aAAa,CAAC,WAAW,EAAE,CAAY,CAC9C,CACP,CACG,CACP;gBAEA,OAAO,CAAC,cAAc,EAAE,IAAI,CAC3B,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,QAAE,OAAO,CAAC,WAAW,EAAE,CAAY,CACxC,CACP;gBAEA,OAAO,IAAI,CACV,6BACE,SAAS,EAAC,MAAM,EAChB,EAAE,EACA,WAAW;wBACT,CAAC,CAAC,aAAa,CAAC,aAAa,CACzB,kBAAW,WAAW,aAAU,EAChC,MAAM,CACP;wBACH,CAAC,CAAC,SAAS;oBAGf,oBAAC,MAAM,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAE,OAAO,GAAI,CAC5C,CACP;gBACA,OAAO,IAAI,CACV,6BACE,SAAS,EAAC,MAAM,EAChB,EAAE,EACA,WAAW;wBACT,CAAC,CAAC,aAAa,CAAC,aAAa,CACzB,kBAAW,WAAW,aAAU,EAChC,MAAM,CACP;wBACH,CAAC,CAAC,SAAS;oBAGf,oBAAC,MAAM,IAAC,UAAU,EAAC,SAAS,EAAC,MAAM,EAAE,OAAO,GAAI,CAC5C,CACP;gBAEA,OAAO,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAChC,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,QAAQ,IACP,IAAI,EAAC,8BAA8B,EACnC,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,GAC5B,CACE,CACP;gBAED,oBAAC,UAAU,IAAC,IAAI,EAAE,OAAO,GAAI;gBAE5B,OAAO,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAC5B,6BAAK,SAAS,EAAC,MAAM;oBACnB,oBAAC,IAAI,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,GAAI,CAC1B,CACP,CACG,CACF;QAEL,YAAY,IAAI,CACf,6BAAK,SAAS,EAAC,wBAAwB;YACrC,oBAAC,cAAc,IAAC,OAAO,EAAE,OAAO,GAAI,CAChC,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC","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/esm/containers/Messages/MessageExample.js

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
-import { CollapseButton, PreCode } from '../../components';
+import React, { useState, useEffect } from 'react';
+import { CollapseButton, JSONSnippet } from '../../components';
 import { MessageHelpers } from '../../helpers/message';
+import { useConfig } from '../../contexts';
 export var MessageExample = function (_a) {
     var message = _a.message;
     if (!message) {
@@ -15,20 +16,25 @@ export var MessageExample = function (_a) {
 };
 export var Example = function (_a) {
     var _b = _a.type, type = _b === void 0 ? 'Payload' : _b, schema = _a.schema, _c = _a.examples, examples = _c === void 0 ? [] : _c;
-    var _d = useState(false), expand = _d[0], setExpand = _d[1];
+    var config = useConfig();
+    var _d = useState((config && config.expand && config.expand.messageExamples) || false), expanded = _d[0], setExpanded = _d[1];
+    useEffect(function () {
+        setExpanded((config && config.expand && config.expand.messageExamples) || false);
+    }, [config.expand]);
     return (React.createElement("div", { className: "mt-4" },
         React.createElement("div", null,
-            React.createElement(CollapseButton, { onClick: function () { return setExpand(function (prev) { return !prev; }); }, chevronProps: {
-                    className: "fill-current text-gray-200 " + (expand ? '-rotate-180' : '-rotate-90'),
+            React.createElement(CollapseButton, { onClick: function () { return setExpanded(function (prev) { return !prev; }); }, expanded: expanded, chevronProps: {
+                    className: 'fill-current text-gray-200',
                 } },
-                React.createElement("span", { className: "px-2 py-1 mr-2 text-gray-200 text-sm border rounded focus:outline-none" }, type))),
-        React.createElement("div", { className: expand ? 'block' : 'hidden' }, examples && examples.length > 0 ? (React.createElement("ul", null, examples.map(function (example, idx) { return (React.createElement("li", { className: "mt-4", key: idx },
-            React.createElement("h5", { className: "text-xs font-bold text-gray-700" },
-                "Example #",
-                idx + 1),
+                React.createElement("span", { className: "inline-block w-20 py-0.5 mr-1 text-gray-200 text-sm border text-center rounded focus:outline-none" }, type))),
+        React.createElement("div", { className: expanded ? 'block' : 'hidden' }, examples && examples.length > 0 ? (React.createElement("ul", null, examples.map(function (example, idx) { return (React.createElement("li", { className: "mt-4", key: idx },
+            React.createElement("h5", { className: "text-xs font-bold text-gray-500" }, example.name
+                ? "#".concat(idx + 1, " Example - ").concat(example.name)
+                : "#".concat(idx + 1, " Example")),
+            example.summary && (React.createElement("p", { className: "text-xs font-bold text-gray-500" }, example.summary)),
             React.createElement("div", { className: "mt-1" },
-                React.createElement(PreCode, { code: MessageHelpers.sanitizeExample(example) })))); }))) : (React.createElement("div", { className: "mt-4" },
-            React.createElement(PreCode, { code: MessageHelpers.generateExample(schema.json()) }),
-            React.createElement("h6", { className: "text-xs font-bold text-gray-700 italic mt-2" }, "This example has been generated automatically."))))));
+                React.createElement(JSONSnippet, { snippet: MessageHelpers.sanitizeExample(example.example) })))); }))) : (React.createElement("div", { className: "mt-4" },
+            React.createElement(JSONSnippet, { snippet: MessageHelpers.generateExample(schema.json()) }),
+            React.createElement("h6", { className: "text-xs font-bold text-gray-600 italic mt-2" }, "This example has been generated automatically."))))));
 };
 //# sourceMappingURL=MessageExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MessageExample.js","sourceRoot":"","sources":["../../../../src/containers/Messages/MessageExample.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMvD,MAAM,CAAC,IAAM,cAAc,GAAmC,UAAC,EAAW;QAAT,OAAO,aAAA;IACtE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAClC,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;IAElC,OAAO,CACL,6BAAK,SAAS,EAAC,yEAAyE;QACtF,4BAAI,SAAS,EAAC,oBAAoB,eAAc;QAC/C,OAAO,IAAI,CACV,oBAAC,OAAO,IACN,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC,GACpD,CACH;QACA,OAAO,IAAI,CACV,oBAAC,OAAO,IACN,IAAI,EAAC,SAAS,EACd,MAAM,EAAE,OAAO,EACf,QAAQ,EAAE,cAAc,CAAC,kBAAkB,CAAC,OAAO,CAAC,GACpD,CACH,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,CAAC,IAAM,OAAO,GAA0C,UAAC,EAI9D;QAHC,YAAgB,EAAhB,IAAI,mBAAG,SAAS,KAAA,EAChB,MAAM,YAAA,EACN,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA;IAEP,IAAA,KAAsB,QAAQ,CAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,OAAO,CACL,6BAAK,SAAS,EAAC,MAAM;QACnB;YACE,oBAAC,cAAc,IACb,OAAO,EAAE,cAAM,OAAA,SAAS,CAAC,UAAA,IAAI,IAAI,OAAA,CAAC,IAAI,EAAL,CAAK,CAAC,EAAxB,CAAwB,EACvC,YAAY,EAAE;oBACZ,SAAS,EAAE,iCACT,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CACrC;iBACH;gBAED,8BAAM,SAAS,EAAC,wEAAwE,IACrF,IAAI,CACA,CACQ,CACb;QACN,6BAAK,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,IACxC,QAAQ,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACjC,gCACG,QAAQ,CAAC,GAAG,CAAC,UAAC,OAAO,EAAE,GAAG,IAAK,OAAA,CAC9B,4BAAI,SAAS,EAAC,MAAM,EAAC,GAAG,EAAE,GAAG;YAC3B,4BAAI,SAAS,EAAC,iCAAiC;;gBACnC,GAAG,GAAG,CAAC,CACd;YACL,6BAAK,SAAS,EAAC,MAAM;gBACnB,oBAAC,OAAO,IAAC,IAAI,EAAE,cAAc,CAAC,eAAe,CAAC,OAAO,CAAC,GAAI,CACtD,CACH,CACN,EAT+B,CAS/B,CAAC,CACC,CACN,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAC,MAAM;YACnB,oBAAC,OAAO,IAAC,IAAI,EAAE,cAAc,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,GAAI;YAChE,4BAAI,SAAS,EAAC,6CAA6C,qDAEtD,CACD,CACP,CACG,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"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/esm/containers/Messages/Messages.js

@@ -1,18 +1,25 @@
 import React from 'react';
 import { Message } from './Message';
-import { useSpec } from '../../contexts';
+import { useConfig, useSpec } from '../../contexts';
+import { CommonHelpers } from '../../helpers';
 import { MESSAGES_TEXT } from '../../constants';
 export var Messages = function () {
-    var messages = useSpec().allMessages();
-    if (!messages.size) {
+    var asyncapi = useSpec();
+    var config = useConfig();
+    var messages = !asyncapi.components().isEmpty() &&
+        asyncapi
+            .components()
+            .messages()
+            .all();
+    if (!messages || Object.keys(messages).length === 0) {
         return null;
     }
-    return (React.createElement("section", { id: "messages", className: "mt-16" },
+    return (React.createElement("section", { id: "".concat(CommonHelpers.getIdentifier('messages', config)), className: "mt-16" },
         React.createElement("h2", { className: "2xl:w-7/12 text-3xl font-light mb-4 px-8" }, MESSAGES_TEXT),
-        React.createElement("ul", null, Array.from(messages).map(function (_a, idx) {
+        React.createElement("ul", null, Object.entries(messages).map(function (_a, idx) {
             var messageName = _a[0], message = _a[1];
-            return (React.createElement("li", { className: "mb-4", key: messageName, id: "message-" + message.uid() },
-                React.createElement(Message, { message: message, index: idx + 1, key: messageName })));
+            return (React.createElement("li", { className: "mb-4", key: messageName, id: CommonHelpers.getIdentifier("message-".concat(messageName), config) },
+                React.createElement(Message, { messageName: messageName, message: message, index: idx + 1, key: messageName })));
         }))));
 };
 //# sourceMappingURL=Messages.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Messages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,IAAM,QAAQ,GAA4B;IAC/C,IAAM,QAAQ,GAAG,OAAO,EAAE,CAAC,WAAW,EAAE,CAAC;IAEzC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,iCAAS,EAAE,EAAC,UAAU,EAAC,SAAS,EAAC,OAAO;QACtC,4BAAI,SAAS,EAAC,0CAA0C,IACrD,aAAa,CACX;QACL,gCACG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,GAAG;gBAA1B,WAAW,QAAA,EAAE,OAAO,QAAA;YAAW,OAAA,CACzD,4BACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,aAAW,OAAO,CAAC,GAAG,EAAI;gBAE9B,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,WAAW,GAAI,CAC5D,CACN;QAR0D,CAQ1D,CAAC,CACC,CACG,CACX,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Messages.js","sourceRoot":"","sources":["../../../../src/containers/Messages/Messages.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,IAAM,QAAQ,GAA4B;IAC/C,IAAM,QAAQ,GAAG,OAAO,EAAE,CAAC;IAC3B,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,IAAM,QAAQ,GACZ,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,OAAO,EAAE;QAChC,QAAQ;aACL,UAAU,EAAE;aACZ,QAAQ,EAAE;aACV,GAAG,EAAE,CAAC;IAEX,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;QACnD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,iCACE,EAAE,EAAE,UAAG,aAAa,CAAC,aAAa,CAAC,UAAU,EAAE,MAAM,CAAC,CAAE,EACxD,SAAS,EAAC,OAAO;QAEjB,4BAAI,SAAS,EAAC,0CAA0C,IACrD,aAAa,CACX;QACL,gCACG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,UAAC,EAAsB,EAAE,GAAG;gBAA1B,WAAW,QAAA,EAAE,OAAO,QAAA;YAAW,OAAA,CAC7D,4BACE,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,WAAW,EAChB,EAAE,EAAE,aAAa,CAAC,aAAa,CAAC,kBAAW,WAAW,CAAE,EAAE,MAAM,CAAC;gBAEjE,oBAAC,OAAO,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","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() &&\n    asyncapi\n      .components()\n      .messages()\n      .all();\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"]}