feat: new command preview

docs/usage.md

@@ -3,9 +3,9 @@ title: 'Usage'
 weight: 40
 ---
 
-<!-- 
+<!--
 
-This file is automatically generated from updateUsageDocs.js script. In package.json in line 158-161 lines the following steps has been executed in order to run this script successfully - 
+This file is automatically generated from updateUsageDocs.js script. In package.json in line 158-161 lines the following steps has been executed in order to run this script successfully -
 
 * generate:readme:create: It creates the initial content for the README file by printing the usage and commands tags using printf and redirects the output to scripts/README.md file.
 * generate:readme:commands: It changes the directory to the scripts folder and executes the oclif readme command. This command generates the usage and commands sections based on the CLI commands and updates the content in the scripts/README.md file.
@@ -19,9 +19,11 @@ This file is automatically generated from updateUsageDocs.js script. In package.
 -->
 
 The AsyncAPI CLI makes it easier to work with AsyncAPI documents.
+
 # Usage
 
 <!-- usage -->
+
 ```sh-session
 $ npm install -g @asyncapi/cli
 $ asyncapi COMMAND
@@ -33,38 +35,40 @@ USAGE
   $ asyncapi COMMAND
 ...
 ```
+
 <!-- usagestop -->
 
 # Commands
 
 <!-- commands -->
