fix(config): cast configuration values into proper types

src/core/components/live-response.jsx

@@ -73,10 +73,10 @@ export default class LiveResponse extends React.Component {
 
     return (
       <div>
-        { curlRequest && (requestSnippetsEnabled === true || requestSnippetsEnabled === "true"
+        { curlRequest && requestSnippetsEnabled 
           ? <RequestSnippets request={ curlRequest }/>
           : <Curl request={ curlRequest } />
-        )}
+        }
         { url && <div>
             <div className="request-url">
               <h4>Request URL</h4>

src/core/components/operation-tag.jsx

@@ -47,8 +47,6 @@ export default class OperationTag extends React.Component {
       deepLinking,
     } = getConfigs()
 
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
-
     const Collapse = getComponent("Collapse")
     const Markdown = getComponent("Markdown", true)
     const DeepLink = getComponent("DeepLink")
@@ -80,7 +78,7 @@ export default class OperationTag extends React.Component {
           data-is-open={showTag}
         >
           <DeepLink
-            enabled={isDeepLinkingEnabled}
+            enabled={deepLinking}
             isShown={showTag}
             path={createDeepLinkPath(tag)}
             text={tag} />

src/core/config/merge.js

@@ -13,6 +13,7 @@
  * TODO([email protected]): remove deep-extend in favor of lodash.merge
  */
 import deepExtend from "deep-extend"
+import typeCast from "./type-cast"
 
 const merge = (target, ...sources) => {
   let domNode = Symbol.for("domNode")
@@ -51,7 +52,7 @@ const merge = (target, ...sources) => {
     merged.urls.primaryName = primaryName
   }
 
-  return merged
+  return typeCast(merged)
 }
 
 export default merge

src/core/config/type-cast/index.js

@@ -0,0 +1,24 @@
+/**
+ * @prettier
+ */
+import has from "lodash/has"
+import get from "lodash/get"
+import set from "lodash/fp/set"
+
+import typeCasters from "./mappings"
+
+const typeCast = (options) => {
+  return Object.entries(typeCasters).reduce(
+    (acc, [optionPath, typeCaster]) => {
+      if (has(acc, optionPath)) {
+        const uncasted = get(acc, optionPath)
+        const casted = typeCaster(uncasted)
+        acc = set(optionPath, casted, acc)
+      }
+      return acc
+    },
+    { ...options }
+  )
+}
+
+export default typeCast

src/core/config/type-cast/mappings.js

@@ -0,0 +1,53 @@
+/**
+ * @prettier
+ */
+import arrayTypeCaster from "./type-casters/array"
+import booleanTypeCaster from "./type-casters/boolean"
+import domNodeTypeCaster from "./type-casters/dom-node"
+import filterTypeCaster from "./type-casters/filter"
+import nullableArrayTypeCaster from "./type-casters/nullable-array"
+import nullableStringTypeCaster from "./type-casters/nullable-string"
+import numberTypeCaster from "./type-casters/number"
+import objectTypeCaster from "./type-casters/object"
+import stringTypeCaster from "./type-casters/string"
+import syntaxHighlightTypeCaster from "./type-casters/syntax-highlight"
+import undefinedBooleanTypeCaster from "./type-casters/undefined-boolean"
+import undefinedStringTypeCaster from "./type-casters/undefined-string"
+
+const typeCasters = {
+  configUrl: stringTypeCaster,
+  deepLinking: booleanTypeCaster("deepLinking"),
+  defaultModelExpandDepth: numberTypeCaster,
+  defaultModelRendering: stringTypeCaster,
+  defaultModelsExpandDepth: numberTypeCaster,
+  displayOperationId: booleanTypeCaster("displayOperationId"),
+  displayRequestDuration: booleanTypeCaster("displayRequestDuration"),
+  docExpansion: stringTypeCaster,
+  dom_id: nullableStringTypeCaster,
+  domNode: domNodeTypeCaster,
+  filter: filterTypeCaster,
+  maxDisplayedTags: numberTypeCaster,
+  oauth2RedirectUrl: undefinedStringTypeCaster,
+  persistAuthorization: booleanTypeCaster("persistAuthorization"),
+  plugins: arrayTypeCaster("plugins"),
+  pluginsOptions: objectTypeCaster("pluginsOptions"),
+  presets: arrayTypeCaster("presets"),
+  requestSnippets: objectTypeCaster("requestSnippets"),
+  requestSnippetsEnabled: booleanTypeCaster("requestSnippetsEnabled"),
+  showCommonExtensions: booleanTypeCaster("showCommonExtensions"),
+  showExtensions: booleanTypeCaster("showExtensions"),
+  showMutatedRequest: booleanTypeCaster("showMutatedRequest"),
+  spec: objectTypeCaster("spec"),
+  supportedSubmitMethods: arrayTypeCaster("supportedSubmitMethods"),
+  syntaxHighlight: syntaxHighlightTypeCaster,
+  "syntaxHighlight.activated": booleanTypeCaster("syntaxHighlight.activated"),
+  "syntaxHighlight.theme": stringTypeCaster,
+  tryItOutEnabled: booleanTypeCaster("tryItOutEnabled"),
+  url: stringTypeCaster,
+  urls: nullableArrayTypeCaster,
+  "urls.primaryName": stringTypeCaster,
+  validatorUrl: nullableStringTypeCaster,
+  withCredentials: undefinedBooleanTypeCaster,
+}
+
+export default typeCasters

src/core/config/type-cast/type-casters/array.js

@@ -0,0 +1,10 @@
+/**
+ * @prettier
+ */
+import get from "lodash/get"
+import defaultOptions from "../../defaults"
+
+const arrayTypeCaster = (optionPath) => (value) =>
+  Array.isArray(value) ? value : get(defaultOptions, optionPath)
+
+export default arrayTypeCaster

src/core/config/type-cast/type-casters/boolean.js

@@ -0,0 +1,14 @@
+/**
+ * @prettier
+ */
+import get from "lodash/get"
+import defaultOptions from "../../defaults"
+
+const booleanTypeCaster = (optionPath) => (value) =>
+  value === true || value === "true" || value === 1 || value === "1"
+    ? true
+    : value === false || value === "false" || value === 0 || value === "0"
+      ? false
+      : get(defaultOptions, optionPath)
+
+export default booleanTypeCaster

src/core/config/type-cast/type-casters/dom-node.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const domNodeTypeCaster = (value) =>
+  value === null || value === "null" ? null : value
+
+export default domNodeTypeCaster

src/core/config/type-cast/type-casters/filter.js

@@ -0,0 +1,13 @@
+/**
+ * @prettier
+ */
+const filterTypeCaster = (value) =>
+  value === null || value === "null"
+    ? null
+    : value === true || value === "true" || value === 1 || value === "1"
+      ? true
+      : value === false || value === "false" || value === 0 || value === "0"
+        ? false
+        : String(value)
+
+export default filterTypeCaster

src/core/config/type-cast/type-casters/nullable-array.js

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ */
+const nullableArrayTypeCaster = (value) => (Array.isArray(value) ? value : null)
+
+export default nullableArrayTypeCaster

src/core/config/type-cast/type-casters/nullable-string.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const nullableStringTypeCaster = (value) =>
+  value === null || value === "null" ? null : String(value)
+
+export default nullableStringTypeCaster

src/core/config/type-cast/type-casters/number.js

@@ -0,0 +1,9 @@
+/**
+ * @prettier
+ */
+const numberTypeCaster = (value) => {
+  const parsedValue = parseInt(value, 10)
+  return Number.isNaN(parsedValue) ? NaN : parsedValue
+}
+
+export default numberTypeCaster

src/core/config/type-cast/type-casters/object.js

@@ -0,0 +1,11 @@
+/**
+ * @prettier
+ */
+import isPlainObject from "lodash/isPlainObject"
+import get from "lodash/get"
+import defaultOptions from "../../defaults"
+
+const objectTypeCaster = (optionPath) => (value) =>
+  isPlainObject(value) ? value : get(defaultOptions, optionPath)
+
+export default objectTypeCaster

src/core/config/type-cast/type-casters/string.js

@@ -0,0 +1,6 @@
+/**
+ * @prettier
+ */
+const stringTypeCaster = (value) => String(value)
+
+export default stringTypeCaster

src/core/config/type-cast/type-casters/syntax-highlight.js

@@ -0,0 +1,15 @@
+/**
+ * @prettier
+ */
+import isPlainObject from "lodash/isPlainObject"
+import defaultOptions from "../../defaults"
+
+const syntaxHighlightTypeCaster = (value) => {
+  return isPlainObject(value)
+    ? value
+    : value === false || value === "false" || value === 0 || value === "0"
+      ? { activated: false }
+      : defaultOptions.syntaxHighlight
+}
+
+export default syntaxHighlightTypeCaster

src/core/config/type-cast/type-casters/undefined-boolean.js

@@ -0,0 +1,11 @@
+/**
+ * @prettier
+ */
+const undefinedBooleanTypeCaster = (value) =>
+  value === true || value === "true" || value === 1 || value === "1"
+    ? true
+    : value === true || value === "false" || value === 0 || value === "0"
+      ? false
+      : undefined
+
+export default undefinedBooleanTypeCaster

src/core/config/type-cast/type-casters/undefined-string.js

@@ -0,0 +1,7 @@
+/**
+ * @prettier
+ */
+const undefinedStringTypeCaster = (value) =>
+  value === undefined || value === "undefined" ? undefined : String(value)
+
+export default undefinedStringTypeCaster

src/core/containers/OperationContainer.jsx

@@ -11,7 +11,7 @@ export default class OperationContainer extends PureComponent {
     const { tryItOutEnabled } = props.getConfigs()
 
     this.state = {
-      tryItOutEnabled: tryItOutEnabled === true || tryItOutEnabled === "true",
+      tryItOutEnabled,
       executeInProgress: false
     }
   }
@@ -61,14 +61,13 @@ export default class OperationContainer extends PureComponent {
     const showSummary = layoutSelectors.showSummary()
     const operationId = op.getIn(["operation", "__originalOperationId"]) || op.getIn(["operation", "operationId"]) || opId(op.get("operation"), props.path, props.method) || op.get("id")
     const isShownKey = ["operations", props.tag, operationId]
-    const isDeepLinkingEnabled = deepLinking && deepLinking !== "false"
     const allowTryItOut = supportedSubmitMethods.indexOf(props.method) >= 0 && (typeof props.allowTryItOut === "undefined" ?
       props.specSelectors.allowTryItOutFor(props.path, props.method) : props.allowTryItOut)
     const security = op.getIn(["operation", "security"]) || props.specSelectors.security()
 
     return {
       operationId,
-      isDeepLinkingEnabled,
+      isDeepLinkingEnabled: deepLinking,
       showSummary,
       displayOperationId,
       displayRequestDuration,

src/core/containers/filter.jsx

@@ -29,11 +29,11 @@ export default class FilterContainer extends React.Component {
 
     return (
       <div>
-        {filter === null || filter === false || filter === "false" ? null :
+        {filter === null || filter === false ? null :
           <div className="filter-container">
             <Col className="filter wrapper" mobile={12}>
               <input className={classNames.join(" ")} placeholder="Filter by tag" type="text"
-                     onChange={this.onFilterChange} value={filter === true || filter === "true" ? "" : filter}
+                     onChange={this.onFilterChange} value={filter === true ? "" : filter}
                      disabled={isLoading}/>
             </Col>
           </div>

src/core/plugins/layout/spec-extensions/wrap-selector.js

@@ -9,12 +9,12 @@ export const taggedOperations = (oriSelector, system) => (state, ...args) => {
   // Filter, if requested
   let filter = layoutSelectors.currentFilter()
   if (filter) {
-    if (filter !== true && filter !== "true" && filter !== "false") {
+    if (filter !== true) {
       taggedOps = fn.opsFilter(taggedOps, filter)
     }
   }
   // Limit to [max] items, if specified
-  if (maxDisplayedTags && !isNaN(maxDisplayedTags) && maxDisplayedTags >= 0) {
+  if (maxDisplayedTags >= 0) {
     taggedOps = taggedOps.slice(0, maxDisplayedTags)
   }
 

src/core/plugins/swagger-client/configs-wrap-actions.js

@@ -3,6 +3,6 @@ export const loaded = (ori, system) => (...args) => {
   const value = system.getConfigs().withCredentials
 
   if(value !== undefined) {
-    system.fn.fetch.withCredentials = typeof value === "string" ? (value === "true") : !!value
+    system.fn.fetch.withCredentials = value
   }
 }

src/core/plugins/syntax-highlighting/components/SyntaxHighlighter.jsx

@@ -4,7 +4,6 @@
 import React from "react"
 import PropTypes from "prop-types"
 import ReactSyntaxHighlighter from "react-syntax-highlighter/dist/esm/light"
-import get from "lodash/get"
 
 const SyntaxHighlighter = ({
   language,
@@ -13,8 +12,7 @@ const SyntaxHighlighter = ({
   syntaxHighlighting = {},
   children = "",
 }) => {
-  const configs = getConfigs()
-  const theme = get(configs, "syntaxHighlight.theme")
+  const theme = getConfigs().syntaxHighlight.theme
   const { styles, defaultStyle } = syntaxHighlighting
   const style = styles?.[theme] ?? defaultStyle
 

src/core/plugins/syntax-highlighting/wrap-components/SyntaxHighlighter.jsx

@@ -3,12 +3,10 @@
  */
 import React from "react"
 import PropTypes from "prop-types"
-import get from "lodash/get"
 
 const SyntaxHighlighterWrapper = (Original, system) => {
   const SyntaxHighlighter = ({ renderPlainText, children, ...rest }) => {
-    const configs = system.getConfigs()
-    const canSyntaxHighlight = !!get(configs, "syntaxHighlight.activated")
+    const canSyntaxHighlight = system.getConfigs().syntaxHighlight.activated
     const PlainTextViewer = system.getComponent("PlainTextViewer")
 
     if (!canSyntaxHighlight && typeof renderPlainText === "function") {