@salesforcedevs/dx-components 0.58.0 → 0.59.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.58.0",
+    "version": "0.59.0-alpha.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -24,6 +24,5 @@
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
-    },
-    "gitHead": "88a4d6c7d2387c527c47a5e87c0c00820436b091"
+    }
 }

package/src/assets/svg/subscribe-background-left.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="34px" viewBox="0 0 45 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-left</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Blog---v1" transform="translate(-424.000000, -2216.000000)" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <g id="blog-cta-graphic-left" transform="translate(373.000000, 47.500000)">
+                    <circle id="Oval-Copy-12" stroke="#90D1FF" cx="39.5" cy="4.5" r="3.5"></circle>
+                    <path d="M7.42619649,16.2472709 L5.80463043,20.6293714 C5.68941141,20.9429183 5.44197383,21.1894114 5.12842699,21.3046304 L0.747270909,22.9271409 C-0.249090303,23.295464 -0.249090303,24.704536 0.747270909,25.0738035 L5.12842699,26.6953696 C5.44197383,26.8105886 5.68941141,27.0570817 5.80463043,27.3706286 L7.42619649,31.7527291 C7.79546401,32.7490903 9.20453599,32.7490903 9.57285909,31.7527291 L11.1944252,27.3706286 C11.3096442,27.0570817 11.5570817,26.8105886 11.8706286,26.6953696 L16.2527291,25.0738035 C17.2481459,24.704536 17.2481459,23.295464 16.2527291,22.9271409 L11.8706286,21.3046304 C11.5570817,21.1894114 11.3096442,20.9429183 11.1944252,20.6293714 L9.57285909,16.2472709 C9.20453599,15.2509097 7.79546401,15.2509097 7.42619649,16.2472709 Z" id="Stroke-7-Copy-2" stroke="#8FD0FE" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/svg/subscribe-background-right.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="23px" height="22px" viewBox="0 0 23 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>blog-cta-graphic-right</title>
+    <g id="Slack-App-CTA" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Blog---v1" transform="translate(-936.000000, -2378.000000)" stroke="#8FD0FE" stroke-width="2">
+            <g id="CTA-signup" transform="translate(52.000000, 2169.000000)">
+                <path d="M894.236764,210.879142 L892.329039,216.034555 C892.193488,216.403433 891.902385,216.693425 891.533506,216.828977 L886.379205,218.737813 C885.207015,219.171134 885.207015,220.828866 886.379205,221.263298 L891.533506,223.171023 C891.902385,223.306575 892.193488,223.596567 892.329039,223.965445 L894.236764,229.120858 C894.671197,230.293047 896.328928,230.293047 896.76225,229.120858 L898.669974,223.965445 C898.805526,223.596567 899.096629,223.306575 899.465508,223.171023 L904.62092,221.263298 C905.791999,220.828866 905.791999,219.171134 904.62092,218.737813 L899.465508,216.828977 C899.096629,216.693425 898.805526,216.403433 898.669974,216.034555 L896.76225,210.879142 C896.328928,209.706953 894.671197,209.706953 894.236764,210.879142 Z" id="blog-cta-graphic-right"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -1,6 +1,7 @@
 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,
@@ -212,6 +213,18 @@ 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/dxUtils/codeLanguageDetector/codeLanguageDetector.js

@@ -0,0 +1,439 @@
+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 };

package/LICENSE

@@ -1,12 +0,0 @@
-Copyright (c) 2020, Salesforce.com, Inc.
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
-
-* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.