@salesforcedevs/dx-components 0.59.0-alpha.1 → 0.59.0-avatar-button

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.59.0-alpha.1",
+    "version": "0.59.0-avatar-button",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -17,7 +17,8 @@
         "classnames": "^2.2.6",
         "debounce": "^1.2.0",
         "lodash.get": "^4.4.2",
-        "microtip": "0.2.2"
+        "microtip": "0.2.2",
+        "salesforce-oauth2": "^0.2.0"
     },
     "devDependencies": {
         "@types/classnames": "^2.2.10",

package/src/modules/dx/avatarButton/avatarButton.css

@@ -0,0 +1,133 @@
+:host {
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: transparent;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-slot-empty-width: max-content;
+}
+
+.avatar-small-container {
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: var(--dx-g-spacing-lg);
+    width: var(--dx-g-spacing-lg);
+}
+
+.avatar.avatar-medium {
+    margin-bottom: 14px;
+    width: var(--dx-g-spacing-2xl);
+}
+
+.login-control {
+    margin-left: var(--dx-g-spacing-smd);
+}
+
+.login-container {
+    padding: 16px;
+}
+
+.login-container.logged-in {
+    padding-top: 68px;
+}
+
+.header-img {
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+}
+
+.heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    line-height: 28px;
+}
+
+.sub-heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 12px;
+    line-height: 18px;
+    padding: 8px 0;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.login-list-item {
+    padding-bottom: 10px;
+}
+
+.login-section ~ .login-section {
+    border-top: 1px solid var(--dx-g-gray-90);
+    margin-top: 12px;
+}
+
+.login-section-title {
+    color: var(--dx-g-gray-30);
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding: 20px 0 12px;
+}
+
+.login-link {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+}
+
+.login-link-label {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.login-link-img {
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+}
+
+.login-link-icon {
+    display: inline-block;
+    margin-left: 6px;
+    vertical-align: baseline;
+}
+
+.login-link-blurb {
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding-top: 4px;
+}
+
+.heading-links {
+    color: var(--dx-g-gray-90);
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a.inline-link {
+    color: var(--dx-g-blue-vibrant-50);
+}

package/src/modules/dx/avatarButton/avatarButton.html

@@ -0,0 +1,151 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <div slot="control" class="avatar-small-container login-control">
+                <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
+            </div>
+            <div slot="content">
+                <div class="login-container logged-in">
+                    <img
+                        src="/assets/svg/login-widget-bg.png"
+                        class="header-img"
+                    />
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-medium"
+                    />
+                    <span class="heading">{userInfo.fullName}</span>
+                    <span class="sub-heading">{userInfo.username}</span>
+                    <div class="heading-links">
+                        <!--
+                        <a href="#" class="inline-link">Switch account</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        -->
+                        <a href="#" onclick={handleLogout} class="inline-link">
+                            Logout
+                        </a>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">Trailblazer.me</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={settingsUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Settings
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href={profileUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Profile
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Developer Forums
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Our Developer Forums have a new home!&nbsp;
+                                    <a href="#" class="inline-link">
+                                        Learn more
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <div class="login-container">
+                    <span class="heading">Login</span>
+                    <div class="login-section">
+                        <span class="login-section-title">Products</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Salesforce
+                                    </span>
+                                    <img
+                                        class="login-link-img"
+                                        src="/assets/svg/salesforce-cloud.svg"
+                                        alt="Salesforce logo"
+                                    />
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Marketing Cloud
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">
+                            Community & Resources
+                        </span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={loginUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Trailblazer.me
+                                    </span>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Login into access a rich community of
+                                    Salesforce Developers, get ideas, and find
+                                    solutions.
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+</template>

package/src/modules/dx/avatarButton/avatarButton.ts

@@ -0,0 +1,105 @@
+import { api, LightningElement } from "lwc";
+
+const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
+const TBID_SETTINGS_URL = `${TBID_BASE_URL}/settings`;
+const TBID_PROFILE_URL = `${TBID_BASE_URL}/id`;
+const TBID_API_BASE_URL = "https://development.developer.salesforce.com/tbid";
+const TBID_API_LOGOUT_URL = `${TBID_API_BASE_URL}/logout`;
+const TBID_API_USERINFO_URL = `https://development.developer.salesforce.com/tbid/userinfo`;
+const TBID_API_LOGIN_URL = `${TBID_API_BASE_URL}/dologin`;
+// const TBID_LOGOUT_URL = `${TBID_BASE_URL}/services/auth/idp/oidc/logout`;
+
+export interface UserInfo {
+    avatarImgSrc?: string;
+    firstName?: string;
+    lastName?: string;
+    username?: string;
+    readonly fullName: string;
+}
+
+export default class AvatarButton extends LightningElement {
+    @api size: "small" | "medium" | "large" = "medium";
+
+    private userInfo: UserInfo = {
+        get fullName() {
+            if (this.firstName && this.lastName) {
+                return `${this.firstName} ${this.lastName}`;
+            }
+            return this.firstName || this.lastName || "";
+        }
+    };
+    private isLoading = false;
+    private settingsUrl = TBID_SETTINGS_URL;
+    private profileUrl = TBID_PROFILE_URL;
+    private loginUrl = TBID_API_LOGIN_URL;
+    private _didReceiveUserInfo = false;
+
+    private get isLoggedIn() {
+        return this._didReceiveUserInfo;
+    }
+
+    connectedCallback() {
+        window.addEventListener("tbid-login", this.handleSsoLogin);
+        window.addEventListener("tbid-logout", this.handleLogout);
+
+        // Whenever this component is added to the DOM, immediately request user info; if the user is logged in
+        // and we receive the info, this component will display the avatar UI; otherwise, it will display the login
+        // button.
+        this.requestUserInfo();
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("tbid-login", this.handleSsoLogin);
+        window.removeEventListener("tbid-logout", this.handleLogout);
+    }
+
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFWidget) on the website, if it exists.
+    private handleSsoLogin(event: Event) {
+        const userInfo = (event as CustomEvent).detail;
+        if (userInfo) {
+            this.updateAvatarWithUserInfo(userInfo);
+            this._didReceiveUserInfo = true;
+        }
+    }
+
+    // This can be called *either* by the embedded login widget (SFWidget) on the website, if it exists,
+    // in the event of "seamless SSO" logout, *or* by a user clicking logout on this component.
+    private async handleLogout() {
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+        this.updateAvatarWithUserInfo({}); // clear old info
+
+        fetch(TBID_API_LOGOUT_URL); // no need to await this
+    }
+
+    private updateAvatarWithUserInfo(userInfo: any) {
+        if (!userInfo) {
+            return;
+        }
+
+        this.userInfo.avatarImgSrc = userInfo.photos?.thumbnail;
+        this.userInfo.firstName = userInfo.given_name;
+        this.userInfo.lastName = userInfo.family_name;
+        this.userInfo.username = userInfo.preferred_username;
+        // TODO: Consider displaying initials if no photo. Is there always a photo?
+    }
+
+    private async requestUserInfo() {
+        this.isLoading = true;
+
+        try {
+            const userInfoRes = await fetch(TBID_API_USERINFO_URL);
+
+            if (userInfoRes.ok) {
+                const userInfo = await userInfoRes.json();
+                this.updateAvatarWithUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
+            }
+        } catch (ex) {
+            // TODO: Something not directly related to auth went wrong. Unsure what to do here.
+            console.error("Invalid response received from TBID API, aborting.");
+        }
+
+        this.isLoading = false;
+    }
+}

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api, wire, track } from "lwc";
 import { CodeBlockTheme, CodeBlockLanguage } from "typings/custom";
 import cx from "classnames";
-import { detect } from "dxUtils/codeLanguageDetector";
 import Prism from "dxUtils/prismjs";
 import {
     getLocalStorageData,
@@ -213,18 +212,6 @@ export default class CodeBlock extends LightningElement {
             ) || this.allLanguages[0];
         this.selectedLanguageLabel = this.selectedLanguage.label;
         this.selectedLanguageId = this.selectedLanguage.id;
-
-        // Auto detect code language if it isn't specified
-        if (!this.language) {
-            const detectedLanguage = detect(this.codeBlock);
-            this.selectedLanguage = {
-                label: detectedLanguage,
-                id: detectedLanguage.toLowerCase()
-            };
-            this.selectedLanguageLabel = detectedLanguage;
-            this.selectedLanguageId = detectedLanguage.toLowerCase();
-        }
-
         this.formatCodeBlock();
         this._codeBlockRendered = true;
     }

package/src/modules/dx/header/header.html

@@ -19,6 +19,7 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <dx-avatar-button></dx-avatar-button>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

package/src/modules/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce log";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

package/src/modules/dxUtils/codeLanguageDetector/codeLanguageDetector.js

@@ -1,439 +0,0 @@
-const LANGUAGES = {
-    JavaScript: [
-        // undefined keyword
-        { pattern: /undefined/g, points: 2 },
-        // console.log('ayy lmao')
-        { pattern: /console\.log( )*\(/, points: 2 },
-        // Variable declaration
-        { pattern: /(var|const|let)( )+\w+( )*=?/, points: 2 },
-        // Array/Object declaration
-        { pattern: /(('|").+('|")( )*|\w+):( )*[{[]/, points: 2 },
-        // === operator
-        { pattern: /===/g, points: 1 },
-        // !== operator
-        { pattern: /!==/g, points: 1 },
-        // Function definition
-        {
-            pattern: /function\*?(( )+[$\w]+( )*\(.*\)|( )*\(.*\))/g,
-            points: 1
-        },
-        // null keyword
-        { pattern: /null/g, points: 1 },
-        // lambda expression
-        { pattern: /\(.*\)( )*=>( )*.+/, points: 1 },
-        // (else )if statement
-        { pattern: /(else )?if( )+\(.+\)/, points: 1 },
-        // while loop
-        { pattern: /while( )+\(.+\)/, points: 1 },
-        // C style variable declaration.
-        {
-            pattern: /(^|\s)(char|long|int|float|double)( )+\w+( )*=?/,
-            points: -1
-        },
-        // pointer
-        { pattern: /(\w+)( )*\*( )*\w+/, points: -1 },
-        // HTML <script> tag
-        {
-            pattern: /<(\/)?script( type=('|")text\/javascript('|"))?>/,
-            points: -50
-        },
-        // ES6 import / export
-        {
-            pattern:
-                /(import|export(\s+)default)\s+({\s+[\w\s,]+\s+}|\w+)\s+from\s/,
-            points: 2
-        },
-        // ES6 arrow function
-        { pattern: /\([^()]{0,}\)\s+=>(\s+{)?/, points: 3 }
-        // () => {}
-        // (a) => {}
-        // (a, b) => {}
-        // ({ a, b}) => {}
-        // ([ a, b ]) => {}
-    ],
-
-    C: [
-        // Primitive variable declaration.
-        { pattern: /(char|long|int|float|double)( )+\w+( )*=?/, points: 2 },
-        // malloc function call
-        { pattern: /malloc\(.+\)/, points: 2 },
-        // #include <whatever.h>
-        { pattern: /#include (<|")\w+\.h(>|")/, points: 2, nearTop: true },
-        // pointer
-        { pattern: /(\w+)( )*\*( )*\w+/, points: 2 },
-        // Variable declaration and/or initialisation.
-        { pattern: /(\w+)( )+\w+(;|( )*=)/, points: 1 },
-        // Array declaration.
-        { pattern: /(\w+)( )+\w+\[.+\]/, points: 1 },
-        // #define macro
-        { pattern: /#define( )+.+/, points: 1 },
-        // NULL constant
-        { pattern: /NULL/, points: 1 },
-        // void keyword
-        { pattern: /void/g, points: 1 },
-        // (else )if statement
-        { pattern: /(else )?if( )*\(.+\)/, points: 1 },
-        // while loop
-        { pattern: /while( )+\(.+\)/, points: 1 },
-        // printf function
-        { pattern: /(printf|puts)( )*\(.+\)/, points: 1 },
-        // new Keyword from C++
-        { pattern: /new \w+/, points: -1 },
-        // Single quote multicharacter string
-        { pattern: /'.{2,}'/, points: -1 },
-        // JS variable declaration
-        { pattern: /var( )+\w+( )*=?/, points: -1 }
-    ],
-
-    "C++": [
-        // Primitive variable declaration.
-        { pattern: /(char|long|int|float|double)( )+\w+( )*=?/, points: 2 },
-        // #include <whatever.h>
-        {
-            pattern: /#include( )*(<|")\w+(\.h)?(>|")/,
-            points: 2,
-            nearTop: true
-        },
-        // using namespace something
-        { pattern: /using( )+namespace( )+.+( )*;/, points: 2 },
-        // template declaration
-        { pattern: /template( )*<.*>/, points: 2 },
-        // std
-        { pattern: /std::\w+/g, points: 2 },
-        // cout/cin/endl
-        { pattern: /(cout|cin|endl)/g, points: 2 },
-        // Visibility specifiers
-        { pattern: /(public|protected|private):/, points: 2 },
-        // nullptr
-        { pattern: /nullptr/, points: 2 },
-        // new Keyword
-        { pattern: /new \w+(\(.*\))?/, points: 1 },
-        // #define macro
-        { pattern: /#define( )+.+/, points: 1 },
-        // template usage
-        { pattern: /\w+<\w+>/, points: 1 },
-        // class keyword
-        { pattern: /class( )+\w+/, points: 1 },
-        // void keyword
-        { pattern: /void/g, points: 1 },
-        // (else )if statement
-        { pattern: /(else )?if( )*\(.+\)/, points: 1 },
-        // while loop
-        { pattern: /while( )+\(.+\)/, points: 1 },
-        // Scope operator
-        { pattern: /\w*::\w+/, points: 1 },
-        // Single quote multicharacter string
-        { pattern: /'.{2,}'/, points: -1 },
-        // Java List/ArrayList
-        {
-            pattern: /(List<\w+>|ArrayList<\w*>( )*\(.*\))(( )+[\w]+|;)/,
-            points: -1
-        }
-    ],
-
-    Python: [
-        // Function definition
-        { pattern: /def( )+\w+\(.*\)( )*:/, points: 2 },
-        // while loop
-        { pattern: /while (.+):/, points: 2 },
-        // from library import something
-        { pattern: /from [\w.]+ import (\w+|\*)/, points: 2 },
-        // class keyword
-        { pattern: /class( )*\w+(\(( )*\w+( )*\))?( )*:/, points: 2 },
-        // if keyword
-        { pattern: /if( )+(.+)( )*:/, points: 2 },
-        // elif keyword
-        { pattern: /elif( )+(.+)( )*:/, points: 2 },
-        // else keyword
-        { pattern: /else:/, points: 2 },
-        // for loop
-        { pattern: /for (\w+|\(?\w+,( )*\w+\)?) in (.+):/, points: 2 },
-        // Python variable declaration.
-        { pattern: /\w+( )*=( )*\w+(?!;)(\n|$)/, points: 1 },
-        // import something
-        { pattern: /import ([[^.]\w])+/, points: 1, nearTop: true },
-        // print statement/function
-        { pattern: /print((( )*\(.+\))|( )+.+)/, points: 1 },
-        // &&/|| operators
-        { pattern: /(&{2}|\|{2})/, points: -1 }
-    ],
-
-    Java: [
-        // System.out.println() etc.
-        { pattern: /System\.(in|out)\.\w+/, points: 2 },
-        // Class variable declarations
-        {
-            pattern: /(private|protected|public)( )*\w+( )*\w+(( )*=( )*[\w])?/,
-            points: 2
-        },
-        // Method
-        {
-            pattern: /(private|protected|public)( )*\w+( )*[\w]+\(.+\)/,
-            points: 2
-        },
-        // String class
-        { pattern: /(^|\s)(String)( )+[\w]+( )*=?/, points: 2 },
-        // List/ArrayList
-        {
-            pattern: /(List<\w+>|ArrayList<\w*>( )*\(.*\))(( )+[\w]+|;)/,
-            points: 2
-        },
-        // class keyword
-        { pattern: /(public( )*)?class( )*\w+/, points: 2 },
-        // Array declaration.
-        { pattern: /(\w+)(\[( )*\])+( )+\w+/, points: 2 },
-        // final keyword
-        { pattern: /final( )*\w+/, points: 2 },
-        // getter & setter
-        { pattern: /\w+\.(get|set)\(.+\)/, points: 2 },
-        // new Keyword (Java)
-        { pattern: /new [A-Z]\w*( )*\(.+\)/, points: 2 },
-        // C style variable declaration.
-        {
-            pattern: /(^|\s)(char|long|int|float|double)( )+[\w]+( )*=?/,
-            points: 1
-        },
-        // extends/implements keywords
-        { pattern: /(extends|implements)/, points: 2, nearTop: true },
-        // null keyword
-        { pattern: /null/g, points: 1 },
-        // (else )if statement
-        { pattern: /(else )?if( )*\(.+\)/, points: 1 },
-        // while loop
-        { pattern: /while( )+\(.+\)/, points: 1 },
-        // void keyword
-        { pattern: /void/g, points: 1 },
-        // const
-        { pattern: /const( )*\w+/, points: -1 },
-        // pointer
-        { pattern: /(\w+)( )*\*( )*\w+/, points: -1 },
-        // Single quote multicharacter string
-        { pattern: /'.{2,}'/, points: -1 },
-        // C style include
-        {
-            pattern: /#include( )*(<|")\w+(\.h)?(>|")/,
-            points: -1,
-            nearTop: true
-        }
-    ],
-
-    HTML: [
-        {
-            pattern: /<!DOCTYPE (html|HTML PUBLIC .+)>/,
-            points: 2,
-            nearTop: true
-        },
-        // Tags
-        {
-            pattern: /<[a-z0-9]+(( )*[\w]+=('|").+('|")( )*)?>.*<\/[a-z0-9]+>/g,
-            points: 2
-        },
-        // Properties
-        { pattern: /[a-z-]+=("|').+("|')/g, points: 2 },
-        // PHP tag
-        { pattern: /<\?php/, points: -50 }
-    ],
-
-    CSS: [
-        // Properties
-        { pattern: /[a-z-]+:(?!:).+;/, points: 2 },
-        // <style> tag from HTML
-        { pattern: /<(\/)?style>/, points: -50 }
-    ],
-
-    Ruby: [
-        // require/include
-        {
-            pattern: /(require|include)( )+'\w+(\.rb)?'/,
-            points: 2,
-            nearTop: true
-        },
-        // Function definition
-        { pattern: /def( )+\w+( )*(\(.+\))?( )*\n/, points: 2 },
-        // Instance variables
-        { pattern: /@\w+/, points: 2 },
-        // Boolean property
-        { pattern: /\.\w+\?/, points: 2 },
-        // puts (Ruby print)
-        { pattern: /puts( )+("|').+("|')/, points: 2 },
-        // Inheriting class
-        { pattern: /class [A-Z]\w*( )*<( )*([A-Z]\w*(::)?)+/, points: 2 },
-        // attr_accessor
-        { pattern: /attr_accessor( )+(:\w+(,( )*)?)+/, points: 2 },
-        // new
-        { pattern: /\w+\.new( )+/, points: 2 },
-        // elsif keyword
-        { pattern: /elsif/, points: 2 },
-        // do
-        { pattern: /do( )*\|(\w+(,( )*\w+)?)+\|/, points: 2 },
-        // for loop
-        { pattern: /for (\w+|\(?\w+,( )*\w+\)?) in (.+)/, points: 1 },
-        // nil keyword
-        { pattern: /nil/, points: 1 },
-        // Scope operator
-        { pattern: /[A-Z]\w*::[A-Z]\w*/, points: 1 }
-    ],
-
-    Go: [
-        // package something
-        { pattern: /package( )+[a-z]+\n/, points: 2, nearTop: true },
-        // import
-        {
-            pattern: /(import( )*\(( )*\n)|(import( )+"[a-z0-9/.]+")/,
-            points: 2,
-            nearTop: true
-        },
-        // error check
-        { pattern: /if.+err( )*!=( )*nil.+{/, points: 2 },
-        // Go print
-        { pattern: /fmt\.Print(f|ln)?\(.*\)/, points: 2 },
-        // function
-        { pattern: /func(( )+\w+( )*)?\(.*\).*{/, points: 2 },
-        // variable initialisation
-        { pattern: /\w+( )*:=( )*.+[^;\n]/, points: 2 },
-        // if/else if
-        { pattern: /(}( )*else( )*)?if[^()]+{/, points: 2 },
-        // var/const declaration
-        { pattern: /(var|const)( )+\w+( )+[\w*]+(\n|( )*=|$)/, points: 2 },
-        // public access on package
-        { pattern: /[a-z]+\.[A-Z]\w*/, points: 1 },
-        // nil keyword
-        { pattern: /nil/, points: 1 },
-        // Single quote multicharacter string
-        { pattern: /'.{2,}'/, points: -1 }
-    ],
-
-    PHP: [
-        // PHP tag
-        { pattern: /<\?php/, points: 2 },
-        // PHP style variables.
-        { pattern: /\$\w+/, points: 2 },
-        // use Something\Something;
-        { pattern: /use( )+\w+(\\\w+)+( )*;/, points: 2, nearTop: true },
-        // arrow
-        { pattern: /\$\w+->\w+/, points: 2 },
-        // require/include
-        {
-            pattern:
-                /(require|include)(_once)?( )*\(?( )*('|").+\.php('|")( )*\)?( )*;/,
-            points: 2
-        },
-        // echo 'something';
-        { pattern: /echo( )+('|").+('|")( )*;/, points: 1 },
-        // NULL constant
-        { pattern: /NULL/, points: 1 },
-        // new keyword
-        { pattern: /new( )+((\\\w+)+|\w+)(\(.*\))?/, points: 1 },
-        // Function definition
-        { pattern: /function(( )+[$\w]+\(.*\)|( )*\(.*\))/g, points: 1 },
-        // (else)if statement
-        { pattern: /(else)?if( )+\(.+\)/, points: 1 },
-        // scope operator
-        { pattern: /\w+::\w+/, points: 1 },
-        // === operator
-        { pattern: /===/g, points: 1 },
-        // !== operator
-        { pattern: /!==/g, points: 1 },
-        // C/JS style variable declaration.
-        {
-            pattern: /(^|\s)(var|char|long|int|float|double)( )+\w+( )*=?/,
-            points: -1
-        }
-    ],
-
-    Unknown: []
-};
-
-function getPoints(language, lineOfCode, checkers) {
-    return checkers
-        .map((checker) => {
-            if (checker.pattern.test(lineOfCode)) {
-                return checker.points;
-            }
-            return 0;
-        })
-        .reduce((memo, num) => memo + num, 0);
-}
-
-function detect(snippet, options) {
-    const opts = Object.assign(
-        {
-            heuristic: true,
-            statistics: false
-        },
-        options || {}
-    );
-
-    let linesOfCode = snippet
-        .replace(/\r\n?/g, "\n")
-        .replace(/\n{2,}/g, "\n")
-        .split("\n");
-
-    function nearTop(index) {
-        if (linesOfCode.length <= 10) {
-            return true;
-        }
-        return index < linesOfCode.length / 10;
-    }
-
-    if (opts.heuristic && linesOfCode.length > 500) {
-        linesOfCode = linesOfCode.filter((lineOfCode, index) => {
-            if (nearTop(index)) {
-                return true;
-            }
-            return index % Math.ceil(linesOfCode.length / 500) === 0;
-        });
-    }
-
-    const pairs = Object.keys(LANGUAGES).map((key) => {
-        return { language: key, checkers: LANGUAGES[key] };
-    });
-
-    const results = pairs.map((pair) => {
-        const language = pair.language;
-        const checkers = pair.checkers;
-
-        if (language === "Unknown") {
-            return { language: "Unknown", points: 1 };
-        }
-
-        const pointsList = linesOfCode.map((lineOfCode, index) => {
-            if (!nearTop(index)) {
-                return getPoints(
-                    language,
-                    lineOfCode,
-                    checkers.filter((checker) => !checker.nearTop)
-                );
-            }
-            return getPoints(language, lineOfCode, checkers);
-        });
-
-        const points = pointsList.reduce((memo, num) => memo + num);
-
-        return { language, points };
-    });
-
-    const sortedResult = results.sort(
-        (prev, next) => prev.points - next.points
-    );
-    const bestResult = sortedResult[sortedResult.length - 1];
-
-    if (opts.statistics) {
-        const statistics = {};
-        results.forEach((result) => {
-            statistics[result.language] = result.points;
-        });
-        return { detected: bestResult.language, statistics };
-    }
-
-    return bestResult.language;
-}
-
-const languages = Object.keys(LANGUAGES);
-const LANG = {};
-
-languages.forEach((language) => {
-    LANG[language] = language;
-});
-
-export { detect, languages, LANG };