feat: Docusaurus v3 migration

docs/devtools/devtools-options.md

@@ -60,18 +60,18 @@ There are mainly **three functions** that you can (and probably will) use in you
 
 This is the main hooks function, which defines which `target` should be wrapped in what proxy, defined by `pattern`.
 
-- `target` **{Class}** - JavaScript class/object constructor that is wrapped in proxy.
-- `pattern` **{object}** - result of `createHook` function.
+- `target` **\{Class}** - JavaScript @/object constructor that is wrapped in proxy.
+- `pattern` **\{object}** - result of `createHook` function.
 
 #### 2. `createHook(name, regular, callback)`
 
 Helper function that defines proxies on methods that match `regular` regular expression. It's essentially used
 in the **second argument** of `aop()` function.
 
-- `name` **{hookName}** - defines when the proxy content should be executed (e.g. event message sent to devtools).
-- `regular` **{(string\|function\|RegExp)}** - string or regexp that defines method names which should be wrapped in
+- `name` **\{hookName}** - defines when the proxy content should be executed (e.g. event message sent to devtools).
+- `regular` **\{(string\|function\|RegExp)}** - string or regexp that defines method names which should be wrapped in
    proxy or a function that returns true for given metadata.
-- `callback` **{function}** - callback that is executed, when proxy is called. Receives `meta` object as an argument.
+- `callback` **\{function}** - callback that is executed, when proxy is called. Receives `meta` object as an argument.
 
 Where `hookName` is defined as:
 
