@scalar/docusaurus 0.8.27 → 0.8.29

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalar/docusaurus
 
+## 0.8.29
+
+## 0.8.28
+
+### Patch Changes
+
+- [#9588](https://github.com/scalar/scalar/pull/9588): Fix function-valued configuration options (like `onBeforeRequest` and the request hooks) being dropped in the Docusaurus integration. Docusaurus JSON-serializes route props, which silently strips functions, so the config is now serialized to JavaScript in the plugin and injected as a script. Exposes a reusable `serializeConfigToJs` helper from `@scalar/client-side-rendering`.
+
 ## 0.8.27
 
 ## 0.8.26

package/dist/ScalarDocusaurus.d.ts

@@ -1,9 +1,14 @@
-import type { AnyApiReferenceConfiguration, CreateApiReference } from '@scalar/types';
+import type { CreateApiReference } from '@scalar/types';
 import React from 'react';
 import './theme.css';
 type Props = {
     route: {
-        configuration: AnyApiReferenceConfiguration;
+        /**
+         * The API reference configuration, pre-serialized in the plugin (Node) to a JavaScript object
+         * literal string. We cannot receive it as a plain object because Docusaurus JSON-serializes route
+         * props, which drops function-valued options like `onBeforeRequest`. See issue #6933.
+         */
+        configuration: string;
         /** Not sure where the route type is for docusaurus, couldn't find one with an ID, TODO: replace with that */
         id: string;
     };

package/dist/ScalarDocusaurus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarDocusaurus.d.ts","sourceRoot":"","sources":["../src/ScalarDocusaurus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAErF,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,OAAO,aAAa,CAAA;AAEpB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE;QACL,aAAa,EAAE,4BAA4B,CAAA;QAC3C,6GAA6G;QAC7G,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;CACF,CAAA;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE;YACN,kBAAkB,EAAE,kBAAkB,CAAA;SACvC,CAAA;KACF;CACF;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,KAAK,sBAiBhD,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"ScalarDocusaurus.d.ts","sourceRoot":"","sources":["../src/ScalarDocusaurus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAEvD,OAAO,KAAmC,MAAM,OAAO,CAAA;AAEvD,OAAO,aAAa,CAAA;AAEpB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE;QACL;;;;WAIG;QACH,aAAa,EAAE,MAAM,CAAA;QACrB,6GAA6G;QAC7G,EAAE,EAAE,MAAM,CAAA;KACX,CAAA;CACF,CAAA;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,MAAM,EAAE;YACN,kBAAkB,EAAE,kBAAkB,CAAA;SACvC,CAAA;KACF;CACF;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,KAAK,sBA6BhD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/ScalarDocusaurus.js

@@ -42,15 +42,23 @@ const react_1 = __importStar(require("react"));
 require("./theme.css");
 const ScalarDocusaurus = ({ route }) => {
     const ref = (0, react_1.useRef)(null);
+    const id = (0, react_1.useId)();
     (0, react_1.useEffect)(() => {
         if (!window.Scalar || !ref.current) {
             return;
         }
-        // Create a new Scalar API Reference
-        window.Scalar.createApiReference(ref.current, { ...route.configuration, hideDarkModeToggle: true });
-    }, [ref]);
+        // Inject the init call as a real <script> so the browser parses the serialized configuration —
+        // including any functions — as live JavaScript. Passing it as a prop is not an option, because
+        // functions do not survive Docusaurus' JSON serialization of route props (see #6933).
+        const script = document.createElement('script');
+        script.textContent = `window.Scalar.createApiReference(document.getElementById(${JSON.stringify(id)}), ${route.configuration})`;
+        document.body.appendChild(script);
+        return () => {
+            script.remove();
+        };
+    }, [id, route.configuration]);
     return (react_1.default.createElement(Layout_1.default, null,
-        react_1.default.createElement("div", { ref: ref })));
+        react_1.default.createElement("div", { id: id, ref: ref })));
 };
 exports.ScalarDocusaurus = ScalarDocusaurus;
 exports.default = exports.ScalarDocusaurus;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,4BAA4B,CAAA;CAC7C,CAAA;AAeD;;GAEG;AACH,QAAA,MAAM,gBAAgB,GACpB,SAAS,WAAW,EACpB,SAAS,aAAa,KACrB,MAAM,CAAC;IAAE,aAAa,CAAC,EAAE,4BAA4B,CAAA;CAAE,CAqDzD,CAAA;AAED,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAG5D,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,eAAe,CAAA;AAEjE,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,4BAA4B,CAAA;CAC7C,CAAA;AAeD;;GAEG;AACH,QAAA,MAAM,gBAAgB,GACpB,SAAS,WAAW,EACpB,SAAS,aAAa,KACrB,MAAM,CAAC;IAAE,aAAa,CAAC,EAAE,4BAA4B,CAAA;CAAE,CAoEzD,CAAA;AAED,eAAe,gBAAgB,CAAA"}

package/dist/index.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const node_path_1 = __importDefault(require("node:path"));
 const utils_1 = require("@docusaurus/utils");
+const client_side_rendering_1 = require("@scalar/client-side-rendering");
 /**
  * Used to set default options from the user-provided options
  * This is also useful to ensure backwards compatibility with older configs that don't have the new options
@@ -55,12 +56,22 @@ const ScalarDocusaurus = (context, options) => {
                     position: 'left',
                 });
             }
+            // Serialize the configuration to a JavaScript object literal here, in Node, while the config
+            // functions (onBeforeRequest, request hooks, sorters, …) are still live. Docusaurus JSON-serializes
+            // route props when it generates its routes module, which would otherwise silently drop every
+            // function-valued option. See https://github.com/scalar/scalar/issues/6933.
+            const givenConfiguration = content.configuration ?? {};
+            const configuration = Array.isArray(givenConfiguration) ? (givenConfiguration[0] ?? {}) : givenConfiguration;
+            // Normalize the configuration in Node first, exactly like the CDN HTML path does: this evaluates a
+            // function-valued `content` at build time (it must not be shipped to the browser) and reconciles
+            // `content` vs `url`. Only then do we serialize the remaining live functions for the browser.
+            const normalizedConfiguration = (0, client_side_rendering_1.getConfiguration)({ ...configuration, hideDarkModeToggle: true });
             // Add the appropriate route based on the module system
             addRoute({
                 path: (0, utils_1.normalizeUrl)([baseUrl, defaultOptions.route ?? '/scalar']),
                 component: node_path_1.default.resolve(__dirname, './ScalarDocusaurus'),
                 exact: true,
-                ...content,
+                configuration: (0, client_side_rendering_1.serializeConfigToJs)(normalizedConfiguration),
             });
         },
     };

package/package.json

@@ -19,7 +19,7 @@
     "testing",
     "react"
   ],
-  "version": "0.8.27",
+  "version": "0.8.29",
   "engines": {
     "node": ">=22"
   },
@@ -48,7 +48,8 @@
     }
   },
   "dependencies": {
-    "@scalar/types": "0.16.0"
+    "@scalar/client-side-rendering": "0.3.1",
+    "@scalar/types": "0.16.1"
   },
   "devDependencies": {
     "@docusaurus/core": "^3.9.2",