chore: update dependencies and reduce bundle size (#2012)

Author: aeneasr

package-lock.json

@@ -9,6 +9,7 @@
     "gen:config": "node src/scripts/config.js config.js",
     "start": "docusaurus start --no-minify",
     "build": "docusaurus build",
+    "build:analyze": "docusaurus build --bundle-analyzer",
     "swizzle": "docusaurus swizzle",
     "serve": "docusaurus serve",
     "test": "playwright test",
@@ -50,14 +51,14 @@
     "file-loader": "6.2.0",
     "json-loader": "0.5.7",
     "json-schema-faker": "0.5.8",
+    "lodash.get": "^4.4.2",
     "mermaid": "11.4.1",
     "net": "1.0.2",
     "node-fetch": "2.7.0",
     "node-polyfill-webpack-plugin": "3.0.0",
     "parser-front-matter": "1.6.4",
-    "prism-react-renderer": "2.3.1",
+    "prism-react-renderer": "2.4.1",
     "prismjs": "1.29.0",
-    "ramda": "0.29.1",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "redocusaurus": "2.2.1",

package.json

@@ -2,7 +2,6 @@ import RefParser from "@apidevtools/json-schema-ref-parser"
 import { withTheme } from "@rjsf/core"
 import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4"
 import validator from "@rjsf/validator-ajv8"
-import axios from "axios"
 import { useEffect, useState } from "react"
 
 const Form = withTheme(Bootstrap4Theme)
@@ -11,15 +10,17 @@ export default function ConfigEditor(props: { url: any }) {
   const [schema, setSchema] = useState<any>()
 
   useEffect(() => {
-    axios.get(props.url).then((res) => {
-      RefParser.dereference(res.data, (err, api) => {
-        if (err) {
-          console.log(err)
-        } else {
-          setSchema(api)
-        }
+    fetch(props.url)
+      .then((r) => r.json())
+      .then((res) => {
+        RefParser.dereference(res, (err, api) => {
+          if (err) {
+            console.log(err)
+          } else {
+            setSchema(api)
+          }
+        })
       })
-    })
   }, [props.url])
 
   if (!schema) {

src/components/ConfigEditor/index.tsx

@@ -4,9 +4,9 @@ import axios from "axios"
 import RefParser from "@apidevtools/json-schema-ref-parser"
 import jsf from "json-schema-faker"
 import YAML from "yaml"
-import { pathOr } from "ramda"
 import Admonition from "@theme/Admonition"
 import CodeBlock from "@theme/CodeBlock"
+import { pathOr } from "../../utils/pathOr"
 
 const parser = new RefParser()
 
@@ -128,83 +128,86 @@ export default function ConfigMarkdown(props: { src: string; binary: string }) {
   })
 
   useEffect(() => {
-    axios.get(props.src).then(({ data: schema }) => {
-      new Promise((resolve, reject) => {
-        parser.dereference(
-          schema,
-          {
-            resolve: {
-              ory: oryResolver,
+    fetch(props.src)
+      .then((r) => r.json())
+      .then((schema) => {
+        new Promise((resolve, reject) => {
+          parser.dereference(
+            schema,
+            {
+              resolve: {
+                ory: oryResolver,
+              },
             },
-          },
-          (err, result) => (err ? reject(err) : resolve(result)),
-        )
-      })
-        .then((schema: any) => {
-          const removeAdditionalProperties = (o) => {
-            delete o["additionalProperties"]
-            if (o.properties) {
-              Object.keys(o.properties).forEach((key) =>
-                removeAdditionalProperties(o.properties[key]),
-              )
+            (err, result) => (err ? reject(err) : resolve(result)),
+          )
+        })
+          .then((schema: any) => {
+            const removeAdditionalProperties = (o) => {
+              delete o["additionalProperties"]
+              if (o.properties) {
+                Object.keys(o.properties).forEach((key) =>
+                  removeAdditionalProperties(o.properties[key]),
+                )
+              }
             }
-          }
-
-          const enableAll = (o) => {
-            if (o.properties) {
-              Object.keys(o.properties).forEach((key) => {
-                if (key === "enable") {
-                  o.properties[key] = true
-                }
-                enableAll(o.properties[key])
-              })
+
+            const enableAll = (o) => {
+              if (o.properties) {
+                Object.keys(o.properties).forEach((key) => {
+                  if (key === "enable") {
+                    o.properties[key] = true
+                  }
+                  enableAll(o.properties[key])
+                })
+              }
             }
-          }
-
-          removeAdditionalProperties(schema)
-          enableAll(schema)
-          if (schema.definitions) {
-            Object.keys(schema.definitions).forEach((key) => {
-              removeAdditionalProperties(schema.definitions[key])
-              enableAll(schema.definitions[key])
-            })
-          }
 
-          jsf.option({
-            useExamplesValue: true,
-            useDefaultValue: false, // do not change this!!
-            fixedProbabilities: true,
-            alwaysFakeOptionals: true,
-          })
+            removeAdditionalProperties(schema)
+            enableAll(schema)
+            if (schema.definitions) {
+              Object.keys(schema.definitions).forEach((key) => {
+                removeAdditionalProperties(schema.definitions[key])
+                enableAll(schema.definitions[key])
+              })
+            }
 
-          const values = jsf.generate(schema)
-          const doc = YAML.parseDocument(YAML.stringify(values))
+            jsf.option({
+              useExamplesValue: true,
+              useDefaultValue: false, // do not change this!!
+              fixedProbabilities: true,
+              alwaysFakeOptionals: true,
+            })
 
-          const comments = [`# ${pathOr(props.binary, ["title"], schema)}`, ""]
+            const values = jsf.generate(schema)
+            const doc = YAML.parseDocument(YAML.stringify(values))
 
-          const description = pathOr("", ["description"], schema)
-          if (description) {
-            comments.push(" " + description)
-          }
+            const comments = [
+              `# ${pathOr(props.binary, ["title"], schema)}`,
+              "",
+            ]
 
-          console.log({ doc })
+            const description = pathOr("", ["description"], schema)
+            if (description) {
+              comments.push(" " + description)
+            }
 
-          doc.commentBefore = comments.join("\n")
-          doc.spaceAfter = false
-          doc.spaceBefore = false
+            doc.commentBefore = comments.join("\n")
+            doc.spaceAfter = false
+            doc.spaceBefore = false
 
-          doc.contents.items.forEach(enhance(schema, []))
+            doc.contents.items.forEach(enhance(schema, []))
 
-          return Promise.resolve({
-            // schema,
-            // values,
-            yaml: doc.toString(),
+            return Promise.resolve({
+              // schema,
+              // values,
+              yaml: doc.toString(),
+            })
           })
-        })
-        .then((out) => {
-          setContent(out.yaml)
-        })
-    })
+          .then((out) => {
+            setContent(out.yaml)
+          })
+      })
   }, [props.src])
 
   return (

src/components/ConfigMarkdown/index.tsx

@@ -3,9 +3,8 @@
 
 const RefParser = require("json-schema-ref-parser")
 const parser = new RefParser()
-const jsf = require("json-schema-faker").default
+const jsf = require("json-schema-faker")
 const YAML = require("yaml")
-const { pathOr } = require("ramda")
 const path = require("path")
 const fs = require("fs")
 const prettier = require("prettier")
@@ -47,6 +46,7 @@ if (process.argv.length !== 3 || process.argv[1] === "help") {
 }
 
 const config = require(path.resolve(process.argv[2]))
+const { pathOr } = require("../utils/pathOr")
 
 const enhance =
   (schema, parents = []) =>

src/scripts/config.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react"
 import Redoc from "@theme/Redoc"
 import "./API.module.css"
-import axios from "axios"
 import { useLatestRelease } from "../hooks"
 
 const canUseDOM: boolean = !!(
@@ -27,9 +26,11 @@ function API({
       return
     }
 
-    axios.get(url.replace(/master/, version)).then((res) => {
-      setSpec(res.data)
-    })
+    fetch(url.replace(/master/, version))
+      .then((r) => r.json())
+      .then((res) => {
+        setSpec(res)
+      })
   }, [url, repo, version])
 
   // For some reason this does not render server-side...

src/theme/API.tsx

@@ -6,6 +6,8 @@ import siteConfig from "@generated/docusaurus.config"
 import ketoRelationTuplesPrism from "./ketoRelationTuplesPrism"
 import ketoRelationsPermissionsPrism from "./ketoRelationsPermissionsPrism"
 
+// Automatically overrides the docusaurus prism coonfig.
+
 export default function prismIncludeLanguages(PrismObject) {
   const {
     themeConfig: { prism },

src/theme/prism-include-languages.js

@@ -0,0 +1,6 @@
+export const pathOr = (defaultValue, path, obj) => {
+  return path.reduce(
+    (acc, key) => (acc && acc[key] !== undefined ? acc[key] : defaultValue),
+    obj,
+  )
+}

src/utils/pathOr.ts

@@ -1,7 +1,7 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { readSitemapXML, Sitemap, getLoc, getNewURL, runTest } from "./utils"
+import { readSitemapXML, runTest } from "./utils"
 
 const sitemap = readSitemapXML("sitemap_docs.xml")
 

tests/jest/redirects/docs-redirects.test.ts

@@ -1,7 +1,7 @@
 // Copyright © 2022 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { readSitemapXML, Sitemap, getLoc, getNewURL, runTest } from "./utils"
+import { readSitemapXML, runTest } from "./utils"
 
 const sitemap = readSitemapXML("sitemap_hydra.xml")