refactor: convert to lit-element and TypeScript

.eslintrc.json

@@ -1,15 +1,8 @@
 {
   "extends": "vaadin",
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "plugins": [
-    "html"
-  ],
-  "globals": {
-    "Polymer": false,
-    "Vaadin": false
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 2018,
+    "project": "./tsconfig.json"
   }
 }

.gemini.yml

@@ -1,22 +1,16 @@
-rootUrl: http://localhost:8080/components/vaadin-app-layout/test/visual/
+rootUrl: http://localhost:8080/test/visual/
 gridUrl: http://localhost:4444/wd/hub
 screenshotsDir: ./test/visual/screens
 
 system:
   plugins:
-    polyserve:
+    esm:
       port: 8080
     sauce: true
 
 browsers:
   chrome:
     desiredCapabilities:
       browserName: "chrome"
-      version: "66.0"
-      platform: "Windows 10"
-
-  firefox:
-    desiredCapabilities:
-      browserName: "firefox"
-      version: "47.0"
+      version: "69.0"
       platform: "Windows 10"

.gitignore

@@ -3,4 +3,22 @@ node_modules
 package-lock.json
 yarn.lock
 coverage
-analysis.json
+custom-elements.json
+vaadin-*.js
+vaadin-*.d.ts
+vaadin-*.d.ts.map
+vaadin-*.js.map
+/src/**/*.js
+/src/**/*.js.map
+/src/**/*.d.ts
+/src/**/*.d.ts.map
+/theme/**/*.js
+/theme/**/*.js.map
+/theme/**/*.d.ts
+/theme/**/*.d.ts.map
+/test/**/*.js
+/test/**/*.js.map
+/test/**/*.d.ts
+/test/**/*.d.ts.map
+/dist
+entrypoint.hashmanifest.json

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 120
+}

.travis.yml

@@ -1,69 +1,21 @@
 sudo: false
 dist: xenial
 language: node_js
