feat!: switch to react, apiVersion 2 and newest react components (#448)

asyncapi · Oct 4, 2023 · 1fbb3ed · 1fbb3ed
1 parent 90d7e41
commit 1fbb3ed
Show file tree

Hide file tree

Showing 18 changed files with 22,264 additions and 4,269 deletions.
diff --git a/.github/workflows/pr-testing-with-generator.yml b/.github/workflows/pr-testing-with-generator.yml
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ test/output
 output
 sample
 coverage
+__transpiled
diff --git a/components/index.js b/components/index.js
@@ -0,0 +1,54 @@
+// eslint-disable-next-line no-unused-vars
+import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
+import { includeFile, generateBase64Favicon, renderSpec, stringifySpec, stringifyConfiguration } from '../helpers/all';
+
+/**
+ * @param {{asyncapi: AsyncAPIDocumentInterface, params: any}} param0 
+ */
+export function Index({ asyncapi, params = {} }) {
+ const favicon = generateBase64Favicon(params);
+ const renderedSpec = renderSpec(asyncapi, params);
+ let asyncapiScript = `<script src="js/asyncapi-ui.min.js" type="application/javascript"></script>`;
+ if(params?.singleFile) {
+ asyncapiScript = `<script type="text/javascript">
+ ${includeFile('template/js/asyncapi-ui.min.js')}
+ </script>`;
+ }
+ let styling = `<link href="css/global.min.css" rel="stylesheet">
+ <link href="css/asyncapi.min.css" rel="stylesheet">`;
+ if(params?.singleFile) {
+ styling = `<style type="text/css">
+ ${includeFile("template/css/global.min.css")}
+ ${includeFile("template/css/asyncapi.min.css")}
+ </style>`;
+ }
+ let basehref = '';
+ if(params.baseHref) {
+ basehref = `<base href="${params.baseHref}">`;
+ }
+ return (`<!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ ${basehref}
+ <title>${asyncapi.info().title()} ${asyncapi.info().version()} documentation</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="image/x-icon" href="${favicon}" />
+ ${styling}
+ </head>
+ 
+ <body>
+ <div id="root">${renderedSpec}</div>
+ 
+ ${asyncapiScript}
+ 
+ <script>
+ const schema = ${stringifySpec(asyncapi)};
+ const config = ${stringifyConfiguration(params)};
+ AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
+ </script>
+ </body>
+ </html>`
+ );
+}
+
diff --git a/filters/all.js → helpers/all.js b/filters/all.js → helpers/all.js
@@ -1,12 +1,9 @@
-const fs = require('fs');
-const path = require('path');
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const fetch = require('node-fetch');
-const { default: AsyncApiComponent, hljs } = require('@asyncapi/react-component');
-const { AsyncAPIDocument } = require('@asyncapi/parser');
-
-const filter = module.exports;
+import path from 'path';
+import fs from 'fs';
+import ReactDOMServer from 'react-dom/server';
+import fetch from 'sync-fetch';
+import AsyncApiComponent, { hljs } from '@asyncapi/react-component';
+import { AsyncAPIDocumentInterface, stringify } from '@asyncapi/parser';
 
 function isJsonObject(o) {
  return o && typeof o === 'object' && !Array.isArray(o);
@@ -17,7 +14,7 @@ function isJsonObject(o) {
  */
 function mergeInto(from, to) {
  for (const key in from) {
- if (!Object.prototype.hasOwnProperty.call(from, key)) {
+ if (!Object.hasOwn(from, key)) {
  continue;
  }
  if (isJsonObject(from[key])) {
@@ -35,7 +32,7 @@ function mergeInto(from, to) {
 /**
  * Prepares configuration for component.
  */
-function prepareConfiguration(params = {}) {
+export function prepareConfiguration(params = {}) {
  const config = { show: { sidebar: true }, sidebar: { showOperations: 'byDefault' } };
  // Apply config override
  if (params.config) {
@@ -70,7 +67,7 @@ let initLanguages = false;
 /**
  * Load all language configurations from highlight.js
  */
-function loadLanguagesConfig() {
+export function loadLanguagesConfig() {
  if (initLanguages === true) {
  return;
  }
@@ -91,77 +88,74 @@ function loadLanguagesConfig() {
 
  initLanguages = true;
 }
-filter.loadLanguagesConfig = loadLanguagesConfig;
 
 /**
  * Generate Base64 value from favicon
  */
-async function generateBase64Favicon(params, callback) {
+export function generateBase64Favicon(params) {
  const favicon = params.favicon;
 
  // generate Base64 of AsyncAPI logo
  if (!favicon) {
- const data = "data:image/x-icon;base64," + fs.readFileSync(path.resolve(__dirname, '../assets/asyncapi-favicon.ico'), "base64");
- return callback(null, data);
+ return "data:image/x-icon;base64," + fs.readFileSync(path.resolve(__dirname, '../assets/asyncapi-favicon.ico'), "base64");
  }
 
  try {
  // Attempt to fetch favicon
- const response = await fetch(favicon);
+ const response = fetch(favicon);
  if (response.status == 200) {
- const buffer = await response.buffer()
- const data = "data:image/x-icon;base64," + buffer.toString('base64');
- callback(null, data);
+ const buffer = response.buffer()
+ return "data:image/x-icon;base64," + buffer.toString('base64');
  }
  } catch (fetchErr) {
  // Failed to fetch favicon...
  try {
  // Attempt to read favicon as file
- const data = "data:image/x-icon;base64," + fs.readFileSync(favicon, "base64");
- callback(null, data);
+ return "data:image/x-icon;base64," + fs.readFileSync(favicon, "base64");
  } catch (err) {
  console.error("Failed to fetch/read favicon", fetchErr, err);
- callback(err);
  throw err;
  }
  }
 }
-filter.generateBase64Favicon = generateBase64Favicon;
 
 /**
  * More safe function to include content of given file than default Nunjuck's `include`.
  * Attaches raw file's content instead of executing it - problem with some attached files in template.
  */
-function includeFile(pathFile) {
+export function includeFile(pathFile) {
  const pathToFile = path.resolve(__dirname, '../', pathFile);
  return fs.readFileSync(pathToFile);
 }
-filter.includeFile = includeFile;
 
 /**
  * Stringifies the specification with escaping circular refs
  * and annotates that specification is parsed.
  */
-function stringifySpec(asyncapi) {
- return AsyncAPIDocument.stringify(asyncapi);
+export function stringifySpec(asyncapi) {
+ return stringify(asyncapi);
 }
-filter.stringifySpec = stringifySpec;
 
 /**
  * Stringifies prepared configuration for component.
  */
-function stringifyConfiguration(params) {
+export function stringifyConfiguration(params) {
  return JSON.stringify(prepareConfiguration(params));
 }
-filter.stringifyConfiguration = stringifyConfiguration;
 
 /**
  * Renders AsyncApi component by given AsyncAPI spec and with corresponding template configuration.
  */
-function renderSpec(asyncapi, params) {
- loadLanguagesConfig();
 
- const component = React.createElement(AsyncApiComponent, { schema: asyncapi, config: prepareConfiguration(params) });
+
+/**
+ * @param {AsyncAPIDocumentInterface} asyncapi 
+ * @param {*} params 
+ */
+export function renderSpec(asyncapi, params) {
+ loadLanguagesConfig();
+ const config = prepareConfiguration(params);
+ const stringified = stringifySpec(asyncapi);
+ const component = <AsyncApiComponent schema={stringified} config={config}/>;
  return ReactDOMServer.renderToString(component);
 }
-filter.renderSpec = renderSpec;
diff --git a/hooks/02_renameOutFile.js b/hooks/02_renameOutFile.js