Adding HTML transformation

Author: Bhargav Krishna

global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.html" {
+  const content: string;
+  export default content;
+}

src/ui/message-banner.html

@@ -0,0 +1,39 @@
+<div class="office-js-helpers-notification ms-font-m ms-MessageBar @@CLASS">
+  <style>
+    .office-js-helpers-notification {
+      position: fixed;
+      z-index: 2147483647;
+      top: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      padding: 0 0 10px 0;
+    }
+
+    .office-js-helpers-notification > div > div {
+      padding: 10px 15px;
+      box-sizing: border-box;
+    }
+
+    .office-js-helpers-notification pre {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      margin: 0px;
+      font-size: smaller;
+    }
+
+    .office-js-helpers-notification > button {
+      height: 52px;
+      width: 40px;
+      cursor: pointer;
+      float: right;
+      background: transparent;
+      border: 0;
+      margin-left: 10px;
+      margin-right: '@@PADDING'
+    }
+  </style>
+  <button>
+      <i class="ms-Icon ms-Icon--Clear"></i>
+  </button>
+</div>

src/ui/ui.ts

@@ -3,6 +3,7 @@
 import { isString, isError, isObject } from 'lodash-es';
 import { CustomError } from '../errors/custom.error';
 import { Utilities, PlatformType } from '../helpers/utilities';
+import html from './message-banner.html';
 
 export class UI {
   /** Shows a basic notification at the top of the page
@@ -67,43 +68,7 @@ export class UI {
       paddingForPersonalityMenu = '40px';
     }
 
-    const messageBannerHtml = `
-            <div class="office-js-helpers-notification ms-font-m ms-MessageBar ${messageBarTypeClass}">
-                <style>
-                    .office-js-helpers-notification {
-                        position: fixed;
-                        z-index: 2147483647;
-                        top: 0;
-                        left: 0;
-                        right: 0;
-                        width: 100%;
-                        padding: 0 0 10px 0;
-                    }
-                    .office-js-helpers-notification > div > div {
-                        padding: 10px 15px;
-                        box-sizing: border-box;
-                    }
-                    .office-js-helpers-notification pre {
-                        white-space: pre-wrap;
-                        word-wrap: break-word;
-                        margin: 0px;
-                        font-size: smaller;
-                    }
-                    .office-js-helpers-notification > button {
-                        height: 52px;
-                        width: 40px;
-                        cursor: pointer;
-                        float: right;
-                        background: transparent;
-                        border: 0;
-                        margin-left: 10px;
-                        margin-right: ${paddingForPersonalityMenu}
-                    }
-                </style>
-                <button>
-                    <i class="ms-Icon ms-Icon--Clear"></i>
-                </button>
-            </div>`;
+    const messageBannerHtml = html.replace('@@CLASS', messageBarTypeClass).replace('\'@@PADDING\'', paddingForPersonalityMenu);
 
     const existingNotifications = document.getElementsByClassName('office-js-helpers-notification');
     while (existingNotifications[0]) {

tsconfig.json

@@ -8,6 +8,7 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "noResolve": false,
     "removeComments": false,
     "allowUnusedLabels": false,
     "noImplicitReturns": true,
@@ -16,12 +17,14 @@
     "sourceMap": true,
     "declaration": true,
     "allowSyntheticDefaultImports": true,
+    "jsx": "react",
     "lib": [
       "dom",
       "es2016"
     ],
     "typeRoots": [
-      "node_modules/@types"
+      "node_modules/@types",
+      "./global.d.ts"
     ]
   },
   "exclude": [

webpack.config.ts

@@ -30,7 +30,9 @@ const config = {
       {
         test: /(\.html)$/,
         loader: 'html-loader',
-        exclude: /node_modules/
+        options: {
+          exportAsEs6Default: true
+        }
       },
       {
         test: /(\.ts)$/,