Juicy · QuiWorks · Jul 10, 2018 · Jul 17, 2018
diff --git a/.travis.yml b/.travis.yml
@@ -2,24 +2,23 @@ language: node_js
 sudo: required
 dist: trusty
 before_script:
-- npm install web-component-tester
-- npm install bower
-- npm install juicy-tattoo
-- export PATH=$PWD/node_modules/.bin:$PATH
-- bower install
+  - npm install web-component-tester
+  - npm install
+  - npm install juicy-tattoo
+  - 'export PATH=$PWD/node_modules/.bin:$PATH'
 node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
-    - google-chrome
+      - google-chrome
     packages:
-    - google-chrome-stable
+      - google-chrome-stable
 script:
-- xvfb-run wct --skip-plugin sauce
-- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --skip-plugin local --plugin
-  sauce; fi
-- juicy-tattoo
+  - xvfb-run wct --module-resolution=node --npm --skip-plugin sauce
+  - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --module-resolution=node --npm --skip-plugin local --plugin sauce; fi'
+  - juicy-tattoo
 env:
   global:
     secure: hc6T7bNvE58br1nRUxmO1ScvOCuIxoBhNP1hHT9MkPn44qB2x4YJ9mYGB+Y0cdfvAjm4vVxTDR1SHCw1bIv6XBNB8O/HUZmlHFZNFxpvS6sOrSAEPj2V3Ve5S5bQcghQ0xsXMIsRib2lZccg7gBp6cX4FOy9IirGSaiunfvloQY=