-* [`asyncapi bundle`](#asyncapi-bundle)
-* [`asyncapi config`](#asyncapi-config)
-* [`asyncapi config analytics`](#asyncapi-config-analytics)
-* [`asyncapi config context`](#asyncapi-config-context)
-* [`asyncapi config context add CONTEXT-NAME SPEC-FILE-PATH`](#asyncapi-config-context-add-context-name-spec-file-path)
-* [`asyncapi config context current`](#asyncapi-config-context-current)
-* [`asyncapi config context edit CONTEXT-NAME NEW-SPEC-FILE-PATH`](#asyncapi-config-context-edit-context-name-new-spec-file-path)
-* [`asyncapi config context init [CONTEXT-FILE-PATH]`](#asyncapi-config-context-init-context-file-path)
-* [`asyncapi config context list`](#asyncapi-config-context-list)
-* [`asyncapi config context remove CONTEXT-NAME`](#asyncapi-config-context-remove-context-name)
-* [`asyncapi config context use CONTEXT-NAME`](#asyncapi-config-context-use-context-name)
-* [`asyncapi config versions`](#asyncapi-config-versions)
-* [`asyncapi convert [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-convert-spec-file-proxyhost-proxyport)
-* [`asyncapi diff OLD NEW`](#asyncapi-diff-old-new)
-* [`asyncapi format [SPEC-FILE]`](#asyncapi-format-spec-file)
-* [`asyncapi generate`](#asyncapi-generate)
-* [`asyncapi generate fromTemplate ASYNCAPI TEMPLATE`](#asyncapi-generate-fromtemplate-asyncapi-template)
-* [`asyncapi generate models LANGUAGE FILE`](#asyncapi-generate-models-language-file)
-* [`asyncapi new`](#asyncapi-new)
-* [`asyncapi new file`](#asyncapi-new-file)
-* [`asyncapi new glee`](#asyncapi-new-glee)
-* [`asyncapi new template`](#asyncapi-new-template)
-* [`asyncapi optimize [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-optimize-spec-file-proxyhost-proxyport)
-* [`asyncapi pretty SPEC-FILE`](#asyncapi-pretty-spec-file)
-* [`asyncapi start`](#asyncapi-start)
-* [`asyncapi start studio`](#asyncapi-start-studio)
-* [`asyncapi validate [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-validate-spec-file-proxyhost-proxyport)
+
+- [`asyncapi bundle`](#asyncapi-bundle)
+- [`asyncapi config`](#asyncapi-config)
+- [`asyncapi config analytics`](#asyncapi-config-analytics)
+- [`asyncapi config context`](#asyncapi-config-context)
+- [`asyncapi config context add CONTEXT-NAME SPEC-FILE-PATH`](#asyncapi-config-context-add-context-name-spec-file-path)
+- [`asyncapi config context current`](#asyncapi-config-context-current)
+- [`asyncapi config context edit CONTEXT-NAME NEW-SPEC-FILE-PATH`](#asyncapi-config-context-edit-context-name-new-spec-file-path)
+- [`asyncapi config context init [CONTEXT-FILE-PATH]`](#asyncapi-config-context-init-context-file-path)
+- [`asyncapi config context list`](#asyncapi-config-context-list)
+- [`asyncapi config context remove CONTEXT-NAME`](#asyncapi-config-context-remove-context-name)
+- [`asyncapi config context use CONTEXT-NAME`](#asyncapi-config-context-use-context-name)
+- [`asyncapi config versions`](#asyncapi-config-versions)
+- [`asyncapi convert [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-convert-spec-file-proxyhost-proxyport)
+- [`asyncapi diff OLD NEW`](#asyncapi-diff-old-new)
+- [`asyncapi format [SPEC-FILE]`](#asyncapi-format-spec-file)
+- [`asyncapi generate`](#asyncapi-generate)
+- [`asyncapi generate fromTemplate ASYNCAPI TEMPLATE`](#asyncapi-generate-fromtemplate-asyncapi-template)
+- [`asyncapi generate models LANGUAGE FILE`](#asyncapi-generate-models-language-file)
+- [`asyncapi new`](#asyncapi-new)
+- [`asyncapi new file`](#asyncapi-new-file)
+- [`asyncapi new glee`](#asyncapi-new-glee)
+- [`asyncapi new template`](#asyncapi-new-template)
+- [`asyncapi optimize [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-optimize-spec-file-proxyhost-proxyport)
+- [`asyncapi pretty SPEC-FILE`](#asyncapi-pretty-spec-file)
+- [`asyncapi start`](#asyncapi-start)
+- [`asyncapi start studio`](#asyncapi-start-studio)
+- [`asyncapi validate [SPEC-FILE] [PROXYHOST] [PROXYPORT]`](#asyncapi-validate-spec-file-proxyhost-proxyport)
 
 ## `asyncapi bundle`
 
@@ -799,8 +803,27 @@ DESCRIPTION
 
 _See code: [src/commands/start/studio.ts](https://github.com/asyncapi/cli/blob/v2.14.1/src/commands/start/studio.ts)_
 
+## `asyncapi start preview`
+
+starts a new local instance of studio in readonly mode
+
+```
+USAGE
+  $ asyncapi start studio [-h] [-f <value>] [-p <value>]
+
+FLAGS
+  -f, --file=<value>  path to the AsyncAPI file to link with Studio
+  -h, --help          Show CLI help.
+  -p, --port=<value>  port in which to start Studio
+
+DESCRIPTION
+  starts a new local instance of studio in readonly mode
+```
+
 ## `asyncapi validate [SPEC-FILE] [PROXYHOST] [PROXYPORT]`
 
+_See code: [src/commands/start/preview.ts](https://github.com/asyncapi/cli/blob/v2.14.1/src/commands/start/preview.ts)_
+
 validate asyncapi file
 
 ```
@@ -834,4 +857,5 @@ DESCRIPTION
 ```
 
 _See code: [src/commands/validate.ts](https://github.com/asyncapi/cli/blob/v2.14.1/src/commands/validate.ts)_
+
 <!-- commandsstop -->

src/commands/start/preview.ts

@@ -0,0 +1,65 @@
+import Command from '../../core/base';
+import bundle from '@asyncapi/bundler';
+import path from 'path';
+import open from 'open';
+import { createServer } from 'http';
+import serveHandler from 'serve-handler';
+import { version as studioVersion } from '@asyncapi/studio/package.json';
+import { previewFlags } from '../../core/flags/start/preview.flags';
+
+class preview extends Command {
+  static description =
+    'Preview AsyncAPI document with local references in Studio.';
+  static strict = false;
+
+  static flags = previewFlags();
+
+  async run() {
+    const { argv, flags } = await this.parse(preview);
+    const port = flags.port;
+
+    const AsyncAPIFiles = argv as string[];
+
+    this.startServer(AsyncAPIFiles, flags, port ? port : 3210);
+  }
+
+  async startServer(AsyncAPIFiles: string[], flags: any, port: number) {
+    const server = createServer(async (request, response) => {
+      const indexLocation = require.resolve(
+        '@asyncapi/studio/build/index.html',
+      );
+      const hostFolder = indexLocation.substring(
+        0,
+        indexLocation.lastIndexOf(path.sep),
+      );
+
+      if (request.url && request.url.includes('/file.yml')) {
+        response.setHeader('Content-Type', 'application/x-yaml');
+        const bundledDocument = await bundle(AsyncAPIFiles, {
+          base: flags.base,
+          baseDir: flags.baseDir,
+          xOrigin: flags.xOrigin,
+        });
+
+        const yamlContent = bundledDocument.yml();
+
+        response.end(yamlContent);
+      } else {
+        return serveHandler(request, response, {
+          public: hostFolder,
+        });
+      }
+    });
+
+    server.listen(port, () => {
+      const url = `http://localhost:${port}?liveServer=${port}&studio-version=${studioVersion}&url=file.yml&readOnly=true`;
+      console.log(`Studio is now running at ${url}`);
+      console.log(
+        'You can open this URL in your web browser, and if needed, press Ctrl + C to stop the process.',
+      );
+      open(url);
+    });
+  }
+}
+
+export default preview;

src/core/flags/start/preview.flags.ts

@@ -0,0 +1,15 @@
+import { Flags } from '@oclif/core';
+
+export const previewFlags = () => {
+  return {
+    help: Flags.help({ char: 'h' }),
+    file: Flags.string({
+      char: 'f',
+      description: 'path to the AsyncAPI file to link with Studio',
+    }),
+    port: Flags.integer({
+      char: 'p',
+      description: 'port in which to start Studio',
+    }),
+  };
+};