Fetching schema by url in library (#34)

README.md

@@ -28,9 +28,9 @@ 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 | FetchingSchemaInterface**
 
-     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 required and contains AsyncAPI specification. Use the `string` type, the [`AsyncApiInterface`](./library/src/types.ts#L13) type, or the [`FetchingSchemaInterface`](./library/src/helpers/fetchSchema.ts#L1) object to fetch the schema from an external resource. For more information on what it contains and what it should look like, read [AsyncAPI Specification](https://github.com/asyncapi/asyncapi#asyncapi-specification).
 
    - **theme?: Partial<ThemeInterface\>**
 

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,
+  isFetchingSchemaInterface,
+  fetchSchema,
+} from '../../helpers';
 
 import InfoComponent from '../Info/Info';
 import Security from '../Security/Security';
@@ -16,7 +22,7 @@ import ErrorComponent from '../Error/Error';
 import { AsyncApiWrapper } from './styled';
 
 export interface AsyncApiProps {
-  schema: string | Object;
+  schema: string | Object | FetchingSchemaInterface;
   theme?: Partial<ThemeInterface>;
   config?: Partial<ConfigInterface>;
 }
@@ -42,6 +48,27 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
     error: undefined,
   };
 
+  async componentWillMount() {
+    this.updateSchema(this.props.schema);
+  }
+
+  async componentWillReceiveProps(nextProps: AsyncApiProps) {
+    const { schema } = nextProps;
+
+    if (schema !== this.props.schema) {
+      this.updateSchema(schema);
+    }
+  }
+
+  private async updateSchema(
+    schema: string | Object | FetchingSchemaInterface,
+  ) {
+    if (isFetchingSchemaInterface(schema)) {
+      schema = await fetchSchema(schema as FetchingSchemaInterface);
+    }
+    this.prepareSchema(schema);
+  }
+
   private async prepareSchema(schema: string | Object) {
     try {
       let validatedSchema = await this.validateSchema(schema);
@@ -52,16 +79,6 @@ class AsyncApiComponent extends Component<AsyncApiProps, AsyncApiState> {
     }
   }
 
-  async componentWillMount() {
-    this.prepareSchema(this.props.schema);
-  }
-
-  async componentWillReceiveProps(nextProps: AsyncApiProps) {
-    if (nextProps.schema !== this.props.schema) {
-      this.prepareSchema(nextProps.schema);
-    }
-  }
-
   private async validateSchema(schema: string | any) {
     if (typeof schema !== 'string') {
       schema = JSON.stringify(schema);

library/src/helpers/fetchSchema.ts

@@ -0,0 +1,23 @@
+export interface FetchingSchemaInterface {
+  url: string;
+  requestOptions?: RequestInit;
+}
+
+export function isFetchingSchemaInterface(schema: any) {
+  return (<FetchingSchemaInterface>schema).url !== undefined;
+}
+
+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) return '';
+
+  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) return '';
+
   try {
     return JSON.stringify(content);
   } catch (e) {