+
diff --git a/bower.json b/bower.json
diff --git a/examples/basic_file.html b/examples/basic_file.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; basic partial from file</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
-    <link rel="import" href="../juicy-html.html">
+    <script type="module" src="../juicy-html.js"></script>
     <style>
         body {
             font-family: Helvetica, Arial, sans-serif;

diff --git a/examples/basic_inline.html b/examples/basic_inline.html
@@ -3,9 +3,9 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; basic inline partial</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
-    <link rel="import" href="../juicy-html.html">
+    <script type="module" src="../juicy-html.js"></script>
     <style>
         body {
             font-family: Helvetica, Arial, sans-serif;

diff --git a/examples/components/my-app.html b/examples/components/my-app.html
diff --git a/examples/components/my-app.js b/examples/components/my-app.js
@@ -0,0 +1,36 @@
+import '../../../@polymer/polymer/polymer-legacy.js';
+import '../../juicy-html.js';
+import { Polymer } from '../../../@polymer/polymer/lib/legacy/polymer-fn.js';
+import { html as html$0 } from '../../../@polymer/polymer/lib/utils/html-tag.js';
+import { Templatizer } from '../../../@polymer/polymer/lib/legacy/templatizer-behavior.js';
+Polymer({
+  _template: html$0`
+        <h2>My-app custom element</h2>
+        <style>
+            paper-menu {
+                width: 300px;
+            }
+        </style>
+        <juicy-html href="{{viewmodel.html}}" model="{{viewmodel}}" on-stamped="stamped"></juicy-html>
+`,
+
+  is: "my-app",
+  behaviors: [Templatizer],
+
+  ready: function () {
+      this.viewmodel = {
+          username: 'World',
+          menuItems: [
+            { label: "Item 1", icon: "add" },
+            { label: "Item 2", icon: "settings" },
+            { label: "Item 3", icon: "delete" },
+            { label: "Item 4", icon: "work" }
+          ],
+          html: './partials/page_3.html'
+      }
+  },
+
+  stamped: function (event) {
+      // Play with Polymer's templating voodoo
+  }
+});
diff --git a/examples/inline_markup_w_model_binding.html b/examples/inline_markup_w_model_binding.html
@@ -3,11 +3,11 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; basic inline partial</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
 
-    <link rel="import" href="../juicy-html.html">
-    <link rel="import" href="../../polymer/polymer.html">
+    <script type="module" src="../juicy-html.js"></script>
+    <script type="module" src="../node_modules/@polymer/polymer/polymer-legacy.js"></script>
 
     <style>
         body {

diff --git a/examples/partials/page_1.html b/examples/partials/page_1.html
@@ -5,7 +5,7 @@ <h1>Hello <span>{{model.username}}</span></h1>
 </dom-bind>
 <p>
     This is the Page 1.
-    <button onclick="(Polymer.Element ? document.getElementById('test').parentNode : document.getElementById('test')).set('model.subpage.html', './partials/page_2.html')">Press here</button>
+    <button onclick="document.getElementById('test').parentNode.set('model.subpage.html', './partials/page_2.html')">Press here</button>
     to replace the template with Page 2
 </p>
 

diff --git a/examples/partials/page_2.html b/examples/partials/page_2.html
@@ -1,5 +1,5 @@
 <h1>This is Page 2</h1>
 
-<button onclick="(Polymer.Element ? document.getElementById('test').parentNode : document.getElementById('test')).set('model.subpage.html', './partials/page_1.html')">
+<button onclick="document.getElementById('test').parentNode.set('model.subpage.html', './partials/page_1.html')">
     Return to Page 1
 </button>
diff --git a/examples/polymer_partial.html b/examples/polymer_partial.html
@@ -3,8 +3,8 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; in a Polymer element</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="components/my-app.html">
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
+    <script type="module" src="./components/my-app.js"></script>
 </head>
 <body>
     <style>

diff --git a/examples/polymer_template_inline.html b/examples/polymer_template_inline.html
@@ -1,13 +1,13 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; Fancy inline partial within Polymer's dom-bind</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
 
-    <link rel="import" href="../juicy-html.html">
-    <link rel="import" href="../../polymer/polymer.html">
+    <script type="module" src="../juicy-html.js"></script>
+    <script type="module" src="../node_modules/@polymer/polymer/polymer-legacy.js"></script>
 
     <style>
         body {
@@ -33,29 +33,29 @@ <h3>Code (live)</h3>
       </template>
     </dom-bind>
 
-    <script>
-        var model = {
-            subpage: {
-                name: "World",
-                polymer: "Polymer's dom-bind",
-                vanilla: "as well as by native JS <code>&lt;script&gt;</code> or custom elements",
-                Html: "All those nodes will get <code>.model</code> property with object given in model attribute.\n" +
-                  "<dom-bind>\n" +
-                  "    <template is=\"dom-bind\">\n" +
-                  "        <p> which can be used by <span>{{model.polymer}}</span></p>\n" +
-                  "    </template>\n" +
-                  "</dom-bind>\n" +
-                  "<div></div>\n" +
-                  "<script>\n" +
-                  "    var script = document.currentScript;" +
-                  "    var div = script.previousElementSibling;" +
-                  "    div.innerHTML = script.model.vanilla;\n" +
-                  "    console.info(\"attached model\", script.model);\n</" +
-                  "script>"
-            }
-        };
-        document.getElementById('test').model = model; // Polymer 1.x
-        document.getElementById('test').parentNode.model = model; // Polymer 2.0
-    </script>
+    <script type="module">
+var model = {
+    subpage: {
+        name: "World",
+        polymer: "Polymer's dom-bind",
+        vanilla: "as well as by native JS <code>&lt;script&gt;</code> or custom elements",
+        Html: "All those nodes will get <code>.model</code> property with object given in model attribute.\n" +
+          "<dom-bind>\n" +
+          "    <template is=\"dom-bind\">\n" +
+          "        <p> which can be used by <span>{{model.polymer}}</span></p>\n" +
+          "    </template>\n" +
+          "</dom-bind>\n" +
+          "<div></div>\n" +
+          "<script>\n" +
+          "    var script = document.currentScript;" +
+          "    var div = script.previousElementSibling;" +
+          "    div.innerHTML = script.model.vanilla;\n" +
+          "    console.info(\"attached model\", script.model);\n</" +
+          "script>"
+    }
+};
+document.getElementById('test').model = model; // Polymer 1.x
+document.getElementById('test').parentNode.model = model; // Polymer 2.0
+</script>
 </body>
 </html>
diff --git a/examples/polymer_template_partial.html b/examples/polymer_template_partial.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; in a &lt;template&gt; with HTML partial loaded from a file</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
 
-    <link rel="import" href="../juicy-html.html">
-    <link rel="import" href="../../polymer/polymer.html">
+    <script type="module" src="../juicy-html.js"></script>
+    <script type="module" src="../node_modules/@polymer/polymer/polymer-legacy.js"></script>
 
     <style>
         body {
@@ -21,21 +21,22 @@
             <juicy-html model="{{model.subpage}}" href="{{model.subpage.html}}"></juicy-html>
         </template>
     </dom-bind>
-    <script>
-        var model = {
-            subpage: {
-                username: "World",
-                html: "./partials/page_1.html"
-            }
-        };
+    <script type="module">
+// import '../juicy-html.js';
+// import '../../@polymer/polymer/polymer-legacy.js';
+import { PolymerElement } from '../node_modules/@polymer/polymer/polymer-element.js';
+var model = {
+    subpage: {
+        username: "World",
+        html: "./partials/page_1.html"
+    }
+};
 
-      window.addEventListener('WebComponentsReady', function() {
-          if(Polymer.Element){
-              document.getElementById('test').parentNode.model = model;
-          } else {
-              document.getElementById('test').model = model;
-          }
-      });
-    </script>
+if(PolymerElement){
+    document.getElementById('test').parentNode.model = model;
+} else {
+    document.getElementById('test').model = model;
+}
+</script>
 </body>
 </html>
diff --git a/examples/template_partial_sibling.html b/examples/template_partial_sibling.html
@@ -3,10 +3,10 @@
 <head>
     <meta charset="utf-8">
     <title>&lt;juicy-html&gt; in a &lt;template&gt; with HTML partial loaded as a sibling</title>
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <link rel="stylesheet" href="//juicy.github.io/juicy-tile-list/examples/github-markdown.css">
 
-    <link rel="import" href="../juicy-html.html">
+    <script type="module" src="../juicy-html.js"></script>
 
     <style>
         body {