refactor(state-management): manage state outside of spec plugin (#3241)

- state management now exclusively uses concepts of selectors, actions, reducers and standard async thunks (this allows overrides on plugin level)
- editor state is not maintained within SwaggerUI spec plugin but has it's own allocated place
- editor content  type detection is now centralized into single plugin and uses power of ApiDOM
- performance of editing is now instant without any typing lag
- splash screen now displays while editor loads
- around 70% of codebase have been rewritten
- every implementation that could be simplified or fixed along the way was simplified or fiexed
- plugins have been reorganized

BREAKING CHANGE: plugin reorganization, redux actions and selectors usage and naming made consistent
Refs #3217

Author: char0n

.env

@@ -6,13 +6,15 @@ REACT_APP_COMPACT_BUNDLE=true
 # Tip: Should not set both REACT_APP_SWAGGER_FILE and REACT_APP_SWAGGER_URL flags
 
 # Create-React-App expects static directory within /public to contain FILE
-# REACT_APP_SWAGGER_FILE=/static/petstore-oas3.yml
+# REACT_APP_DEFINITION_FILE=/static/petstore-oas3.yml
 
-# OAS3.0 remote URI
-# REACT_APP_SWAGGER_URL=https://petstore3.swagger.io/api/v3/openapi.json
+# OAS3.0 remote absolute URI
+# REACT_APP_DEFINITION_URL=https://petstore3.swagger.io/api/v3/openapi.json
 
-# OAS2.x remote URI
-# REACT_APP_SWAGGER_URL=https://petstore.swagger.io/v2/swagger.json
+# OAS2.x remote absolute URI
+# REACT_APP_DEFINITION_URL=https://petstore.swagger.io/v2/swagger.json
 
-# AsyncAPI 2.x.x remote URI
-# REACT_APP_SWAGGER_URL=https://raw.githubusercontent.com/asyncapi/spec/v2.4.0/examples/streetlights-kafka.yml
+# AsyncAPI 2.x.x remote absolute URI
+REACT_APP_DEFINITION_URL=https://raw.githubusercontent.com/asyncapi/spec/v2.4.0/examples/streetlights-kafka.yml
+
+REACT_APP_VERSION=$npm_package_version

NOTICE

@@ -5,7 +5,7 @@ Copy of the Apache 2.0 license can be found in `LICENSES/Apache-2.0.txt` file.
 
 react-dd-menu
 Copyright (c) 2015 Mikkel Laursen
-Specific Sass Cascading Style Sheet in `_react-dd-menu.scss` (the file) were originally created under MIT license in https://github.com/mlaursen/react-dd-menu repository.
+Specific Sass Cascading Style Sheet in `_dropdown-menu.scss` (the file) were originally created under MIT license in https://github.com/mlaursen/react-dd-menu repository.
 Specific Sass Cascading Style Sheet have been copied into this project and modified. All modifications are licensed under Apache 2.0 License.
 Copy of the MIT license can be found in `LICENSES/MIT.txt` file.
 

README.md

@@ -427,14 +427,20 @@ or to [Node.js Modules: Packages documentation](https://nodejs.org/docs/latest-v
 
 ### Environment Variables
 
-It is possible to use an environment variable to specify a local JSON/YAML file or a remote URL for SwaggerEditor to load on startup. However, there is a limitation that any changes to the environment variable(s) will also require a rebuild and restart of the application. This is a constraint of Create React App infrastructure.
+It is possible to use an environment variable to specify a local JSON/YAML file or a remote URL for SwaggerEditor to load on startup.
+These environment variables will get baked in during build time into build artifacts.
 
-Two environment variables are currently available: `REACT_APP_SWAGGER_FILE` and `REACT_APP_SWAGGER_URL`. Disabled sample environment variables can be found in `.env`. Other `.env` files may also be used, for more information plese refer to [custom CRA environemnt variables](https://create-react-app.dev/docs/adding-custom-environment-variables/).
+Environment variables currently available:
 
-`REACT_APP_SWAGGER_FILE` specifies a local file path, and the specified file must also be present in the `/public/static` directory.
-
-`REACT_APP_SWAGGER_URL` specifies a remote URL. This environment variable currently takes precedence over `REACT_APP_SWAGGER_FILE`.
+| Variable name               |                                                Description                                                 |
+|-----------------------------|:----------------------------------------------------------------------------------------------------------:|
+ | `REACT_APP_DEFINITION_FILE` | Specifies a local file path, and the specified file must also be present in the `/public/static` directory |
+ | `REACT_APP_DEFINITION_URL`  | Specifies a remote URL. This environment variable currently takes precedence over `REACT_APP_SWAGGER_FILE` |
+| `REACT_APP_VERSION`         |              Specifies the version of this app. The version is read from `package.json` file.              |
 
+Sample environment variable values can be found in `.env` file. For more information about using
+environment variables, please refer to [adding Custom Environment Variables](https://create-react-app.dev/docs/adding-custom-environment-variables/)
+section of Create React App documentation.
 
 ## Docker
 Once we build the app, we can also build and run a Docker container.

create-react-app

@@ -32,13 +32,13 @@
     }
   },
   "scripts": {
-    "start": "cross-env DISABLE_ESLINT_PLUGIN=true ENABLE_PROGRESS_PLUGIN=true react-scripts start",
+    "start": "cross-env DISABLE_ESLINT_PLUGIN=false ENABLE_PROGRESS_PLUGIN=true react-scripts start",
     "build": "npm run build:app && npm run build:bundle:esm && npm run build:bundle:umd",
-    "build:app": "cross-env ENABLE_PROGRESS_PLUGIN=false DISABLE_ESLINT_PLUGIN=false react-scripts build",
+    "build:app": "cross-env NODE_OPTIONS='--max_old_space_size=4096' ENABLE_PROGRESS_PLUGIN=false DISABLE_ESLINT_PLUGIN=false react-scripts build",
     "build:app:serve": "serve -s build -l 3050",
     "build:bundle:esm": "rimraf ./dist/esm && cross-env DISABLE_ESLINT_PLUGIN=false ENABLE_PROGRESS_PLUGIN=false GENERATE_SOURCEMAP=true BUILD_ESM_BUNDLE=true DIST_PATH=dist/esm react-scripts build-bundle && rimraf ./dist/esm/swagger-editor.css*",
-    "build:bundle:umd": "rimraf ./dist/umd ./dist/swagger-editor.css && cross-env DISABLE_ESLINT_PLUGIN=false ENABLE_PROGRESS_PLUGIN=false GENERATE_SOURCEMAP=false BUILD_UMD_BUNDLE=true DIST_PATH=dist/umd react-scripts build-bundle && copyfiles -u 2 ./dist/umd/swagger-editor.css ./dist && rimraf ./dist/umd/swagger-editor.css",
-    "analyze": "source-map-explorer 'dist/umd/swagger-editor.js'",
+    "build:bundle:umd": "rimraf ./dist/umd ./dist/swagger-editor.css && cross-env NODE_OPTIONS='--max_old_space_size=4096' DISABLE_ESLINT_PLUGIN=false ENABLE_PROGRESS_PLUGIN=false GENERATE_SOURCEMAP=false BUILD_UMD_BUNDLE=true DIST_PATH=dist/umd react-scripts build-bundle && copyfiles -u 2 ./dist/umd/swagger-editor.css ./dist && rimraf ./dist/umd/swagger-editor.css",
+    "analyze": "source-map-explorer 'build/static/js/main.js'",
     "test": "react-scripts test",
     "cy:dev": "start-server-and-test cy:dev:server http://localhost:3003 cy:dev:open",
     "cy:dev:open": "CYPRESS_BASE_URL=http://localhost:3003 cypress open --e2e",
@@ -63,14 +63,19 @@
     "@mui/material": "^5.9.1",
     "@primer/octicons-react": "^17.3.0",
     "@swagger-api/apidom-ls": "^0.36.0",
+    "@swagger-api/apidom-parser-adapter-asyncapi-json-2": "^0.35.0",
+    "@swagger-api/apidom-parser-adapter-asyncapi-yaml-2": "^0.35.0",
+    "@swagger-api/apidom-parser-adapter-openapi-json-3-1": "^0.35.0",
+    "@swagger-api/apidom-parser-adapter-openapi-yaml-3-1": "^0.35.0",
     "axios": "^0.27.2",
+    "classnames": "^2.3.1",
     "deepmerge": "^4.2.2",
     "file-dialog": "^0.0.8",
     "immutable": "^3.8.2",
     "is-json": "^2.0.1",
     "js-file-download": "^0.4.12",
     "js-yaml": "^4.1.0",
-    "json-beautify": "^1.1.1",
+    "lodash": "^4.17.21",
     "monaco-editor-core": "^0.33.0",
     "monaco-languageclient": "^2.1.0",
     "prop-types": "^15.8.1",
@@ -83,6 +88,7 @@
     "react-resize-detector": "^7.1.2",
     "react-table": "^7.8.0",
     "reselect": "^4.1.6",
+    "short-unique-id": "^4.4.4",
     "styled-components": "^5.3.5",
     "swagger-ui-react": "^4.13.0",
     "vscode-languageserver-textdocument": "^1.0.5"

package-lock.json

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="preload" href="%PUBLIC_URL%/static/media/splash-screen/loader.gif" as="image" type="image/gif" />
+    <link rel="preload" href="%PUBLIC_URL%/static/media/splash-screen/logo.svg" as="image" type="image/svg+xml" />
+    <link rel="preload" href="%PUBLIC_URL%/static/media/splash-screen/styles.css" as="style" type="text/css" />
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="SwaggerEditor"
     />
+    <link rel="icon" href="%PUBLIC_URL%/favicon-32x32.png" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-32x32.png" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/static/media/splash-screen/styles.css" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -33,7 +37,23 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="swagger-editor"></div>
+    <div id="swagger-editor">
+      <div class="swagger-editor">
+        <div class="swagger-editor__splash-screen">
+          <figure class="swagger-editor__splash-screen-figure">
+            <img width="100%" src="%PUBLIC_URL%/static/media/splash-screen/logo.svg" alt="Swagger Editor" />
+            <figcaption>%REACT_APP_VERSION%</figcaption>
+            <img
+              width="25"
+              height="25"
+              class="swagger-editor__splash-screen-spinner"
+              src="%PUBLIC_URL%/static/media/splash-screen/loader.gif"
+              alt="Loading..."
+            />
+          </figure>
+        </div>
+      </div>
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

package.json

@@ -0,0 +1,30 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+.swagger-editor .swagger-editor__splash-screen {
+  position: absolute;
+  z-index: 10000;
+  background-color: #173647;
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+}
+
+.swagger-editor .swagger-editor__splash-screen-figure {
+  position: relative;
+  top: calc(50% - 126px);
+  width: 15vw;
+  display: inline-block;
+  color: lightslategrey;
+  font-size: 0.8rem;
+  font-weight: bold;
+}
+
+.swagger-editor .swagger-editor__splash-screen-spinner {
+  padding-top: 20px;
+}