Fetching schema by url in library

README.md

@@ -28,9 +28,13 @@ Check out this simple sandbox application that uses the asyncapi-react component
 
 The list of props for the AsyncApi React component includes:
 
-   - **schema: string | AsyncApiInterface**
+   - **schema?: string | AsyncApiInterface**
 
-     The `schema` property is required and contains AsyncAPI specification. It should be one of the `string` or [`AsyncApiInterface`](./library/src/types.ts#L13) type. For more information on what it contains and what it should look like, read [AsyncAPI Specification](https://github.com/asyncapi/asyncapi#asyncapi-specification).
+     The `schema` property is optional and contains AsyncAPI specification. It should be one of the `string` or [`AsyncApiInterface`](./library/src/types.ts#L13) type. For more information on what it contains and what it should look like, read [AsyncAPI Specification](https://github.com/asyncapi/asyncapi#asyncapi-specification).
+
+   - **urlSchema?: FetchingSchemaInterface**
+
+     The `urlSchema` property is optional and contains url (required field) and requestOptions (optional field) for fetching schema from external resource.
 
    - **theme?: Partial<ThemeInterface\>**
 
@@ -45,6 +49,8 @@ The list of props for the AsyncApi React component includes:
 
      > **NOTE:** The `Partial<T>` type means that every field in the `T` type is optional.
 
+   > **NOTE:** You must pass `schema` or `urlSchema` to component for correct work of component.
+
 ## Development
 
 For information on how to set up a development environment, write and run tests, follow the naming and architecture convention defined for the project in the [Development Guide](./development-guide.md).

library/src/containers/AsyncApi/AsyncApi.tsx

@@ -4,7 +4,13 @@ import { ThemeProvider } from 'styled-components';
 import { AsyncApi, SecurityScheme } from '../../types';
 import { ThemeInterface, defaultTheme } from '../../theme';
 import { ConfigInterface, defaultConfig } from '../../config';
-import { parser, beautifier } from '../../helpers';
+import {
+  parser,
+  beautifier,
+  FetchingSchemaInterface,
+  fetchSchema,
+  stringify,
+} from '../../helpers';
 
 import InfoComponent from '../Info/Info';
 import Security from '../Security/Security';
@@ -16,7 +22,8 @@ import ErrorComponent from '../Error/Error';
 import { AsyncApiWrapper } from './styled';
 
 export interface AsyncApiProps {
-  schema: string | Object;
+  schema?: string | Object;
+  urlSchema?: FetchingSchemaInterface;
   theme?: Partial<ThemeInterface>;
   config?: Partial<ConfigInterface>;
 }
@@ -53,12 +60,28 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
   }
 
   async componentWillMount() {
-    this.prepareSchema(this.props.schema);
+    const { schema, urlSchema } = this.props;
+
+    if (schema) {
+      await this.prepareSchema(schema);
+    } else if (urlSchema) {
+      await this.prepareSchema(await fetchSchema(urlSchema));
+    }
   }
 
   async componentWillReceiveProps(nextProps: AsyncApiProps) {
-    if (nextProps.schema !== this.props.schema) {
-      this.prepareSchema(nextProps.schema);
+    const { schema, urlSchema } = nextProps;
+
+    if (schema && schema !== this.props.schema) {
+      await this.prepareSchema(schema);
+    } else if (urlSchema) {
+      const stringifiedUrlSchema = stringify(urlSchema);
+      if (
+        stringifiedUrlSchema &&
+        stringifiedUrlSchema !== stringify(this.props.urlSchema)
+      ) {
+        await this.prepareSchema(await fetchSchema(urlSchema));
+      }
     }
   }
 
@@ -98,6 +121,8 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
 
     if (!(validatedSchema && validated)) return null;
 
+    console.log(validatedSchema);
+
     return (
       <ThemeProvider theme={concatenatedTheme}>
         <AsyncApiWrapper>

library/src/helpers/fetchSchema.ts

@@ -0,0 +1,19 @@
+export interface FetchingSchemaInterface {
+  url: string;
+  requestOptions?: RequestInit;
+}
+
+const defaultRequestOptions: RequestInit = {
+  method: 'GET',
+};
+
+export const fetchSchema = async ({
+  url,
+  requestOptions = defaultRequestOptions,
+}: FetchingSchemaInterface): Promise<any> => {
+  return fetch(url, requestOptions).then(handleResponse);
+};
+
+function handleResponse(response: any) {
+  return response.text().then((data: string) => data);
+}

library/src/helpers/index.ts

@@ -1,2 +1,4 @@
 export * from './parser';
-export * from './beautifier';
+export * from './beautifier';
+export * from './fetchSchema';
+export * from './json-parser';

library/src/helpers/json-parser.ts

@@ -0,0 +1,19 @@
+export const parse = <T extends {}>(str?: string): T => {
+  if (!str) return {} as T;
+
+  try {
+    return JSON.parse(str) as T;
+  } catch (e) {
+    return {} as T;
+  }
+};
+
+export const stringify = <T extends {}>(content?: T): string => {
+  if (!content) '';
+
+  try {
+    return JSON.stringify(content);
+  } catch (e) {
+    return '';
+  }
+};

library/src/index.ts

@@ -2,6 +2,7 @@ import AsyncApi from './containers/AsyncApi/AsyncApi';
 export { AsyncApiProps } from './containers/AsyncApi/AsyncApi';
 export { ThemeInterface } from './theme/theme';
 export { ConfigInterface } from './config/config';
+export { FetchingSchemaInterface } from './helpers';
 export { AsyncApi as AsyncApiInterface } from './types';
 
-export default AsyncApi
+export default AsyncApi;

playground/src/common/helpers.ts

@@ -1,12 +1,16 @@
-export const parse = <T extends {}>(str: string): T => {
+export const parse = <T extends {}>(str?: string): T => {
+  if (!str) return {} as T;
+
   try {
     return JSON.parse(str) as T;
   } catch (e) {
     return {} as T;
   }
 };
 
-export const stringify = <T extends {}>(content: T): string => {
+export const stringify = <T extends {}>(content?: T): string => {
+  if (!content) '';
+
   try {
     return JSON.stringify(content);
   } catch (e) {