Code cleanups and finish converting to @ alias modules

.eslintrc.json

@@ -100,7 +100,7 @@
     "no-self-compare": [ "warn" ],
     "no-sequences": [ "warn" ],
     "no-unmodified-loop-condition": [ "warn" ],
-    "no-unused-expressions": [ "warn" ],
+    "no-unused-expressions": [ "warn", { "allowTernary": true } ],
     "no-unused-labels": [ "warn" ],
     "no-useless-call": [ "warn" ],
     "no-useless-concat": [ "warn" ],

.gitignore

@@ -1,14 +1,10 @@
-.idea
 /.cache
 /.logs
 node_modules
 package-lock.json
-yarn.lock
-pnpm-lock.yaml
 
-src/Vizality/plugins/*
+# src/Vizality/plugins/*
 !src/Vizality/plugins/vz-*
-
 src/Vizality/plugins/vz-react-dev-tools/rdt.crx
 src/Vizality/plugins/vz-react-dev-tools/react-dev-tools/*
 
@@ -18,6 +14,5 @@ src/Vizality/themes/*
 
 settings/*.json
 
-config.json
 *injected.txt
-*.nogit.*
+*.nogit.*

package.json

@@ -19,6 +19,7 @@
     "vizality": "src/Vizality/modules",
     "@root": ".",
     "@classes": "src/Vizality/modules/classes",
+    "@compilers": "src/Vizality/modules/compilers",
     "@components": "src/Vizality/modules/components",
     "@constants": "src/Vizality/modules/constants",
     "@discord": "src/Vizality/modules/discord",

src/Vizality/modules/classes/index.js

@@ -40,5 +40,5 @@ const SassClassFolder = join(LIBRARIES_FOLDER, 'sass', 'classes');
 if (!existsSync(SassClassFolder)) {
   _generateSassClasses();
 } else {
-  log(MODULE, SUBMODULE, null, `Directory 'src\\Vizality\\libraries\\sass\\classes' already exists. Skipping Sass class repopulation...`);
+  log(MODULE, SUBMODULE, null, `Directory 'src\\Vizality\\libraries\\sass\\classes' already exists. Skipping Sass class generation...`);
 }

src/Vizality/modules/components/AsyncComponent.js

@@ -1,6 +1,6 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
-module.exports = class AsyncComponent extends React.PureComponent {
+class AsyncComponent extends React.PureComponent {
   constructor (props) {
     super(props);
     this.state = {
@@ -35,4 +35,6 @@ module.exports = class AsyncComponent extends React.PureComponent {
       })
     );
   }
-};
+}
+
+module.exports = AsyncComponent;

src/Vizality/modules/components/Badge.jsx

@@ -1,6 +1,8 @@
-const { React } = require('vizality/webpack');
-const { joinClassNames } = require('vizality/util');
+const { React } = require('@webpack');
+const { joinClassNames } = require('@util');
 
-module.exports = React.memo(({ type, className, ...props }) =>
+const Badge = React.memo(({ type, className, ...props }) =>
   <div className={joinClassNames('vizality-badge', type, className)} {...props}></div>
 );
+
+module.exports = Badge;

src/Vizality/modules/components/ContextMenu.jsx

@@ -1,5 +1,5 @@
-const { React, getModule, contextMenu: { closeContextMenu } } = require('vizality/webpack');
-const { dom: { waitFor }, react: { getOwnerInstance } } = require('vizality/util');
+const { React, getModule, contextMenu: { closeContextMenu } } = require('@webpack');
+const { dom: { waitForElement }, react: { getOwnerInstance } } = require('@util');
 
 class ContextMenu extends React.PureComponent {
   constructor (props) {
@@ -80,7 +80,7 @@ class ContextMenu extends React.PureComponent {
         subtext={item.subtext}
         action={() => {
           if (item.disabled) {
-            waitFor('#app-mount > div[class] > div').then(app => getOwnerInstance(app).shake(600, 5));
+            waitForElement('#app-mount > div[class] > div').then(app => getOwnerInstance(app).shake(600, 5));
           } else if (item.onClick) {
             item.onClick();
           }

src/Vizality/modules/components/Divider.jsx

@@ -1,8 +1,11 @@
-const { React, getModule } = require('vizality/webpack');
+const { React, getModule } = require('@webpack');
+
 const AsyncComponent = require('./AsyncComponent');
 
-module.exports = AsyncComponent.from((() => {
+const Divider = AsyncComponent.from((() => {
   const { dividerDefault } = getModule('dividerDefault');
   const { divider } = getModule(m => m.divider && Object.keys(m).length === 1);
   return () => <div className={`${divider} ${dividerDefault}`}/>;
 })());
+
+module.exports = Divider;

src/Vizality/modules/components/Icon.jsx

@@ -1,8 +1,10 @@
-const { React } = require('vizality/webpack');
-const { joinClassNames } = require('vizality/util');
+const { React } = require('@webpack');
+const { joinClassNames } = require('@util');
 
-module.exports = React.memo(({ type, wrapperClassName, className, ...props }) =>
+const Icon = React.memo(({ type, wrapperClassName, className, ...props }) =>
   <div className={joinClassNames('vizality-icon-wrapper', wrapperClassName)}>
     <icon className={joinClassNames('vizality-icon', type, className)} {...props}></icon>
   </div>
 );
+
+module.exports = Icon;

src/Vizality/modules/components/Icons/Arch.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 // Btw have I told you I use Arch?
 module.exports = React.memo(

src/Vizality/modules/components/Icons/Bin.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 21" {...props}>

src/Vizality/modules/components/Icons/Certificate.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Chemistry.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 1024" {...props}>

src/Vizality/modules/components/Icons/Close.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" {...props}>

src/Vizality/modules/components/Icons/CloudDownload.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 21' {...props}>

src/Vizality/modules/components/Icons/CloudUpload.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>

src/Vizality/modules/components/Icons/CodeBraces.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Copy.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Discord.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 245 240' {...props}>

src/Vizality/modules/components/Icons/ExternalLink.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/FontAwesome.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => {

src/Vizality/modules/components/Icons/Gear.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/GitHub.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/ImportExport.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Info.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Key.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Keyboard.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Overflow.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Person.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/PersonShield.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 23" {...props}>

src/Vizality/modules/components/Icons/Pin.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Plugin.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/PowercordCutie.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416.8 139.8" {...props}>

src/Vizality/modules/components/Icons/Receipt.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 20" {...props}>

src/Vizality/modules/components/Icons/ReportFlag.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Scale.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" {...props}>

src/Vizality/modules/components/Icons/SdkWordmark.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 117 16" {...props}>

src/Vizality/modules/components/Icons/Server.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Spotify.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' {...props}>

src/Vizality/modules/components/Icons/Sync.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Tag.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Theme.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/ThumbsDown.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12" {...props}>

src/Vizality/modules/components/Icons/ThumbsUp.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 14" {...props}>

src/Vizality/modules/components/Icons/Unlink.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/Unpin.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>

src/Vizality/modules/components/Icons/Verified.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' {...props}>

src/Vizality/modules/components/Icons/badges/Contributor.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" {...props}>

src/Vizality/modules/components/Icons/badges/Developer.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" {...props}>

src/Vizality/modules/components/Icons/badges/Early.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" {...props}>

src/Vizality/modules/components/Icons/badges/Hunter.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 558 558" {...props}>

src/Vizality/modules/components/Icons/badges/Staff.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>

src/Vizality/modules/components/Icons/badges/Translator.jsx

@@ -1,4 +1,4 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
 
 module.exports = React.memo(
   (props) => <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>

src/Vizality/modules/components/Icons/index.js

@@ -1,4 +1,5 @@
 /**
+ * @powercord:
  * This directory is only here to allow Powercord
  * plugins to continue to work that use them. Rather than
  * insert SVGs as React elements, which makes sense from a
@@ -8,7 +9,7 @@
  * by inserting the icons as divs and styling them with CSS
  * custom properties with encoded SVG values and masking.
  *
- * Prefer to use const { Icon } = require('vizality/components');
+ * Prefer to use const { Icon } = require('@components');
  */
 
 require('fs')

