Skip to content
This repository has been archived by the owner on Jul 4, 2023. It is now read-only.

Overview, main.js, content.js, and ModernDeckInit

dangered wolf edited this page May 25, 2020 · 3 revisions

Overview

As of ModernDeck 8.0, the overview of the start process of ModernDeck is as shown.

overview chart

main.js is the main script with bootstrapping and main process capabilities for the app. content.js is the extension content script with bootstrapping capabilities.

moderndeck.js is the transpiled file that contains the Cross-Platform heart and most of the relevant code.

Getting around

ModernDeck has a pretty straightforward directory structure.

build contains most of the build config files (with exceptions) build\icons contains icons for moderndeck build\dmg contains specifics for macOS DMG files build\appx contains specific for Windows AppX (Microsoft Store apps) files

common contains all the files that are packaged with the extension and app. The app also gets a subset of node_modules and main.js, package.json, and readme and licensing information. common/extension contains the extension-specific files that are not included in the app. common/app includes the app tray icon.

dist contains outputted electron app images

docs contains images and other things for ModernDeck documentation.

src contains the interesting source files that are compiled to common/resources/moderndeck.js

moderndeck.js

moderndeck.js is composed of several source files from src. They're pretty straightforward in naming. ModernDeckInit.js is the first file in the chain, and has roots in ModernDeck <= 7's MTDinject.js

MTD?

MTD is short for ModernTweetDeck and is leftover from the transition from TDE (TweetDeckEnhancer) to ModernDeck. This abbreviation is still used in the ModernDeck code to be the abbreviation for ModernDeck. This includes some function names, settings keys, and prior to ModernDeck 8, even file names.

Low level initialization

The first thing that ModernDeckInit.js looks for is an element called MTDURLExchange. When moderndeck.js is initialized, it doesn't know where to look for resources such as CSS, images, etc. This is a side effect of moderndeck.js being separate from the content script in the extension. So content.js or main.js create a new element and set the type property of it to the necessary URL. moderndeck.js, or rather ModernDeckInit.js within moderndeck.js, finds it and stores the URL to use. Subsequent scripts don't access MTDURLExchange, they access mtdBaseUrl, a global variable.

coreInit

coreInit performs low-level preparation for ModernDeckInit.js. It uses moduleRaid to extract jQuery from the TweetDeck webpack, because they removed the global references to $ and jQuery

coreInit also:

  • Starts libraries like twemoji and jquery visible
  • Initializes FunctionPatcher.js and LanguageFunctionPatcher.js
  • Initializes KeyboardShortcutHandler.js
  • Initializes UILoginController.js

mtdInit

mtdInit is the next chain in the initialization process.

mtdInit starts:

  • The loading spinner (only for the extension as of ModernDeck 8.0)
  • Replaces the login page with the ModernDeck one
  • Patches the number formatting
  • Patches mustache UI texts
  • For the login screen, updates the "Good morning/afternoon/evening" text as time goes on
  • The hookComposer function which helps handle things like the GIF picker, emoji picker