get travis ci working (#36)

* chore: rename travis file * chore: add codecov badge * chore: readme clean up
vegarringdal · Apr 14, 2020 · 7a245df · 7a245df
1 parent 175a924
commit 7a245df
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 46 deletions.
diff --git a/travis.yml → .travis.yml b/travis.yml → .travis.yml
diff --git a/README.md b/README.md
@@ -2,9 +2,11 @@
 > 100% standard-compliant polyfill to allow WebComponent re-definition at runtime (used for HMR) 
 
 [![npm version](https://badge.fury.io/js/custom-elements-hmr-polyfill.svg)](https://badge.fury.io/js/custom-elements-hmr-polyfill) [![Total alerts](https://img.shields.io/lgtm/alerts/g/vegarringdal/custom-elements-hmr-polyfill.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/vegarringdal/custom-elements-hmr-polyfill/alerts/) [![Language grade: JavaScript](https://img.shields.io/lgtm/grade/javascript/g/vegarringdal/custom-elements-hmr-polyfill.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/vegarringdal/custom-elements-hmr-polyfill/context:javascript)
+[![codecov](https://codecov.io/gh/vegarringdal/custom-elements-hmr-polyfill/branch/master/graph/badge.svg)](https://codecov.io/gh/vegarringdal/custom-elements-hmr-polyfill)
 
 At the time of the creation of this readme, the API `customElements.define(...)` doesn't allow to re-define a Web Component with the same tag name but a different implementation. This limitation [made it impossible to do Hot Module Replacement (HMR) with standard Web Components](https://github.com/w3c/webcomponents/issues/829). - until today. 
 
+
 ## Live Demo
 
 - [Codesandbox](https://codesandbox.io/s/custom-elements-hmr-polyfill-4vd3o)
@@ -17,60 +19,36 @@ At the time of the creation of this readme, the API `customElements.define(...)`
 
 This polyfill overrides the native browser API `customElement.define` and enables re-definition of Web Components at runtime.
 
-Once a Web Component gets re-defined, the DOM tree is traversed and all instances of the Web Component are automatically cloned and re-created. Optionally, the  `onCustomElementChange` callback is called to give you full control over the runtime behaviour in case of any Web Component re-definition:
-
 ### Most simple integration
 
 ```ts
-import { applyPolyfill } from 'custom-elements-hmr-polyfill';
+import { applyPolyfill } from "custom-elements-hmr-polyfill";
 
-// no auto-reflow (web components won't update)
+// custom-elements-hmr-polyfill
 applyPolyfill();
-```
-
-### Activating auto-reflow
-
-```ts
-import { applyPolyfill, ReflowStrategy } from 'custom-elements-hmr-polyfill';
-
-applyPolyfill(
-    // resets the body's innerHTML, thus rerenders all elements
-    // but doesn't call all lifecycle methods in a standard way (less calls)
-    ReflowStrategy.RERENDER_INNER_HTML,
-    /* buffers changes for 500ms */ 500
-);
-```
-### Changing the buffer time
 
-```ts
-import { applyPolyfill, ReflowStrategy } from 'custom-elements-hmr-polyfill';
-
-applyPolyfill(
-    // resets the body's innerHTML, thus rerenders all elements
-    // but doesn't call all lifecycle methods in a standard way (less calls)
-    ReflowStrategy.RERENDER_INNER_HTML,
-    /* buffers changes for 500ms */ 500
-);
+//  reset the root to trigger rerender after the HMR event
+if (document.body) {
+  requestAnimationFrame(() => {
+    document.body.innerHTML = "";
+    document.body.innerHTML = "<root-app></root-app>";
+  });
+}
+
+export class RootApp extends HTMLElement {
+  private name = "I am RootApp";
+  connectedCallback() {
+    this.innerHTML = `
+      <div style="background-color:green">${this.name}</div>
+    `;
+  }
+}
+
+// PS! customElements.define can be called more then once when running pollyfil
+// it need to do this to activate new instance
+customElements.define("root-app", RootApp);
 ```
 
-### Using a custom re-render strategy
-
-```ts
-import { applyPolyfill, ReflowStrategy, rerenderInnerHTML } from 'custom-elements-hmr-polyfill';
-
-applyPolyfill(
-    /* no auto-reflow */ ReflowStrategy.NONE,
-    /* ignored, because reflowing is disabled */ 0, 
-    /* gets called for every re-definition of a web component */
-    (elementName: string, impl: any, options: ElementDefinitionOptions) => {
-
-        // manually reflow using rerenderInnerHTML strategy without any buffering
-        rerenderInnerHTML();
-
-        console.log('And do something more...');
-    }    
-);
-```
 
 ## Browser Support