src/Vizality/modules/components/PopoutWindow.jsx

@@ -1,6 +1,5 @@
-/* eslint-disable no-unreachable */
+const { getModuleByDisplayName } = require('@webpack');
 
-const { getModuleByDisplayName } = require('vizality/webpack');
 const AsyncComponent = require('./AsyncComponent');
 
 module.exports = AsyncComponent.from((async () => {

src/Vizality/modules/components/ReactHelmet.js

@@ -1,4 +1,5 @@
-const { getModule } = require('vizality/webpack');
+const { getModule } = require('@webpack');
+
 const AsyncComponent = require('./AsyncComponent');
 
 module.exports = {

src/Vizality/modules/components/index.js

@@ -1,4 +1,5 @@
-const { getModule, getModuleByDisplayName } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName } = require('@webpack');
+
 const AsyncComponent = require('./AsyncComponent');
 
 require('fs')

src/Vizality/modules/components/modal.js

@@ -4,10 +4,10 @@
  * has been changed to ConfirmationModal and both have
  * been added to index.
  *
- * Prefer to use const { Modal, ConfirmationModal } = require('vizality/components');
+ * Prefer to use const { Modal, ConfirmationModal } = require('@components');
  */
 
-const { getModuleByDisplayName } = require('vizality/webpack');
+const { getModuleByDisplayName, modal } = require('@webpack');
 const AsyncComponent = require('./AsyncComponent');
 
 require('fs')
@@ -19,14 +19,21 @@ require('fs')
   });
 
 Object.assign(exports, {
-  Confirm: AsyncComponent.from(getModuleByDisplayName('Confirm', true)),
+  Confirm: AsyncComponent.from(getModuleByDisplayName('ConfirmModal', true)),
   Modal: AsyncComponent.from(getModuleByDisplayName('DeprecatedModal', true))
 });
 
 // Re-export module properties
 (async () => {
   const Modal = await getModuleByDisplayName('DeprecatedModal', true, true);
-  const Confirm = await getModuleByDisplayName('Confirm', true, true);
-  [ 'Header', 'Footer', 'Content', 'LazyContent', 'CloseButton', 'Sizes' ].forEach(prop => exports.Modal[prop] = Modal[prop]);
-  [ 'Sizes' ].forEach(prop => exports.Confirm[prop] = Confirm[prop]);
+  [ 'Header', 'Footer', 'Content', 'ListContent', 'CloseButton', 'Sizes' ].forEach(prop => exports.Modal[prop] = Modal[prop]);
+  /*
+   * ???
+   * const Confirm = await getModuleByDisplayName('ConfirmModal', true, true);
+   * [ 'transitionState', 'onClose' ].forEach(prop => exports.Confirm.defaultProps[prop] = Confirm.defaultProps[prop]);
+   */
+  exports.Confirm.defaultProps = {
+    transitionState: 1,
+    onClose: modal.pop
+  };
 })();

src/Vizality/modules/components/settings/ButtonItem.jsx

@@ -1,4 +1,5 @@
-const { getModule, getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 
 const DFormItem = AsyncComponent.from(getModuleByDisplayName('FormItem', true));
@@ -15,7 +16,7 @@ let classes = {
   classDescription: ''
 };
 
-module.exports = class ButtonItem extends React.PureComponent {
+class ButtonItem extends React.PureComponent {
   constructor () {
     super();
 
@@ -73,4 +74,6 @@ module.exports = class ButtonItem extends React.PureComponent {
       <div className={`${classes.classDivider} ${classes.classDividerDef}`} />
     </DFormItem>;
   }
-};
+}
+
+module.exports = ButtonItem;

src/Vizality/modules/components/settings/Category.jsx

@@ -1,4 +1,5 @@
-const { getModule, getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 
 const DFormItem = AsyncComponent.from(getModuleByDisplayName('FormItem', true));
@@ -14,7 +15,7 @@ let classes = {
   classDescription: ''
 };
 
-module.exports = class Category extends React.PureComponent {
+class Category extends React.PureComponent {
   constructor (props) {
     super(props);
     this.state = { classes };
@@ -67,4 +68,6 @@ module.exports = class Category extends React.PureComponent {
       </DFormItem>
     );
   }
-};
+}
+
+module.exports = Category;

src/Vizality/modules/components/settings/Checkbox.jsx

@@ -1,7 +1,8 @@
 /**
  * @todo: Fix this
  *
- * const { React, getModuleByDisplayName } = require('vizality/webpack');
+ * const { React, getModuleByDisplayName } = require('@webpack');
+ *
  * const AsyncComponent = require('../AsyncComponent');
  * const FormItem = require('./FormItem');
  */
@@ -9,7 +10,7 @@
 // const Box = AsyncComponent.from(getModuleByDisplayName('Checkbox'));
 
 /*
- * module.exports = class Checkbox extends React.Component {
+ * class Checkbox extends React.Component {
  *   render () {
  *     const { children: title, note, required, text } = this.props;
  *     const Text = this.props.children;
@@ -21,7 +22,9 @@
  *       </FormItem>
  *     );
  *   }
- * };
+ * }
+ *
+ * module.exports = Checkbox;
  */
 
 /**

src/Vizality/modules/components/settings/ColorPickerInput.jsx

@@ -1,4 +1,5 @@
-const { React, getModule, getModuleByDisplayName, constants: { DEFAULT_ROLE_COLOR, ROLE_COLORS } } = require('vizality/webpack');
+const { React, getModule, getModuleByDisplayName, constants: { DEFAULT_ROLE_COLOR, ROLE_COLORS } } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 

src/Vizality/modules/components/settings/CopyInput.jsx

@@ -1,10 +1,11 @@
-const { getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
 const Copy = AsyncComponent.from(getModuleByDisplayName('CopyInput', true));
 
-module.exports = class CopyInput extends React.PureComponent {
+class CopyInput extends React.PureComponent {
   render () {
     const { children: title, note, required } = this.props;
     delete this.props.children;
@@ -16,7 +17,9 @@ module.exports = class CopyInput extends React.PureComponent {
       </FormItem>
     );
   }
-};
+}
+
+module.exports = CopyInput;
 
 /**
  * AVAILABLE PROPS

src/Vizality/modules/components/settings/FormItem.jsx

@@ -1,11 +1,12 @@
-const { getModule, getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const Divider = require('../Divider');
 
 const DFormItem = AsyncComponent.from(getModuleByDisplayName('FormItem', true));
 const FormText = AsyncComponent.from(getModuleByDisplayName('FormText', true));
 
-module.exports = class FormItem extends React.PureComponent {
+class FormItem extends React.PureComponent {
   render () {
     const Flex = getModuleByDisplayName('Flex');
     const margins = getModule('marginTop20');
@@ -26,4 +27,6 @@ module.exports = class FormItem extends React.PureComponent {
       </DFormItem>
     );
   }
-};
+}
+
+module.exports = FormItem;

src/Vizality/modules/components/settings/KeybindRecorder.jsx

@@ -1,4 +1,5 @@
-const { React } = require('vizality/webpack');
+const { React } = require('@webpack');
+
 const FormItem = require('./FormItem');
 
 const renameKeys = Object.freeze({
@@ -14,7 +15,7 @@ const renameKeys = Object.freeze({
   AudioVolumeMute: 'VolumeMute'
 });
 
-module.exports = class TextInput extends React.PureComponent {
+class KeybindRecorder extends React.PureComponent {
   constructor (props) {
     super(props);
     this.state = {
@@ -133,4 +134,6 @@ module.exports = class TextInput extends React.PureComponent {
       });
     }
   }
-};
+}
+
+module.exports = KeybindRecorder;

src/Vizality/modules/components/settings/PermissionOverrideItem.jsx

@@ -1,13 +1,14 @@
 /**
  * @todo: Fix this
  *
- * const { getModuleByDisplayName, React } = require('vizality/webpack');
+ * const { getModuleByDisplayName, React } = require('@webpack');
+ *
  * const AsyncComponent = require('../AsyncComponent');
  * const FormItem = require('./FormItem');
  *
- * const PermissionOverride = AsyncComponent.from(getModuleByDisplayName('PermissionOverrideItem'));
+ * const DPermissionOverride = AsyncComponent.from(getModuleByDisplayName('PermissionOverrideItem'));
  *
- * module.exports = class TextInput extends React.Component {
+ * class PermissionOverride extends React.Component {
  * render () {
  * const { children: title, note, required } = this.props;
  * delete this.props.children;
@@ -18,7 +19,9 @@
  * </FormItem>
  * );
  * }
- * };
+ * }
+ *
+ * module.exports = PermissionOverride;
  *
  * /**
  * AVAILABLE PROPS

src/Vizality/modules/components/settings/RadioGroup.jsx

@@ -1,11 +1,12 @@
-const { getModule, getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
 const DRadioGroup = AsyncComponent.from(getModuleByDisplayName('RadioGroup', true));
 
 let margin = '';
-module.exports = class RadioGroup extends React.PureComponent {
+class RadioGroup extends React.PureComponent {
   constructor () {
     super();
     this.state = { margin };
@@ -28,4 +29,6 @@ module.exports = class RadioGroup extends React.PureComponent {
       </FormItem>
     );
   }
-};
+}
+
+module.exports = RadioGroup;

src/Vizality/modules/components/settings/RegionSelector.jsx

@@ -1,9 +1,12 @@
-const { React, getModuleByDisplayName } = require('vizality/webpack');
+const { React, getModuleByDisplayName } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
-const DRegionSelector = AsyncComponent.from(getModuleByDisplayName('RegionSelector', true));
+const DRegionSelect = AsyncComponent.from(getModuleByDisplayName('RegionSelector', true));
+
+class RegionSelect extends React.PureComponent {
 
-module.exports = class RegionSelector extends React.PureComponent {
+}
 
-};
+module.exports = RegionSelect;

src/Vizality/modules/components/settings/SelectInput.jsx

@@ -1,4 +1,5 @@
-const { getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 

src/Vizality/modules/components/settings/SliderInput.jsx

@@ -1,10 +1,11 @@
-const { getModule, getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModule, getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
 const Slider = AsyncComponent.from(getModuleByDisplayName('Slider', true));
 
-module.exports = class SliderInput extends React.PureComponent {
+class SliderInput extends React.PureComponent {
   render () {
     const { marginTop20 } = getModule('marginTop20');
     const { children: title, note, required } = this.props;
@@ -19,4 +20,6 @@ module.exports = class SliderInput extends React.PureComponent {
       </FormItem>
     );
   }
-};
+}
+
+module.exports = SliderInput;

src/Vizality/modules/components/settings/TextArea.jsx

@@ -1,10 +1,11 @@
-const { getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
 const Area = AsyncComponent.from(getModuleByDisplayName('TextArea', true));
 
-module.exports = class TextArea extends React.PureComponent {
+class TextArea extends React.PureComponent {
   render () {
     const { children: title, note, required } = this.props;
     delete this.props.children;
@@ -15,7 +16,9 @@ module.exports = class TextArea extends React.PureComponent {
       </FormItem>
     );
   }
-};
+}
+
+module.exports = TextArea;
 
 /**
  * AVAILABLE PROPS

src/Vizality/modules/components/settings/TextInput.jsx

@@ -1,10 +1,11 @@
-const { getModuleByDisplayName, React } = require('vizality/webpack');
+const { getModuleByDisplayName, React } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 const FormItem = require('./FormItem');
 
 const Input = AsyncComponent.from(getModuleByDisplayName('TextInput', true));
 
-module.exports = class TextInput extends React.PureComponent {
+class TextInput extends React.PureComponent {
   render () {
     const { children: title, note, required } = this.props;
     delete this.props.children;
@@ -15,4 +16,6 @@ module.exports = class TextInput extends React.PureComponent {
       </FormItem>
     );
   }
-};
+}
+
+module.exports = TextInput;

src/Vizality/modules/components/settings/index.js

@@ -1,4 +1,5 @@
-const { getModuleByDisplayName } = require('vizality/webpack');
+const { getModuleByDisplayName } = require('@webpack');
+
 const AsyncComponent = require('../AsyncComponent');
 
 require('fs')

src/Vizality/modules/constants/index.js

@@ -1,6 +1,6 @@
 const { join } = require('path');
 
-module.exports = Object.freeze({
+const constants = Object.freeze({
   // Vizality
   WEBSITE: 'https://vizality.com',
   ASSETS: 'https://vizality.com/app/assets',
@@ -21,6 +21,7 @@ module.exports = Object.freeze({
   GUILD_ID: '689933814864150552',
   MAGIC_CHANNELS: {
     CSS_SNIPPETS: '705262981214371902',
+    JS_SNIPPETS: '705262981214371902',
     STORE_PLUGINS: '700461738004578334',
     STORE_THEMES: '700461710972157954',
     STAFF_LOUNGE: '690452551233175602',
@@ -31,3 +32,5 @@ module.exports = Object.freeze({
     }
   }
 });
+
+module.exports = constants;

src/Vizality/modules/discord/routes/getCurrentRoute.js

@@ -1,4 +1,4 @@
-const { logger: { warn } } = require('vizality/util');
+const { logger: { warn } } = require('@util');
 /* const currentWebContents = require('electron').remote.getCurrentWebContents(); */
 
 const _getRoutes = require('./_getRoutes');

src/Vizality/modules/discord/routes/getRoutes.js

@@ -1,4 +1,4 @@
-const { logger: { log } } = require('vizality/util');
+const { logger: { log } } = require('@util');
 
 const _getRoutes = require('./_getRoutes');
 

src/Vizality/modules/discord/routes/goTo.js

@@ -1,5 +1,5 @@
-const { constants: { Routes }, getModule } = require('vizality/webpack');
-const { logger: { warn } } = require('vizality/util');
+const { constants: { Routes }, getModule } = require('@webpack');
+const { logger: { warn } } = require('@util');
 
 const _getRoutes = require('./_getRoutes');
 

src/Vizality/modules/discord/settings/close.js

@@ -1,4 +1,4 @@
-const { getModule } = require('vizality/webpack');
+const { getModule } = require('@webpack');
 
 const close = () => {
   const { popLayer } = getModule('popLayer');

src/Vizality/modules/discord/settings/getSections.js

@@ -1,4 +1,4 @@
-const { getModule } = require('vizality/webpack');
+const { getModule } = require('@webpack');
 
 const getSections = () => {
   const { UserSettingsSections } = getModule('UserSettingsSections');

src/Vizality/modules/discord/settings/getSetting.js

@@ -1,5 +1,6 @@
-const { getModule } = require('vizality/webpack');
-const { logger: { warn } } = require('vizality/util');
+const { getModule } = require('@webpack');
+const { logger: { warn } } = require('@util');
+
 const getSettingInfo = require('./getSettingInfo');
 
 const getSetting = (setting) => {

src/Vizality/modules/discord/settings/getSettingInfo.js

@@ -1,4 +1,4 @@
-const { logger: { log, warn } } = require('vizality/util');
+const { logger: { log, warn } } = require('@util');
 
 const getSettingInfo = (setting) => {
   const MODULE = 'Module';

src/Vizality/modules/discord/settings/open.js

@@ -1,5 +1,5 @@
-const { getModule } = require('vizality/webpack');
-const { logger: { warn } } = require('vizality/util');
+const { getModule } = require('@webpack');
+const { logger: { warn } } = require('@util');
 
 const getSections = require('./getSections');
 

src/Vizality/modules/discord/settings/setSetting.js

@@ -1,7 +1,5 @@
-/* eslint-disable prefer-const */
-
-const { getModule } = require('vizality/webpack');
-const { logger: { warn } } = require('vizality/util');
+const { getModule } = require('@webpack');
+const { logger: { warn } } = require('@util');
 
 const setSetting = async (setting, value, sync = true) => {
   const MODULE = 'Module';

src/Vizality/modules/entities/Plugin.js

@@ -1,7 +1,9 @@
+const { resolveCompiler } = require('@compilers');
+const { sleep, dom: { createElement }, logger } = require('@util');
+
 const { existsSync } = require('fs');
 const { join } = require('path');
-const { sleep, dom: { createElement }, logger } = require('vizality/util');
-const { resolveCompiler } = require('vizality/compilers');
+
 const Updatable = require('./Updatable');
 
 /**

src/Vizality/modules/entities/Theme.js

@@ -1,4 +1,4 @@
-const { resolveCompiler } = require('../compilers');
+const { resolveCompiler } = require('@compilers');
 const { dom: { createElement }, logger } = require('@util');
 
 const Updatable = require('./Updatable');

src/Vizality/modules/http/GenericRequest.js

@@ -2,12 +2,13 @@
  * Forked from DevYukine's http module and Snekfetch
  */
 
+const { logger : { log } } = require('@util');
+const { REPO } = require('@constants');
+
 const querystring = require('querystring');
 const https = require('https');
 const http = require('http');
 const url = require('url');
-const { logger : { log } } = require('vizality/util');
-const { REPO } = require('vizality/constants');
 
 /**
  * @typedef HTTPResponse

src/Vizality/modules/injector/_runInjections.js

@@ -1,4 +1,4 @@
-const { logger : { error } } = require('vizality/util');
+const { logger : { error } } = require('@util');
 
 const Injector = require('../injector');
 

src/Vizality/modules/injector/_runPreInjectionsRecursive.js

@@ -1,4 +1,4 @@
-const { logger : { error } } = require('vizality/util');
+const { logger : { error } } = require('@util');
 
 const Injector = require('../injector');
 

src/Vizality/modules/injector/inject.js

@@ -1,4 +1,5 @@
-const { logger : { error } } = require('vizality/util');
+const { logger : { error } } = require('@util');
+
 const { randomBytes } = require('crypto');
 
 const Injector = require('../injector');

src/Vizality/modules/injector/isInjected.js

@@ -1,4 +1,4 @@
-const Injector = require('../injector');
+const Injector = require('@injector');
 
 /**
  * Check if a function is injected

src/Vizality/modules/injector/uninject.js

@@ -1,4 +1,4 @@
-const Injector = require('../injector');
+const Injector = require('@injector');
 
 /**
  * Removes an injection

src/Vizality/modules/modal.js

@@ -1,4 +1,4 @@
-const { React, modal } = require('vizality/webpack');
+const { React, modal } = require('@webpack');
 
 module.exports = {
   /**

src/Vizality/modules/util/color/getContrasted.js

@@ -1,6 +1,6 @@
 const toHex = require('./toHex');
 
-const getContrast = (color) => {
+const getContrasted = (color) => {
   let r, g, b;
 
   function _hex (arg) {
@@ -23,4 +23,4 @@ const getContrast = (color) => {
   return '#fff';
 };
 
-module.exports = getContrast;
+module.exports = getContrasted;

src/Vizality/modules/util/color/getType.js

@@ -1,4 +1,4 @@
-const logger = require('../logger');
+const { warn } = require('../logger');
 
 const getType = (color) => {
   const MODULE = 'Module';
@@ -22,7 +22,7 @@ const getType = (color) => {
     return 'int';
   }
 
-  return logger.warn(MODULE, SUBMODULE, null, `Input color '${color}' is not a recognized color type.`);
+  return warn(MODULE, SUBMODULE, null, `Input color '${color}' is not a recognized color type.`);
 };
 
 module.exports = getType;

src/Vizality/modules/util/color/toInt.js

@@ -1,4 +1,4 @@
-const warn = require('../logger/warn');
+const { warn } = require('../logger');
 
 const _hex2int = require('./_hex2int');
 const _rgb2int = require('./_rgb2int');

src/Vizality/modules/util/dom/waitFor.js

@@ -1,21 +0,0 @@
-/*
- * @todo: Think about renaming this... Maybe
- * waitForElement or something a bit more descriptive.
- * Also considering reworking the code... As it stands,
- * if the element doesn't exist, it just keeps running
- * forever.
- */
-
-const sleep = require('../sleep');
-
-const waitFor = async (querySelector) => {
-  let elem;
-
-  while (!(elem = document.querySelector(querySelector))) {
-    await sleep(1);
-  }
-
-  return elem;
-};
-
-module.exports = waitFor;

src/Vizality/modules/util/dom/waitForElement.js

@@ -0,0 +1,19 @@
+/*
+ * @todo: Consider reworking this code... As it stands,
+ * if the element doesn't exist, it just keeps running
+ * forever...
+ */
+
+const sleep = require('../sleep');
+
+const waitForElement = async (querySelector) => {
+  let elem;
+
+  while (!(elem = document.querySelector(querySelector))) {
+    await sleep(1);
+  }
+
+  return elem;
+};
+
+module.exports = waitForElement;

src/Vizality/modules/util/joinClassNames.js

@@ -1,11 +1,11 @@
 /**
- * @hack: Figure out why const { getModule } = require('vizality/webpack') doesn't work.
+ * @hack: Figure out why const { getModule } = require('@webpack') doesn't work.
  */
 
 let joinClassNamesModule;
 
 const joinClassNames = (...args) => {
-  if (!joinClassNamesModule) joinClassNamesModule = require('vizality/webpack').getModule(e => e.default && e.default.default);
+  if (!joinClassNamesModule) joinClassNamesModule = require('@webpack').getModule(e => e.default && e.default.default);
 
   return joinClassNamesModule(...args);
 };

src/Vizality/modules/util/logger/_log.js

@@ -1,5 +1,6 @@
+const { getRandom, getContrasted } = require('../color');
+
 const _parseType = require('./_parseType');
-const color = require('../color');
 
 /**
  * Logs strings using different console levels, includes a badge, module label,
@@ -13,6 +14,10 @@ const _log = (module, submodule, submoduleColor, message, logType) => {
   logType = _parseType(logType);
   if (!Array.isArray(message)) message = [ message ];
 
+  /*
+   * module: '#591870',
+   * submodule: '#ce03e5'
+   */
   const BADGE_COLORS = {
     API: {
       module: '#dc2167',
@@ -26,14 +31,6 @@ const _log = (module, submodule, submoduleColor, message, logType) => {
       module: '#1e2963',
       submodule: '#782049'
     },
-    // StyleManager: {
-    //   module: '#591870',
-    //   submodule: '#ce03e5'
-    // },
-    // PluginManager: {
-    //   module: '#1e2963',
-    //   submodule: '#782049'
-    // },
     Plugin: {
       module: '#057b81',
       submodule: '#5b3c89'
@@ -56,8 +53,8 @@ const _log = (module, submodule, submoduleColor, message, logType) => {
     }
   };
 
-  const randomModuleColor = color.getRandom();
-  const randomSubmoduleColor = color.getRandom();
+  const randomModuleColor = getRandom();
+  const randomSubmoduleColor = getRandom();
 
   const baseBadgeStyles =
     `border-radius: 3px;
@@ -84,12 +81,12 @@ const _log = (module, submodule, submoduleColor, message, logType) => {
 
   const moduleStyles =
     `${baseBadgeStyles}
-    color: ${BADGE_COLORS[module] && BADGE_COLORS[module].module ? color.getContrast(BADGE_COLORS[module].module) : color.getContrast(randomModuleColor)};
+    color: ${BADGE_COLORS[module] && BADGE_COLORS[module].module ? getContrasted(BADGE_COLORS[module].module) : getContrasted(randomModuleColor)};
     background: ${BADGE_COLORS[module] && BADGE_COLORS[module].module || randomModuleColor};`;
 
   const submoduleStyles =
     `${baseBadgeStyles};
-    color: ${submoduleColor ? color.getContrast(submoduleColor) : BADGE_COLORS[module] && BADGE_COLORS[module].submodule ? color.getContrast(BADGE_COLORS[module].submodule) : color.getContrast(randomSubmoduleColor)};
+    color: ${submoduleColor ? getContrasted(submoduleColor) : BADGE_COLORS[module] && BADGE_COLORS[module].submodule ? getContrasted(BADGE_COLORS[module].submodule) : getContrasted(randomSubmoduleColor)};
     background: ${submoduleColor || BADGE_COLORS[module] && BADGE_COLORS[module].submodule || randomSubmoduleColor};`;
 
   return console[logType](

src/Vizality/modules/util/time/index.js

@@ -9,7 +9,7 @@ require('fs')
 let moment;
 
 const time = (...args) => {
-  if (!moment) moment = require('vizality/webpack').getModule('momentProperties');
+  if (!moment) moment = require('@webpack').getModule('momentProperties');
 
   return moment(...args);
 };