-node_js: 8.11
-
-cache:
-  directories:
-    - node_modules
+node_js: lts/*
 
 addons:
-  firefox: "62.0.3"
+  firefox: latest
   chrome: stable
 
-jobs:
-  include:
-    - if: type = push
-      env: TEST_SUITE=unit_tests POLYMER=2
-    - if: type = push
-      env: TEST_SUITE=visual_tests POLYMER=2
-    - if: type = push
-      env: TEST_SUITE=unit_tests POLYMER=3
-    - if: type = pull_request
-      env: POLYMER=2
-      addons:
-        firefox: "62.0.3"
-        chrome: stable
-    - if: type = pull_request
-      env: POLYMER=3
-      addons:
-        firefox: "62.0.3"
-        chrome: stable
-    - if: type = cron
-      env: TEST_SUITE=unit_tests POLYMER=2
-
 script:
-  - if [[ "$POLYMER" = "2" ]]; then
-      npm -q i && npm i -q --no-save bower polymer-cli && bower -q i &&
-      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;
-        else
-          wct --env saucelabs;
-        fi;
-      else
-        npm run check &&
-        npm run lint &&
-        xvfb-run -s '-screen 0 1024x768x24' wct;
-      fi &&
-      if [[ "$TRAVIS_EVENT_TYPE" = "cron" && "$TEST_SUITE" = "unit_tests" ]]; then
-        wct --env saucelabs-cron;
-      fi;
-    fi
-  - if [[ "$POLYMER" = "3" ]]; then
-      npm --no-save -q install -g yarn bower magi-cli web-component-tester polymer-modulizer &&
-      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 --npm --env saucelabs;
-      else
-        xvfb-run -s '-screen 0 1024x768x24' wct --npm;
-      fi;
-    fi
+
+- if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" ]]; then
+    npm run test:sauce && npm run test:visual;
+  else
+    npm run check:version &&
+    npm run lint &&
+    npm test;
+  fi
 
 after_success:
-  - if [[ "$TRAVIS_EVENT_TYPE" != "pull_request" && "$TRAVIS_BRANCH" != quick/* ]]; then
-      cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | coveralls;
-    fi
+  - "cat ${TRAVIS_BUILD_DIR}/coverage/lcov.info | coveralls"

README.md

@@ -1,22 +1,24 @@
-[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-app-layout)](https://github.com/vaadin/vaadin-app-layout/releases)
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-app-layout)
-[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
-[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-app-layout/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-app-layout?branch=master)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-
- [![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
-[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-app-layout-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
-
-
 # <vaadin-app-layout>
 
+[<vaadin-app-layout>](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
+
 [Live Demo ↗](https://vaadin.com/components/vaadin-app-layout/html-examples)
 |
 [API documentation ↗](https://vaadin.com/components/vaadin-app-layout/html-api)
 
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-app-layout)](https://www.npmjs.com/package/@vaadin/vaadin-app-layout)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-app-layout)
+[![Build Status](https://travis-ci.org/vaadin/vaadin-app-layout.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-app-layout)
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
+[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/stars/vaadinvaadin-app-layout.svg)](https://vaadin.com/directory/component/vaadinvaadin-app-layout)
+
+> ⚠️ This is a pre-release version built with [`LitElement`](https://github.com/Polymer/lit-element), part of the [next generation of Vaadin web components](https://vaadin.com/blog/next-generation-vaadin-components).
+>
+> Looking for Vaadin 14 compatible version? Please see the following branches:
+> - [2.0 branch](https://github.com/vaadin/vaadin-app-layout/tree/2.0)
+> - [2.1 branch](https://github.com/vaadin/vaadin-app-layout/tree/2.1)
 
-[<vaadin-app-layout>](https://vaadin.com/components/vaadin-app-layout) is a Web Component providing a quick and easy way to get a common application layout structure done, part of the [Vaadin components](https://vaadin.com/components).
 
 ```html
 <vaadin-app-layout>
@@ -47,30 +49,6 @@
 
 ## 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-app-layout`:
-
-```sh
-bower i vaadin/vaadin-app-layout --save
-```
-
-Once installed, import it in your application:
-
-```html
-<link rel="import" href="bower_components/vaadin-app-layout/vaadin-app-layout.html">
-<link rel="import" href="bower_components/vaadin-app-layout/vaadin-drawer.toggle.html">
-```
-### Polymer 3 and ES Modules compatible version
-
-
 Install `vaadin-app-layout`:
 
 ```sh
@@ -94,54 +72,49 @@ To use the Material theme, import the correspondent file from the `theme/materia
 
 - The components with the Lumo theme:
 
-  `theme/lumo/vaadin-app-layout.html`
-  `theme/lumo/vaadin-drawer-toggle.html`
+  `theme/lumo/vaadin-app-layout.js`
+  `theme/lumo/vaadin-drawer-toggle.js`
 
 - The components with the Material theme:
 
-  `theme/material/vaadin-app-layout.html`
-  `theme/material/vaadin-drawer-toggle.html`
-
-- Aliases for `theme/lumo/vaadin-app-layout.html` `theme/lumo/vaadin-drawer-toggle.html`
+  `theme/material/vaadin-app-layout.js`
+  `theme/material/vaadin-drawer-toggle.js`
 
-  `vaadin-app-layout.html`
-  `vaadin-drawer-toggle.html`
+- Aliases for `theme/lumo/vaadin-app-layout.js` `theme/lumo/vaadin-drawer-toggle.js`
 
+  `vaadin-app-layout.js`
+  `vaadin-drawer-toggle.js`
 
-## Running demos and tests in browser
+## Running demos and API docs in a browser
 
 1. Fork the `vaadin-app-layout` repository and clone it locally.
 
 1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. When in the `vaadin-app-layout` directory, run `npm install` and then `bower install` to install dependencies.
+1. When in the `vaadin-app-layout` directory, run `npm install` to install dependencies.
 
-1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
+1. Run `npm start`, browser will automatically open the component API documentation.
 
-1. Run `polymer serve --open`, browser will automatically open the component API documentation.
+## Running tests from the command line
 
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
+- When in the `vaadin-app-layout` directory, run `npm test`
 
-  - http://127.0.0.1:8080/components/vaadin-app-layout/demo
-  - http://127.0.0.1:8080/components/vaadin-app-layout/test
+- To debug tests in the browser, run `npm run test:debug`
 
 
-## Running tests from the command line
+## Following the coding style
 
-1. When in the `vaadin-app-layout` directory, run `polymer test`
+We are using [ESLint](http://eslint.org/) for linting TypeScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.ts` files.
 
 
-## Following the coding style
+## Big Thanks
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
+Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
 
 
 ## Contributing
 
-  - Make sure your code is compliant with our code linters: `npm run lint`
-  - Check that tests are passing: `polymer test`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
+To contribute to the component, please read [the guideline](https://github.com/vaadin/vaadin-core/blob/master/CONTRIBUTING.md) first.
 
 
 ## License

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: ['@babel/preset-typescript'],
+  plugins: [
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        decoratorsBeforeExport: true
+      }
+    ],
+    '@babel/plugin-proposal-class-properties'
+  ],
+};