feat(sifrr-elements): update to use sifrr-dom 0.0.7

sifrr · Nov 2, 2019 · fb4112c · fb4112c
1 parent 543e9fd
commit fb4112c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 18 deletions.
diff --git a/elements/sifrr-include/src/sifrrinclude.js b/elements/sifrr-include/src/sifrrinclude.js
@@ -1,15 +1,16 @@
 import SifrrDom from '@sifrr/dom';
 
 class SifrrInclude extends SifrrDom.Element {
-  onConnect() {
-    let preffix = '',
-      suffix = '';
+  onPropsChange(props) {
+    if (props.filter(p => ['type', 'url', 'selector'].indexOf(p) > -1).length > 0) this.load();
+  }
+
+  load() {
+    let element = false;
     if (this.type === 'js') {
-      preffix = '<script>';
-      suffix = '</script>';
+      element = 'script';
     } else if (this.type === 'css') {
-      preffix = '<style>';
-      suffix = '</style>';
+      element = 'style';
     } else {
       this.type = 'html';
     }
@@ -22,7 +23,10 @@ class SifrrInclude extends SifrrDom.Element {
             const template = SifrrDom.template(text);
             this.textContent = '';
             this.appendChild(template.content.querySelector(this.selector));
-          } else this.innerHTML = preffix + text + suffix;
+          } else
+            this.innerHTML = `${element ? `<${element}>` : ''}${text}${
+              element ? `</${element}>` : ''
+            }`;
         });
     }
   }

diff --git a/elements/sifrr-include/test/browser/loading.test.js b/elements/sifrr-include/test/browser/loading.test.js
@@ -1,6 +1,7 @@
 describe('include', function() {
   before(async () => {
     await page.goto(`${PATH}/include.html`);
+    await page.evaluate(async () => await Sifrr.Dom.loading());
   });
 
   it('loads include', async function() {

diff --git a/elements/sifrr-include/test/public/elements/main/element.html b/elements/sifrr-include/test/public/elements/main/element.html
@@ -0,0 +1,20 @@
+<template>
+  <sifrr-include></sifrr-include>
+  <sifrr-include id="html" :type="html" :url="/test.html"></sifrr-include>
+  <sifrr-include
+    id="htmlSelector"
+    :type="html"
+    :url="/selector.html"
+    :selector="#selector"
+  ></sifrr-include>
+  <sifrr-include id="css" :type="css" :url="/test.css"></sifrr-include>
+  <sifrr-include id="js" :type="js" :url="/test.js"></sifrr-include>
+</template>
+<script>
+  class MainElement extends Sifrr.Dom.Element {
+    static get useShadowRoot() {
+      return false;
+    }
+  }
+  Sifrr.Dom.register(MainElement);
+</script>
diff --git a/elements/sifrr-include/test/public/include.html b/elements/sifrr-include/test/public/include.html
@@ -5,19 +5,11 @@
     <title>include</title>
   </head>
   <body>
-    <sifrr-include></sifrr-include>
-    <sifrr-include id="html" type="html" url="/test.html"></sifrr-include>
-    <sifrr-include
-      id="htmlSelector"
-      type="html"
-      url="/selector.html"
-      selector="#selector"
-    ></sifrr-include>
-    <sifrr-include id="css" type="css" url="/test.css"></sifrr-include>
-    <sifrr-include id="js" type="js" url="/test.js"></sifrr-include>
+    <main-element></main-element>
     <script src="/sifrr.dom.js" charset="utf-8"></script>
     <script type="text/javascript">
       Sifrr.Dom.setup();
+      Sifrr.Dom.load('main-element');
     </script>
     <script src="/sifrrinclude.js" charset="utf-8"></script>
   </body>