From 708580b6f88d1f394749154c4f88c360f5cdaed3 Mon Sep 17 00:00:00 2001
From: Michael Wiesenbauer <11874984+mwiesenbauer@users.noreply.github.com>
Date: Wed, 2 Oct 2024 10:23:39 +0200
Subject: [PATCH] render react app setup into dedicated js file

---
 components/index.js   | 19 +++++++++++++------
 template/js/app.js.js | 17 +++++++++++++++++
 2 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 template/js/app.js.js

diff --git a/components/index.js b/components/index.js
index a7a2a6d61..5862c3277 100644
--- a/components/index.js
+++ b/components/index.js
@@ -42,13 +42,20 @@ export function Index({ asyncapi, params = {} }) {
   
       ${asyncapiScript}
   
-      <script>
-        const schema = ${stringifySpec(asyncapi)};
-        const config = ${stringifyConfiguration(params)};
-        AsyncApiStandalone.hydrate({ schema, config }, document.getElementById("root"));
-      </script>
+      <script type="application/javascript" src="js/app.js"></script>
     </body>
   </html>`
   );
 }
-  
\ No newline at end of file
+
+export function App({ asyncapi, params = {} }) {
+  return (`
+    const schema = ${stringifySpec(asyncapi)};
+    const config = ${stringifyConfiguration(params)};
+    const appRoot = document.getElementById('root');
+    AsyncApiStandalone.render(
+        { schema, config, }, appRoot
+    );
+  `
+  );
+}
diff --git a/template/js/app.js.js b/template/js/app.js.js
new file mode 100644
index 000000000..036de9078
--- /dev/null
+++ b/template/js/app.js.js
@@ -0,0 +1,17 @@
+import { File } from '@asyncapi/generator-react-sdk';
+import { App } from '../../components/index';
+import { AsyncAPIDocumentInterface } from '@asyncapi/parser';
+
+/**
+ * 
+ * @param {object} param0 
+ * @param {AsyncAPIDocumentInterface} param0.asyncapi 
+ * @returns 
+ */
+export default function({ asyncapi, params = {} }) {
+  return (
+    <File name='app.js'>
+        <App asyncapi={asyncapi} params={params} />
+    </File>
+  );
+}