fix(dev-server): progress bar uses transform

Author: manucorporat

src/dev-server/templates/initial-load.html

@@ -127,10 +127,13 @@
     }
     #progress-bar {
       position: absolute;
-      width: 0;
+      width: 100%;
       height: 3px;
       background: #5851ff;
-      transition: width 1s ease-in-out;
+      transform: scaleX(0);
+      transform-origin: left center;
+      transition: transform 1s ease-in-out;
+      contain: strict;
     }
   </style>
 </head>
@@ -161,7 +164,7 @@
     window.addEventListener('buildLog', function(ev) {
       var buildLog = ev.detail;
       logOutput.innerText = buildLog.messages.join('\n');
-      progressBar.style.width = (buildLog.progress * 100) + '%';
+      progressBar.style.transform = `scaleX(${Math.min(1, buildLog.progress)})`;
     });
   </script>
 

test/todo-app/src/components.d.ts

@@ -6,7 +6,6 @@
 
 
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
-import { JSX } from '@stencil/core';
 
 
 export namespace Components {
@@ -32,30 +31,27 @@ declare namespace LocalJSX {
     'text'?: string;
   }
 
-  interface ElementInterfaces {
-    'AppRoot': Components.AppRoot;
-    'TodoInput': Components.TodoInput;
-    'TodoItem': Components.TodoItem;
-  }
-
   interface IntrinsicElements {
-    'AppRoot': LocalJSX.AppRoot;
-    'TodoInput': LocalJSX.TodoInput;
-    'TodoItem': LocalJSX.TodoItem;
+    'app-root': AppRoot;
+    'todo-input': TodoInput;
+    'todo-item': TodoItem;
   }
 }
+
 export { LocalJSX as JSX };
 
+
 declare module "@stencil/core" {
   export namespace JSX {
-    interface ElementInterfaces extends LocalJSX.ElementInterfaces {}
     interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
   }
 }
 
+
 declare global {
 
 
+
   interface HTMLAppRootElement extends Components.AppRoot, HTMLStencilElement {}
   var HTMLAppRootElement: {
     prototype: HTMLAppRootElement;
@@ -73,16 +69,13 @@ declare global {
     prototype: HTMLTodoItemElement;
     new (): HTMLTodoItemElement;
   };
-  interface HTMLElementTagNameMap {
-    'app-root': HTMLAppRootElement
-    'todo-input': HTMLTodoInputElement
-    'todo-item': HTMLTodoItemElement
-  }
 
-  interface ElementTagNameMap {
+  interface HTMLElementTagNameMap {
     'app-root': HTMLAppRootElement;
     'todo-input': HTMLTodoInputElement;
     'todo-item': HTMLTodoItemElement;
   }
+
+  interface ElementTagNameMap extends HTMLElementTagNameMap {}
 }