Merge pull request #6 from tjmonsi/develop

Develop

Author: tjmonsi

.travis.yml

@@ -1,5 +1,7 @@
 sudo: required
 addons:
+  sauce_connect: true
+  firefox: latest
   chrome: stable
 language: node_js
 node_js:
@@ -10,6 +12,10 @@ before_install:
 before_script:
 - cp -r node_modules/lit-html ../../lit-html
 script: npm test && npm run wct-sauce
+branches:
+  only:
+  - master
+  - develop
 env:
   global:
   - secure: IczLyQVw0rGAirfVHal4lcPNymjSQewhh2F8vu2rsp6ncNSAkSEVm9tXvSq47UkYzkLEUvi5l2rOIcmnfGsyjc8uCH3yFVpsMdoClP5W+2LO6XB7k6FyV3GXpfotEjKqIXqUWFosbFMdsV5X3zhuouckdvPcrY+QNltVl8P90JqGtVq5VqSIUZVhWsMxelrgY1p0iIx0YdftD0Hq8mip8ULztip+mbAAcLbUBOlOHHRdiG1cNp7GjpaBUPvtVY+/rDM8sgJ7SlK9F+BWsxj5If/Ky3n4HcyvvAAGeiqxJu0jxPQ37JwJKHligE5gK1O/piaAblSsy5kT4ElQXkxJLKLH8SQ7XViJ1NVGzh2AynDnx4J7PzWYfHKMYTbW2/6VaPOR/wr2xj1OdCRlNi8dK7y7Frhml9o58BakCDPx9zJgHd0s9lZQGdGA6O8DD6FpBwK9n8GqzEHI56phgtW8HH9T98r8ZSmm3iggwUesZo12kkkdc9/Eoe3X07G5cxq5r97E/rCnzhFz/uF786FX25H/pDIRUJ9K03VQuBMgG/vkFk1hzMEPjiFqFFXoa6odBR98OwbVFpR0JEpg4vcSRXDXfeNjxy1Pb2HXXSJAR9y2aCEW0U+IL4INPvK40igA/ijp16RP8TsLYszulzwxl8w8EvJTm0eJc1zlMc2QpZI=

.vscode/settings.json

@@ -22,7 +22,9 @@
         "__dirname",
         "URL",
         "describe",
