feat!: update to new parser api

library/jest.config.js

@@ -13,4 +13,9 @@ module.exports = {
       tsconfig: 'tsconfig.json',
     },
   },
+  moduleNameMapper: {
+    '^nimma/legacy$':
+      '<rootDir>/../node_modules/nimma/dist/legacy/cjs/index.js',
+    '^nimma/(.*)': '<rootDir>/../node_modules/nimma/dist/cjs/$1',
+  },
 };

library/loaders/remove-hashbag-loader.js

@@ -0,0 +1,6 @@
+/**
+ * Make sure code does not contain properties such as `#property`
+ */
+module.exports = function(source) {
+  return source.replace(/^#! .*\n/, '');
+};

library/package.json

@@ -49,8 +49,8 @@
     "build:prod": "npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:standalone && npm run build:types && npm run build:styles",
     "build:esm": "tsc -p tsconfig.esm.json",
     "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:umd": "cross-env BUILD_MODE=umd webpack --colors",
-    "build:standalone": "cross-env BUILD_MODE=standalone webpack --colors",
+    "build:umd": "cross-env BUILD_MODE=umd webpack",
+    "build:standalone": "cross-env BUILD_MODE=standalone webpack",
     "build:types": "tsc -p tsconfig.types.json",
     "build:styles": "npm run build:styles:dev && npm run build:styles:prod",
     "build:styles:dev": "cross-env NODE_ENV=production postcss src/styles/default.css -o styles/default.css --verbose",
@@ -68,10 +68,10 @@
     "get:version": "echo $npm_package_version"
   },
   "dependencies": {
-    "@asyncapi/avro-schema-parser": "^1.1.0",
-    "@asyncapi/openapi-schema-parser": "^2.0.1",
-    "@asyncapi/protobuf-schema-parser": "^1.0.0",
-    "@asyncapi/parser": "^1.18.0",
+    "@asyncapi/avro-schema-parser": "3.0.3",
+    "@asyncapi/openapi-schema-parser": "3.0.4",
+    "@asyncapi/parser": "^3.0.0-next-major-spec.1",
+    "@asyncapi/protobuf-schema-parser": "1.0.0",
     "highlight.js": "^10.7.2",
     "isomorphic-dompurify": "^0.13.0",
     "marked": "^4.0.14",
@@ -100,6 +100,7 @@
     "cssnano": "^4.1.11",
     "cypress": "^7.4.0",
     "jest": "^26.0.0",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "postcss": "^8.2.10",
     "postcss-cli": "^8.3.1",
     "postcss-import": "^14.0.2",
@@ -108,10 +109,10 @@
     "react-dom": "^16.8.0",
     "tailwindcss": "^2.1.1",
     "ts-jest": "^26.4.1",
-    "ts-loader": "^8.1.0",
-    "webpack": "^4.41.2",
-    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-cli": "^3.3.12"
+    "ts-loader": "9.4.4",
+    "webpack": "5.88.2",
+    "webpack-bundle-analyzer": "4.9.0",
+    "webpack-cli": "5.1.4"
   },
   "publishConfig": {
     "access": "public"

library/src/components/Schema.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { Schema as SchemaType } from '@asyncapi/parser';
+import { SchemaInterface } from '@asyncapi/parser';
 
 import { Href, CollapseButton, Markdown, Extensions } from './index';
 import { SchemaHelpers } from '../helpers';
 
 interface Props {
   schemaName?: React.ReactNode;
-  schema?: SchemaType;
+  schema?: SchemaInterface;
   required?: boolean;
   isPatternProperty?: boolean;
   isProperty?: boolean;
@@ -58,48 +58,19 @@ export const Schema: React.FunctionComponent<Props> = ({
   const constraints = SchemaHelpers.humanizeConstraints(schema);
   const externalDocs = schema.externalDocs();
 
-  const renderType = schema.ext(SchemaHelpers.extRenderType) !== false;
-  const rawValue = schema.ext(SchemaHelpers.extRawValue) === true;
-  const parameterLocation = schema.ext(SchemaHelpers.extParameterLocation);
-  const isExpandable = SchemaHelpers.isExpandable(schema) || dependentSchemas;
+  const rawValueExt = schema.extensions().get(SchemaHelpers.extRawValue);
+  const rawValue = rawValueExt?.value() === true;
 
-  let schemaType = SchemaHelpers.toSchemaType(schema);
-  isCircular =
-    isCircular ||
-    schema.isCircular() ||
-    schema.ext('x-parser-circular') ||
-    false;
-  const uid = schema.uid();
-
-  const schemaItems = schema.items();
-  if (schemaItems && !Array.isArray(schemaItems)) {
-    /**
-     * fallback for older logic for circular references:
-     *
-     * checking uid for circular items
-     * `x-parser-circular` extension is added to every schema which has circular `items` field,
-     * so we must check that `items` is schema (not array of schemas) and infer UID of schema to display which schema is circular (by the name of schema)
-     */
-    isCircular =
-      isCircular ||
-      schemaItems.isCircular() ||
-      schemaItems.ext('x-parser-circular') ||
-      false;
-    if (
-      isCircular &&
-      typeof (schemaItems as any).circularSchema === 'function'
-    ) {
-      schemaType = SchemaHelpers.toSchemaType(
-        (schemaItems as any).circularSchema(),
-      );
-    }
-  } else if (
-    isCircular &&
-    typeof (schema as any).circularSchema === 'function'
-  ) {
-    schemaType = SchemaHelpers.toSchemaType((schema as any).circularSchema());
-  }
+  const parameterLocationExt = schema
+    .extensions()
+    .get(SchemaHelpers.extParameterLocation);
+  const parameterLocation = parameterLocationExt?.value() === true;
+
+  const schemaType = SchemaHelpers.toSchemaType(schema);
+  const isExpandable = SchemaHelpers.isExpandable(schema) || dependentSchemas;
 
+  isCircular = isCircular || schema.isCircular() || false;
+  const uid = schema.$id();
   const styledSchemaName = isProperty ? 'italic' : '';
   const renderedSchemaName =
     typeof schemaName === 'string' ? (
@@ -175,11 +146,9 @@ export const Schema: React.FunctionComponent<Props> = ({
           ) : (
             <div>
               <div>
-                {renderType && (
-                  <div className="capitalize text-sm text-teal-500 font-bold inline-block mr-2">
-                    {isCircular ? `${schemaType} [CIRCULAR]` : schemaType}
-                  </div>
-                )}
+                <div className="capitalize text-sm text-teal-500 font-bold inline-block mr-2">
+                  {isCircular ? `${schemaType} [CIRCULAR]` : schemaType}
+                </div>
                 <div className="inline-block">
                   {schema.format() && (
                     <span className="bg-yellow-600 font-bold no-underline text-white rounded lowercase mr-2 p-1 text-xs">
@@ -222,7 +191,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                   )}
                 </div>
 
-                {schema.hasDescription() && (
+                {schema.description() !== undefined && (
                   <div>
                     <Markdown>{schema.description()}</Markdown>
                   </div>
@@ -247,7 +216,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                 {schema.enum() && (
                   <ul className="text-xs">
                     Allowed values:{' '}
-                    {schema.enum().map((e, idx) => (
+                    {schema.enum()?.map((e, idx) => (
                       <li
                         key={idx}
                         className="border inline-block text-orange-600 rounded ml-1 py-0 px-2"
@@ -278,7 +247,7 @@ export const Schema: React.FunctionComponent<Props> = ({
                 {schema.examples() && (
                   <ul className="text-xs">
                     Examples values:{' '}
-                    {schema.examples().map((e, idx) => (
+                    {schema.examples()?.map((e, idx) => (
                       <li
                         key={idx}
                         className="border inline-block text-orange-600 rounded ml-1 py-0 px-2 break-all"
@@ -305,7 +274,7 @@ export const Schema: React.FunctionComponent<Props> = ({
             {schema.oneOf() &&
               schema
                 .oneOf()
-                .map((s, idx) => (
+                ?.map((s, idx) => (
                   <Schema
                     key={idx}
                     schema={s}
@@ -315,7 +284,7 @@ export const Schema: React.FunctionComponent<Props> = ({
             {schema.anyOf() &&
               schema
                 .anyOf()
-                .map((s, idx) => (
+                ?.map((s, idx) => (
                   <Schema
                     key={idx}
                     schema={s}
@@ -325,7 +294,7 @@ export const Schema: React.FunctionComponent<Props> = ({
             {schema.allOf() &&
               schema
                 .allOf()
-                .map((s, idx) => (
+                ?.map((s, idx) => (
                   <Schema
                     key={idx}
                     schema={s}
@@ -381,7 +350,7 @@ export const Schema: React.FunctionComponent<Props> = ({
 };
 
 interface SchemaPropertiesProps {
-  schema: SchemaType;
+  schema: SchemaInterface;
 }
 
 const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
@@ -394,7 +363,6 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
 
   const required = schema.required() || [];
   const patternProperties = schema.patternProperties();
-  const circularProps = schema.ext('x-parser-circular-props') || [];
 
   return (
     <>
@@ -404,42 +372,48 @@ const SchemaProperties: React.FunctionComponent<SchemaPropertiesProps> = ({
           schemaName={propertyName}
           required={required.includes(propertyName)}
           isProperty={true}
-          isCircular={circularProps.includes(propertyName)}
+          isCircular={property.isCircular()}
           dependentRequired={SchemaHelpers.getDependentRequired(
             propertyName,
             schema,
           )}
           key={propertyName}
         />
       ))}
-      {Object.entries(patternProperties).map(([propertyName, property]) => (
-        <Schema
-          schema={property}
-          schemaName={propertyName}
-          isPatternProperty={true}
-          isProperty={true}
-          isCircular={circularProps.includes(propertyName)}
-          key={propertyName}
-        />
-      ))}
+      {Object.entries(patternProperties || {}).map(
+        ([propertyName, property]) => (
+          <Schema
+            schema={property}
+            schemaName={propertyName}
+            isPatternProperty={true}
+            isProperty={true}
+            isCircular={property.isCircular()}
+            key={propertyName}
+          />
+        ),
+      )}
     </>
   );
 };
 
 interface AdditionalPropertiesProps {
-  schema: SchemaType;
+  schema: SchemaInterface;
 }
 
 const AdditionalProperties: React.FunctionComponent<AdditionalPropertiesProps> = ({
   schema,
 }) => {
-  if (schema.ext(SchemaHelpers.extRenderAdditionalInfo) === false) {
+  if (
+    schema
+      .extensions()
+      .get(SchemaHelpers.extRenderAdditionalInfo)
+      ?.value() === false
+  ) {
     return null;
   }
 
-  let type = schema.type();
-  type = Array.isArray(type) ? type : [type];
-  if (!type.includes('object')) {
+  const type = schema.type();
+  if (type === undefined || !type.includes('object')) {
     return null;
   }
 
@@ -464,13 +438,12 @@ const AdditionalProperties: React.FunctionComponent<AdditionalPropertiesProps> =
 };
 
 interface SchemaItemsProps {
-  schema: SchemaType;
+  schema: SchemaInterface;
 }
 
 const SchemaItems: React.FunctionComponent<SchemaItemsProps> = ({ schema }) => {
-  let type = schema.type();
-  type = Array.isArray(type) ? type : [type];
-  if (!type.includes('array')) {
+  const type = schema.type();
+  if (type === undefined || !type.includes('array')) {
     return null;
   }
   const items = schema.items();
@@ -495,19 +468,23 @@ const SchemaItems: React.FunctionComponent<SchemaItemsProps> = ({ schema }) => {
 };
 
 interface AdditionalItemsProps {
-  schema: SchemaType;
+  schema: SchemaInterface;
 }
 
 const AdditionalItems: React.FunctionComponent<AdditionalItemsProps> = ({
   schema,
 }) => {
-  if (schema.ext(SchemaHelpers.extRenderAdditionalInfo) === false) {
+  if (
+    schema
+      .extensions()
+      .get(SchemaHelpers.extRenderAdditionalInfo)
+      ?.value() === false
+  ) {
     return null;
   }
 
-  let type = schema.type();
-  type = Array.isArray(type) ? type : [type];
-  if (!type.includes('array')) {
+  const type = schema.type();
+  if (type === undefined || !type.includes('array')) {
     return null;
   }
   if (!Array.isArray(schema.items())) {

library/src/components/Tag.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Tag as TagType } from '@asyncapi/parser';
+import { TagInterface } from '@asyncapi/parser';
 
 import { Href } from './Href';
 
 interface Props {
-  tag: TagType;
+  tag: TagInterface;
 }
 
 export const Tag: React.FunctionComponent<Props> = ({ tag }) => {

library/src/components/Tags.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Tag as TagType } from '@asyncapi/parser';
+import { TagInterface } from '@asyncapi/parser';
 
 import { Tag } from './Tag';
 
 interface Props {
-  tags?: TagType[];
+  tags?: TagInterface[];
 }
 
 export const Tags: React.FunctionComponent<Props> = ({ tags }) => {

library/src/components/__tests__/Extensions.test.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 // @ts-ignore
-import SchemaModel from '@asyncapi/parser/lib/models/schema';
+import { SchemaV2 as SchemaModel } from '@asyncapi/parser';
 
 import { Extensions } from '../Extensions';