Switching from jade to pug (#21047)

* Upgrading pug * Switching .jade to .pug and fixing templates * Renaming the I18N usages of jade to pug * No more jade in I18N
elastic · Jul 27, 2018 · 15e3e59 · 15e3e59
1 parent bd03506
commit 15e3e59
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 165 deletions.
diff --git a/package.json b/package.json
@@ -140,8 +140,6 @@
     "http-proxy-agent": "^2.1.0",
     "https-proxy-agent": "^2.2.1",
     "inert": "4.0.2",
-    "jade": "1.11.0",
-    "jade-loader": "0.8.0",
     "joi": "10.4.1",
     "jquery": "^3.3.1",
     "js-yaml": "3.4.1",
@@ -170,6 +168,7 @@
     "postcss-loader": "2.0.6",
     "prop-types": "15.5.8",
     "proxy-from-env": "1.0.0",
+    "pug": "^2.0.3",
     "querystring-browser": "1.0.4",
     "raw-loader": "0.5.1",
     "react": "^16.3.0",

diff --git a/src/dev/i18n/extract_default_translations.js b/src/dev/i18n/extract_default_translations.js
@@ -23,7 +23,7 @@ import JSON5 from 'json5';
 
 import { extractHtmlMessages } from './extract_html_messages';
 import { extractCodeMessages } from './extract_code_messages';
-import { extractJadeMessages } from './extract_jade_messages';
+import { extractPugMessages } from './extract_pug_messages';
 import { extractHandlebarsMessages } from './extract_handlebars_messages';
 import { globAsync, makeDirAsync, accessAsync, readFileAsync, writeFileAsync } from './utils';
 
@@ -43,14 +43,14 @@ export async function extractDefaultTranslations(inputPath) {
     matchBase: true,
   });
 