-        "it"
+        "it",
+        "expect",
+        "assert"
       ],
       "ignore": [
         "node_modules",
@@ -48,7 +50,10 @@
       "plugins": [
         "html"
       ],
-      "parser": "babel-eslint"
+      "parser": "babel-eslint",
+      "env": [
+        "mocha"
+      ]
     },
     "standard.validate": [
       "javascript",

CHANGELOG.md

@@ -1,6 +1,8 @@
 # v0.1.3 (2018-18-03)
 - Added more tests and created bundled versions for distribution
 - Added CODE_OF_CONDUCT.md
+- updated to have Sauce labs tests
+- Updated README.md
 
 # v0.1.1 (2018-15-03)
 - Made a small fix on package.json on `main` to reflect main file

README.md

@@ -1,30 +1,33 @@
 # element-lite
-[![Build Status](https://travis-ci.org/tjmonsi/element-lite.svg?branch=master)](https://travis-ci.org/tjmonsi/element-lite)
+Master: [![Build Status](https://travis-ci.org/tjmonsi/element-lite.svg?branch=master)](https://travis-ci.org/tjmonsi/element-lite)
+Develop: [![Build Status](https://travis-ci.org/tjmonsi/element-lite.svg?branch=develop)](https://travis-ci.org/tjmonsi/element-lite)
 
 A take on using lit-html and using methods coming from Polymer.
 
 This is based on https://github.com/PolymerLabs/lit-element and added my own take on creating my own
-simple library.
+simple library. You can freely use it on your own projects.
 
-This is a work in progress but I will use it on my own projects. You can freely use it on your own projects.
+Most of the methods and its internals came from Polymer's properties-mixin, properties-changed, property-accessors mixin, and property-effects mixin (You can see each file on where parts are copied/modified from).
 
-Most of the methods and its internals came from Polymer's properties-mixin, properties-changed, property-accessors mixin, and property-effects mixin.
+The reason for copying rather than depending on files is the added overhead of extending classes and
+the number of method overrides, making some inherited methods not used in the final part of
+upgrading the element. This is to squeeze out unused parts from the mixins.
 
 
 ## How to install:
 
-### using npm
+### Using npm
 
 This is the recommended way. To install, just do this:
 ```
 npm i --save @littleq/element-lite
 ```
 
 
-
-
 ## Out of the box, what can I do?
 
+### On evergreen browsers that support ES6 and import (Latest Firefox and Chrome)
+
 You can add this to your JS
 
 ```js
@@ -43,21 +46,71 @@ customElement.define('web-component', Component);
 and add this to your HTML
 
 ```html
-<script src="main.js" type="module">
+<script src="main.js" type="module"></script>
 ```
 
-You can also add these additional scripts for polyfill
+### Usage on bundlers like Webpack
+
+Same as above.
+
+### For non-Chrome evergreen browsers (Latest Firefox, Safari, and Edge)
+
+You need to add this additional script for polyfill
 
 ```html
 <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
 ```
 
-And if you are using Webpack and you have bundled it in ES5 for older browsers, you also need:
+And then wrap around the files after the `WebComponentsReady` event has been fired
+
+```html
+<script>
+  window.addEventListener('WebComponentsReady', function() {
+    var component = document.createElement('script');
+    component.src = 'main.js';
+    component.type = 'module';
+    document.head.appendChild(component);
+  });
+</script>
+```
+
+### If you compiled and bundled the elements to ES5
+
+if you are using Webpack and you have bundled it in ES5 for older browsers, you also need:
 
 ```html
 <script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js">
 ```
 
+### If you don't need a bundler but is capable for use in older browsers
+
+```html
+<script src="/node_modules/@littleq/element-lite/dist/element-lite.umd.es5.min.js">
+<script>
+  window.addEventListener('WebComponentsReady', function() {
+    var component = document.createElement('script');
+    component.src = 'main.js';
+    document.head.appendChild(component);
+  });
+</script>
+```
+
+```js
+// main.js
+// wrap in anonymous function
+// Bundle this in ES5 either using Rollup or Webpack
+(function(){
+  // get ElementLite from window.ElementLite;
+  var ElementLite = window.ElementLite.ElementLite;
+  class Component extends ElementLite(HTMLElement) {
+    render () {
+      return html`Whatever you want to put in the ShadowDom`;
+    }
+  }
+})();
+```
+
+
 ## What else can it do?
 
 You can put a default value on a property.
@@ -206,6 +259,7 @@ el.splice('prop1', 1, 0, '1', '2') // el.prop1 = ['a', '1', '2', 'b', 'c']
 el.splice('prop1', 1, 1) // el.prop1 = ['a', '2', 'b', 'c']
 ```
 
+
 ## Example usage
 
 index.html
@@ -225,6 +279,7 @@ index.html
 
 test-element.js
 ```js
+// you can get lit-html's `html` from the bundle as well
 import { ElementLite, html } from './node_modules/@littleq/element-lite/element-lite.js';
 const { customElements } = window;
 
@@ -319,6 +374,127 @@ class Component extends ElementLiteStaticShadow(HTMLElement) {
 customElement.define('web-component-static', Component);
 ```
 
+## Element-lite-lit-only
+
+If you don't need the power of element-lite-base but need to the power of lit-html,
+use `element-lite-lit-only`
+
+```js
+// main-static.js
+import { ElementLiteLitOnly } from 'node_modules/@littleq/element-lite/element-lite-lit-only.js'
+
+class Component extends ElementLiteLitOnly(HTMLElement) {
+  render () {
+    return `Hello World!`
+  }
+}
+
+customElement.define('web-component-static', Component);
+```
+
+
+## What files to import and how?
+
+If you are going to use it on Evergreen Browsers that allows `<script type="module">`,
+then you can just do this on your `js` files
+
+```js
+import { ElementLite } from './node_modules/@littleq/element-lite/element-lite.js';
+```
+
+If you are going to use it on Webpack or Rollup, you can do any of these
+
+```js
+// provided that node_modules is resolved in your configurations
+import { ElementLite } from 'element-lite/@littleq/element-lite.js';
+```
+
+or
+
+```js
+import { ElementLite } from './node_modules/@littleq/element-lite';
+```
+
+or
+
+```js
+import { ElementLite } from './node_modules/@littleq/element-lite/dist/element-lite.esm.js';
+```
+
+If you are going to use `require` and not `import` you can do any of these
+
+```js
+// provided that node_modules is resolved in your configurations
+var ElementLite = require('@littleq/element-lite').ElementLite;
+```
+
+or
+
+```js
+// provided that node_modules is resolved in your configurations
+var ElementLite = require('@littleq/element-lite/dist/element-lite.cjs.js').ElementLite;
+```
+
+If you are going to load it via the `<script>` tag, you need to do these
+
+For ES6
+
+```html
+<script src="/node_modules/@littleq/element-lite/dist/element-lite.umd.es6.js">
+<!-- <script src="/node_modules/@littleq/element-lite/dist/element-lite.umd.es6.min.js">
+if you need the minified file -->
+```
+
+For ES5
+
+```html
+<script src="/node_modules/@littleq/element-lite/dist/element-lite.umd.es5.js">
+<!-- <script src="/node_modules/@littleq/element-lite/dist/element-lite.umd.es5.min.js">
+if you need the minified file -->
+```
+
+and then can access it here
+
+```js
+var ElementLite = window.ElementLite.ElementLite
+```
+
+You can also load ElementLiteBase, ElementLiteStaticShadow and ElementLiteLitOnly from ElementLite as well
+
+```js
+// right from the box
+import { ElementLiteBase, ElementLiteStaticShadow, ElementLiteLitOnly } from './node_modules/element-lite/element-lite.js';
+```
+
+using `require`
+
+```js
+// provided that node_modules is resolved in your configurations
+var ElementLiteBase = require('@littleq/element-lite/dist/element-lite.cjs.js').ElementLiteBase;
+var ElementLiteStaticShadow = require('@littleq/element-lite/dist/element-lite.cjs.js').ElementLiteStaticShadow;
+var ElementLiteLitOnly = require('@littleq/element-lite/dist/element-lite.cjs.js').ElementLiteLitOnly;
+```
+
+using `<script>`
+
+```js
+var ElementLiteBase = window.ElementLite.ElementLiteBase
+var ElementLiteStaticShadow = window.ElementLite.ElementLiteStaticShadow
+var ElementLiteLitOnly = window.ElementLite.ElementLiteLitOnly
+```
+
+
+## And does it work on?
+
+It works on all major evergreen Browsers (Edge, Safari, Chrome, Firefox) as long as you have the Polyfills
+set (make sure to add `webcomponents-lite` or `webcomponents-loader` and create the components after the
+`WebComponentsReady` event has been fired)
+
+It also works on IE 11, Safari 11, Safari 10.1, Safari 9, and Safari 8.
+
+Still checking on IE 10, 9, 8 and Safari 7, 6. (Need polyfills for `Map` and `WeakMap`).
+
+
 ## Size
 
 Based on size-limit
@@ -342,7 +518,7 @@ npm run size
   Size limit:   3 KB
 
   element-lite.js
-  Package size: 5.23 KB
+  Package size: 5.33 KB
   Size limit:   5.5 KB
 
   With all dependencies, minified and gzipped
@@ -352,4 +528,4 @@ npm run size
 
 1. Not yet tested for Production #2
 2. Not yet tested using Webpack on older browsers #2
-4. Haven't tested a proper loop and if-then-else in #2
+3. Haven't tested a proper loop and if-then-else in #2

element-lite-base.js

@@ -1,5 +1,10 @@
 /// <reference path="typings-project/global.d.ts"/>
 
+import { dedupingMixin } from './lib/deduping-mixin.js';
+import { root, getProp, setProp, isPath } from './lib/path.js';
+import { saveAccessorValue } from './lib/save-accessor-value.js';
+import { camelToDashCase } from './lib/case-map.js';
+
 /**
  * Parts are copied from different mixin parts of https://github.com/Polymer/polymer/tree/__auto_generated_3.0_preview
  *
@@ -35,6 +40,10 @@
  *     - HTMLElement Methods
  *       - attributeChangedCallback - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-changed.js#L379
  *       - observedAttributes - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-mixin.js#L85
+ *     - Public methods
+ *       - ready - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-changed.js#L149
+ *       - set - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1805
+ *
  *
  *
  * - Modified
@@ -48,6 +57,13 @@
  *         - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-mixin.js#L160
  *         - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-accessors.js#L112
  *       - _invalidateProperties - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-changed.js#L257
+ *     - Public Methods
+ *       - push - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1831
+ *       - pop - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1855
+ *       - splice - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1883
+ *       - shift - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1935
+ *       - unshift - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1960
+ *       - get - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/property-effects.js#L1780
  *   - Class Constructor - https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/mixins/properties-changed.js#L122
  *
  * - Created
@@ -58,11 +74,6 @@
  *
  */
 
-import { dedupingMixin } from './lib/deduping-mixin.js';
-import { root, getProp, setProp, isPath } from './lib/path.js';
-import { saveAccessorValue } from './lib/save-accessor-value.js';
-import { camelToDashCase } from './lib/case-map.js';
-
 export const ElementLiteBase = dedupingMixin(base => {
   /**
    * Creates a copy of `props` with each property normalized such that

lib/case-map.js

@@ -1,3 +1,5 @@
+// Copied from https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/utils/case-map.js
+
 const caseMap = {};
 // const DASH_TO_CAMEL = /-[a-z]/g;
 const CAMEL_TO_DASH = /([A-Z])/g;

lib/deduping-mixin.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+// Copied from https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/utils/mixin.js
+
 // unique global id for deduping mixins.
 /** @type {number} */
 let dedupeId = 0;

lib/path.js

@@ -1,5 +1,7 @@
 // @ts-check
 
+// Copied from https://github.com/Polymer/polymer/blob/__auto_generated_3.0_preview/lib/utils/path.js
+
 /**
  * @param {string[]} path
  * @return {string} normalized path