some cleanup and fixes: upgrade to react 17

src/core/builtins/attributes/modules/components/modals/ImageCarousel.js

@@ -17,8 +17,8 @@ export default builtin => {
       const ogRef = res.ref;
       res.ref = elem => {
         const r = ogRef(elem);
-        if (elem?._reactInternalFiber) {
-          const container = findInTree(elem._reactInternalFiber?.return, el => el?.stateNode?.setAttribute, { walkable: [ 'return' ] });
+        if (elem?._reactInternals) {
+          const container = findInTree(elem._reactInternals?.return, el => el?.stateNode?.setAttribute, { walkable: [ 'return' ] });
           container?.stateNode?.parentElement?.setAttribute('vz-modal', 'image-carousel');
         }
         return r;

src/core/builtins/attributes/modules/components/modals/User.js

@@ -15,8 +15,8 @@ export default builtin => {
   patch('vz-attributes-modal-user', UserProfile, 'default', ([ props ], res) => {
     try {
       res.ref = elem => {
-        if (elem?._reactInternalFiber) {
-          const container = findInTree(elem._reactInternalFiber.return, el => el.stateNode?.setAttribute, { walkable: [ 'return' ] });
+        if (elem?._reactInternals) {
+          const container = findInTree(elem._reactInternals.return, el => el.stateNode?.setAttribute, { walkable: [ 'return' ] });
           container?.stateNode?.children[0]?.setAttribute('vz-user-id', props?.user?.id);
           container?.stateNode?.children[0]?.setAttribute('vz-guild-id', props?.guildId);
           container?.stateNode?.parentElement?.setAttribute('vz-modal', 'user');

src/core/builtins/attributes/modules/guilds/Guild.js

@@ -15,7 +15,7 @@ export default async builtin => {
   const { blobContainer } = getModule('blobContainer');
   const { listItem } = getModule('guildSeparator', 'listItem');
   const instance = getOwnerInstance(await waitForElement(`.${blobContainer}`));
-  const reactInstance = instance?._reactInternalFiber || instance?._reactInternals;
+  const reactInstance = instance?._reactInternals;
   const Guild = findInTree(reactInstance, n => n.type?.displayName === 'Guild', { walkable: [ 'return' ] })?.type;
   patch('vz-attributes-guilds', Guild?.prototype, 'render', function (_, res) {
     try {

src/core/builtins/dashboard/styles/pages/home/_cta.scss

@@ -4,23 +4,22 @@
 .vz-dashboard-home-cta {
   position: relative;
   width: 100%;
-  height: 500px;
+  min-height: 400px;
+  height: 40vh;
   display: flex;
   align-items: center;
   overflow: hidden;
   &-icon-wrapper {
     &.vz-icon-wrapper {
-      @include vz.size(400px, auto);
+      min-width: 400px;
+      width: 40vh;
+      height: auto;
       position: absolute;
-      right: 100px;
-      bottom: -20px;
+      right: 10%;
+      bottom: -10%;
       color: #fff;
-      @at-root {
-        @media (max-width: 1750px) {
-          & {
-            display: none;
-          }
-        }
+      @media (max-width: 1750px) {
+        display: none;
       }
     }
   }

src/core/builtins/router/index.js

@@ -11,11 +11,10 @@ import { isArray } from '@vizality/util/array';
 import { Events } from '@vizality/constants';
 import { Builtin } from '@vizality/entities';
 import React, { useEffect } from 'react';
-import { AnimateSharedLayout, AnimatePresence, motion } from 'framer-motion';
 
 export default class Router extends Builtin {
   /**
-   * Starts up the addon.
+   * Starts up the builtin.
    * @returns {Promise<void>}
    */
   async start () {
@@ -28,7 +27,7 @@ export default class Router extends Builtin {
   }
 
   /**
-   * Shuts down the addon.
+   * Shuts down the builtin.
    * @returns {void}
    */
   stop () {
@@ -147,14 +146,14 @@ export default class Router extends Builtin {
             child.type = props => {
               try {
                 let ret = Reflect.apply(oType, null, [ props ]);
-                ret.props.className = joinClassNames('vz-dashboard-sidebar', ret.props.className);
                 if (vizality.api.routes.getLocation()?.pathname?.startsWith('/vizality')) {
                 /**
                  * Add and remove collapsed and expanded attributes based on the setting.
                  */
+                  ret.props.className = joinClassNames('vz-dashboard-sidebar', ret.props.className);
                   ret.props['vz-collapsed'] = vizality.settings.get('dashboardSidebarCollapse', false) && '';
                   ret.props['vz-expanded'] = !vizality.settings.get('dashboardSidebarCollapse', false) && '';
-                  const rawPath = vizality.api.routes.getLocation().pathname.substring('vizality'.length + 1);
+                  const rawPath = vizality.api.routes.getLocation().pathname.substring('vizality/'.length);
                   const route = vizality.api.routes.getAllRoutes()?.find(rte => rawPath.startsWith(rte.path));
                   if (route && route.sidebar) {
                     const Sidebar = route.sidebar;
@@ -192,7 +191,7 @@ export default class Router extends Builtin {
        */
       const { app } = await getModule('app', true);
       const viewsInstance = getOwnerInstance(await waitForElement(`.${app}`));
-      findInTree(viewsInstance?._reactInternalFiber, n => n?.historyUnlisten, { walkable: [ 'child', 'stateNode' ] })?.forceUpdate();
+      findInTree(viewsInstance?._reactInternals, n => n?.historyUnlisten, { walkable: [ 'child', 'stateNode' ] })?.forceUpdate();
       /**
        * Routes
        */

src/core/builtins/settings/components/Settings.jsx

@@ -1,12 +1,9 @@
-import { Flex, TextBadge, FilterInput, Markdown, Divider } from '@vizality/components';
+import { Flex, TextBadge, FilterInput, Markdown } from '@vizality/components';
 import { ContentSidebar, Section } from '@vizality/components/dashboard';
 import { SelectInput } from '@vizality/components/settings';
-import { joinClassNames } from '@vizality/util/dom';
-import { unstable_batchedUpdates } from 'react-dom';
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState } from 'react';
 import { getModule } from '@vizality/webpack';
 import { Settings } from '@vizality/api';
-import { isEqual } from 'lodash';
 
 import Notifications from './Notifications';
 import Appearance from './Appearance';

src/core/modules/components/Markdown.jsx

@@ -1,13 +1,12 @@
 import React, { memo, useState, useEffect, Children } from 'react';
+import { toKebabCase, isUrl } from '@vizality/util/string';
 import { getModule, contextMenu } from '@vizality/webpack';
 import { getMediaDimensions } from '@vizality/util/file';
-import { toKebabCase, isUrl } from '@vizality/util/string';
 import { open as openModal } from '@vizality/modal';
 import { joinClassNames } from '@vizality/util/dom';
 import { Regexes } from '@vizality/constants';
 import { existsSync, promises } from 'fs';
 import Markdown from 'react-markdown';
-import { get } from '@vizality/http';
 import gfm from 'remark-gfm';
 
 import { CodeBlock, Icon, DeferredRender, Spinner, LazyImageZoomable, ImageModal, Anchor, ContextMenu } from '.';
@@ -99,7 +98,7 @@ export default memo(({ source, git, type, addonId }) => {
       </p>;
     },
 
-    ul: ({ ordered, start, children }) => {
+    ul: ({ _ordered, start, children }) => {
       const attrs = {};
       if (start !== null && start !== 1 && start !== undefined) {
         attrs.start = start.toString();
@@ -114,7 +113,7 @@ export default memo(({ source, git, type, addonId }) => {
       );
     },
 
-    ol: ({ ordered, start, children }) => {
+    ol: ({ _ordered, start, children }) => {
       const attrs = {};
       if (start !== null && start !== 1 && start !== undefined) {
         attrs.start = start.toString();
@@ -214,7 +213,7 @@ export default memo(({ source, git, type, addonId }) => {
           setSize(dimensions);
         }
         getSrc();
-      }, [])
+      }, []);
 
       return (
         <LazyImageZoomable

src/core/modules/components/vizality/SettingsContextMenu.jsx

@@ -37,15 +37,24 @@ export default memo(() => {
    * Creates a sorted array containing all installed plugins.
    */
   const plugins = [ ...vizality.manager.plugins.values ];
- 
+
   /**
    * Creates a sorted array containing all installed themes.
    */
   const themes = [ ...vizality.manager.themes.values ];
+
+
+  /**
+   * Set up our filter for plugins.
+   */
   const [ pluginsQuery, setPluginsQuery, filteredPlugins ] = useFilter({
     keys: [ 'manifest.name' ],
     data: plugins
   });
+
+  /**
+   * Set up our filter for themes.
+   */
   const [ themesQuery, setThemesQuery, filteredThemes ] = useFilter({
     keys: [ 'manifest.name' ],
     data: themes

src/core/modules/react/index.js

@@ -84,7 +84,7 @@ export const getComponentBySelector = selector => {
     const node = await waitForElement(selector);
     const instance = getOwnerInstance(node);
     if (!instance) return;
-    const type = instance._reactInternalFiber?.type;
+    const type = instance._reactInternals?.type;
     if (!type) return;
     let displayName = null;
     if (type.displayName) ({ displayName } = type);