-  const { htmlEntries, codeEntries, jadeEntries, hbsEntries } = entries.reduce(
+  const { htmlEntries, codeEntries, pugEntries, hbsEntries } = entries.reduce(
     (paths, entry) => {
       const resolvedPath = resolve(inputPath, entry);
 
       if (resolvedPath.endsWith('.html')) {
         paths.htmlEntries.push(resolvedPath);
-      } else if (resolvedPath.endsWith('.jade')) {
-        paths.jadeEntries.push(resolvedPath);
+      } else if (resolvedPath.endsWith('.pug')) {
+        paths.pugEntries.push(resolvedPath);
       } else if (resolvedPath.endsWith('.hbs') || resolvedPath.endsWith('.handlebars')) {
         paths.hbsFiles.push(resolvedPath);
       } else {
@@ -59,7 +59,7 @@ export async function extractDefaultTranslations(inputPath) {
 
       return paths;
     },
-    { htmlEntries: [], codeEntries: [], jadeEntries: [], hbsEntries: [] }
+    { htmlEntries: [], codeEntries: [], pugEntries: [], hbsEntries: [] }
   );
 
   const defaultMessagesMap = new Map();
@@ -68,7 +68,7 @@ export async function extractDefaultTranslations(inputPath) {
     [
       [htmlEntries, extractHtmlMessages],
       [codeEntries, extractCodeMessages],
-      [jadeEntries, extractJadeMessages],
+      [pugEntries, extractPugMessages],
       [hbsEntries, extractHandlebarsMessages],
     ].map(async ([entries, extractFunction]) => {
       const files = await Promise.all(

diff --git a/src/dev/i18n/extract_jade_messages.js → src/dev/i18n/extract_pug_messages.js b/src/dev/i18n/extract_jade_messages.js → src/dev/i18n/extract_pug_messages.js
@@ -25,13 +25,13 @@ import { isI18nTranslateFunction, traverseNodes } from './utils';
 /**
  * Matches `i18n(...)` in `#{i18n('id', { defaultMessage: 'Message text' })}`
  */
-const JADE_I18N_REGEX = /(?<=\#\{)i18n\((([^)']|'([^'\\]|\\.)*')*\)(?=\}))/g;
+const PUG_I18N_REGEX = /(?<=\#\{)i18n\((([^)']|'([^'\\]|\\.)*')*\)(?=\}))/g;
 
 /**
  * Example: `#{i18n('message-id', { defaultMessage: 'Message text' })}`
  */
-export function* extractJadeMessages(buffer) {
-  const expressions = buffer.toString().match(JADE_I18N_REGEX) || [];
+export function* extractPugMessages(buffer) {
+  const expressions = buffer.toString().match(PUG_I18N_REGEX) || [];
 
   for (const expression of expressions) {
     for (const node of traverseNodes(parse(expression).program.body)) {

diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
@@ -232,11 +232,6 @@ export default class BaseOptimizer {
             test: /\.css$/,
             use: getStyleLoaders(),
           },
-          {
-            // TODO: this doesn't seem to be used, remove?
-            test: /\.jade$/,
-            loader: 'jade-loader'
-          },
           {
             test: /\.(html|tmpl)$/,
             loader: 'raw-loader'

diff --git a/src/server/http/index.js b/src/server/http/index.js
@@ -88,7 +88,7 @@ export default async function (kbnServer, server, config) {
     this.views({
       path: path,
       isCached: config.get('optimize.viewCaching'),
-      engines: _.assign({ jade: require('jade') }, engines || {})
+      engines: _.assign({ pug: require('pug') }, engines || {})
     });
   });
 

diff --git a/src/server/views/index.jade → src/server/views/index.pug b/src/server/views/index.jade → src/server/views/index.pug
diff --git a/src/ui/ui_render/views/chrome.jade → src/ui/ui_render/views/chrome.pug b/src/ui/ui_render/views/chrome.jade → src/ui/ui_render/views/chrome.pug
@@ -51,25 +51,25 @@ html(lang='en')
 
     //- Favicons (generated from http://realfavicongenerator.net/)
     link(
-      rel='apple-touch-icon' sizes='180x180' href='#{uiPublicUrl}/favicons/apple-touch-icon.png'
+      rel='apple-touch-icon' sizes='180x180' href=`${uiPublicUrl}/favicons/apple-touch-icon.png`
     )
     link(
-      rel='icon' type='image/png' href='#{uiPublicUrl}/favicons/favicon-32x32.png' sizes='32x32'
+      rel='icon' type='image/png' href=`${uiPublicUrl}/favicons/favicon-32x32.png` sizes='32x32'
     )
     link(
-      rel='icon' type='image/png' href='#{uiPublicUrl}/favicons/favicon-16x16.png' sizes='16x16'
+      rel='icon' type='image/png' href=`${uiPublicUrl}/favicons/favicon-16x16.png` sizes='16x16'
     )
     link(
-      rel='manifest' href='#{uiPublicUrl}/favicons/manifest.json'
+      rel='manifest' href=`${uiPublicUrl}/favicons/manifest.json`
     )
     link(
-      rel='mask-icon' href='#{uiPublicUrl}/favicons/safari-pinned-tab.svg' color='#e8488b'
+      rel='mask-icon' href=`${uiPublicUrl}/favicons/safari-pinned-tab.svg` color='#e8488b'
     )
     link(
-      rel='shortcut icon' href='#{uiPublicUrl}/favicons/favicon.ico'
+      rel='shortcut icon' href=`${uiPublicUrl}/favicons/favicon.ico`
     )
     meta(
-      name='msapplication-config' content='#{uiPublicUrl}/favicons/browserconfig.xml'
+      name='msapplication-config' content=`${uiPublicUrl}/favicons/browserconfig.xml`
     )
     meta(
       name='theme-color' content='#ffffff'

diff --git a/src/ui/ui_render/views/ui_app.jade → src/ui/ui_render/views/ui_app.pug b/src/ui/ui_render/views/ui_app.jade → src/ui/ui_render/views/ui_app.pug
@@ -1,4 +1,4 @@
-extends ./chrome.jade
+extends ./chrome
 
 block content
   style.

diff --git a/tasks/verify_translations.js b/tasks/verify_translations.js
@@ -58,7 +58,7 @@ async function verifyTranslations(uiExports) {
   // Search files for used translation keys
   const translationPatterns = [
     { regexp: 'i18n\\(\'(.*)\'\\)',
-      parsePaths: [fromRoot('src/ui/ui_render/views/*.jade')] }
+      parsePaths: [fromRoot('src/ui/ui_render/views/*.pug')] }
   ];
   for (const { regexp, parsePaths } of translationPatterns) {
     const keys = await i18nVerify.getTranslationKeys(regexp, parsePaths);
@@ -80,7 +80,7 @@ async function verifyTranslations(uiExports) {
   throw new Error(
     '\n' +
     '\n' +
-    'The following keys are used in angular/jade views but are not translated:\n' +
+    'The following keys are used in angular/pug views but are not translated:\n' +
     keysWithoutTranslations.map(([locale, keys]) => (
       `   - ${locale}: ${formatListAsProse(keys)}`
     )).join('\n') +