Merge pull request #93 from vaadin/p3-preview

P3 preview

.npmignore

@@ -0,0 +1,15 @@
+bower_components
+demo
+.eslintrc.json
+.stylelintrc
+.travis.yml
+.gemini.yml
+.gemini-ie.yml
+test/visual
+wct.conf.js
+analysis.json
+bower.json
+gulpfile.js
+index.html
+screenshot.png
+vaadin-directory-description.md

.travis.yml

@@ -1,7 +1,7 @@
 sudo: true
 dist: trusty
 language: node_js
-node_js: 8.9
+node_js: 8.11
 
 cache:
   directories:
@@ -11,34 +11,42 @@ addons:
   firefox: latest
   chrome: stable
 
-install:
-  - npm install
-  - polymer install
-
-before_script:
-  - gulp lint version:check
-  - polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html
-  - xvfb-run -s '-screen 0 1024x768x24' wct
-
 env:
-  - TEST_SUITE=visual_tests
-  - TEST_SUITE=unit_tests
+  - POLYMER=2 TEST_SUITE=unit_tests
+  - POLYMER=2 TEST_SUITE=visual_tests
+  - POLYMER=3
 
 script:
-  - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
-      if [[ "$TEST_SUITE" = "visual_tests" ]]; then
-        npm i --no-save gemini@^4.0.0 gemini-sauce gemini-polyserve &&
-        gemini test test/visual && gemini test test/visual -c .gemini-chrome.yml;
+  - if [[ "$POLYMER" = "2" ]]; then
+      npm -q i && npm i -q --no-save bower polymer-cli && bower -q i &&
+      gulp lint version:check &&
+      polymer lint --rules polymer-2 --input ./src/*.html ./theme/**/*.html &&
+      if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
+        if [[ "$TEST_SUITE" = "visual_tests" ]]; then
+          npm i -q --no-save gemini@^4.0.0 gemini-sauce gemini-polyserve &&
+          gemini test test/visual && gemini test test/visual -c .gemini-chrome.yml;
+        else
+          wct --env saucelabs;
+        fi;
+      else
+        xvfb-run -s '-screen 0 1024x768x24' wct;
       fi &&
-      if [[ "$TEST_SUITE" = "unit_tests" ]]; then
-        wct --env saucelabs;
+      if [[ "$TRAVIS_EVENT_TYPE" = "cron" && "$TEST_SUITE" = "unit_tests" ]]; then
+        wct --env saucelabs-cron;
       fi;
     fi
-  - if [ "$TRAVIS_EVENT_TYPE" = "cron" ]; then
-      if [[ "$TEST_SUITE" = "unit_tests" ]]; then
-        wct --env saucelabs-cron;
+  - if [[ "$POLYMER" = "3" ]]; then
+      npm --no-save -q install -g yarn bower magi-cli web-component-tester &&
+      (cd .. && git clone --depth 1 -b vaadin-components-rc git://github.com/web-padawan/polymer-modulizer.git && cd polymer-modulizer && npm -q link) &&
+      rm -rf node_modules &&
+      magi p3-convert --out . --import-style=name &&
+      yarn install --flat &&
+      if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
+        wct --module-resolution=node --npm --env saucelabs;
+      else
+        xvfb-run -s '-screen 0 1024x768x24' wct --module-resolution=node --npm;
       fi;
     fi
 
 after_success:
-  - cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | coveralls
+  - "cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | coveralls"

README.md

@@ -13,7 +13,7 @@
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-button/html-api)
 
