Remove bower (#42)

* remove bower from setting files

* updated code to do dynamic importing

* running tests as modules

* clean up and reduce testing setup

* bring support for lazy form fields and tweak docs

* md fix for broken blocks

* bring back wct runner npm

* run browserstack tunnel on travis

* disable sauce

* made tests and storybook their own workspaces

* add missing inmports

* migrate all other tests

* set up browserstack

* missing eslint parser

* tweak bs config

* tweak bs config

* added local es5 test config

* codecov on CI

* don't fail build on coverage

* fix install scrips

* also for bs script

* BS timeout

* correct istanbul base path

* Update README.md

* correct istanbul base path

* revert async code in templates

* make test use only dev deps

.eslintrc.json

@@ -7,6 +7,11 @@
         "no-underscore-dangle": "off",
         "no-trailing-spaces":"error"
     },
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "sourceType": "module",
+        "allowImportExportEverywhere": true
+    },
     "plugins": [
         "jasmine",
         "sinon",

.gitignore

@@ -87,4 +87,5 @@ crashlytics.properties
 crashlytics-build.properties
 fabric.properties
 
-test/transpiled/
+*.es5.js
+/browserstack.err

.travis.yml

@@ -2,6 +2,9 @@ sudo: false
 language: node_js
 node_js:
   - 8
-before_script:
-  - yarn bower i
-  - yarn lint
+before_install:
+  - npm install -g codecov
+after_success:
+  - codecov
+after_failure:
+  - codecov

README.md

@@ -1,4 +1,4 @@
-# lit-any
+# lit-any ![](https://img.shields.io/codecov/c/github/wikibus/lit-any.svg)
 
 Building late-bound User Interface with `lit-html` without actually creating (too many) custom elements
 

components/paper-elements/index.js

@@ -7,6 +7,7 @@ export function textbox({
 } = { }) {
     return (f, id, v, set) => {
         if (type === 'multi line') {
+            import('@polymer/paper-input/paper-textarea');
             return html`<paper-textarea 
                             label="${f.title}"
                             .value="${v}"
@@ -15,6 +16,7 @@ export function textbox({
                             @value-changed="${e => set(e.target.value)}" ></paper-textarea>`;
         }
 
+        import('@polymer/paper-input/paper-input');
         return html`<paper-input 
                         label="${f.title}"
                         type="text"
@@ -29,6 +31,10 @@ export function dropdown({
     items = [],
 } = {}) {
     return (f, id, v, set) => {
+        import('@polymer/paper-listbox/paper-listbox');
+        import('@polymer/paper-dropdown-menu/paper-dropdown-menu');
+        import('@polymer/paper-item/paper-item');
+
         function setValue(e) {
             e.target.validate();
             return set(e.target.querySelector('paper-listbox').selected);
@@ -63,5 +69,8 @@ export function dropdown({
 export function button({
     label, onClick,
 }) {
-    return html`<paper-button @tap="${onClick}">${label}</paper-button>`;
+    const buttonImport = import('@polymer/paper-button/paper-button')
+        .then(() => html`<paper-button @tap="${onClick}">${label}</paper-button>`);
+
+    return html`${until(buttonImport, '')}`;
 }

components/paper-elements/package.json

@@ -6,5 +6,12 @@
   "peerDependencies": {
     "lit-any": ">= 0.7.0",
     "lit-html": ">= 1"
+  },
+  "dependencies": {
+    "@polymer/paper-button": "^3.0.1",
+    "@polymer/paper-dropdown-menu": "^3.0.1",
+    "@polymer/paper-input": "^3.0.1",
+    "@polymer/paper-item": "^3.0.1",
+    "@polymer/paper-listbox": "^3.0.1"
   }
 }

components/vaadin/index.js

@@ -1,12 +1,12 @@
 import { html } from 'lit-html';
-import { repeat } from 'lit-html/lib/repeat';
-import { until } from 'lit-html/lib/until';
+import { repeat } from 'lit-html/directives/repeat';
 
 export function textbox({
     type = 'single line',
 } = { }) {
     return (f, id, v, set) => {
         if (type === 'multi line') {
+            import('@vaadin/vaadin-text-field/vaadin-text-area');
             return html`<vaadin-text-area 
                             label="${f.title}"
                             type="${type}"
@@ -16,6 +16,7 @@ export function textbox({
                             @value-changed="${e => set(e.target.value)}" ></vaadin-text-area>`;
         }
 
+        import('@vaadin/vaadin-text-field/vaadin-text-field');
         return html`<vaadin-text-field 
                         label="${f.title}"
                         type="${type}"
@@ -30,30 +31,37 @@ export function dropdown({
     items = [],
 } = {}) {
     return (f, id, v, set) => {
+        import('@vaadin/vaadin-dropdown-menu/vaadin-dropdown-menu');
+        import('@vaadin/vaadin-list-box/vaadin-list-box');
+        import('@vaadin/vaadin-item/vaadin-item');
+
         let options = items;
         if (typeof items === 'function') {
             options = items(f);
         }
 
-        if (!options.then) {
-            options = Promise.resolve(options);
+        if (options.then) {
+            throw new Error('Promise is not supported with vaadin-dropdown-menu');
+        }
+
+        function renderItem(option) {
+            return html`<vaadin-item value="${option.value}">${option.label}</vaadin-item>`;
         }
 
         return html`<vaadin-dropdown-menu label="${f.title}" 
                                          @value-changed="${e => set(e.target.value)}"
                                          ?required="${f.required}"
                                          value="${v}">
-  <template>
-    <vaadin-list-box>
-      ${until(options.then(resolved => html`${repeat(resolved, option => html`<vaadin-item value="${option.value}" label="${option.label}"></vaadin-item>`)}`), '')}
-    </vaadin-list-box>
-  </template>
+    <template>
+        <vaadin-list-box>${repeat(options, renderItem)}</vaadin-list-box>
+    </template>
 </vaadin-dropdown-menu>`;
     };
 }
 
 export function button({
     label, onClick,
 }) {
-    return html`<vaadin-button on-click="${onClick}">${label}</vaadin-button>`;
+    import('@vaadin/vaadin-button/vaadin-button');
+    return html`<vaadin-button @click="${onClick}">${label}</vaadin-button>`;
 }

components/vaadin/package.json

@@ -6,5 +6,11 @@
   "peerDependencies": {
     "lit-any": ">= 0.7.0",
     "lit-html": ">= 1"
+  },
+  "dependencies": {
+    "@vaadin/vaadin-button": "^2.1.1",
+    "@vaadin/vaadin-dropdown-menu": "^1.2.0",
+    "@vaadin/vaadin-list-box": "^1.1.0",
+    "@vaadin/vaadin-text-field": "^2.1.5"
   }
 }

lit-any/lit-form.js

@@ -151,7 +151,7 @@ export default class LitForm extends LitElement {
             return renderFunc(field, fieldId, fieldValue, setter);
         }
 
-        return fieldTemplate.render(field, fieldId, fieldValue, setter);
+        return html`${fieldTemplate.render(field, fieldId, fieldValue, setter)}`;
     }
 
     __createModelValueSetter(field) {

lit-any/render/index.js

@@ -11,7 +11,8 @@ function recurseTemplates(registry, ignoreMissing, inheritedScope) {
 
         if (template) {
             const nextLevel = recurseTemplates(registry, ignoreMissing, scope);
-            templateResult = template.render(nextLevel, value, scope);
+
+            templateResult = html`${template.render(nextLevel, value, scope)}`;
         } else if (ignoreMissing) {
             templateResult = '';
         } else {

lit-any/template-registry/index.js

@@ -1,5 +1,3 @@
-import 'core-js/modules/es6.array.find';
-
 export default class TemplateRegistry {
     constructor(Builder, name) {
         this._templates = [];

package.json

@@ -1,57 +1,31 @@
 {
   "private": true,
+  "name": "lit-any",
   "workspaces": [
     "lit-any",
-    "components/*"
+    "components/*",
+    "test",
+    "storybook"
   ],
   "directories": {
     "test": "tests"
   },
   "scripts": {
-    "test": "webpack && wct --plugin browserstack",
-    "build-tests": "webpack",
+    "test": "yarn lint && lerna run --scope tests test:es5:bs",
+    "test:local": "yarn lint && lerna run --scope tests test:local",
     "lint": "eslint components/** lit-any/**/*.js storybook/**/*.js test/**/*.js",
-    "wct": "webpack -w & wct -l chrome -p",
-    "storybook": "bower i; start-storybook -p 9001 -c .storybook",
-    "build-storybook": "bower i; build-storybook -c .storybook -o docs"
+    "storybook": "lerna run --scope storybook storybook",
+    "build-storybook": "lerna run --scope storybook build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^3.4.8",
-    "@storybook/addon-console": "^1.0.4",
-    "@storybook/addon-knobs": "^4.0.0-alpha.9",
-    "@storybook/addon-links": "^4.0.0-alpha.9",
-    "@storybook/addon-options": "^4.0.0-alpha.9",
-    "@storybook/addon-storysource": "^4.0.0-alpha.9",
-    "@storybook/polymer": "^4.0.0-alpha.9",
-    "@webcomponents/shadycss": "1.3.1",
-    "@webcomponents/webcomponentsjs": "2.0.2",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "bower": "^1.8.4",
+    "babel-eslint": "^10.0.1",
     "eslint": "^4.6.1",
     "eslint-config-airbnb-base": "^12.0.0",
     "eslint-plugin-chai": "0.0.1",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jasmine": "^2.8.4",
     "eslint-plugin-mocha": "^5.1.0",
     "eslint-plugin-sinon": "^0.2.0",
-    "iso-639-1": "^2.0.3",
-    "lerna": "^2.11.0",
-    "moment": "^2.22.2",
-    "p-event": "^1.3.0",
-    "polymer-webpack-loader": "^2.0.2",
-    "raw-loader": "^0.5.1",
-    "stringify-object": "^3.2.2",
-    "wct-browserstack": "^0.3.0",
-    "web-component-tester": "^6.9.0",
-    "web-component-tester-custom-runner": "^6.5.0",
-    "webpack": "^3.5.6",
-    "webpack-glob-entries": "^1.0.1"
+    "lerna": "^2.11.0"
   }
 }

.storybook/config.js → storybook/.storybook/config.js

@@ -2,12 +2,12 @@ import { configure, addDecorator } from '@storybook/polymer';
 import { setOptions } from '@storybook/addon-options';
 import { withKnobs } from '@storybook/addon-knobs';
 import '@storybook/addon-console';
-import litAny from '../lit-any/package';
+import litAny from '../../lit-any/package';
 
 addDecorator(withKnobs);
 
 function loadStories() {
-    const req = require.context('../storybook', true, /\.stories\.js$/);
+    const req = require.context('..', true, /\.stories\.js$/);
     req.keys().forEach(filename => req(filename));
 }
 

.storybook/webpack.config.js → storybook/.storybook/webpack.config.js

@@ -3,7 +3,13 @@ module.exports = {
         rules: [
             {
                 test: /\.js$/,
-                use: 'babel-loader',
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ["@babel/preset-react", "@babel/preset-env"],
+                        plugins: ['@babel/plugin-syntax-dynamic-import']
+                    }
+                },
                 exclude: [
                     /@webcomponents/,
                     /react-split-pane/

storybook/components/components.stories.js

@@ -7,18 +7,6 @@ import * as components from 'lit-any/components';
 import { html } from 'lit-html';
 import { select, boolean } from '@storybook/addon-knobs';
 
-import '../../bower_components/vaadin-lumo-styles/style.html';
-import '../../bower_components/vaadin-dropdown-menu/vaadin-dropdown-menu.html';
-import '../../bower_components/paper-input/paper-input.html';
-import '../../bower_components/paper-input/paper-textarea.html';
-import '../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html';
-import '../../bower_components/paper-listbox/paper-listbox.html';
-import '../../bower_components/paper-item/paper-item.html';
-import '../../bower_components/paper-button/paper-button.html';
-import '../../bower_components/vaadin-text-field/vaadin-text-field.html';
-import '../../bower_components/vaadin-text-field/vaadin-text-area.html';
-import '../../bower_components/vaadin-button/vaadin-button.html';
-
 import onSubmit from '../helpers/submit-handler';
 import notes from '../notes/components/getting-started';
 

storybook/components/paper/dropdown.stories.js

@@ -1,8 +1,5 @@
 import iso from 'iso-639-1';
 import { storiesOf } from '@storybook/polymer/dist/client/index';
-import '../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html';
-import '../../../bower_components/paper-listbox/paper-listbox.html';
-import '../../../bower_components/paper-item/paper-item.html';
 import { boolean, select } from '@storybook/addon-knobs';
 
 import { dropdown } from '@lit-any/components-paper-elements';

storybook/components/paper/textbox.stories.js

@@ -1,7 +1,5 @@
 import { storiesOf } from '@storybook/polymer/dist/client/index';
 import { boolean, select } from '@storybook/addon-knobs';
-import '../../../bower_components/paper-input/paper-input.html';
-import '../../../bower_components/paper-input/paper-textarea.html';
 
 import { textbox } from '@lit-any/components-paper-elements';
 import docs from '../../notes/components/polymer-elements/textbox';

storybook/components/vaadin/dropdown.stories.js

@@ -3,8 +3,6 @@ import { storiesOf } from '@storybook/polymer/dist/client/index';
 import { boolean, select } from '@storybook/addon-knobs';
 
 import { dropdown } from '@lit-any/components-vaadin';
-import '../../../bower_components/vaadin-lumo-styles/style.html';
-import '../../../bower_components/vaadin-dropdown-menu/vaadin-dropdown-menu.html';
 import docs from '../../notes/components/vaadin/dropdown';
 import set from '../set-logger';
 

storybook/components/vaadin/textbox.stories.js

@@ -1,8 +1,5 @@
 import { storiesOf } from '@storybook/polymer/dist/client/index';
 import { boolean, select } from '@storybook/addon-knobs';
-import '../../../bower_components/vaadin-text-field/vaadin-text-field.html';
-import '../../../bower_components/vaadin-text-field/vaadin-text-area.html';
-import '../../../bower_components/vaadin-lumo-styles/style.html';
 
 import { textbox } from '@lit-any/components-vaadin';
 import docs from '../../notes/components/vaadin/textbox';

storybook/lit-form.stories.js

@@ -10,7 +10,7 @@ import fallbackNotes from './notes/lit-form/fallback-input';
 import templatesNotes from './notes/lit-form/custom-elements';
 import fieldValueDecoratorNotes from './notes/lit-form/field-value-decorator';
 
-import '../bower_components/paper-input/paper-input.html';
+import '@polymer/paper-input/paper-input';
 
 FieldTemplates.default
     .when

storybook/notes/components/getting-started.js

@@ -1,4 +1,4 @@
-import md from '../markdown';
+import { md, sample } from '../markdown';
 
 export default function notes(exampleForm) {
     return md`# Component sets
@@ -18,7 +18,7 @@ Registry.default.useComponents(paperElements);
 Switching the **component set** knob let's you quickly change the appearance of the entire form below. Individual fields
 do not "know" if the will be with a paper element of with a vaadin component.
 
-${exampleForm}
+${sample(exampleForm)}
 
 ## Individual fields