finish migrating to react renderer

asyncapi · Aug 25, 2024 · 7807817 · 7807817
1 parent 7d696f6
commit 7807817
Show file tree

Hide file tree

Showing 19 changed files with 301 additions and 3,502 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@
 node_modules
 output
 test/temp
+__transpiled
diff --git a/helper/index.js b/helper/index.js
@@ -0,0 +1,44 @@
+const _ = require('lodash');
+const sanitizeFilename = require('sanitize-filename');
+
+function camelCase(string) {
+  return _.camelCase(string);
+}
+
+function pascalCase(string) {
+  string = _.camelCase(string);
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+function kebabCase(string) {
+  return _.kebabCase(string);
+}
+
+function capitalize(string) {
+  return _.capitalize(string);
+}
+
+function oneLine(string) {
+  return string.replace(/\n/g, ' ').trim();
+}
+
+function convertToFilename(string, options = { replacement: '-', maxLength: 255 }) {
+  let sanitizedString = sanitizeFilename(string);
+
+  sanitizedString = sanitizedString.replace(/[\s]+/g, options.replacement);
+
+  if (sanitizedString.length > options.maxLength) {
+    sanitizedString = sanitizedString.slice(0, options.maxLength);
+  }
+
+  return sanitizedString;
+}
+
+module.exports = {
+  camelCase,
+  pascalCase,
+  kebabCase,
+  capitalize,
+  oneLine,
+  convertToFilename
+};
diff --git a/package.json b/package.json
@@ -34,7 +34,8 @@
   },
   "dependencies": {
     "@asyncapi/generator-filters": "^2.1.0",
-    "@asyncapi/generator-hooks": "^0.1.0"
+    "@asyncapi/generator-hooks": "^0.1.0",
+    "@asyncapi/generator-react-sdk": "^1.1.1"
   },
   "devDependencies": {
     "@asyncapi/generator": "^1.9.17",
@@ -47,9 +48,11 @@
     "eslint-plugin-jest": "^25.3.4",
     "eslint-plugin-sonarjs": "^0.11.0",
     "jest": "^27.4.5",
+    "lodash": "^4.17.21",
     "markdown-toc": "^1.2.0",
     "node-fetch": "^2.6.1",
     "rimraf": "^3.0.2",
+    "sanitize-filename": "^1.6.3",
     "semantic-release": "^21.0.1"
   },
   "release": {
@@ -77,6 +80,7 @@
     "supportedProtocols": [
       "ws"
     ],
+    "renderer": "react",
     "parameters": {
       "server": {
         "description": "The server you want to use in the code.",

diff --git a/template/README.md b/template/README.md
diff --git a/template/README.md.js b/template/README.md.js
@@ -0,0 +1,15 @@
+const { File } = require('@asyncapi/generator-react-sdk');
+
+function ReadmeFile({ asyncapi }) {
+    console.log("Hello", asyncapi.info().description());
+    return (
+        <File name={'README.md'}>
+            {`# ${asyncapi.info().title()}
+            
+${asyncapi.info().description() || 'Safe'}
+`}
+        </File>
+    );
+}
+
+module.exports = ReadmeFile;
diff --git a/template/config/common.yml b/template/config/common.yml
diff --git a/template/config/config.yml.js b/template/config/config.yml.js
@@ -0,0 +1,20 @@
+const { File } = require('@asyncapi/generator-react-sdk');
+const { port } = require('../../filters/all.js');
+
+function commonConfig({ asyncapi, params }) {
+  const serverUrl = asyncapi.server(params.server).url();
+
+  return (
+    <File name={'common.yml'}>
+      {`default:
+  port: ${port(serverUrl)}
+development:
+test:
+staging:
+production:
+`}
+    </File>
+  );
+}
+
+module.exports = commonConfig; 
diff --git a/template/index.html → template/index.html.js b/template/index.html → template/index.html.js
@@ -1,7 +1,20 @@
-<!DOCTYPE html>
+const { File } = require('@asyncapi/generator-react-sdk');
+
+function indexHtmlRender({ asyncapi }) {
+  const channels = asyncapi.channels();
+  const channelNames = Object.keys(channels);
+
+  const subscribeChannels = channelNames.filter(channelName => {
+    const channel = channels[channelName];
+    return channel.subscribe && typeof channel.subscribe === 'function';
+  });
+
+  return (
+    <File name="index.html">
+      {`<!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>{{ asyncapi.info().title() }}</title>
+    <title>${asyncapi.info().title()}</title>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
   </head>
@@ -13,26 +26,22 @@ <h1>Open your browser console to see the logs and details of API you can use to
 
     function displayHelp() {
       console.log('Available channels:')
-      {%- for channelName, channel in asyncapi.channels() %}
-      {%- if channel.hasSubscribe() %}
-      console.log('* {{ channelName }}');
-      {%- endif -%}
-      {% endfor %}
+      ${subscribeChannels.map(channelName => `console.log('* ${channelName}');`).join('\n')}
       console.log('Available commands:')
       console.log('- listen: Establish a connection with the server at a given path.')
       console.log('  Usage: listen(channelName)');
-      console.log(`  Example: listen('{{ asyncapi.channelNames()[0] }}')`);
+      console.log(\`  Example: listen('${channelNames[0]}')\`);
       console.log('- send: Send a message to the server at a currently connected path.')
       console.log('  Usage: send(message)');
-      console.log(`  Example: send({ greet: 'Hello from client' })`);
+      console.log(\`  Example: send({ greet: 'Hello from client' })\`);
     }
 
     function listen(path) {
-      const url = new URL(path, 'ws://{{ asyncapi.server(params.server).url() }}').toString()
+      const url = new URL(path, 'ws://${asyncapi.server('localhost').url()}').toString()
       connection = new WebSocket(url)
 
       connection.onerror = error => {
-        console.log(`WebSocket error: ${error}`)
+        console.log(\`WebSocket error: \${error}\`)
       }
 
       connection.onopen = () => {
@@ -59,4 +68,9 @@ <h1>Open your browser console to see the logs and details of API you can use to
     displayHelp();
     </script>
   </body>
-</html>
+</html>`}
+    </File>
+  );
+}
+
+module.exports = indexHtmlRender;