-[<vaadin-button>](https://vaadin.com/components/vaadin-button) is a [Polymer 2](http://polymer-project.org) element providing an accessible and customizable button, part of the [Vaadin components](https://vaadin.com/components).
+[<vaadin-button>](https://vaadin.com/components/vaadin-button) is a Web Component providing an accessible and customizable button, part of the [Vaadin components](https://vaadin.com/components).
 
 <!--
 ```
@@ -34,6 +34,42 @@
 
 [<img src="https://raw.githubusercontent.com/vaadin/vaadin-button/master/screenshot.png" alt="Screenshot of vaadin-button, using the default Lumo theme">](https://vaadin.com/components/vaadin-button)
 
+## Installation
+
+The Vaadin components are distributed as Bower and npm packages.
+Please note that the version range is the same, as the API has not changed.
+You should not mix Bower and npm versions in the same application, though.
+
+Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
+are only published on npm, not pushed to GitHub repositories.
+
+### Polymer 2 and HTML Imports compatible version
+
+Install `vaadin-button`:
+
+```sh
+bower i vaadin/vaadin-button --save
+```
+
+Once installed, import it in your application:
+
+```html
+<link rel="import" href="bower_components/vaadin-button/vaadin-button.html">
+```
+### Polymer 3 and ES Modules compatible version
+
+Install `vaadin-button`:
+
+```sh
+npm i @vaadin/vaadin-button --save
+```
+
+Once installed, import it in your application:
+
+```js
+import '@vaadin/vaadin-button/vaadin-button.js';
+```
+
 ## Getting Started
 
 Vaadin components use the Lumo theme by default.

bower.json

@@ -29,14 +29,14 @@
     "iron-test-helpers": "^2.0.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "^1.0.0"
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.0"
   },
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.0.0",
-    "vaadin-themable-mixin": "^1.1.0",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.0.0",
+    "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.0",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.0.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^1.0.1"
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^1.1.0"
   }
 }

demo/button-demo.js

@@ -0,0 +1,12 @@
+window.ButtonDemo = superClass => {
+  return class extends superClass {
+    static get properties() {
+      return {
+      };
+    }
+  };
+};
+
+window.addEventListener('WebComponentsReady', () => {
+  document.body.removeAttribute('unresolved');
+});

demo/index.html

@@ -6,23 +6,23 @@
   <title>Vaadin Button Examples</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-  <custom-style>
-    <style include="vaadin-component-demo-shared-styles"></style>
-  </custom-style>
-</head>
-
-<body>
   <link rel="import" href="../../polymer/polymer.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
   <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
-  <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.html">
+  <script src="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.js"></script>
 
-  <link rel="import" href="button-demo.html">
+  <script src="./button-demo.js"></script>
 
   <link rel="import" href="../vaadin-button.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
   <link rel="import" href="../../vaadin-lumo-styles/icons.html">
 
+  <custom-style>
+    <style include="vaadin-component-demo-shared-styles"></style>
+  </custom-style>
+</head>
+
+<body>
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>
 </html>

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vaadin-button",
+  "name": "@vaadin/vaadin-button",
   "version": "2.1.0-alpha1",
   "description": "vaadin-button",
   "main": "vaadin-button.html",
@@ -37,7 +37,6 @@
     "gulp-html-extract": "^0.3.0",
     "gulp-replace": "^0.6.1",
     "gulp-stylelint": "^7.0.0",
-    "polymer-cli": "^1.6.0",
     "stylelint": "^9.0.0",
     "stylelint-config-vaadin": "latest",
     "wct-istanbul": "^0.14.3",

test/index.html

@@ -11,8 +11,6 @@
 
 <body>
   <script>
-    WCT._config.environmentScripts.push('webcomponentsjs/webcomponents-lite.js');
-
     WCT.loadSuites(
       window.VaadinButtonSuites
         .reduce(function(suites, suite) {

test/vaadin-button_test.html

@@ -4,8 +4,10 @@
   <meta charset="UTF-8">
   <title>vaadin-button tests</title>
   <script src="../../web-component-tester/browser.js"></script>
-  <script src="../../iron-test-helpers/mock-interactions.js"></script>
-  <link rel="import" href="../../polymer/polymer.html">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../iron-test-helpers/mock-interactions.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
   <link rel="import" href="../vaadin-button.html">
 </head>
 
@@ -35,7 +37,7 @@
       });
 
       it('should define button label using light DOM', () => {
-        var children = Polymer.dom(label).getEffectiveChildNodes();
+        const children = Polymer.FlattenedNodesObserver.getFlattenedNodes(label);
         expect(children[1].textContent).to.be.equal('Vaadin ');
         expect(children[2].outerHTML).to.be.equal('<i>Button</i>');
       });