fix!: expose all functions for browser

.gitignore

@@ -7,4 +7,5 @@ node_modules
 /esm
 /cjs
 /browser
+/browser_new
 *.tgz

package.json

@@ -22,17 +22,20 @@
     "/esm",
     "/cjs",
     "/browser",
+    "/browser_new",
     "LICENSE",
     "README.md"
   ],
   "scripts": {
-    "build": "npm run build:esm && npm run build:cjs && npm run build:browser",
+    "build": "npm run build:esm && npm run build:cjs && npm run build:browser && npm run build:browser_new",
     "build:esm": "tsc",
     "build:cjs": "tsc --project ./tsconfig.cjs.json",
     "build:browser": "webpack",
+    "build:browser_new": "webpack  --config ./webpack_new.config.js",
     "test": "npm run test:unit && npm run test:browser",
     "test:unit": "cross-env CI=true jest --coverage --testPathIgnorePatterns=test/browser/*",
     "test:browser": "npm run build:browser && cross-env CI=true jest -- ./test/browser/*",
+    "test:browser_new": "cross-env CI=true jest -- ./test/browser_new/*",
     "lint": "eslint --max-warnings 0 --config .eslintrc .",
     "lint:fix": "eslint --max-warnings 0 --config .eslintrc . --fix",
     "generate:readme:toc": "markdown-toc -i \"README.md\"",

test/browser/browser.spec.ts

@@ -44,7 +44,7 @@ describe('Test browser Parser in the node env', function() {
 
   afterAll(async function() {
     await browser.close();
-    await server.close();
+    server.close();
   });
 
   it('should parse spec in the browser', async function() {
@@ -58,4 +58,4 @@ describe('Test browser Parser in the node env', function() {
     const diagnostics = await page.evaluate(element => element && element.textContent, diagnosticsDiv);
     expect(Number(diagnostics)).toBeGreaterThanOrEqual(0);
   }, 5000);
-});
+});

test/browser_new/browser.spec.ts

@@ -0,0 +1,66 @@
+import fs from 'fs';
+import http from 'http';
+import path from 'path';
+import url from 'url';
+import puppeteer from 'puppeteer';
+
+describe('Test browser Parser in the node env', function() {
+  let server: http.Server;
+  let browser: puppeteer.Browser;
+  let page: puppeteer.Page;
+
+  beforeAll(async function() {
+    const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
+    const htmlPath = path.resolve(__dirname, 'sample-page.html');
+    const parserScript = path.resolve(__dirname, '../../browser_new/index.js');
+
+    console.info('start server');
+    server = http.createServer((req, res) => {
+      if (req.url === '/') {
+        res.writeHead(200, { 'content-type': 'text/html' });
+        return fs.createReadStream(htmlPath).pipe(res);
+      } else if (req.url === '/parser.js') {
+        res.writeHead(200, { 'content-type': 'text/html' });
+        return fs.createReadStream(parserScript).pipe(res);
+      } else if (req.url === '/asyncapi.json') {
+        res.writeHead(200, { 'content-type': 'application/json' });
+        res.write(JSON.stringify({ asyncapi: '2.0.0', info: { title: 'My API', version: '1.0.0' }, channels: { '/test/tester': { subscribe: { operationId: 'subscribeOperation', message: { } } } } }));
+        res.end();
+      }
+    });
+    server.listen(8080);
+
+    //use this in case you want to troubleshoot in a real chrome window => browser = await puppeteer.launch({headless: false});
+    console.info('starting browser');
+    browser = await puppeteer.launch();
+
+    console.info('opening new page');
+    page = await browser.newPage();
+
+    page.on('console', msg => {
+      msg.args().forEach((arg, index) => {
+        console.error(`Browser console content ${index}: ${JSON.stringify(arg.remoteObject().value, null, 2)}`);
+      });
+    });
+
+    console.info('navigating to localhost');
+    await page.goto('http://localhost:8080', { waitUntil: 'networkidle0' });
+  }, 5000);
+
+  afterAll(async function() {
+    await browser.close();
+    server.close();
+  });
+
+  it('should parse spec in the browser', async function() {
+    console.info('getting content element');
+    const contentDiv = await page.$('#content');
+    const content = await page.evaluate(element => element && element.textContent, contentDiv);
+    expect(content).toEqual('2.0.0');
+
+    console.info('getting number of warnings');
+    const diagnosticsDiv = await page.$('#diagnostics');
+    const diagnostics = await page.evaluate(element => element && element.textContent, diagnosticsDiv);
+    expect(Number(diagnostics)).toBeGreaterThanOrEqual(0);
+  }, 5000);
+});

test/browser_new/sample-page.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample page</title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body>
+    <div id="content"></div>
+    <div id="diagnostics"></div>
+  </body>
+
+  <script src="./parser.js"></script>
+  <script defer>
+    async function parse() {
+      try {
+        const parser = new window.AsyncAPIParser.Parser();
+        const result = window.AsyncAPIParser.fromURL(parser, 'http://localhost:8080/asyncapi.json');
+        const {document: parsedDocument, diagnostics} = await result.parse();
+        document.getElementById('content').innerHTML = parsedDocument.version();
+        document.getElementById('diagnostics').innerHTML = String(diagnostics.length);
+      } catch (error) {
+        console.error(error)
+      }
+    }
+    parse();
+  </script>
+</html>

webpack.config.js

@@ -13,7 +13,7 @@ module.exports = {
     library: {
       name: 'AsyncAPIParser',
       type: 'umd',
-      export: 'default',
+      export: 'default'
     },
   },
 
@@ -46,4 +46,4 @@ module.exports = {
      */
     // (require('webpack-bundle-analyzer').BundleAnalyzerPlugin()),
   ],
-};
+};

webpack_new.config.js

@@ -0,0 +1,48 @@
+/* eslint-disable */
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  target: 'web',
+  mode: 'production',
+
+  output: {
+    path: path.resolve(__dirname, 'browser_new'),
+    filename: 'index.js',
+    globalObject: '(typeof self !== \'undefined\' ? self : this)',
+    library: {
+      name: 'AsyncAPIParser',
+      type: 'umd'
+    },
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+        options: {
+          configFile: 'tsconfig.json',
+          transpileOnly: true,
+        },
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js'],
+    fallback: {
+      fs: false,
+      path: false,
+      util: false,
+      buffer: require.resolve('buffer/'),
+    }
+  },
+
+  plugins: [
+    /**
+     * Uncomment plugin when you wanna see dependency map of bundled package
+     */
+    // (require('webpack-bundle-analyzer').BundleAnalyzerPlugin()),
+  ],
+};