refactor: further optimizations (#1335)

* refactor(accessibility): axe/language - added lang attribute <html> element must have a lang attribute: The <html> element does not have a lang attribute more information: https://dequeuniversity.com/rules/axe/4.2/html-has-lang * chore: replaced individual random function by the one provided as a utility * chore: prettier code formatting * chore: prettier code formatting * chore: eslint feedback * chore: reverted those previously incorrectly checked in files * docs: removed incorrect sentence out of #1313 I've added that documentation entry with #1313, but sadly missed to remove that incorrect sentence that belongs to another section on that page.
pattern-lab · Aug 7, 2021 · c74fd66 · c74fd66
1 parent aa2c203
commit c74fd66
Show file tree

Hide file tree

Showing 35 changed files with 114 additions and 112 deletions.
diff --git a/packages/cli/bin/inquiries/starterkit.js b/packages/cli/bin/inquiries/starterkit.js
@@ -10,8 +10,7 @@ const starterkitSetup = [
     message: 'What initial patterns do you want included in your project?',
     choices: [
       {
-        name:
-          'Handlebars base patterns (some basic patterns to get started with)',
+        name: 'Handlebars base patterns (some basic patterns to get started with)',
         value: '@pattern-lab/starterkit-handlebars-vanilla',
       },
       {

diff --git a/packages/core/test/buildListItems_tests.js b/packages/core/test/buildListItems_tests.js
@@ -21,7 +21,7 @@ tap.test(
   'buildlistItems transforms container of listItems with one value',
   (test) => {
     // do this to avoid the shuffling for now
-    const container = Object.assign({}, { listitems: { '1': listItems['1'] } });
+    const container = Object.assign({}, { listitems: { 1: listItems['1'] } });
     buildlistItems(container);
     test.same(container.listitems, {
       'listItems-one': [

diff --git a/packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs b/packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs
@@ -1,2 +1,2 @@
 Hello world!
-{{ subtitle }}
+{{subtitle}}
diff --git a/packages/core/test/lineage_hunter_tests.js b/packages/core/test/lineage_hunter_tests.js
@@ -413,9 +413,8 @@ tap.test(
       'molecules-error'
     );
 
-    var currentPatternLineageIndex = patternlab.graph.lineageIndex(
-      currentPattern
-    );
+    var currentPatternLineageIndex =
+      patternlab.graph.lineageIndex(currentPattern);
     test.equal(currentPatternLineageIndex.length, 1);
     test.equal(currentPatternLineageIndex[0], 'atoms-error');
 

diff --git a/packages/core/test/pattern_engines_tests.js b/packages/core/test/pattern_engines_tests.js
@@ -28,9 +28,8 @@ var engineNames = Object.keys(patternEngines);
 tap.test(
   'getEngineNameForPattern returns "mustache" from test pattern',
   function (test) {
-    var engineName = patternEngines.getEngineNameForPattern(
-      mustacheTestPattern
-    );
+    var engineName =
+      patternEngines.getEngineNameForPattern(mustacheTestPattern);
     test.equal(engineName, 'mustache');
     test.end();
   }

diff --git a/packages/core/test/pseudopattern_hunter_tests.js b/packages/core/test/pseudopattern_hunter_tests.js
@@ -96,25 +96,21 @@ tap.test(
       'utf8'
     );
     atomPattern.extendedTemplate = atomPattern.template;
-    atomPattern.stylePartials = atomPattern.findPartialsWithStyleModifiers(
-      atomPattern
-    );
-    atomPattern.parameteredPartials = atomPattern.findPartialsWithPatternParameters(
-      atomPattern
-    );
+    atomPattern.stylePartials =
+      atomPattern.findPartialsWithStyleModifiers(atomPattern);
+    atomPattern.parameteredPartials =
+      atomPattern.findPartialsWithPatternParameters(atomPattern);
 
     var pseudoPattern = new Pattern('test/pseudomodifier.mustache');
     pseudoPattern.template = fs.readFileSync(
       patterns_dir + 'test/pseudomodifier.mustache',
       'utf8'
     );
     pseudoPattern.extendedTemplate = atomPattern.template;
-    pseudoPattern.stylePartials = pseudoPattern.findPartialsWithStyleModifiers(
-      pseudoPattern
-    );
-    pseudoPattern.parameteredPartials = pseudoPattern.findPartialsWithPatternParameters(
-      pseudoPattern
-    );
+    pseudoPattern.stylePartials =
+      pseudoPattern.findPartialsWithStyleModifiers(pseudoPattern);
+    pseudoPattern.parameteredPartials =
+      pseudoPattern.findPartialsWithPatternParameters(pseudoPattern);
 
     addPattern(atomPattern, pl);
     addPattern(pseudoPattern, pl);

diff --git a/packages/development-edition-engine-react/source/_meta/_head.hbs b/packages/development-edition-engine-react/source/_meta/_head.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/development-edition-engine-react/source/_meta/_head.html b/packages/development-edition-engine-react/source/_meta/_head.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8" />

diff --git a/packages/development-edition-engine-react/source/_meta/_head.mustache b/packages/development-edition-engine-react/source/_meta/_head.mustache
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/docs/src/docs/advanced-config-options.md b/packages/docs/src/docs/advanced-config-options.md
@@ -326,8 +326,6 @@ Prevent specific filetypes being copied from your `source` to your `public` fold
 ]
 ```
 
-These template and page patterns would still be accessible via navigation.
-
 **default**: `[]`
 
 ## uikits

diff --git a/packages/edition-node-gulp/source/_meta/_head.mustache b/packages/edition-node-gulp/source/_meta/_head.mustache
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/edition-node/source/_meta/_head.mustache b/packages/edition-node/source/_meta/_head.mustache
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/edition-twig/source/_meta/_head.mustache b/packages/edition-twig/source/_meta/_head.mustache
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/edition-twig/source/_meta/_head.twig b/packages/edition-twig/source/_meta/_head.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-handlebars/_meta/_head.hbs b/packages/engine-handlebars/_meta/_head.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-handlebars/lib/engine_handlebars.js b/packages/engine-handlebars/lib/engine_handlebars.js
@@ -29,7 +29,8 @@ const glob = require('glob');
 
 // regexes, stored here so they're only compiled once
 const findPartialsRE = /{{#?>\s*([\w-\/.]+)(?:.|\s+)*?}}/g;
-const findListItemsRE = /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g;
+const findListItemsRE =
+  /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g;
 const findAtPartialBlockRE = /{{#?>\s*@partial-block\s*}}/g;
 
 function escapeAtPartialBlock(partialString) {

diff --git a/packages/engine-liquid/_meta/_head.liquid b/packages/engine-liquid/_meta/_head.liquid
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-mustache/_meta/_head.mustache b/packages/engine-mustache/_meta/_head.mustache
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-nunjucks/_meta/_head.njk b/packages/engine-nunjucks/_meta/_head.njk
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-nunjucks/lib/engine_nunjucks.js b/packages/engine-nunjucks/lib/engine_nunjucks.js
@@ -37,9 +37,11 @@ const engine_nunjucks = {
   expandPartials: false,
 
   // regexes, stored here so they're only compiled once
-  findPartialsRE: /{%\s*(?:extends|include|import|from)\s+(?:'[^']+'|"[^"]+").*%}/g,
+  findPartialsRE:
+    /{%\s*(?:extends|include|import|from)\s+(?:'[^']+'|"[^"]+").*%}/g,
   findPartialKeyRE: /{%\s*(?:extends|include|import|from)\s+('[^']+'|"[^"]+")/,
-  findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // still requires mustache style syntax because of how PL implements lists
+  findListItemsRE:
+    /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // still requires mustache style syntax because of how PL implements lists
 
   // render it
   renderPattern: function renderPattern(pattern, data) {

diff --git a/packages/engine-twig-php/_meta/_head.twig b/packages/engine-twig-php/_meta/_head.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-twig-php/lib/engine_twig_php.js b/packages/engine-twig-php/lib/engine_twig_php.js
@@ -27,7 +27,8 @@ const engine_twig_php = {
   engineName: 'twig-php',
   engineFileExtension: '.twig',
   expandPartials: false,
-  findPartialsRE: /{%\s*(?:extends|include|embed)\s+('[^']+'|"[^"]+").*?(with|%}|\s*%})/g,
+  findPartialsRE:
+    /{%\s*(?:extends|include|embed)\s+('[^']+'|"[^"]+").*?(with|%}|\s*%})/g,
   findPartialKeyRE: /"((?:\\.|[^"\\])*)"|'((?:\\.|[^"\\])*)'/,
   namespaces: [],
 
@@ -45,12 +46,8 @@ const engine_twig_php = {
       process.exit(1);
     }
 
-    const {
-      namespaces,
-      alterTwigEnv,
-      relativeFrom,
-      ...rest
-    } = config.engines.twig;
+    const { namespaces, alterTwigEnv, relativeFrom, ...rest } =
+      config.engines.twig;
 
     // Schema on config object being passed in:
     // https://github.com/basaltinc/twig-renderer/blob/master/config.schema.json

diff --git a/packages/engine-twig/_meta/_head.twig b/packages/engine-twig/_meta/_head.twig
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">

diff --git a/packages/engine-twig/lib/engine_twig.js b/packages/engine-twig/lib/engine_twig.js
@@ -126,7 +126,8 @@ var engine_twig = {
   // regexes, stored here so they're only compiled once
   findPartialsRE: /{%\s*(?:extends|include|embed)\s+('[^']+'|"[^"]+").*?%}/g,
   findPartialKeyRE: /"((?:\\.|[^"\\])*)"/,
-  findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // TODO
+  findListItemsRE:
+    /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // TODO
 
   // render it
   renderPattern: function renderPattern(pattern, data, partials) {

diff --git a/packages/engine-underscore/_meta/_head.html b/packages/engine-underscore/_meta/_head.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8" />

diff --git a/packages/engine-underscore/lib/engine_underscore.js b/packages/engine-underscore/lib/engine_underscore.js
@@ -97,8 +97,10 @@ const engine_underscore = {
   expandPartials: false,
 
   // regexes, stored here so they're only compiled once
-  findPartialsRE: /<%=\s*_\.renderNamedPartial[ \t]*\(\s*("(?:[^"].*?)"|'(?:[^'].*?)').*?%>/g, // TODO
-  findListItemsRE: /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g,
+  findPartialsRE:
+    /<%=\s*_\.renderNamedPartial[ \t]*\(\s*("(?:[^"].*?)"|'(?:[^'].*?)').*?%>/g, // TODO
+  findListItemsRE:
+    /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g,
 
   // render it
   renderPattern: function renderPattern(pattern, data, partials) {

diff --git a/packages/live-server/injected.html b/packages/live-server/injected.html
@@ -1,29 +1,38 @@
 <!-- Code injected by live-server -->
 <script type="text/javascript">
-	// <![CDATA[  <-- For SVG support
-	if ('WebSocket' in window) {
-		(function() {
-			function refreshCSS() {
-				var sheets = [].slice.call(document.getElementsByTagName("link"));
-				var head = document.getElementsByTagName("head")[0];
-				for (var i = 0; i < sheets.length; ++i) {
-					var elem = sheets[i];
-					var rel = elem.rel;
-					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
-						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
-						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
-					}
-				}
-			}
-			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
-			var address = protocol + window.location.host + window.location.pathname + '/ws';
-			var socket = new WebSocket(address);
-			socket.onmessage = function(msg) {
-				if (msg.data == 'reload') window.location.reload();
-				else if (msg.data == 'refreshcss') refreshCSS();
-			};
-			console.log('Live reload enabled.');
-		})();
-	}
-	// ]]>
+  // <![CDATA[  <-- For SVG support
+  if ('WebSocket' in window) {
+    (function () {
+      function refreshCSS() {
+        var sheets = [].slice.call(document.getElementsByTagName('link'));
+        var head = document.getElementsByTagName('head')[0];
+        for (var i = 0; i < sheets.length; ++i) {
+          var elem = sheets[i];
+          var rel = elem.rel;
+          if (
+            (elem.href && typeof rel != 'string') ||
+            rel.length == 0 ||
+            rel.toLowerCase() == 'stylesheet'
+          ) {
+            var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
+            elem.href =
+              url +
+              (url.indexOf('?') >= 0 ? '&' : '?') +
+              '_cacheOverride=' +
+              new Date().valueOf();
+          }
+        }
+      }
+      var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
+      var address =
+        protocol + window.location.host + window.location.pathname + '/ws';
+      var socket = new WebSocket(address);
+      socket.onmessage = function (msg) {
+        if (msg.data == 'reload') window.location.reload();
+        else if (msg.data == 'refreshcss') refreshCSS();
+      };
+      console.log('Live reload enabled.');
+    })();
+  }
+  // ]]>
 </script>
diff --git a/packages/starterkit-handlebars-demo/dist/_meta/_head.hbs b/packages/starterkit-handlebars-demo/dist/_meta/_head.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
 	<head>
 		<title>{{ title }}</title>
 		<meta charset="UTF-8">

diff --git a/packages/starterkit-twig-demo/dist/_meta/_head.twig b/packages/starterkit-twig-demo/dist/_meta/_head.twig
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
-<html class="{{ htmlClass }}">
+<html class="{{ htmlClass }}" lang="en">
   <head>
     <title>{{ title }}</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width" />
-    
+
     <link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" />
     <link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
 

diff --git a/packages/uikit-workshop/src/html/partials/base-template.html b/packages/uikit-workshop/src/html/partials/base-template.html
@@ -2,7 +2,10 @@
 {{# descBlockExists }}
 
 <div
-  class="pl-c-pattern-info__panel pl-c-pattern-info__panel--info pl-js-pattern-info"
+  class="
+    pl-c-pattern-info__panel pl-c-pattern-info__panel--info
+    pl-js-pattern-info
+  "
 >
   {{# isPatternView }}
   <!-- extra info for modal view -->
@@ -83,9 +86,7 @@ <h2 class="pl-c-annotations__title">Annotations</h2>
       <li class="pl-c-annotations__item">
         <h3 class="pl-c-annotations__item-title">{{ title }}</h3>
 
-        <div class="pl-c-annotations__item-body">
-          {{{ comment }}}
-        </div>
+        <div class="pl-c-annotations__item-body">{{{ comment }}}</div>
         <!--end pl-c-annotations__item-body-->
       </li>
       <!--end pl-c-annotations__item-->
-Original file line number
+Diff line change
@@ Expand Up @@
     ]
     ```
-    These template and page patterns would still be accessible via navigation.
     **default**: `[]`
     ## uikits
@@ Expand Down @@