@@ -94,22 +94,22 @@ const hookName = Object.freeze({
 Helper function that sends passed in data to the devtools panel, while doing some pre-processing so the data
 can be displayed properly. It is used **at the end of `createHook` callback function**.
 
-- `identifier` **{string}** - name identifying sent message displayed in devtool panel.
+- `identifier` **\{string}** - name identifying sent message displayed in devtool panel.
   By default it corresponds to the name of the wrapped class, but it can be overridden in the `options`.
-- `meta` **{object}** - metadata describing received event. They're automatically created as a callback parameter
+- `meta` **\{object}** - metadata describing received event. They're automatically created as a callback parameter
   in the `createHook` function.
-- `options` **{object}** - additional options passed into the event payload. Currently only `{ color: 'color' }` is supported
+- `options` **\{object}** - additional options passed into the event payload. Currently only `{ color: 'color' }` is supported
   (for available colors, see below).
-- `overrides`  **{object}** - optional object with overrides, that is merged with the `meta` sent in second argument.
+- `overrides`  **\{object}** - optional object with overrides, that is merged with the `meta` sent in second argument.
 
 #### 4. `importIMAClass(path, module);`
 
 Utility function, used to import modules from `$IMA.Loader.modules`, that can be used in creating your own
 custom hooks.
 
-- `path` **{string}** - corresponds to absolute path to application's class from the `/app` directory. Or a package name
+- `path` **\{string}** - corresponds to absolute path to application's class from the `/app` directory. Or a package name
 in case of npm package.
-- `module` **{?string}** - used for named exports, can be left blank in case of default exports.
+- `module` **\{?string}** - used for named exports, can be left blank in case of default exports.
 
 ### Message colors
 

packages/cli/README.md

@@ -1,10 +1,9 @@
 <p align="center">
-  <img height="130" src="https://imajs.io/img/logo.svg">
+  <img height="130" src="https://imajs.io/img/logo.svg" />
 </p>
 
 <h1 align="center">@ima/cli</h1>
-  <p align="center"><i><code>@ima/cli</code> takes care of building and running the IMA.js application in dev (watch) mode.</i>
-</p>
+<p align="center"><i><code>@ima/cli</code> takes care of building and running the IMA.js application in dev (watch) mode.</i></p>
 
 ---
 
@@ -20,7 +19,6 @@ For more information on how to customize ima apps though `ima.config.js` or how
 npm install @ima/cli --save-dev
 ```
 
-
 ## Usage
 
 ```

packages/cli/src/types.ts

@@ -210,7 +210,7 @@ export type ImaConfig = {
     publicUrl?: string; // public url used to access static files [default=localhost:3101]
 
     /**
-     * Optional custom ima app origin (defaults to http://localhost:[environment.$Server.port])
+     * Optional custom ima app origin (defaults to http\://localhost:[environment.$Server.port])
      * this is used for CORS configuration.
      */
     origin?: string;

packages/core/src/http/HttpAgentImpl.ts

@@ -500,8 +500,6 @@ export class HttpAgentImpl extends HttpAgent {
    */
   _setCookiesFromResponse<B>(agentResponse: HttpAgentResponse<B>): void {
     if (agentResponse.headersRaw) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore - This is due to old typescript version in docusaurus, will be fixed with docusaurus v3 update
       const receivedCookies = agentResponse.headersRaw.getSetCookie();
 
       if (receivedCookies.length > 0) {

packages/core/src/router/RouterEvents.ts

@@ -5,9 +5,8 @@ export enum RouterEvents {
   /**
    * Router fire event `$IMA.$Router.beforeHandleRoute` before page
    * manager handle the route. Event's data contain
-   * `{ params: Object<string, string>`, route: ima.core.router.AbstractRoute,
-   * path: string, options: Object<string, *>}}. The `path` is current
-   * path, the `params` are params extracted from path, the
+   * `{ params: Object<string, string>, route: ima.core.router.AbstractRoute, path: string, options: Object<string, any>}`.
+   * The `path` is current path, the `params` are params extracted from path, the
    * `route` is handle route for path and the `options` is route
    * additional options.
    */
@@ -16,8 +15,8 @@ export enum RouterEvents {
   /**
    * Router fire event `$IMA.$Router.afterHandleRoute` after page
    * manager handle the route. Event's data contain
-   * `{response: Object<string, *>, params: Object<string, string>`,
-   * route: ima.core.router.AbstractRoute, path: string, options: Object<string, *>}}.
+   * `{response: Object<string, any>, params: Object<string, string>`,
+   * `route: ima.core.router.AbstractRoute, path: string, options: Object<string, *>}`.
    * The `response` is page render result. The `path` is current
    * path, the `params` are params extracted from path, the
    * `route` is handle route for path and the `options` is route

packages/dev-utils/README.md

@@ -1,10 +1,9 @@
 <p align="center">
-  <img height="130" src="https://imajs.io/img/logo.svg">
+  <img height="130" src="https://imajs.io/img/logo.svg" />
 </p>
 
 <h1 align="center">@ima/dev-utils</h1>
-  <p align="center"><i>Used to share common methods and utils used across other dev packages (@ima/cli, @ima/error-overlay, etc.).</i>
-</p>
+<p align="center"><i>Used to share common methods and utils used across other dev packages (@ima/cli, @ima/error-overlay, etc.).</i></p>
 
 ---
 

packages/plugin-cli/README.md

@@ -1,10 +1,9 @@
 <p align="center">
-  <img height="130" src="https://imajs.io/img/logo.svg">
+  <img height="130" src="https://imajs.io/img/logo.svg" />
 </p>
 
 <h1 align="center">@ima/plugin-cli</h1>
-  <p align="center"><i><code>@ima/plugin-cli</code> takes care of building, linking and watching IMA.js plugins.</i>
-</p>
+<p align="center"><i><code>@ima/plugin-cli</code> takes care of building, linking and watching IMA.js plugins.</i></p>
 
 ---
 

website/docusaurus.config.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 const themes = require('prism-react-renderer').themes;
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.palenight;
@@ -36,25 +34,12 @@ const config = {
         jsDocCompatibility: true,
         exclude: 'index',
         readme: 'none',
-        out: '../../docs/api',
+        out: '../docs/api',
         sidebar: {
           fullNames: true,
         },
       },
     ],
-    () => ({
-      name: 'resolve-react',
-      configureWebpack() {
-        return {
-          resolve: {
-            alias: {
-              // Fix for webpack loading conflicting versions of react
-              react: path.resolve('./node_modules/react'),
-            },
-          },
-        };
-      },
-    }),
   ],
   presets: [
     [

website/package.json

@@ -16,18 +16,15 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.3",
-    "@docusaurus/preset-classic": "^2.4.3",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.4.3",
-    "@mdx-js/react": "^1.6.22",
-    "akar-icons": "^1.9.28",
-    "clsx": "^1.2.1",
-    "docusaurus-plugin-typedoc": "^0.19.2",
-    "prism-react-renderer": "^2.0.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typedoc": "^0.24.7",
-    "typedoc-plugin-markdown": "^3.15.3"
+    "@docusaurus/core": "^3.7.0",
+    "@docusaurus/preset-classic": "^3.7.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
+    "@mdx-js/react": "^3.1.0",
+    "akar-icons": "^1.9.31",
+    "clsx": "^2.1.1",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "browserslist": {
     "production": [
@@ -40,5 +37,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "docusaurus-plugin-typedoc": "^1.2.3",
+    "typedoc": "^0.27.6",
+    "typedoc-plugin-markdown": "^4.4.1"
   }
 }