chore: make Redoc lib compatible with Webpack 5 (#1982)

demo/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { render } from 'react-dom';
 import styled from 'styled-components';
-import { resolve as urlResolve } from 'url';
 import { RedocStandalone } from '../src';
 import ComboBox from './ComboBox';
 import FileInput from './components/FileInput';
@@ -87,7 +86,7 @@ class DemoApp extends React.Component<
     let proxiedUrl = specUrl;
     if (specUrl !== DEFAULT_SPEC) {
       proxiedUrl = cors
-        ? '\\\\cors.redoc.ly/' + urlResolve(window.location.href, specUrl)
+        ? '\\\\cors.redoc.ly/' + new URL(specUrl, window.location.href).href
         : specUrl;
     }
     return (

package.json

@@ -71,7 +71,7 @@
     "@types/json-pointer": "^1.0.30",
     "@types/lunr": "^2.3.3",
     "@types/mark.js": "^8.11.5",
-    "@types/marked": "^4.0.1",
+    "@types/marked": "^4.0.3",
     "@types/node": "^15.6.1",
     "@types/prismjs": "^1.16.5",
     "@types/prop-types": "^15.7.3",
@@ -138,15 +138,15 @@
     "styled-components": "^4.1.1 || ^5.1.1"
   },
   "dependencies": {
-    "@redocly/openapi-core": "^1.0.0-beta.88",
+    "@redocly/openapi-core": "^1.0.0-beta.95",
     "classnames": "^2.3.1",
     "decko": "^1.2.0",
     "dompurify": "^2.2.8",
     "eventemitter3": "^4.0.7",
     "json-pointer": "^0.6.2",
     "lunr": "^2.3.9",
     "mark.js": "^8.11.1",
-    "marked": "^4.0.10",
+    "marked": "^4.0.15",
     "mobx-react": "^7.2.0",
     "openapi-sampler": "^1.2.1",
     "path-browserify": "^1.0.1",

src/services/OpenAPIParser.ts

@@ -1,5 +1,3 @@
-import { resolve as urlResolve } from 'url';
-
 import { OpenAPIRef, OpenAPISchema, OpenAPISpec, Referenced } from '../types';
 
 import { appendToMdHeading, IS_BROWSER } from '../utils/';
@@ -62,7 +60,7 @@ export class OpenAPIParser {
 
     const href = IS_BROWSER ? window.location.href : '';
     if (typeof specUrl === 'string') {
-      this.specUrl = urlResolve(href, specUrl);
+      this.specUrl = new URL(specUrl, href).href;
     }
   }
 

src/services/models/Example.ts

@@ -1,5 +1,3 @@
-import { resolve as urlResolve } from 'url';
-
 import { OpenAPIEncoding, OpenAPIExample, Referenced } from '../../types';
 import { isFormUrlEncoded, isJsonLike, urlFormEncodePayload } from '../../utils/openapi';
 import { OpenAPIParser } from '../OpenAPIParser';
@@ -23,7 +21,7 @@ export class ExampleModel {
     this.summary = example.summary;
     this.description = example.description;
     if (example.externalValue) {
-      this.externalValueUrl = urlResolve(parser.specUrl || '', example.externalValue);
+      this.externalValueUrl = new URL(example.externalValue, parser.specUrl || '').href;
     }
     parser.exitRef(infoOrRef);
 

src/utils/helpers.ts

@@ -1,5 +1,4 @@
 import slugify from 'slugify';
-import { format, parse } from 'url';
 
 /**
  * Maps over array passing `isLast` bool to iterator as the second argument
@@ -146,18 +145,23 @@ export function isAbsoluteUrl(url: string) {
 export function resolveUrl(url: string, to: string) {
   let res;
   if (to.startsWith('//')) {
-    const { protocol: specProtocol } = parse(url);
-    res = `${specProtocol || 'https:'}${to}`;
+    try {
+      res = `${new URL(url).protocol || 'https:'}${to}`;
+    } catch {
+      res = `https:${to}`;
+    }
   } else if (isAbsoluteUrl(to)) {
     res = to;
   } else if (!to.startsWith('/')) {
     res = stripTrailingSlash(url) + '/' + to;
   } else {
-    const urlObj = parse(url);
-    res = format({
-      ...urlObj,
-      pathname: to,
-    });
+    try {
+      const urlObj = new URL(url);
+      urlObj.pathname = to;
+      res = urlObj.href;
+    } catch {
+      res = to;
+    }
   }
   return stripTrailingSlash(res);
 }

src/utils/loadAndBundleSpec.ts

@@ -1,4 +1,6 @@
 import type { Source, Document } from '@redocly/openapi-core';
+// eslint-disable-next-line import/no-internal-modules
+import type { ResolvedConfig } from '@redocly/openapi-core/lib/config';
 
 // eslint-disable-next-line import/no-internal-modules
 import { bundle } from '@redocly/openapi-core/lib/bundle';
@@ -11,7 +13,7 @@ import { OpenAPISpec } from '../types';
 import { IS_BROWSER } from './dom';
 
 export async function loadAndBundleSpec(specUrlOrObject: object | string): Promise<OpenAPISpec> {
-  const config = new Config({});
+  const config = new Config({} as ResolvedConfig);
   const bundleOpts = {
     config,
     base: IS_BROWSER ? window.location.href : process.cwd(),

webpack.config.ts

@@ -8,6 +8,7 @@ const nodeExternals = require('webpack-node-externals')({
   // bundle in modules that need transpiling + non-js (e.g. css)
   allowlist: [
     'swagger2openapi',
+    'marked',
     /reftools/,
     'oas-resolver',
     'oas-kit-common',
@@ -65,11 +66,12 @@ export default (env: { standalone?: boolean; browser?: boolean } = {}) => ({
         'node-fetch': 'null',
         'node-fetch-h2': 'null',
         yaml: 'null',
+        url: 'null',
         'safe-json-stringify': 'null',
       }
     : (context, request, callback) => {
         // ignore node-fetch dep of swagger2openapi as it is not used
-        if (/esprima|node-fetch|node-fetch-h2|\/yaml|safe-json-stringify$/i.test(request)) {
+        if (/esprima|node-fetch|node-fetch-h2|\/yaml|safe-json-stringify|url$/i.test(request)) {
           return callback(null, 'var undefined');
         }
         return nodeExternals(context, request, callback);